/* ═══════════════════════════════════════════════════════════════ dark.css — every dark-mode rule for the LLPA Show Ready Audit app. Loaded after style.css on every page as so by default it follows the phone. shared/theme.js rewrites that `media` to `all` (forced dark) or `not all` (forced light) when a person picks a theme with the toggle, and stores the choice in localStorage (`lpa-theme`). Rules here are plain — no color-scheme media wrappers — because the link's media attribute is the switch. Nested @media for widths are fine. Order matters: blocks are in the same order they had inside style.css, so the cascade is unchanged. Add new dark variants at the end of the section that owns them, or at the end of the file. ═══════════════════════════════════════════════════════════════ */ /* ── from style.css: @media (max-width: 720px) and (prefers-color-scheme: dark) ── */ @media (max-width: 720px) { .range-toggle-scroll::after { background: linear-gradient(to right, rgba(18,27,40,0), rgba(18,27,40,.94)); } } /* ── from style.css ── */ .markup-overlay { background: #05080c; } .markup-stage { background: #000; } /* --accent flips to a light blue in dark mode (see the dark block further down), so the filled Save button takes dark ink. */ .markup-btn-save { color: #0b1017; box-shadow: 0 4px 14px rgba(107,176,226,.3); } .markup-btn-save:hover { background: #8cc4ec; } .dictate-btn.is-listening { background: rgba(248,113,113,.14); } /* ── from style.css ── */ .achv-locked .achv-medal { background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), inset 0 3px 12px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); } .achv-locked .achv-medal-img { filter: grayscale(1) brightness(.35) contrast(1.1) opacity(.55); } .achv-locked .achv-item-title { color: rgba(231,236,243,.72); } .achv-locked .achv-item-desc { color: rgba(231,236,243,.5); } .achv-item-locked-tag { color: rgba(231,236,243,.45); } .achv-ring-track { stroke: rgba(255,255,255,.12); } /* ── from style.css ── */ :root { /* Tells the UA to render form controls, scrollbars and the native date picker dark. Without it the date input in the audit header stays a bright white block. */ color-scheme: dark; --text: #e7ecf3; --text-secondary: #9aa6b6; /* AA on the dark card surface below */ /* Accent as TEXT needs to be light on a dark background — #2870a0 lands around 3:1 there. Filled controls compensate by switching to dark ink (see .btn-yes.active etc. further down). */ --accent: #6bb0e2; --accent-light: rgba(107,176,226,.14); --amber-text: #fbbf24; --green-text: #4ade80; --red: #f87171; /* Glass over a dark backdrop is a light film, not a white one. */ --glass: rgba(255,255,255,.055); --glass-strong: rgba(255,255,255,.075); --glass-border: rgba(255,255,255,.1); --glass-shadow: 0 8px 40px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); } body { background: linear-gradient(160deg, #0e1520 0%, #121b28 35%, #0f1722 70%, #101a26 100%); background-attachment: fixed; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); } /* ── Recessed fields and neutral chips ──────────────────────── Everything below used a rgba(0,0,0,.0x) wash to read as "inset" on a white page. On a dark page the same wash is invisible, so each one flips to a light film of the same weight. */ .notes-input, .issue-notes, .bug-modal-textarea, .issue-select, .issue-btn, .severity-btn, .photo-upload-btn, .note-toggle, .summary-stat, .receipt-metric, .problem-row, .issue-zone, .open-issue-notes, .open-issue-input { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: var(--text); } .notes-input:focus, .issue-notes:focus, .admin-add .auth-input:focus, .name-input:focus, .bulk-textarea:focus, .table-filter:focus, .open-issue-input:focus { background: rgba(255,255,255,.1); } .issue-btn:hover, .severity-btn:hover, .photo-upload-btn:hover, .note-toggle:hover, .btn-rating:hover, .summary-close:hover, .summary-btn-edit:hover, .restore-banner-dismiss:hover { background: rgba(255,255,255,.11); } .question-row:hover { background: rgba(255,255,255,.025); } .question-num, .chip-blank, .btn-print, .range-toggle, .summary-progress-track, .summary-btn-edit, .summary-close, .restore-banner-dismiss, .score-delta-flat, .badge, .bulk-box code, .trend-bar, .audit-calendar th, .cal-cell.cal-none, .issue-bar, .health-meter { background: rgba(255,255,255,.08); } .btn-print, .summary-btn-edit, .summary-close { color: var(--text); border-color: rgba(255,255,255,.14); } .btn-print:hover { background: rgba(255,255,255,.13); } /* .btn-quiet darkens itself on light page surfaces (main/.dash-main); on a dark page that same wash is invisible, so put the light film back. */ main .btn-quiet, .dash-main .btn-quiet { background: rgba(255,255,255,.09); color: var(--text); border-color: rgba(255,255,255,.15); } main .btn-quiet:hover, .dash-main .btn-quiet:hover { background: rgba(255,255,255,.16); } .trend-bar .bar-fill { background: rgba(255,255,255,.16); } .score-badge { background: rgba(255,255,255,.14); } /* ── Solid cards and modals ───────────────────────────────── */ .bug-modal-card, .cal-cell, .ref-lightbox-close { background: #18212e; color: var(--text); } .ref-lightbox-close { border-color: rgba(255,255,255,.16); } .summary-overlay { background: rgba(0,0,0,.62); } .summary-footer { background: rgba(16,23,33,.86); } .footer-more-menu { background: #18212e; border-color: rgba(255,255,255,.14); } .campus-total-stat { background: rgba(255,255,255,.05); } .history-header { background: rgba(255,255,255,.05); } .spot-check-toggle { background: rgba(255,255,255,.14); color: var(--text); } .spot-check-toggle:hover { background: rgba(255,255,255,.2); } /* Admin inputs were near-opaque white panels. */ .admin-add .auth-input, .name-input, .bulk-textarea, .table-filter { background: rgba(255,255,255,.07); color: var(--text); } /* The specular sheen on cards reads as a grey smear over a dark surface; dial it back to a hairline highlight. */ .audit-section::before { background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 55%); } .audit-card::before { background: linear-gradient(135deg, rgba(255,255,255,.045) 0%, transparent 60%); } /* ── Filled controls take dark ink ──────────────────────────── --accent and --red are lightened above so they work as text; as a FILL they now need dark type rather than white to stay readable. */ .btn-yes.active, .btn-no.active, .btn-rating.active, .btn-export, .btn-primary, .issue-btn.active, .severity-btn.active { color: #0c131d; } .btn-export, .btn-primary { background: var(--accent); } .btn-export:hover, .btn-primary:hover { background: #8cc4ea; } .nav-tab.active { color: #0c131d; } /* Amber/warning surfaces were tuned for a white page. */ .system-warning { background: rgba(69,45,10,.85); color: #fde68a; } .btn-next-open { background: rgba(245,158,11,.18); color: #fbbf24; } .btn-next-open:hover { background: rgba(245,158,11,.28); } .summary-unrouted-warn { background: rgba(245,158,11,.16); color: #fbbf24; } .restore-banner { background: rgba(255,255,255,.06); } .bug-modal-msg.error { color: #fca5a5; } .bug-modal-msg.success { color: #6ee7b7; } .bug-modal-msg.warning { color: #fbbf24; } /* Answered-row rails need more alpha to register on a dark card. */ .question-row.answered-yes { background: rgba(107,176,226,.09); box-shadow: inset 3px 0 0 0 rgba(107,176,226,.75); } .question-row.answered-no { background: rgba(248,113,113,.09); box-shadow: inset 3px 0 0 0 rgba(248,113,113,.75); } /* ── from style.css ── */ .focus-overlay { background: rgba(14,21,32,.97); } .focus-close { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); } .focus-close:hover { background: rgba(255,255,255,.14); } .focus-progress { background: rgba(255,255,255,.12); } .focus-card { background: #18212e; border-color: rgba(255,255,255,.1); } .focus-card.past-threshold { box-shadow: 0 18px 50px rgba(0,0,0,.6); } .focus-stamp { background: rgba(24,33,46,.9); } .focus-ref { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .focus-ref:hover { background: rgba(255,255,255,.09); } .focus-ref-img { background: rgba(255,255,255,.08); } /* --accent is lightened for dark surfaces, so filled controls take dark ink. */ .focus-ans-yes, .focus-done-btn { color: #0e1520; box-shadow: 0 8px 22px rgba(107,176,226,.2); } .focus-ans-yes[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--accent-light), 0 8px 22px rgba(107,176,226,.2); } .focus-ans-na { border-color: rgba(255,255,255,.2); } .focus-ans-na:hover { background: rgba(255,255,255,.07); } .focus-ans-na[aria-pressed="true"] { background: #9aa6b6; border-color: #9aa6b6; color: #0e1520; } .focus-ans-rate { border-color: rgba(255,255,255,.2); } .focus-ans-rate:hover { background: rgba(255,255,255,.07); } .focus-nav { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); } .focus-nav:hover { background: rgba(255,255,255,.14); } .focus-resume { background: var(--accent); color: #0e1520; box-shadow: 0 10px 30px rgba(0,0,0,.5); } /* ── from style.css ── */ .quick-action, .top-cards .quick-action { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } .quick-action .achv-card-icon { background: rgba(214,158,46,.2); } .audit-card-glyph { background: rgba(112,152,192,.16); color: #9cc4ea; } .audit-card-meter { background: rgba(255,255,255,.1); } .audit-card-meter.meter-band-none { background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 6px, transparent 6px 10px); } .issue-type-grid .issue-btn { background: rgba(255,255,255,.05); } .severity-seg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } .empty-state::before { opacity: .7; } .week-hero { box-shadow: 0 16px 40px rgba(0,0,0,.45); } /* ── from style.css ── */ .audit-section.is-complete > .section-header { background: rgba(34,197,94,.08); } .audit-section.is-complete > .section-header::after { border-color: rgba(255,255,255,.55); } .phrase-chip { background: rgba(127,209,255,.1); border-color: rgba(127,209,255,.3); color: #9cc4ea; } .dictate-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); } .question-kind { color: #9cc4ea; } .audit-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } .outline-item:hover { background: rgba(255,255,255,.06); } .outline-track { background: rgba(255,255,255,.1); } .summary-ring-track { stroke: rgba(255,255,255,.12); } .section-header h2 { color: #dbe6f2; } .audit-section.is-complete > .section-header h2::before { color: #4ade80; } /* ── Appearance toggle ── */ .theme-toggle.theme-toggle--menu { color: var(--text); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }