/* xstash theme — ports the v1 design language onto PicoCSS v2. * * Load order matters: this file is linked AFTER pico.min.css, so equal-specificity rules win by * source order and the --pico-* overrides below repaint Pico's components in our palette. The theme * is selected by an explicit data-theme on (set pre-paint in base.html); Pico's own * prefers-color-scheme fallback never fires because data-theme is always present. */ /* ── Inter (self-hosted variable font — no external fetch) ───────────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-variable.woff2") format("woff2"); } /* ── Design tokens ──────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { --bg: #e6e6e6; --text: #000612; --dark: #011127; --accent: #009cff; /* bright brand accent — links, borders, focus rings, hairline accents */ --accent-hover: #0088e0; /* AA-safe fill for white text on accent (buttons/toasts) — #009cff fails 4.5:1 with white */ --accent-fill: #0070b8; --accent-fill-hover: #005f9e; --mint: #2df4dd; --white: #ffffff; --gray-100: #f5f5f5; --gray-200: #d9d9d9; --gray-300: #bfbfbf; /* hairline borders only — NOT text (fails contrast on light surfaces) */ --muted-text: #5a6472; /* legible muted text on light surfaces (gray-300 is ~1.5:1) */ --error: #e53935; --radius: 8px; --radius-lg: 12px; --shadow: 0 2px 8px rgba(0, 6, 18, 0.08); --shadow-lg: 0 8px 24px rgba(0, 6, 18, 0.12); --transition: 0.2s ease; --nav-bg: #011127; /* the sticky header is a dark surface in BOTH themes (brand-consistent) */ --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :root[data-theme="dark"] { --bg: #0d1117; --text: #e6edf3; --dark: #e6edf3; /* headings flip to light; the header keeps its own --nav-bg below */ --white: #161b22; --gray-100: #21262d; --gray-200: #30363d; --gray-300: #8b949e; --muted-text: #8b949e; /* already AA on dark surfaces (~5:1) */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --nav-bg: #161b22; /* sits above the #0d1117 page; light links stay readable */ } /* ── Pico variable bridge (our tokens → Pico's --pico-*) ────────────────────────────────────── */ :root, :root[data-theme="light"], :root[data-theme="dark"] { --pico-font-family: var(--font-stack); --pico-font-family-sans-serif: var(--font-stack); --pico-background-color: var(--bg); --pico-color: var(--text); --pico-h1-color: var(--dark); --pico-h2-color: var(--dark); --pico-h3-color: var(--dark); --pico-h4-color: var(--dark); --pico-h5-color: var(--dark); --pico-h6-color: var(--dark); --pico-border-radius: var(--radius); --pico-box-shadow: var(--shadow); /* primary ramp — the WHOLE ramp, so links/buttons/active all use our accent (not Pico azure) */ --pico-primary: var(--accent); /* link/active color stays bright on surfaces */ --pico-primary-background: var(--accent-fill); /* button fill carries white text → AA-safe */ --pico-primary-hover: var(--accent-hover); --pico-primary-hover-background: var(--accent-fill-hover); --pico-primary-focus: rgba(0, 156, 255, 0.25); --pico-primary-inverse: #ffffff; --pico-primary-underline: rgba(0, 156, 255, 0.5); /* surfaces + text */ --pico-card-background-color: var(--white); --pico-card-sectioning-background-color: var(--gray-100); --pico-card-border-color: var(--gray-200); --pico-card-box-shadow: var(--shadow); --pico-muted-color: var(--muted-text); --pico-muted-border-color: var(--gray-200); /* form elements */ --pico-form-element-background-color: var(--gray-100); --pico-form-element-border-color: var(--gray-200); --pico-form-element-color: var(--text); --pico-form-element-active-background-color: var(--gray-100); --pico-form-element-active-border-color: var(--accent); --pico-form-element-focus-color: rgba(0, 156, 255, 0.25); --pico-form-element-placeholder-color: var(--muted-text); } /* The container is wider than Pico's default breakpoints cap it (brand layout = 1280px). */ .container, main.container { max-width: 1280px; } /* ── Header / navigation (bespoke; not a Pico component) ────────────────────────────────────── */ .nav-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 56px; margin: 0; background: var(--nav-bg); box-shadow: 0 2px 12px rgba(1, 17, 39, 0.2); } .nav-header .nav-logo { display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-weight: 700; letter-spacing: 0.02em; } .nav-header .nav-logo img { height: 30px; width: auto; } .nav-header .nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .nav-header .nav-links a { color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: color var(--transition); } .nav-header .nav-links a:hover, .nav-header .nav-links a.active { color: var(--mint); } .nav-header .nav-links .disabled { color: rgba(255, 255, 255, 0.3); cursor: not-allowed; } .nav-header .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-header .nav-actions form { margin: 0; } /* ── Icon buttons + button variants ─────────────────────────────────────────────────────────── */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; /* override PicoCSS button padding so fixed size works */ border: none; border-radius: var(--radius); background: var(--gray-100); color: var(--dark); cursor: pointer; transition: all var(--transition); font-size: 1.05rem; line-height: 1; } .btn-icon:hover { background: var(--accent); color: #ffffff; transform: translateY(-1px); } /* Coloured icon-button variants — use these classes instead of inline color: styles so that the hover state can properly override them (inline styles beat class selectors). */ .btn-icon--primary { color: var(--accent); } .btn-icon--primary:hover { background: var(--accent); color: #fff; } .btn-icon--danger { color: var(--error); } .btn-icon--danger:hover { background: var(--error); color: #fff; } .btn-icon--sm { width: 30px; height: 30px; font-size: 0.8rem; } .nav-header .btn-icon { background: rgba(255, 255, 255, 0.1); color: #ffffff; } /* theme-toggle: show the icon for the mode you'd switch TO (no JS needed; pure data-theme) */ .theme-toggle .moon { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .moon { display: inline; } .btn-primary, .btn-outline, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-primary { background: var(--accent-fill); color: #ffffff; box-shadow: 0 2px 8px rgba(0, 156, 255, 0.25); } .btn-primary:hover { background: var(--accent-fill-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 156, 255, 0.35); } .btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: #ffffff; } .btn-danger { background: var(--error); color: #ffffff; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.25); } .btn-danger:hover { background: #c62828; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(229, 57, 53, 0.35); } .btn-danger:disabled { background: var(--gray-200); color: var(--gray-300); box-shadow: none; transform: none; cursor: not-allowed; } /* ── Cards ──────────────────────────────────────────────────────────────────────────────────── */ .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem; transition: box-shadow var(--transition); } .card:hover { box-shadow: var(--shadow-lg); } /* ── Status vcards (left-border accent + pulsing dot) ───────────────────────────────────────── */ .vcard-row { display: flex; flex-direction: row; gap: 0.75rem; flex-wrap: wrap; } .vcard { flex: 1 1 200px; min-width: 180px; max-width: 320px; background: var(--gray-100); border-radius: var(--radius); padding: 0.75rem 1rem; border-left: 3px solid var(--gray-300); transition: box-shadow var(--transition); display: flex; flex-direction: column; } .vcard:hover { box-shadow: var(--shadow); } .vcard-ok { border-left-color: var(--mint); } .vcard-err { border-left-color: var(--error); } .vcard-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.35rem; } .vcard-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dot-green { background: var(--mint); box-shadow: 0 0 6px var(--mint); animation: pulse-dot 2s ease-in-out infinite; } .dot-red { background: var(--error); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .vcard-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--muted-text); } .vcard--compact { gap: 0.25rem; } .vcard-row--my { margin: 0.5rem 0; } .vcard--actions { margin-left: auto; justify-content: center; } /* ── Badges ─────────────────────────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; line-height: 1.4; white-space: nowrap; } .badge-ok { background: rgba(45, 244, 221, 0.15); color: #0b9e8c; border: 1px solid rgba(45, 244, 221, 0.35); } :root[data-theme="dark"] .badge-ok { color: var(--mint); } .badge-muted { background: var(--gray-100); color: var(--muted-text); border: 1px solid var(--gray-200); } .badge-accent { background: rgba(0, 156, 255, 0.12); color: var(--accent-fill); border: 1px solid rgba(0, 156, 255, 0.3); } :root[data-theme="dark"] .badge-accent { color: var(--accent); /* the bright accent reads fine on the dark badge tint */ } .badge-admin { background: rgba(187, 128, 255, 0.15); color: #bb80ff; border: 1px solid rgba(187, 128, 255, 0.3); } .badge-user { background: rgba(63, 185, 80, 0.12); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.3); } .badge-err { background: rgba(229, 57, 53, 0.08); color: var(--error); border: 1px solid rgba(229, 57, 53, 0.3); } /* ── Progress bar (the per-pattern fetch progress) ──────────────────────────────────────────── */ .bar { width: 100%; height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--mint); border-radius: 999px; transition: width var(--transition); } /* ── Form focus ring (matches Pico but keeps the exact 3px glow on bespoke inputs) ──────────── */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--dark); margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.03em; } .form-group input { width: 100%; padding: 0.7rem 1rem; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-family: inherit; transition: all var(--transition); } .form-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 156, 255, 0.15); } .form-group input::placeholder { color: var(--muted-text); } .form-group select { width: 100%; padding: 0.7rem 1rem; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-family: inherit; transition: all var(--transition); } input[type="file"] { padding: 0.5rem 0; } .form-group-0 { margin-bottom: 0; } /* ── Modal ──────────────────────────────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0, 6, 18, 0.6); backdrop-filter: blur(4px); } .modal-card { width: 100%; max-width: 420px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2rem; position: relative; animation: modalIn 0.2s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-card--md { max-width: 440px; } .modal-card--lg { max-width: 480px; } .modal-title { margin: 0 0 1.25rem; font-size: 1.1rem; } .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; } /* ── Toasts ─────────────────────────────────────────────────────────────────────────────────── */ #toast-container { position: fixed; top: 72px; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { pointer-events: auto; min-width: 280px; max-width: 420px; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: #ffffff; box-shadow: 0 4px 16px rgba(0, 6, 18, 0.2); cursor: pointer; animation: toastIn 0.3s ease forwards; } .toast.toast-exit { animation: toastOut 0.3s ease forwards; } .toast-success { background: #1b9e5e; } .toast-error { background: var(--error); } .toast-info { background: var(--accent-fill); } @keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* ── Small helpers ──────────────────────────────────────────────────────────────────────────── */ .text-muted { color: var(--muted-text); } .text-accent { color: var(--accent); } .text-mint { color: var(--mint); } .text-error { color: var(--error); } .mono { font-family: ui-monospace, "Courier New", monospace; font-size: 0.85em; word-break: break-all; } .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; } .scroll-x { overflow-x: auto; } .section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-text); margin: 1.75rem 0 0.6rem; } summary.section-label { cursor: pointer; user-select: none; } .label-check { cursor: pointer; } .form-m0 { margin: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Page tabs ──────────────────────────────────────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 1px solid var(--gray-200); margin-bottom: 1.5rem; } .tab { padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-text); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: var(--transition); margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ── Utility classes ────────────────────────────────────────────────────────────────────────── */ /* Typography — headings */ .page-title { margin: 0; font-size: 1.6rem; } .section-head { margin: 0; font-size: 1.3rem; } .subsection-head { margin: 0; font-size: 1.2rem; } .card-title { margin: 0 0 1rem; font-size: 1rem; } .login-title { font-size: 1.4rem; margin-top: 0; } /* Spacing (declared after semantic classes so these always win when combined) */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-xs { margin-top: 0.25rem; } .mt-sm { margin-top: 0.5rem; } .mt-md { margin-top: 0.75rem; } .mt-lg { margin-top: 1rem; } .mb-sm { margin-bottom: 0.5rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 1.5rem; } .section-gap { margin-top: 3rem; } /* Typography — text */ .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.8rem; } .font-bold { font-weight: 600; } .btn-block { width: 100%; } /* Layout */ .button-group { display: flex; gap: 0.5rem; align-items: center; } .action-buttons { display: flex; gap: 0.4rem; justify-content: flex-end; } .form-inline { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .form-grid-3 { display: grid; grid-template-columns: 130px 1fr 90px; gap: 0.75rem; } /* Card variants (declared after .card so equal-specificity rules here win) */ .card-no-padding { padding: 0; } .card-accent-left { border-left: 3px solid var(--mint); } .card-empty-state { text-align: center; padding: 3rem 1.5rem; } /* Table helpers */ .cell-shrink { width: 1px; white-space: nowrap; } .cell-truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } /* Compact table rows inside card-no-padding containers */ .card-no-padding table th, .card-no-padding table td { padding: 0.35rem 0.75rem; font-size: 0.875rem; } /* Components */ .icon-muted { display: block; opacity: 0.3; margin-bottom: 0.75rem; } .secret-display { background: var(--gray-100); padding: 0.6rem; border-radius: var(--radius); user-select: all; } .qr-code { max-width: 200px; } .country-input { text-transform: uppercase; max-width: 80px; } /* ── Inline alerts (success / error banners) ────────────────────────────────────────────────── */ .alert { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 1.25rem; } .alert svg { flex-shrink: 0; } .alert-ok { background: rgba(45, 244, 221, 0.1); color: #0b9e8c; border: 1px solid rgba(45, 244, 221, 0.3); } :root[data-theme="dark"] .alert-ok { color: var(--mint); } .alert-err { background: rgba(229, 57, 53, 0.08); color: var(--error); border: 1px solid rgba(229, 57, 53, 0.3); } /* ── Settings page ──────────────────────────────────────────────────────────────────────────── */ .settings-file-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; gap: 0.35rem; } .settings-file { margin-bottom: 1rem; } .settings-file-head .mono { font-weight: 600; font-size: 0.95rem; } /* ── Quick-links row (dashboard shortcuts) ──────────────────────────────────────────────────── */ .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; padding: 0; list-style: none; } .ql-card { display: flex; align-items: center; gap: 0.75rem; background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--gray-200); padding: 0.9rem 1.1rem; text-decoration: none; color: var(--text); transition: all var(--transition); } .ql-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); } .ql-card svg { flex-shrink: 0; color: var(--accent); } .ql-card strong { display: block; font-size: 0.9rem; font-weight: 600; } .ql-card span { display: block; font-size: 0.78rem; color: var(--muted-text); margin-top: 0.1rem; } /* ── Sign-in: big logo beside the form (PicoCSS .grid, hides logo on mobile) ────────────────── */ .login-grid { margin: 12vh auto 0; max-width: 820px; align-items: center; } .login-logo { display: flex; align-items: center; justify-content: center; } .login-logo img { max-width: 300px; width: 100%; height: auto; } /* ── Responsive ─────────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .nav-header { padding: 0 1rem; } .nav-header .nav-links { gap: 1rem; } .login-logo { display: none; } }