/* Ghostvault — minimal-chrome dark theme. The whole UI is rendered * by the Rust+wasm bundle; this stylesheet only carries the visual * tokens (colors, type, spacing) so changes don't require a wasm * rebuild. Layout is responsive: mobile-first sizing with a single * laptop/desktop breakpoint at 720px to widen padding and tighten * the form column. */ :root { --bg: #0b0d12; --fg: #e6e8ef; --fg-dim: #8a8f9c; --accent: #ff3d6f; /* pink — matches the Ghostvault mascot */ --accent-fg: #0b0d12; --border: #1c2030; --card: #11141c; --error: #ff5b5b; --success: #4dd28d; /* Tap target sizing — 44×44 is Apple HIG / WCAG AAA. The form * uses these on every interactive element. */ --tap: 44px; } /* Light theme — applied when `` is set * (selected from Settings → Appearance, persisted in localStorage). * Inverts the surface palette but keeps the pink accent because the * brand mark uses it on both backgrounds. */ body[data-theme="light"] { --bg: #f6f7f9; --fg: #0b0d12; --fg-dim: #545b6b; --accent-fg: #ffffff; --border: #d3d8df; --card: #ffffff; --error: #c93838; --success: #1f8d56; } /* Auto-follow system theme when the user picks "System" — only * applies when no explicit data-theme is set on body. */ @media (prefers-color-scheme: light) { body:not([data-theme]) { --bg: #f6f7f9; --fg: #0b0d12; --fg-dim: #545b6b; --accent-fg: #ffffff; --border: #d3d8df; --card: #ffffff; --error: #c93838; --success: #1f8d56; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* clamp() picks 15px on phones and 16px on larger screens — * one declaration, no media query, scales smoothly between. */ font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; -webkit-text-size-adjust: 100%; } #app { /* Mobile-first: full width, narrow padding. The breakpoint * below widens both for the laptop view. */ max-width: 100%; margin: 0 auto; padding: 16px; } /* Laptop / desktop. The form column tops out at 480px since a * password input doesn't benefit from being wider; the vault list * gets the full 720px. */ @media (min-width: 720px) { #app { max-width: 720px; padding: 32px; } .login { max-width: 480px; } } /* Brand header — logo + wordmark, side by side. */ .brand { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; } .brand .logo { /* Mobile: 48px keeps the header compact. Laptop bumps it to * 64px below. The launcher PNG is 432×432 so both downscales * stay sharp. */ width: 48px; height: 48px; border-radius: 12px; background: #161a26; flex: 0 0 auto; image-rendering: -webkit-optimize-contrast; } @media (min-width: 720px) { .brand .logo { width: 64px; height: 64px; } } .brand h1 { margin: 0; } h1 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 16px; letter-spacing: -0.01em; font-weight: 700; } h2 { font-size: clamp(15px, 1.2vw, 18px); margin: 16px 0 12px; color: var(--fg-dim); font-weight: 600; } label { display: block; margin-bottom: 4px; color: var(--fg-dim); font-size: 13px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select { width: 100%; /* 16px keeps iOS Safari from auto-zooming on focus. */ font-size: 16px; min-height: var(--tap); padding: 10px 12px; background: var(--card); border: 1px solid var(--border); color: var(--fg); border-radius: 8px; font-family: inherit; margin-bottom: 12px; } input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 61, 111, 0.18); } button { background: var(--accent); color: var(--accent-fg); border: none; min-height: var(--tap); padding: 10px 20px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; /* Stretch full-width on phones; intrinsic size on laptop. */ width: 100%; } @media (min-width: 720px) { button { width: auto; } } button:hover { filter: brightness(1.08); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .cipher-name { font-weight: 600; margin-bottom: 4px; word-break: break-word; } .cipher-meta { color: var(--fg-dim); font-size: 13px; word-break: break-all; } .error { color: var(--error); background: rgba(255, 91, 91, 0.08); border: 1px solid rgba(255, 91, 91, 0.3); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; word-break: break-word; } .status { color: var(--fg-dim); font-size: 13px; margin: 8px 0; } .pin-banner { background: rgba(77, 210, 141, 0.08); border: 1px solid rgba(77, 210, 141, 0.3); color: var(--success); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 8px 12px; border-radius: 8px; margin-bottom: 16px; word-break: break-all; } /* Advanced-KDF disclosure on the login form. The summary uses the * accent color so it doesn't compete with the primary Unlock button, * but is still discoverable as an interactive element. */ .kdf-advanced { margin: 4px 0 12px; color: var(--fg-dim); font-size: 13px; } .kdf-advanced > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 8px; list-style: none; } .kdf-advanced > summary::-webkit-details-marker { display: none; } .kdf-advanced > summary::before { content: "▸ "; display: inline-block; width: 1em; transition: transform 120ms ease; } .kdf-advanced[open] > summary::before { transform: rotate(90deg); } .kdf-advanced > .status { margin: 0 0 12px; } /* Forms get tighter vertical rhythm on laptop. */ .login { margin-top: 8px; } @media (min-width: 720px) { .login { margin-top: 16px; } } /* Splash overlay. Visible the instant the browser parses index.html * (before wasm has even loaded), so the user sees the brand mark * during the few hundred ms of wasm fetch + bootstrap. The SPA then * runs a FLIP-style animation to translate it into the brand-header * logo slot, after which the splash element is hidden. * * The transition runs only once per page load (body.booting → no * class). We use a fixed-position overlay so layout below isn't * affected during the transition. */ #splash { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; justify-content: center; /* Initially fully opaque; the SPA fades it out after the * splash-logo finishes its transit to the header slot. */ opacity: 1; transition: opacity 220ms ease 480ms, visibility 0s linear 700ms; } body:not(.booting) #splash { opacity: 0; visibility: hidden; } #splash .splash-logo { width: 160px; height: 160px; border-radius: 28px; background: #161a26; box-shadow: 0 12px 60px rgba(255, 61, 111, 0.18); /* The wasm computes a transform(translate, scale) that lands the * logo exactly on the brand-header slot. Until then this is a * no-op; the transition makes the move smooth when the wasm * sets it via inline style. */ transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), border-radius 700ms cubic-bezier(0.65, 0, 0.35, 1); transform-origin: top left; will-change: transform; } @media (min-width: 720px) { #splash .splash-logo { width: 200px; height: 200px; border-radius: 36px; } } /* Subtle pulse while wasm is loading — gives the splash some life * even if the bootstrap takes more than a frame. */ @keyframes splash-pulse { from { transform: scale(0.97); } to { transform: scale(1); } } body.booting #splash .splash-logo { animation: splash-pulse 1400ms ease-in-out infinite alternate; } /* Hide the brand-header logo until the splash-to-header animation * has crossed; otherwise both are visible mid-transit. The wasm * adds `booted` to body once the splash transform has been applied, * triggering this. */ body.booting .brand .logo { opacity: 0; } .brand .logo { transition: opacity 220ms ease 480ms; } /* "Get on Android" CTA block under the login form. Two stacked * cards on phone (full-width tap targets), side-by-side on laptop. */ .mobile-cta { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; } .mobile-cta h2 { margin-top: 0; } .mobile-cta-buttons { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 8px; } @media (min-width: 720px) { .mobile-cta-buttons { flex-direction: row; } } .mobile-cta-btn { flex: 1 1 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--fg); min-height: var(--tap); transition: border-color 120ms ease, transform 80ms ease; } .mobile-cta-btn:hover { border-color: var(--accent); } .mobile-cta-btn:active { transform: translateY(1px); } .mobile-cta-btn.primary { border-color: rgba(255, 61, 111, 0.4); background: rgba(255, 61, 111, 0.06); } .mobile-cta-icon { font-size: 24px; line-height: 1; flex: 0 0 auto; } .mobile-cta-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .mobile-cta-label strong { font-size: 14px; font-weight: 600; } .mobile-cta-label small { color: var(--fg-dim); font-size: 11px; } .mobile-cta-foot { margin-top: 4px; } .mobile-cta-foot a { color: var(--accent); } .mobile-cta-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; background: rgba(255, 255, 255, 0.04); padding: 1px 4px; border-radius: 3px; } /* Browser-extension CTA: 3-step ordered list with the download buttons * embedded inside step 1. Numbers stay flush left, content indents so * "Step 2: extract the zip" is unmissable. */ .browser-cta-steps { margin: 12px 0 4px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.45; } .browser-cta-steps > li { padding-left: 4px; } .browser-cta-steps strong { color: var(--fg); } .browser-cta-steps code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: rgba(255, 255, 255, 0.04); padding: 1px 4px; border-radius: 3px; } .browser-cta-extract { margin: 6px 0 0; padding-inline-start: 18px; color: var(--fg-dim); font-size: 12px; line-height: 1.5; } .browser-cta-row { margin: 8px 0 0; } /* 2FA challenge screen. Two parallel blocks (push approve, voice * verify) separated by a faint divider. */ .challenge-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 18px; } .challenge-section h2 { margin-top: 0; } /* Footer link below the login / register form for switching between * the two screens. Same dim color as labels so it doesn't compete * with the form, but the link itself stays in the accent color. */ .auth-switch { color: var(--fg-dim); font-size: 13px; margin-top: 16px; } .auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; } .auth-switch a:hover { text-decoration: underline; } .voice-phrase { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 12px 0; font-size: clamp(18px, 2.5vw, 24px); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; text-align: center; word-spacing: 0.4em; /* Phrase is meant to be read aloud — keep it readable; the * monospace + word-spacing makes the four words easy to track. */ } /* Agent approvals: three large monospace number buttons in a row. * The user is meant to compare against a printed two-digit number on * the agent's terminal; we make the buttons big and the digits easy to * read at a glance. The picker layout sits inside `.card` so it * inherits the same border treatment as marshal/cipher cards. */ .agent-pick-row { display: flex; gap: 10px; margin: 12px 0 6px; } .agent-pick-btn { flex: 1 1 0; width: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(22px, 4vw, 32px); letter-spacing: 0.06em; padding: 18px 0; background: var(--card); color: var(--fg); border: 1px solid var(--border); } .agent-pick-btn:hover { border-color: var(--accent); filter: none; } .agent-deny-btn, .agent-revoke-btn { background: transparent; color: var(--error); border: 1px solid rgba(255, 91, 91, 0.4); } .agent-deny-btn:hover, .agent-revoke-btn:hover { background: rgba(255, 91, 91, 0.08); filter: none; } .agent-pick-status { margin-top: 4px; } /* --------------------------------------------------------------- * Vault list — replaces the bare `.card` rows. Mirrors the mobile * app's drilldown UX: search up top, type-iconned rows with a chev, * tap-anywhere-on-the-row to open detail. * --------------------------------------------------------------- */ .vault-search { margin: 8px 0 14px; } .vault-search input { width: 100%; margin: 0; } .vault-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .cipher-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; user-select: none; transition: border-color 80ms ease, background 80ms ease; min-height: var(--tap); } .cipher-row:hover, .cipher-row:focus-visible { border-color: var(--accent); outline: none; } .cipher-row:active { background: rgba(255, 61, 111, 0.05); } .cipher-icon { flex: 0 0 32px; height: 32px; width: 32px; border-radius: 8px; background: rgba(255, 61, 111, 0.1); display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; } .cipher-favicon { width: 24px; height: 24px; object-fit: contain; } .cipher-body { flex: 1 1 auto; min-width: 0; /* let truncation work in flex children */ } .cipher-row .cipher-name { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cipher-row .cipher-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favorite-star { color: #f5c542; font-size: 12px; margin-left: 4px; } .cipher-chev { flex: 0 0 auto; color: var(--fg-dim); font-size: 22px; line-height: 1; } /* --------------------------------------------------------------- * Cipher detail view — full-screen on mobile, capped on desktop. * --------------------------------------------------------------- */ .detail-brand { align-items: center; gap: 10px; } .detail-back { flex: 0 0 auto; background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 6px 12px; min-height: 32px; font-size: 13px; border-radius: 6px; } .detail-title { font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .detail-type { margin: 0 0 16px; } .detail-fields { display: flex; flex-direction: column; gap: 10px; } .detail-field { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label copy" "value copy"; gap: 4px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; align-items: center; } .detail-label { grid-area: label; color: var(--fg-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .detail-value { grid-area: value; word-break: break-all; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .detail-value a { color: var(--accent); text-decoration: none; } .detail-value a:hover { text-decoration: underline; } .detail-copy, .detail-reveal { grid-area: copy; background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 4px 10px; min-height: 28px; font-size: 12px; border-radius: 6px; align-self: stretch; } .detail-reveal { grid-area: unset; flex: 0 0 auto; } .masked-value { font-family: monospace; letter-spacing: 1.5px; } .detail-totp .totp-code { font-family: monospace; font-size: 22px; letter-spacing: 3px; color: var(--accent); } .detail-totp .totp-countdown { color: var(--fg-dim); font-size: 12px; } .detail-notes { grid-template-areas: "label copy" "value copy"; } .detail-notes .notes-body { white-space: pre-wrap; word-break: break-word; } @media (min-width: 720px) { .detail-fields { max-width: 600px; } .cipher-row { padding: 14px 18px; } } /* Search row: input + "+ New" button on the same line. */ .vault-search { display: flex; gap: 8px; align-items: stretch; } .vault-search input { flex: 1 1 auto; } .vault-new { flex: 0 0 auto; padding: 0 14px; min-height: 44px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 6px; font-weight: 600; cursor: pointer; } .vault-new:hover { filter: brightness(1.05); } .detail-edit { background: var(--accent); color: var(--accent-fg); border: none; } .detail-fav { background: transparent; color: #f5c542; font-size: 18px; border: 1px solid var(--border); line-height: 1; } .detail-fav[data-favorite="true"] { color: #f5c542; border-color: #f5c542; } .detail-attachments .attachments-list { flex-direction: column; width: 100%; align-items: stretch; } .attachment-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .attachment-row:last-child { border-bottom: none; } .attachment-name { flex: 1 1 auto; word-break: break-all; } .attachment-size { color: var(--fg-dim); font-size: 11px; } .attachment-download { flex: 0 0 auto; padding: 4px 10px; min-height: 28px; font-size: 12px; } /* --------------------------------------------------------------- * Responsive polish — fixes the worst phone-portrait squashes and * uses the available width on desktop. Mobile-first; the breakpoint * upgrades render once the viewport can actually fit a wider layout. * --------------------------------------------------------------- */ /* Brand header: shrink the logo + title on phones so the back/edit * buttons get room without wrapping to a second line. */ .detail-brand { flex-wrap: wrap; gap: 8px; } .detail-brand .logo, .brand .logo { height: 32px; width: 32px; flex: 0 0 auto; } .detail-title { font-size: 16px; flex: 1 1 100%; order: -1; /* title first on phones, then the action row underneath */ } @media (min-width: 540px) { .detail-title { font-size: 18px; flex: 1 1 auto; order: 0; } } /* Vault toolbar: on a 360px-wide phone the search input + 🎲 + ⚙ * + "+ New" overflow horizontally. Drop New onto its own row below * the search bar so the four stay touch-friendly. */ .vault-search { flex-wrap: wrap; } .vault-search input { min-width: 0; flex: 1 1 60%; } .vault-new { flex: 0 0 auto; } /* Filter chip strip — a snap-scroller on phones so flicks feel right. */ .vault-chips { scroll-snap-type: x mandatory; } .vault-chip { scroll-snap-align: start; } /* Detail field actions: on narrow viewports stack the value + buttons * vertically so the username doesn't truncate behind the Copy button. */ @media (max-width: 480px) { .detail-field { grid-template-columns: 1fr; grid-template-areas: "label" "value" "copy"; } .detail-copy, .detail-reveal { align-self: end; justify-self: end; } } /* Two-pane drilldown on big screens. Keeps the vault list visible * to the left while the detail / edit / settings screen lives to * the right. The wasm SPA still re-renders #app on each navigation, * so the "two-pane" effect is just a centered max-width. The * existing per-section caps (.detail-fields, .edit-form, * .settings-section) already handle the inner sizing. */ @media (min-width: 1100px) { #app { max-width: 960px; } } /* Sticky toolbar on the vault list so the search + filter chips * stay reachable when scrolling a 1000-cipher list. */ .vault-search, .vault-chips { position: sticky; background: var(--bg); z-index: 5; } .vault-search { top: 0; padding-top: 8px; } .vault-chips { top: 60px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Empty-state text gets some breathing room. */ .vault-list .status, .settings-section .status { margin: 12px 0; } /* Avoid the iOS Safari "tap-zoom" — input font-size < 16 px causes * a focus zoom that the user has to manually pinch back out of. */ input, textarea, select, button { font-size: 16px; } /* Edit / Create form. Mirrors the login-form pattern but with extras * (textarea, custom-fields fieldset, danger button). */ .edit-form { display: flex; flex-direction: column; gap: 8px; max-width: 600px; } .edit-form input, .edit-form textarea { width: 100%; } .edit-form textarea { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; resize: vertical; } .edit-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 8px 0 0; } .edit-form legend { color: var(--fg-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 6px; } .custom-field-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-bottom: 6px; } .cf-remove { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 6px; min-width: 32px; cursor: pointer; } .form-actions { display: flex; gap: 10px; margin-top: 12px; } .form-actions button { flex: 1 1 auto; } button.secondary { background: transparent; border: 1px solid var(--border); color: var(--fg); } button.danger { background: transparent; border: 1px solid var(--error); color: var(--error); } button.danger:hover { background: rgba(255, 91, 91, 0.08); } /* Filter chips: horizontal-scroll row above the cipher list. Mirrors * the mobile Home tab's filter strip — All / Favorites / type chips * / per-folder / per-org. */ .vault-chips { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0 0 12px; margin: 0 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .vault-chip { flex: 0 0 auto; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; min-height: 32px; font-size: 12px; cursor: pointer; white-space: nowrap; } .vault-chip:hover { border-color: var(--accent); } .vault-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; } .chip-count { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--fg-dim); font-size: 11px; font-weight: 500; min-width: 16px; text-align: center; } .vault-chip.active .chip-count { background: rgba(0, 0, 0, 0.18); color: var(--accent-fg); } /* Password generator screen. */ .generator { display: flex; flex-direction: column; gap: 12px; max-width: 600px; } .gen-output { display: flex; align-items: stretch; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; } .gen-value { flex: 1 1 auto; font-family: monospace; font-size: 16px; word-break: break-all; align-self: center; user-select: all; } .gen-output button { flex: 0 0 auto; padding: 0 14px; min-height: 36px; } #gen-regen { font-size: 18px; background: transparent; border: 1px solid var(--border); color: var(--fg); } .gen-tabs { display: flex; gap: 6px; } .gen-config { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .gen-config[hidden] { display: none; } .gen-config input[type="range"] { width: 100%; margin: 0; } .gen-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; } /* Password row inside the edit form: input + 🎲 side-by-side. */ .pwd-row { display: flex; gap: 6px; align-items: stretch; } .pwd-row input { flex: 1 1 auto; } .pwd-row button { flex: 0 0 auto; padding: 0 12px; font-size: 16px; } .pwd-strength { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; font-size: 12px; color: var(--fg-dim); min-height: 16px; } .pwd-strength-bar { flex: 1 1 auto; height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .pwd-strength-fill { display: block; height: 100%; background: var(--fg-dim); transition: width 80ms ease, background-color 80ms ease; } .pwd-strength.strength-weak .pwd-strength-fill { background: var(--error); } .pwd-strength.strength-ok .pwd-strength-fill { background: #f5c542; } .pwd-strength.strength-strong .pwd-strength-fill { background: var(--success); } .detail-meta-value { color: var(--fg-dim); font-size: 12px; } /* Password history disclosure on the cipher-detail screen. */ .detail-history summary { cursor: pointer; list-style: none; } .detail-history summary::-webkit-details-marker { display: none; } .detail-history summary::before { content: "▸ "; margin-right: 4px; } .detail-history[open] summary::before { content: "▾ "; } .detail-history-list { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; } .history-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.04); font-size: 12px; } .history-row:last-child { border-bottom: none; } .history-row code { flex: 1 1 auto; font-family: monospace; } .history-date { color: var(--fg-dim); font-size: 11px; white-space: nowrap; } .history-row .detail-copy { flex: 0 0 auto; padding: 3px 8px; min-height: 24px; font-size: 11px; } /* Keyboard-shortcut overlay. Backdrop dims the page; the card sits * centered with a max-width that scales down for phones. */ .shortcuts-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .shortcuts-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto; } .shortcuts-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; } .shortcuts-header h2 { margin: 0; font-size: 16px; } .shortcuts-table { width: 100%; border-collapse: collapse; font-size: 14px; } .shortcuts-table td { padding: 8px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; } .shortcuts-table td:first-child { width: 45%; color: var(--fg-dim); } .shortcuts-table tr:last-child td { border-bottom: none; } kbd { display: inline-block; padding: 2px 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 4px; font-family: monospace; font-size: 12px; color: var(--fg); } /* Settings page — section cards + per-row entries with revoke button. */ .settings-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; max-width: 600px; } .settings-section h2 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-dim); } .settings-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .settings-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 8px; } .settings-row-body { flex: 1 1 auto; min-width: 0; } .settings-row .cipher-meta-dim { color: var(--fg-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--fg-dim); font-size: 10px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle; } .badge-trusted { background: rgba(77, 210, 141, 0.12); color: var(--success); } .badge-push { background: rgba(255, 61, 111, 0.12); color: var(--accent); } .badge-me { background: rgba(77, 142, 255, 0.16); color: #6aa6ff; } .settings-row-me { border-color: rgba(106, 166, 255, 0.4); background: rgba(106, 166, 255, 0.04); } .settings-row-clickable { cursor: pointer; transition: border-color 80ms ease; } .settings-row-clickable:hover, .settings-row-clickable:focus-visible { border-color: var(--accent); outline: none; } .ip-history { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; } .ip-history th { text-align: left; color: var(--fg-dim); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--border); } .ip-history td { padding: 6px 4px; border-bottom: 1px solid var(--border); word-break: break-all; } .json-blob { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 11px; overflow-x: auto; white-space: pre; margin: 8px 0 0; } .health-group { border-left: 2px solid var(--accent); padding-left: 10px; margin: 10px 0; } .health-group .settings-row { margin-top: 4px; } /* Bulk-select mode. Checkboxes prepend each row, no chevron, and a * sticky bottom action bar surfaces "N selected" + Delete. */ .cipher-row-selectable .cipher-icon { margin-left: 6px; } .recent-section { margin: 0 0 14px; padding: 10px 12px; background: rgba(255, 61, 111, 0.04); border: 1px solid rgba(255, 61, 111, 0.15); border-radius: 10px; } .recent-label { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .recent-section .cipher-row { background: transparent; border: none; padding: 8px 6px; min-height: 36px; } .recent-section .cipher-row + .cipher-row { border-top: 1px solid rgba(255, 255, 255, 0.04); } .cipher-row .cipher-select { flex: 0 0 auto; margin: 0; width: 18px; height: 18px; } .select-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-top: 12px; z-index: 6; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); } .select-actionbar > div { flex: 1 1 auto; color: var(--fg-dim); font-size: 13px; } .select-actionbar button { flex: 0 0 auto; padding: 6px 14px; min-height: 32px; } .status-warn { color: #f5c542; font-size: 12px; }