mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
657a5bd561
* Move One-Time Pad encryption to the browser; delete backend OTP module OTP encryption/decryption is now performed entirely in the browser so messages, keys, and generated pads never leave the originating device. - Add app/src/components/otp.js: a JS port of the former modules/otp/lib.py (encrypt/decrypt, message formatting, validation, and secure pad generation via crypto.getRandomValues with rejection sampling). - Encrypt/Decrypt now run live as the user types or pastes, with inline error messages instead of submit buttons. - Generate New Pad builds the printable HTML locally (blob URL) instead of hitting /api/otp/html. - Migrate all backend OTP tests to app/src/components/otp.test.js with identical data. - Delete the modules/otp backend module and its blueprint registration. * Revoke the One-Time Pad blob URL after the new tab loads Addresses a minor blob-handle leak: handleGenerateNewPad created an object URL on every click but never released it. * Let users choose the One-Time Pad character set Add an "Advanced" accordion under the buttons with three options: A-Z, A-Z/0-9 (default, unchanged), and a custom character set. The chosen set is shared by encrypt, decrypt, and pad generation. - otp.js: parameterize encrypt/decrypt/generate on the alphabet (default OTP_CHARS for back-compat); add OTP_CHARS_ALPHA and validateCharset; input is auto-uppercased only when the set is all-uppercase, so custom sets with lowercase are case-sensitive; the printable pad is labeled with its set. - Apps.js: lift charset state into OTP(); gate encrypt/decrypt/generate on a valid set with inline validation errors. - otp.test.js: add A-Z, custom round-trip, auto-uppercase, validateCharset, and pad-label tests. * Scope inverted-accordion dark background to direct children The rule forcing #171616 on .ui.inverted.accordion .title/.content used a descendant selector, so it leaked onto any nested element using the `content` class — e.g. an ErrorMessage's Message.Content rendered inside SimpleAccordion got a dark band behind its text. Scope to direct children so the accordion still styles its own title/content but not nested components. * Add optional error-detection checksum to the One-Time Pad Adapts the position-weighted checksum from otp-checksum.md to the frontend-only OTP. checksum = sum(position * value) mod N, parameterized on the selected character set (N = chars.length), so it follows whichever pad alphabet is chosen. Position weighting catches transposition errors. - otp.js: add calculateChecksum/appendChecksum/verifyChecksum. - Apps.js: opt-in "Append error-detection checksum" toggle in Advanced (default off). When on, encrypt appends a checksum char; decrypt verifies it, warns on mismatch, and still shows the decrypted text. - otp.test.js: checksum unit tests, charset-variation, and end-to-end vectors. * Show compact checksum status instead of a large warning box Replace the bulky semantic-ui WarningMessage on decrypt with a small inline status line: a green check + "Checksum is valid" or a red x + "Checksum is invalid", shown whenever the checksum option is on and a message is being decrypted. * Fix checksum-mode decrypt truncating messages without a checksum When the "Append error-detection checksum" option was on, Decrypt always stripped the last ciphertext character before decrypting, so a message that carried no trailing checksum (wrong sender setting, body pasted alone, etc.) lost its final character and decrypted to garbage. Add stripChecksum(received, chars), which removes the trailing character only when it actually verifies as the checksum of the preceding characters; a message without a valid checksum is returned intact and flagged invalid. The decrypt UI now uses it. Also broaden test coverage: - stripChecksum tests, including a regression for the truncation bug. - validation error classes (InvalidOTP/Plaintext/Ciphertext) and the longer-than-OTP length guards. - deterministic encrypt/decrypt roundtrip fuzz across several character sets. - generateMessage character-count and charset-membership checks. - end-to-end checksummed encrypt -> format -> strip -> decrypt flow. Use a dedicated InvalidMessage error for the checksum helpers instead of the misleading InvalidPlaintext. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
481 lines
9.8 KiB
CSS
481 lines
9.8 KiB
CSS
.channel-edit {
|
|
border-radius: 3px;
|
|
padding: 0.75em;
|
|
}
|
|
|
|
.channel-edit:hover {
|
|
background-color: #7abaff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
.form-control-clear {
|
|
z-index: 10;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
pre.wrap-text {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
|
|
.duration-overlay {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
color: black;
|
|
background: #ffffff;
|
|
padding: 0px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.no-link-underscore {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.card-link {
|
|
color: black;
|
|
}
|
|
|
|
.center-me {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
div.inverted {
|
|
background-color: #1B1C1D;
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 49px;
|
|
height: 23px;
|
|
}
|
|
|
|
.toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgb(166, 166, 166);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 22px;
|
|
width: 22px;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.slider.disabled:before {
|
|
background-color: #CCCCCC;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #6435C9FF;
|
|
}
|
|
|
|
input.inverted:checked + .slider.inverted {
|
|
background-color: #6435C9AA;
|
|
}
|
|
|
|
input.disabled + .slider {
|
|
background-color: rgb(147, 147, 147);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.inverted-progress-text.ui.indicating.progress .bar > .progress,
|
|
.inverted-progress-text.ui.progress > .label {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Light bar colors (yellow, olive) need dark text on the bar — must override inverted-progress-text. */
|
|
.light-bar-progress-text.ui.indicating.progress .bar > .progress,
|
|
.light-bar-progress-text.ui.progress .bar > .progress {
|
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
}
|
|
|
|
/* File preview Modal.Actions toolbar.
|
|
Single layout that works at every viewport — buttons keep their order at any width.
|
|
On narrow screens, the tags selector wraps to its own line while the button groups stay together. */
|
|
.preview-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.preview-toolbar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.preview-toolbar-tags {
|
|
flex: 1 1 200px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Caps preview content to fit inside the file-preview Modal.
|
|
300px reserves room for pathContent <pre>, Modal.Header, Modal.Actions row,
|
|
inner content (e.g. STL dimensions banner), and modal padding.
|
|
Use 100dvh so mobile browser chrome (URL bar) is accounted for. */
|
|
.preview-fit {
|
|
width: 100%;
|
|
height: calc(100dvh - 300px);
|
|
max-height: calc(100dvh - 300px);
|
|
min-height: 240px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Fresnel (Media) wraps iframes in a div which would otherwise shrink to the
|
|
default iframe size; make it fill the preview so the iframe's 100% works. */
|
|
.preview-fit .fresnel-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
td.file-path {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Necessary until react-semantic-toasts is upgraded to Node 18 */
|
|
.ui-alerts {
|
|
position: fixed;
|
|
z-index: 2060;
|
|
padding: 24px;
|
|
}
|
|
|
|
.ui-alerts.top-right {
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
|
|
textarea.otp {
|
|
width: 100%;
|
|
color: #333;
|
|
}
|
|
|
|
.inline-header h1 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-header h2 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-header h3 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-header h4 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-header h5 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-header span {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.card-icon {
|
|
min-height: 163px;
|
|
text-align: center;
|
|
padding-top: 53px;
|
|
}
|
|
|
|
.card-icon.inverted {
|
|
background-color: #222222;
|
|
}
|
|
|
|
.modal .inverted {
|
|
border-color: #888888;
|
|
}
|
|
|
|
.modal .header.inverted {
|
|
color: #DDDDDD !important;
|
|
background-color: #171616 !important;
|
|
}
|
|
|
|
.modal .content.inverted {
|
|
color: #DDDDDD !important;
|
|
border-color: #888888 !important;
|
|
background-color: #171616 !important;
|
|
}
|
|
|
|
.modal .actions.inverted {
|
|
color: #DDDDDD !important;
|
|
border-color: #888888 !important;
|
|
background-color: #171616 !important;
|
|
}
|
|
|
|
.modal.inverted i.close {
|
|
color: #DDDDDD !important;
|
|
}
|
|
|
|
/* Direct children only, so nested components that use the `content`/`title` class names (e.g. a Message's
|
|
Message.Content) are not given the accordion's dark background. */
|
|
.ui.inverted.accordion > .title,
|
|
.ui.inverted.accordion > .content {
|
|
background-color: #171616 !important;
|
|
}
|
|
|
|
/* Mobile-responsive Confirm modal */
|
|
.ui.modal.themed-confirm {
|
|
max-width: 95vw;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.segment.inverted {
|
|
border: 1px solid #ffffff22 !important;
|
|
}
|
|
|
|
.inverted label {
|
|
color: #DDDDDD !important;
|
|
}
|
|
|
|
.table-ellipsis td.column-ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 0; /* Ensures the content doesn't exceed the cell's width */
|
|
min-width: 25em; /* About iPhone SE width */
|
|
}
|
|
|
|
.card-title-ellipsis {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.search-container {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.search-input {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.search-clear {
|
|
margin: 10px;
|
|
}
|
|
|
|
.icon.divider {
|
|
color: rgb(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.divider.inverted {
|
|
color: rgb(255, 255, 255, 0.6) !important;
|
|
}
|
|
|
|
.video-player {
|
|
display: block;
|
|
margin: 0 auto; /* Center the video horizontally */
|
|
}
|
|
|
|
.audio-poster-container {
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.audio-poster-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
|
|
pointer-events: none;
|
|
}
|
|
|
|
table.ratio-table td.equal-width {
|
|
width: 48%;
|
|
}
|
|
|
|
table.ratio-table td.min-width {
|
|
width: auto;
|
|
}
|
|
|
|
/* CollectionEditForm styles */
|
|
.required-indicator {
|
|
color: red;
|
|
}
|
|
|
|
.action-button-spacing {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
/* Form loading skeleton */
|
|
.form-skeleton-field {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.form-skeleton-label {
|
|
height: 14px;
|
|
width: 80px;
|
|
margin-bottom: 8px;
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-skeleton-input {
|
|
height: 38px;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-skeleton-textarea {
|
|
height: 80px;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-skeleton-button {
|
|
height: 42px;
|
|
width: 100px;
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Dark mode skeleton */
|
|
.inverted .form-skeleton-label,
|
|
.inverted .form-skeleton-input,
|
|
.inverted .form-skeleton-textarea,
|
|
.inverted .form-skeleton-button {
|
|
background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* Sticky footer for file browser */
|
|
.sticky-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.5em 1em;
|
|
background-color: #f9fafb;
|
|
border-top: 1px solid rgba(34, 36, 38, 0.15);
|
|
z-index: 100;
|
|
}
|
|
|
|
.sticky-footer.inverted {
|
|
background-color: #1b1c1d;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Drag selection visual feedback for FileBrowser */
|
|
tr.drag-selecting td {
|
|
background-color: rgba(33, 133, 208, 0.15) !important;
|
|
}
|
|
|
|
.inverted tr.drag-selecting td {
|
|
background-color: rgba(33, 133, 208, 0.25) !important;
|
|
}
|
|
|
|
/* Drag deselection visual feedback (red tint) */
|
|
tr.drag-deselecting td {
|
|
background-color: rgba(219, 40, 40, 0.15) !important;
|
|
}
|
|
|
|
.inverted tr.drag-deselecting td {
|
|
background-color: rgba(219, 40, 40, 0.25) !important;
|
|
}
|
|
|
|
/* Prevent text selection during drag */
|
|
.file-browser-dragging {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.hide-on-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure step icons are always visible, even when disabled */
|
|
.ui.steps .step.disabled > .icon,
|
|
.ui.steps .step.disabled > i.icon,
|
|
.ui.steps .disabled.step > .icon,
|
|
.ui.steps .disabled.step > i.icon {
|
|
opacity: 0.45 !important;
|
|
display: inline-block !important;
|
|
visibility: visible !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
}
|
|
|
|
/* Ensure the icon glyph (::before) is visible for disabled steps */
|
|
.ui.steps .step.disabled > .icon:before,
|
|
.ui.steps .step.disabled > i.icon:before,
|
|
.ui.steps .disabled.step > .icon:before,
|
|
.ui.steps .disabled.step > i.icon:before {
|
|
opacity: 0.45 !important;
|
|
visibility: visible !important;
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
}
|
|
|