393 lines
30 KiB
CSS
393 lines
30 KiB
CSS
:root {
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
--canvas: #ffffff;
|
|
--sidebar: #f5f6f7;
|
|
--panel: #f8f9fa;
|
|
--surface: #ffffff;
|
|
--text: #15191c;
|
|
--muted: #68727a;
|
|
--faint: #929ba1;
|
|
--border: #e1e5e8;
|
|
--border-strong: #cbd2d7;
|
|
--primary: #1d2428;
|
|
--primary-hover: #30383d;
|
|
--primary-text: #ffffff;
|
|
--accent: #0f766e;
|
|
--accent-hover: #0b5f59;
|
|
--accent-soft: #e7f3f1;
|
|
--success: #2f7d57;
|
|
--success-soft: #edf7f1;
|
|
--warning: #a75e14;
|
|
--warning-soft: #fff7e8;
|
|
--danger: #bd3d38;
|
|
--danger-soft: #fff0ef;
|
|
--info-soft: #eef4f7;
|
|
--syntax-key: #0969da;
|
|
--syntax-string: #087a32;
|
|
--syntax-number: #a04400;
|
|
--syntax-literal: #8250df;
|
|
--syntax-tag: #0550ae;
|
|
--syntax-attribute: #9a4b00;
|
|
--syntax-value: #087a32;
|
|
--syntax-comment: #768078;
|
|
--syntax-meta: #8250df;
|
|
color: var(--text);
|
|
background: var(--canvas);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--canvas: #111315;
|
|
--sidebar: #171a1d;
|
|
--panel: #1b1f23;
|
|
--surface: #202429;
|
|
--text: #edf0f2;
|
|
--muted: #9da7ad;
|
|
--faint: #707a80;
|
|
--border: #30363b;
|
|
--border-strong: #424a50;
|
|
--primary: #e9edef;
|
|
--primary-hover: #ffffff;
|
|
--primary-text: #141719;
|
|
--accent: #4db6aa;
|
|
--accent-hover: #70c6bd;
|
|
--accent-soft: #173c38;
|
|
--success: #64bc88;
|
|
--success-soft: #173326;
|
|
--warning: #e0a15d;
|
|
--warning-soft: #382918;
|
|
--danger: #ed7770;
|
|
--danger-soft: #3b201f;
|
|
--info-soft: #18272e;
|
|
--syntax-key: #79c0ff;
|
|
--syntax-string: #7ee787;
|
|
--syntax-number: #ffa657;
|
|
--syntax-literal: #d2a8ff;
|
|
--syntax-tag: #7ee787;
|
|
--syntax-attribute: #79c0ff;
|
|
--syntax-value: #ffa657;
|
|
--syntax-comment: #8b949e;
|
|
--syntax-meta: #d2a8ff;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body, #app { min-width: 320px; min-height: 100%; margin: 0; }
|
|
body { background: var(--canvas); color: var(--text); }
|
|
button, input, select, textarea { font: inherit; letter-spacing: 0; }
|
|
button, a, input, select, textarea { outline-color: var(--accent); }
|
|
button { color: inherit; }
|
|
|
|
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button:disabled, input:disabled, select:disabled, textarea:disabled,
|
|
button[aria-disabled='true'], input[aria-disabled='true'], select[aria-disabled='true'], textarea[aria-disabled='true'] {
|
|
cursor: not-allowed;
|
|
opacity: .55;
|
|
}
|
|
|
|
.app-layout { height: 100dvh; display: flex; overflow: hidden; background: var(--canvas); }
|
|
.app-sidebar { width: 236px; flex: 0 0 auto; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--border); z-index: 30; }
|
|
.brand-row { min-height: 66px; padding: 0 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); }
|
|
.brand-mark { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--primary-text); background: var(--primary); }
|
|
.brand-row strong { display: block; font-size: 14px; font-weight: 600; }
|
|
.brand-row small { display: block; margin-top: 1px; color: var(--faint); font-size: 11px; }
|
|
.sidebar-search { height: 36px; margin: 17px 14px 10px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
|
|
.sidebar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
|
|
.sidebar-search input { width: 100%; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 12px; }
|
|
.sidebar-search input::placeholder { color: var(--faint); }
|
|
.tool-navigation { padding: 0 9px 18px; overflow-y: auto; }
|
|
.tool-navigation section { margin: 0; }
|
|
.tool-navigation h2 { margin: 0; padding: 13px 10px 6px; color: var(--faint); font-size: 10px; font-weight: 600; }
|
|
.tool-navigation a { position: relative; min-height: 35px; padding: 0 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-radius: 6px; }
|
|
.tool-navigation a:hover { color: var(--text); background: var(--surface); }
|
|
.tool-navigation a.is-active { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: 0 1px 2px rgba(20, 24, 28, .04); }
|
|
.tool-navigation a.is-active::before { position: absolute; left: -1px; width: 3px; height: 18px; content: ''; background: var(--accent); border-radius: 0 2px 2px 0; }
|
|
.tool-navigation a span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
|
|
.empty-search { padding: 20px 10px; color: var(--muted); font-size: 12px; }
|
|
.sidebar-local { min-height: 48px; margin-top: auto; padding: 0 18px; display: flex; align-items: center; gap: 7px; color: var(--muted); border-top: 1px solid var(--border); font-size: 11px; }
|
|
|
|
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); }
|
|
.app-main > .tool-page, .app-main > .setting-page { flex: 1 1 auto; min-height: 0; }
|
|
.topbar { min-height: 66px; flex: 0 0 66px; padding: 0 28px; display: flex; align-items: center; gap: 9px; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 12px; }
|
|
.topbar strong { color: var(--text); font-weight: 600; }
|
|
.topbar-spacer { flex: 1; }
|
|
.icon-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
|
|
.icon-button:hover { color: var(--text); background: var(--panel); border-color: var(--border); }
|
|
.mobile-menu { display: none; }
|
|
.menu-scrim { display: none; }
|
|
|
|
.tool-page, .setting-page { width: 100%; max-width: 1120px; padding: 32px 32px 40px; overflow-y: auto; }
|
|
.tool-heading, .setting-heading { margin-bottom: 25px; display: flex; align-items: flex-start; gap: 20px; }
|
|
.tool-category, .setting-category { margin: 0 0 5px; color: var(--accent); font-size: 11px; font-weight: 600; }
|
|
.tool-heading h1, .setting-heading h1 { margin: 0; color: var(--text); font-size: 24px; line-height: 1.2; font-weight: 600; }
|
|
.tool-description, .setting-description { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
|
|
.local-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
|
|
.local-state svg { color: var(--success); }
|
|
|
|
.mode-tabs { width: fit-content; min-height: 36px; padding: 3px; display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; }
|
|
.mode-tab { min-height: 28px; padding: 0 10px; color: var(--muted); background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 12px; }
|
|
.mode-tab:hover:not(:disabled) { color: var(--text); }
|
|
.mode-tab.is-active { color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
|
|
.tool-controls { margin-bottom: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
|
|
.control-spacer, .action-spacer { flex: 1; }
|
|
.compact-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
|
|
.compact-field select, .select-input, .text-input { min-height: 34px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; }
|
|
.compact-field select, .select-input { padding: 0 30px 0 10px; }
|
|
.text-input { width: 100%; padding: 0 10px; }
|
|
.text-input:focus, .select-input:focus, .compact-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
|
|
.check-field { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; font-size: 12px; }
|
|
.check-field:has(input:disabled) { color: var(--faint); cursor: not-allowed; }
|
|
.check-field input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
|
|
|
|
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 13px; align-items: center; }
|
|
.editor-panel { min-width: 0; display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; }
|
|
.editor-panel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
|
|
.editor-header { min-height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--border); font-size: 11px; }
|
|
.editor-header strong { color: var(--text); font-weight: 600; }
|
|
.editor-meta { margin-left: auto; color: var(--faint); }
|
|
.editor-panel textarea { width: 100%; min-height: 184px; padding: 13px; display: block; resize: vertical; color: var(--text); background: var(--surface); border: 0; outline: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.6; }
|
|
.editor-panel:has(textarea:disabled) { opacity: .72; }
|
|
.editor-panel textarea:disabled { cursor: not-allowed; }
|
|
.editor-panel textarea::placeholder, .key-input::placeholder { color: var(--faint); }
|
|
.syntax-viewer { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; }
|
|
.syntax-viewer pre { min-height: 290px; max-height: 520px; margin: 0; padding: 13px; overflow: auto; color: var(--text); background: var(--surface); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.6; white-space: pre; tab-size: 2; }
|
|
.syntax-viewer code { font: inherit; }
|
|
.syntax-key { color: var(--syntax-key); }
|
|
.syntax-string { color: var(--syntax-string); }
|
|
.syntax-number { color: var(--syntax-number); }
|
|
.syntax-literal { color: var(--syntax-literal); font-weight: 600; }
|
|
.syntax-tag { color: var(--syntax-tag); }
|
|
.syntax-attribute { color: var(--syntax-attribute); }
|
|
.syntax-value { color: var(--syntax-value); }
|
|
.syntax-comment { color: var(--syntax-comment); font-style: italic; }
|
|
.syntax-meta { color: var(--syntax-meta); }
|
|
.swap-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; justify-self: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer; }
|
|
.swap-button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
|
|
|
|
.action-row { min-height: 36px; margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.action-button { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
|
|
.action-button:hover:not(:disabled):not(.disabled) { border-color: var(--text); }
|
|
.action-button.primary { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
|
|
.action-button.primary:hover:not(:disabled):not(.disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
|
|
.action-button.ghost { color: var(--muted); background: transparent; border-color: transparent; }
|
|
.action-button.ghost:hover:not(:disabled):not(.disabled) { color: var(--text); background: var(--panel); border-color: var(--border); }
|
|
.action-button.danger { color: var(--danger); }
|
|
.action-button.disabled { cursor: not-allowed; opacity: .55; }
|
|
.privacy-note { min-height: 42px; margin-top: 18px; padding: 9px 13px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: var(--info-soft); border-radius: 6px; font-size: 11px; }
|
|
.privacy-note strong { color: var(--text); }
|
|
.status-message { min-height: 38px; margin-top: 12px; padding: 9px 11px; display: flex; align-items: flex-start; gap: 8px; border-radius: 6px; font-size: 12px; }
|
|
.status-message.error { color: var(--danger); background: var(--danger-soft); }
|
|
.status-message.success { color: var(--success); background: var(--success-soft); }
|
|
.status-message.warning { color: var(--warning); background: var(--warning-soft); }
|
|
.app-footer { flex: 0 0 auto; min-height: 38px; padding: 10px 28px; color: var(--faint); border-top: 1px solid var(--border); text-align: center; font-size: 11px; line-height: 1.4; }
|
|
|
|
.field-stack { margin-bottom: 16px; display: grid; gap: 7px; }
|
|
.field-stack > label, .field-label { color: var(--muted); font-size: 12px; font-weight: 600; }
|
|
.key-input { width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
|
|
.key-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
|
|
.field-help { color: var(--faint); font-size: 11px; }
|
|
.byte-count { color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
.byte-count.is-valid { color: var(--success); }
|
|
.byte-count.is-invalid { color: var(--danger); }
|
|
|
|
.single-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
|
|
.single-editor-layout .editor-panel textarea { min-height: 290px; }
|
|
|
|
.upload-zone { position: relative; min-height: 170px; padding: 24px; display: grid; place-items: center; overflow: hidden; text-align: center; color: var(--muted); background-color: var(--panel); background-image: none; border: 1px dashed var(--border-strong); border-radius: 7px; cursor: pointer; }
|
|
.upload-zone:hover, .upload-zone:focus-within, .upload-zone.is-dragging { color: var(--text); background-color: var(--accent-soft); background-image: none; border-color: var(--accent); }
|
|
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
.sr-only-file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
|
|
.upload-zone strong { display: block; margin-top: 8px; color: var(--text); font-size: 13px; }
|
|
.upload-zone span { display: block; margin-top: 3px; font-size: 11px; }
|
|
.image-workspace { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
|
|
.image-preview { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background-color: var(--panel); background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; border: 1px solid var(--border); border-radius: 7px; }
|
|
.image-preview img { width: 100%; height: 100%; object-fit: contain; }
|
|
.image-options h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
|
|
.size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
|
.size-option { min-height: 42px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
|
|
.size-option:has(input:checked) { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
|
|
.size-option input { margin: 0; accent-color: var(--accent); }
|
|
.file-meta { margin-top: 12px; color: var(--muted); font-size: 11px; }
|
|
.compact-upload { min-height: 138px; margin-bottom: 16px; }
|
|
.file-summary { min-height: 58px; margin-bottom: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; }
|
|
.file-summary > div { min-width: 0; margin-right: auto; }
|
|
.file-summary strong, .file-summary span { display: block; overflow-wrap: anywhere; }
|
|
.file-summary strong { font-size: 12px; font-weight: 600; }
|
|
.file-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; }
|
|
.file-drop-summary { position: relative; overflow: hidden; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
|
|
.file-drop-summary.is-dragging { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
|
|
.file-drop-feedback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); background: color-mix(in srgb, var(--surface) 88%, transparent); pointer-events: none; }
|
|
.file-drop-feedback strong { font-size: 12px; }
|
|
.file-drop-summary.is-replacing .file-drop-feedback { color: var(--muted); }
|
|
.file-drop-spinner { animation: file-drop-spin .8s linear infinite; }
|
|
@keyframes file-drop-spin { to { transform: rotate(360deg); } }
|
|
.crc-config { display: grid; grid-template-columns: minmax(190px, 1.35fr) minmax(96px, .65fr) repeat(3, minmax(145px, 1fr)); gap: 10px; align-items: end; }
|
|
.parameter-field { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
|
|
.parameter-field .select-input, .parameter-field .text-input { width: 100%; font-size: 12px; font-weight: 400; }
|
|
.crc-config .parameter-field > span { white-space: nowrap; }
|
|
.crc-reflection-options { grid-column: 1 / -1; min-height: 34px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 22px; row-gap: 8px; }
|
|
.crc-check { min-height: 34px; white-space: nowrap; }
|
|
.crc-results { margin-top: 16px; }
|
|
.crc-total { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; gap: 14px; color: var(--muted); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 7px; font-size: 11px; }
|
|
.crc-total strong { margin-left: auto; color: var(--accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 20px; font-weight: 700; }
|
|
.result-table-wrap { margin-top: 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
|
|
.result-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 11px; }
|
|
.result-table th, .result-table td { height: 38px; padding: 0 11px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
|
|
.result-table th { color: var(--faint); background: var(--panel); font-weight: 600; }
|
|
.result-table td { color: var(--muted); }
|
|
.result-table tbody tr:last-child td { border-bottom: 0; }
|
|
.crc-value { color: var(--text) !important; font-family: "SFMono-Regular", Consolas, monospace; font-weight: 600; }
|
|
.hash-config { margin-bottom: 14px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
|
|
.hash-config .parameter-field { min-width: 270px; }
|
|
.hash-results { margin-top: 16px; }
|
|
.hash-summary { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; gap: 12px; color: var(--muted); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 7px; font-size: 11px; }
|
|
.hash-summary > div { min-width: 0; }
|
|
.hash-summary strong, .hash-summary span { display: block; }
|
|
.hash-summary strong { color: var(--text); font-size: 12px; }
|
|
.hash-summary span { margin-top: 3px; overflow-wrap: anywhere; }
|
|
.hash-summary-mode { margin-left: auto; color: var(--accent) !important; font-family: "SFMono-Regular", Consolas, monospace; font-weight: 600; white-space: nowrap; }
|
|
.hash-digest-list { margin-top: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|
.hash-digest-row, .hash-field-row { min-width: 0; min-height: 48px; padding: 7px 0; display: grid; grid-template-columns: 78px minmax(0, 1fr) 30px; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
|
|
.hash-digest-row:last-child, .hash-field-row:last-child { border-bottom: 0; }
|
|
.hash-digest-row strong, .hash-field-row > span { color: var(--muted); font-size: 11px; font-weight: 600; }
|
|
.hash-digest-row code, .hash-field-row code { min-width: 0; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
|
|
.hash-block-list { margin-top: 16px; display: grid; gap: 10px; }
|
|
.hash-block-result { min-width: 0; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
|
|
.hash-block-result > header { min-height: 42px; display: flex; align-items: center; gap: 10px; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 11px; }
|
|
.hash-block-result > header strong { color: var(--text); font-size: 12px; white-space: nowrap; }
|
|
.hash-block-result > header span { min-width: 0; font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
|
|
.hash-block-result > header small { margin-left: auto; color: var(--faint); white-space: nowrap; }
|
|
.hash-field-row { grid-template-columns: 78px minmax(0, 1fr) 30px; }
|
|
.fixed-parameter { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
|
|
.fixed-parameter strong { color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 600; }
|
|
.rsa-generate-row { margin-top: 0; margin-bottom: 18px; }
|
|
.rsa-output-tabs { margin: 0 0 10px; }
|
|
.rsa-parameter-format { margin: 0 0 10px; }
|
|
.rsa-parameter-grid { display: grid; gap: 14px; }
|
|
.rsa-copy-row { min-height: 30px; margin-top: 4px; justify-content: flex-end; }
|
|
.signature-section { min-width: 0; padding: 16px 0; border-top: 1px solid var(--border); }
|
|
.signature-section:first-of-type { padding-top: 0; border-top: 0; }
|
|
.signature-section-heading { min-height: 28px; margin-bottom: 11px; display: flex; align-items: baseline; gap: 10px; }
|
|
.signature-section-heading strong { font-size: 13px; font-weight: 600; }
|
|
.signature-section-heading span { color: var(--faint); font-size: 11px; overflow-wrap: anywhere; }
|
|
.signature-config-grid { display: grid; grid-template-columns: minmax(220px, auto) minmax(150px, 190px) minmax(170px, 210px); gap: 12px; align-items: start; }
|
|
.signature-config-grid .parameter-field small { color: var(--faint); font-size: 10px; font-weight: 400; }
|
|
.signature-toolbar { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
|
|
.signature-key-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .36fr); gap: 14px; align-items: start; }
|
|
.signature-key-summary { margin-top: 10px; padding: 11px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; }
|
|
.signature-key-summary > div { min-width: 0; }
|
|
.signature-key-summary span, .signature-key-summary strong { display: block; }
|
|
.signature-key-summary span { margin-bottom: 3px; color: var(--faint); font-size: 10px; }
|
|
.signature-key-summary strong { font-size: 11px; overflow-wrap: anywhere; }
|
|
.signature-fingerprint, .signature-certificate-info { grid-column: 1 / -1; }
|
|
.signature-key-summary code { display: block; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
|
|
.signature-certificate-info small { display: block; margin-top: 4px; color: var(--faint); font-size: 10px; overflow-wrap: anywhere; }
|
|
.signature-actions { margin-top: 4px; }
|
|
.signature-result { margin-top: 16px; padding: 13px; border: 1px solid; border-radius: 7px; }
|
|
.signature-result.is-valid { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
|
|
.signature-result.is-invalid { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
|
|
.signature-result-title { display: flex; align-items: center; gap: 10px; }
|
|
.signature-result-title strong, .signature-result-title span { display: block; }
|
|
.signature-result-title strong { color: currentColor; font-size: 14px; }
|
|
.signature-result-title span { margin-top: 2px; color: var(--muted); font-size: 11px; }
|
|
.signature-result dl { margin: 12px 0 0; padding-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
|
|
.signature-result dl > div { min-width: 0; }
|
|
.signature-result dt { color: var(--faint); font-size: 10px; }
|
|
.signature-result dd { margin: 3px 0 0; color: var(--text); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
|
|
.signature-result-fingerprint, .signature-result-hash { grid-column: 1 / -1; }
|
|
.signature-result code { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 400; overflow-wrap: anywhere; }
|
|
.random-controls { margin-bottom: 14px; display: grid; grid-template-columns: minmax(120px, 180px) max-content auto; gap: 12px; align-items: end; }
|
|
.random-check { min-height: 34px; white-space: nowrap; }
|
|
|
|
.setting-page { max-width: 980px; }
|
|
.setting-heading-actions { margin-left: auto; display: flex; gap: 8px; }
|
|
.setting-list { display: grid; gap: 22px; }
|
|
.setting-loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
|
|
.setting-category-block { min-width: 0; }
|
|
.setting-category-header { min-height: 38px; display: flex; align-items: center; gap: 9px; color: var(--muted); border-bottom: 1px solid var(--border); }
|
|
.setting-category-header h2 { margin: 0; color: var(--text); font-size: 12px; font-weight: 600; }
|
|
.setting-category-header small { color: var(--faint); }
|
|
.setting-category-header .row-actions { margin-left: auto; }
|
|
.setting-tool-list { padding-top: 8px; display: grid; gap: 7px; }
|
|
.setting-tool-row { min-height: 52px; padding: 0 11px; display: flex; align-items: center; gap: 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
|
|
.setting-tool-row.is-dragging { opacity: .45; }
|
|
.drag-handle { color: var(--faint); cursor: grab; }
|
|
.tool-row-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 6px; }
|
|
.setting-tool-row strong { min-width: 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
|
|
.setting-tool-row .select-input { width: 130px; margin-left: auto; font-size: 11px; }
|
|
.row-actions { display: flex; gap: 3px; }
|
|
.row-action { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
|
|
.row-action:hover:not(:disabled) { color: var(--text); background: var(--panel); border-color: var(--border); }
|
|
.row-action:disabled { opacity: .55; cursor: not-allowed; }
|
|
.save-state { margin-top: 14px; }
|
|
|
|
@media (max-width: 1040px) {
|
|
.crc-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.crc-config .preset-field, .crc-config .crc-reflection-options { grid-column: 1 / -1; }
|
|
.signature-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.app-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 14px 0 32px rgba(20, 24, 28, .14); }
|
|
.menu-open .app-sidebar { transform: translateX(0); }
|
|
.menu-scrim { position: fixed; inset: 0; z-index: 20; display: block; background: rgba(10, 14, 17, .38); border: 0; }
|
|
.mobile-menu { display: grid; }
|
|
.topbar { padding: 0 16px; }
|
|
.tool-page, .setting-page { max-width: none; padding: 26px 18px 34px; }
|
|
.editor-grid { grid-template-columns: 1fr; }
|
|
.swap-button { transform: rotate(90deg); }
|
|
.single-editor-layout, .image-workspace { grid-template-columns: 1fr; }
|
|
.image-preview { max-width: 320px; width: 100%; margin: 0 auto; }
|
|
.crc-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.preset-field { grid-column: 1 / -1; }
|
|
.random-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.random-format-field { grid-column: 1 / -1; }
|
|
.signature-key-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.tool-heading, .setting-heading { display: block; }
|
|
.local-state, .setting-heading-actions { margin: 10px 0 0; }
|
|
.tool-heading h1, .setting-heading h1 { font-size: 22px; }
|
|
.tool-page, .setting-page { padding: 22px 14px 30px; }
|
|
.topbar { min-height: 60px; flex-basis: 60px; }
|
|
.topbar > span:first-of-type, .topbar > svg { display: none; }
|
|
.mode-tabs { width: 100%; }
|
|
.mode-tab { flex: 1; }
|
|
.compact-field { width: 100%; justify-content: space-between; }
|
|
.compact-field select { flex: 1; }
|
|
.editor-panel textarea { min-height: 162px; }
|
|
.single-editor-layout .editor-panel textarea { min-height: 220px; }
|
|
.syntax-viewer pre { min-height: 220px; }
|
|
.action-spacer, .control-spacer { display: none; }
|
|
.action-button.ghost { padding-left: 8px; padding-right: 8px; }
|
|
.size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.setting-tool-row { padding: 9px; align-items: flex-start; flex-wrap: wrap; }
|
|
.setting-tool-row .select-input { width: calc(100% - 76px); margin-left: 38px; order: 5; }
|
|
.setting-tool-row .row-actions { margin-left: auto; }
|
|
.file-summary { align-items: flex-start; flex-wrap: wrap; }
|
|
.file-summary > div { width: 100%; }
|
|
.file-drop-feedback { align-items: center; }
|
|
.crc-total { align-items: flex-start; flex-direction: column; }
|
|
.crc-total strong { margin-left: 0; font-size: 18px; overflow-wrap: anywhere; }
|
|
.hash-config { display: grid; grid-template-columns: 1fr; align-items: stretch; }
|
|
.hash-config .parameter-field { min-width: 0; }
|
|
.hash-summary { align-items: flex-start; flex-direction: column; }
|
|
.hash-summary-mode { margin-left: 0; }
|
|
.hash-block-result > header { align-items: flex-start; flex-wrap: wrap; padding: 10px 0; }
|
|
.hash-block-result > header small { width: 100%; margin-left: 0; }
|
|
.signature-section-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
|
|
.signature-config-grid { grid-template-columns: 1fr; }
|
|
.signature-key-summary, .signature-result dl { grid-template-columns: 1fr; }
|
|
.signature-fingerprint, .signature-certificate-info, .signature-result-fingerprint, .signature-result-hash { grid-column: auto; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
|
|
}
|