:root { color-scheme: light dark; } /* ------------------------------------------------------------------ */ /* Design tokens */ /* ------------------------------------------------------------------ */ :root{ --radius-1: 10px; --radius-2: 12px; --space-1: 6px; --space-2: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --border: rgba(127,127,127,0.35); --border-soft: rgba(127,127,127,0.25); --bg: rgba(127,127,127,0.06); --bg-soft: rgba(127,127,127,0.03); --shadow: 0 8px 30px rgba(0,0,0,0.08); --accent: rgba(80, 140, 255, 0.95); --accent-soft: rgba(80, 140, 255, 0.18); --accent-ring: rgba(80, 140, 255, 0.22); --danger: rgba(255, 90, 90, 0.95); --danger-soft: rgba(255, 90, 90, 0.18); --danger-ring: rgba(255, 90, 90, 0.20); --focus-ring: 0 0 0 3px rgba(80, 140, 255, 0.30); /* Theme surfaces (set below) */ --page-bg: #ffffff; --card-bg: rgba(127,127,127,0.06); } /* Force theme via */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"]{ --page-bg: #ffffff; --card-bg: rgba(127,127,127,0.06); } html[data-theme="dark"]{ --page-bg: #0f1115; --card-bg: rgba(255,255,255,0.06); } /* ------------------------------------------------------------------ */ /* Base / reset-ish */ /* ------------------------------------------------------------------ */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 24px; display: grid; place-items: start center; background: var(--page-bg); } label { display:block; font-weight: 650; margin: var(--space-3) 0 var(--space-1); } code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } .muted{ opacity: 0.75; } button{ font: inherit; color: inherit; } /* Keyboard focus */ button:focus-visible, .btn:focus-visible, input[type="text"]:focus-visible, textarea:focus-visible, .select:focus-visible, .type:focus-within{ outline: none; box-shadow: var(--focus-ring); } /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ .app { width: min(760px, 100%); } .card{ width: 100%; border: 1px solid var(--border); border-radius: var(--radius-2); padding: var(--space-5); box-shadow: var(--shadow); background: var(--card-bg); } .section{ margin-top: var(--space-4); } .bottom-stack{ margin-top: var(--space-4); display:grid; gap: var(--space-3); } .divider{ height:1px; background: var(--border-soft); margin: var(--space-1) 0; } /* ------------------------------------------------------------------ */ /* Header */ /* ------------------------------------------------------------------ */ .topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-4); width: 100%; } .title-row{ display: flex; align-items: center; gap: 12px; width: 100%; } .title-row h1{ margin: 0; } .title-row .settings{ margin-left: auto; } .app-title{ font-size: 20px; margin: 0; } .app-subtitle{ margin: var(--space-1) 0 0; line-height: 1.4; opacity: 0.85; max-width: 60ch; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-2); } .section-title{ font-weight: 750; } .section-hint{ font-size: 12px; opacity: 0.75; } .section-subtitle{ font-weight: 750; margin-top: var(--space-4); } /* ------------------------------------------------------------------ */ /* Form controls */ /* ------------------------------------------------------------------ */ input[type="text"], textarea, .select{ width:100%; box-sizing:border-box; padding: 10px 12px; border-radius: var(--radius-1); border: 1px solid var(--border); background: transparent; font-size: 14px; outline: none; } textarea{ min-height: 160px; resize: vertical; } input[type="text"]:hover, textarea:hover, .select:hover{ border-color: rgba(80, 140, 255, 0.75); } input[type="text"]:focus, input[type="text"]:focus-visible, textarea:focus, textarea:focus-visible, .select:focus, .select:focus-visible{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.20); outline: none; } .option{ display:flex; gap: 10px; align-items:center; cursor:pointer; user-select:none; } .option input{ transform: translateY(1px); } .hint{ margin-top: var(--space-2); font-size: 12px; opacity: 0.8; } /* Inline label + input row */ .field-inline{ display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; margin-top: 12px; } .field-inline .field-label{ font-weight: 700; margin: 0; } .field-inline .field-input{ margin: 0; } @media (max-width: 640px) { .field-inline{ grid-template-columns: 1fr; gap: 6px; } } /* ------------------------------------------------------------------ */ /* Buttons + action rows */ /* ------------------------------------------------------------------ */ .actions{ margin-top: var(--space-4); display:flex; flex-wrap: wrap; gap: 10px; align-items:center; } .actions.two-rows{ display: grid; gap: 10px; } /* Stack action rows vertically */ .actions.actions-stack{ display: grid; gap: 10px; } .actions-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .actions-row .spacer { flex: 1; } .actions-row-spacer{ flex: 1 1 auto; } .spacer{ flex: 1 1 auto; min-width: 10px; } .btn{ padding: 10px 14px; border-radius: var(--radius-1); border: 1px solid var(--border); background: var(--accent-soft); cursor: pointer; font-weight: 700; transition: transform 60ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .btn:hover{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.18); transform: translateY(-1px); } .btn:active{ transform: translateY(0px); } .btn:disabled{ opacity: 0.55; cursor: not-allowed; } .btn.secondary{ background: rgba(127,127,127,0.12); } .btn.primary{ background: var(--accent-soft); } .btn.danger{ border-color: rgba(255, 90, 90, 0.55); background: var(--danger-soft); } .btn.danger:hover{ border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.20); background: rgba(255, 90, 90, 0.24); } .btn.small{ padding: 6px 10px; font-size: 12px; } .btn-group{ display: inline-flex; gap: 8px; align-items: center; } .btn-icon{ width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: currentColor; } .btn-label{ display: inline-block; } /* ------------------------------------------------------------------ */ /* Setting rows */ /* ------------------------------------------------------------------ */ .setting-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .setting-label{ display: inline-block; margin: 0; font-weight: 700; white-space: nowrap; } .setting-choices{ justify-content: flex-end; margin: 0; } @media (max-width: 520px) { .setting-label { width: 100%; } .setting-choices { width: 100%; justify-content: flex-start; } } /* ------------------------------------------------------------------ */ /* Choice pills */ /* ------------------------------------------------------------------ */ .choice-row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .choice-pill{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(127,127,127,0.35); background: rgba(127,127,127,0.04); cursor: pointer; user-select: none; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, transform 0.05s ease; } .choice-pill input{ margin: 0; } .choice-pill-icon{ display: inline-flex; align-items: center; justify-content: center; } .choice-pill-icon svg{ width: 18px; height: 18px; color: currentColor; flex-shrink: 0; } .choice-pill-title{ font-weight: 750; } .choice-pill-sub{ opacity: 0.75; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } .choice-pill:hover{ border-color: rgba(80, 140, 255, 0.95); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.18); transform: translateY(-1px); } .choice-pill:has(input:checked){ border-color: rgba(80,140,255,0.95); background: rgba(80,140,255,0.18); box-shadow: 0 0 0 2px rgba(80,140,255,0.14); } .group-label{ margin: 12px 0 6px; } /* ------------------------------------------------------------------ */ /* Options blocks */ /* ------------------------------------------------------------------ */ .options{ display:grid; gap: 10px; margin-top: var(--space-1); padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-1); background: var(--bg-soft); } /* ------------------------------------------------------------------ */ /* Status */ /* ------------------------------------------------------------------ */ .status{ font-size: 13px; opacity: 0.9; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } /* ------------------------------------------------------------------ */ /* Dropzone */ /* ------------------------------------------------------------------ */ .dropzone{ margin-top: var(--space-2); padding: 10px 12px; border-radius: var(--radius-1); border: 2px dashed var(--border); background: var(--bg-soft); opacity: 0.95; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 60ms ease; } .dropzone-row{ display:flex; gap: 12px; align-items:center; justify-content: space-between; flex-wrap: wrap; } .dropzone-text{ min-width: 260px; flex: 1; } .dropzone small{ display:block; margin-top: 6px; opacity: 0.8; } .dropzone:hover{ border-color: rgba(80, 140, 255, 0.85); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.18); transform: translateY(-1px); } .dropzone.dragover{ border-color: rgba(80, 140, 255, 0.98); background: rgba(80, 140, 255, 0.10); box-shadow: 0 0 0 4px rgba(80, 140, 255, 0.25); } textarea.dragover{ border-color: rgba(80, 140, 255, 0.98); box-shadow: 0 0 0 4px rgba(80, 140, 255, 0.20); } /* ------------------------------------------------------------------ */ /* Invalid panel */ /* ------------------------------------------------------------------ */ .invalid-panel{ padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--bg); } .invalid-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } .invalid-title{ font-weight: 750; } .invalid-body{ margin-top: 10px; } .invalid-list{ display:grid; gap: 8px; } .invalid-item{ border: 1px solid rgba(255, 90, 90, 0.40); border-radius: var(--radius-1); padding: 10px 12px; background: rgba(255, 90, 90, 0.08); } .invalid-reason{ font-size: 12px; opacity: 0.9; margin-bottom: 6px; } .invalid-raw{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; opacity: 0.95; } /* ------------------------------------------------------------------ */ /* Details cards */ /* ------------------------------------------------------------------ */ .details-card{ border: 1px solid rgba(127,127,127,0.35); border-radius: 12px; padding: 0; background: rgba(127,127,127,0.06); box-shadow: 0 8px 30px rgba(0,0,0,0.08); transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, transform 0.05s ease; } .details-card:hover{ border-color: rgba(80, 140, 255, 0.75); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.14); transform: none; } .details-card summary{ cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 750; list-style: none; } .details-card summary::-webkit-details-marker{ display: none; } .details-card summary::after{ content: "▾"; opacity: 0.75; margin-left: 10px; } .details-card[open] summary::after{ content: "▴"; } .details-summary-left{ display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .details-summary-title{ font-weight: 750; } .details-summary-sub{ font-size: 12px; } .details-body{ padding: 0 16px 16px; } /* ------------------------------------------------------------------ */ /* QR (single compact) */ /* ------------------------------------------------------------------ */ .qr-panel-compact { margin-top: 10px; } .qr-top{ display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center; } .qr-box{ padding: 10px; border: 1px dashed rgba(127,127,127,0.35); border-radius: 12px; text-align: center; background: rgba(127,127,127,0.03); } .qr-title{ font-weight: 750; margin-bottom: 8px; } #qrImg{ width: auto; height: auto; max-width: 320px; image-rendering: pixelated; } .qr-warn{ margin: 10px auto 4px; text-align: center; max-width: 320px; } .qr-controls{ margin-top: 10px; display: grid; gap: 10px; } .qr-controls-row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: center; } @media (max-width: 640px) { .qr-controls-row{ grid-template-columns: 1fr; } } .qr-inline{ display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid rgba(127,127,127,0.25); border-radius: 10px; background: rgba(127,127,127,0.03); } .qr-inline-check{ grid-template-columns: auto 1fr; justify-content: start; } .qr-inline-label{ font-weight: 650; font-size: 13px; opacity: 0.9; } .qr-num{ width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(127,127,127,0.35); background: transparent; font-size: 14px; outline: none; } .qr-select{ padding: 8px 10px; } .qr-actions-grid{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .qr-actions-grid .btn.small{ min-width: 132px; } .details-card.qr-disabled summary{ opacity: 0.6; cursor: not-allowed; } .batch-qr-options{ margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,0.18); } /* ------------------------------------------------------------------ */ /* History */ /* ------------------------------------------------------------------ */ .history-details{ border: 1px solid var(--border); border-radius: var(--radius-2); background: var(--bg); } .history-details summary{ cursor:pointer; user-select:none; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 750; list-style:none; } .history-details summary::-webkit-details-marker{ display:none; } .history-details summary::after{ content:"▾"; opacity: 0.75; margin-left: 10px; } .history-details[open] summary::after{ content:"▴"; } .history-summary-left{ display:inline-flex; align-items:center; gap: 8px; } .history-item{ border: 1px solid var(--border-soft); border-radius: var(--radius-2); padding: 10px 12px; background: var(--bg-soft); margin: 10px 16px; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 60ms ease; } .history-item:hover{ border-color: rgba(80, 140, 255, 0.75); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.14); background: rgba(80, 140, 255, 0.06); transform: translateY(-1px); } .history-row{ display:flex; justify-content: space-between; gap: 12px; align-items:flex-start; } .history-meta{ font-size: 13px; opacity: 0.92; line-height: 1.35; word-break: break-word; } .history-actions{ display:flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .history-empty{ padding: 14px 10px; } .history-actions button{ display: inline-flex; align-items: center; } .history-actions .btn-icon{ display: inline-flex; margin-right: 6px; } .history-actions .btn-icon svg, .history-actions svg.icon { width: 14px; height: 14px; display: block; /* avoids baseline weirdness */ flex: 0 0 auto; } /* ------------------------------------------------------------------ */ /* Export schema */ /* ------------------------------------------------------------------ */ .schema-wrap{ display:grid; gap: 12px; margin-top: 10px; } @media (min-width: 740px){ .schema-wrap{ grid-template-columns: 1fr 1fr; } } .schema-title{ font-weight: 750; margin-bottom: 6px; opacity: 0.95; } .schema-selected{ list-style:none; padding: 0; margin: 0; display:grid; gap: 8px; } .schema-item{ display:flex; align-items:center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-1); background: var(--bg-soft); cursor: grab; } .schema-item:hover{ border-color: rgba(80, 140, 255, 0.75); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.12); } .schema-item.dragging{ opacity: 0.6; } .schema-handle{ opacity: 0.8; font-size: 14px; user-select:none; } .schema-label{ flex: 1; font-size: 13px; word-break: break-word; } .schema-available{ display:grid; gap: 8px; } .schema-remove{ white-space: nowrap; } .schema-item.drag-over{ border-color: rgba(127,127,127,0.25); background: rgba(127,127,127,0.03); } .schema-drop-indicator{ list-style: none; padding: 0; margin: 0; border: 0; height: 8px; position: relative; } .schema-drop-indicator::before{ content: ""; position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); height: 3px; border-radius: 999px; background: rgba(80, 140, 255, 0.95); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.16); } .schema-available .schema-option{ align-items: flex-start; } .schema-opt-text{ display: grid; gap: 2px; } .schema-opt-title{ line-height: 1.2; } .schema-opt-desc{ font-size: 12px; opacity: 0.75; line-height: 1.25; max-height: 0; overflow: hidden; transform: translateY(-2px); transition: max-height 140ms ease, transform 140ms ease, opacity 140ms ease; } .schema-available .schema-option:hover .schema-opt-desc, .schema-available .schema-option:focus-within .schema-opt-desc{ max-height: 60px; transform: translateY(0); opacity: 0.9; } @media (hover: none) { .schema-opt-desc{ max-height: none; transform: none; overflow: visible; } } /* ------------------------------------------------------------------ */ /* Toast */ /* ------------------------------------------------------------------ */ .toast{ position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; max-width: min(760px, calc(100% - 24px)); width: fit-content; padding: 10px 12px; border-radius: var(--radius-2); border: 1px solid var(--border); background: rgba(20, 20, 20, 0.85); color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; pointer-events:none; transition: opacity 180ms ease, transform 180ms ease; } .toast.show{ opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast.success{ border-color: rgba(80,140,255,0.75); } .toast.error{ border-color: rgba(255, 90, 90, 0.75); } /* ------------------------------------------------------------------ */ /* Settings popover + icons */ /* ------------------------------------------------------------------ */ .settings{ position: relative; display: inline-flex; align-items: center; } .icon{ width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: currentColor; } .icon-btn .icon{ width: 18px; height: 18px; margin-right: 0; vertical-align: 0; } .icon-btn{ width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid rgba(127,127,127,0.30); background: rgba(127,127,127,0.06); color: inherit; cursor: pointer; } .icon-btn:hover{ border-color: rgba(80, 140, 255, 0.65); box-shadow: 0 0 0 3px rgba(80, 140, 255, 0.12); } .icon-btn svg{ width: 18px; height: 18px; display: block; } .settings-menu{ position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; min-width: 220px; padding: 10px; border-radius: 12px; border: 1px solid rgba(127,127,127,0.35); background: rgba(30, 30, 30, 0.92); color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: none; gap: 10px; } .settings-menu.is-open{ display: grid; } html[data-theme="light"] .settings-menu{ background: rgba(255, 255, 255, 0.98); color: inherit; } .settings-divider{ height: 1px; background: rgba(127,127,127,0.35); } .settings-meta{ font-size: 12px; opacity: 0.85; padding: 2px 2px; } /* ------------------------------------------------------------------ */ /* Utilities */ /* ------------------------------------------------------------------ */ .mt-12{ margin-top: 12px; }