/* ABOUTME: Dark mode styles for all Writeback pages. Activated by */ /* data-theme="dark" on , toggled via header icon or OS preference. */ /* Special Elite — typewriter brand font for the page banner. */ @font-face { font-family: "Special Elite"; src: url("/static/fonts/SpecialElite-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } /* Asap — default UI font for the entire app. Variable font with both wdth (75-125) and wght (100-900) axes — letting us tune the weight slightly under the conventional 400 for a lighter, more elegant feel. */ @font-face { font-family: "Asap"; src: url("/static/fonts/Asap-Variable.woff2") format("woff2-variations"), url("/static/fonts/Asap-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Asap"; src: url("/static/fonts/Asap-Italic-Variable.woff2") format("woff2-variations"), url("/static/fonts/Asap-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; } /* Liberation Serif — default font for document body content (when the submitted document does not specify its own font). */ @font-face { font-family: "Liberation Serif"; src: url("/static/fonts/LiberationSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Liberation Serif"; src: url("/static/fonts/LiberationSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Liberation Serif"; src: url("/static/fonts/LiberationSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Liberation Serif"; src: url("/static/fonts/LiberationSerif-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Meslo LG L — monospaced (Menlo lookalike) for code, pre, kbd, and the invite-URL input. */ @font-face { font-family: "Meslo LG L"; src: url("/static/fonts/MesloLGL-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Meslo LG L"; src: url("/static/fonts/MesloLGL-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Meslo LG L"; src: url("/static/fonts/MesloLGL-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Meslo LG L"; src: url("/static/fonts/MesloLGL-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Default UI font for the entire app. Asap variable, weight 350 — slightly thinner than the conventional 400 for a lighter, more elegant feel. The `html body` selector (specificity 2) beats per-template inline `body { font-family: ... }` rules (specificity 1) so individual templates don't need to be edited. */ html body { font-family: "Asap", system-ui, -apple-system, sans-serif; font-weight: 350; } /* Form elements do not inherit font-family from their parent by browser default — they fall back to platform system fonts. Force them to inherit so reviewer textareas, search inputs, dropdowns, and buttons all render in Asap. Per-template `.foo textarea` rules with class-level specificity would otherwise win, so this base-style reset uses !important. The monospace invite-URL input is restored to Meslo via its own !important rule below. */ input, textarea, select, button { font-family: inherit !important; } /* Document body content + annotation quote excerpts use Liberation Serif so they read as continuous with the source document. Written comment bodies (.feedback-text, .comment-text) intentionally inherit the default Asap so the displayed comments match the font the reviewer typed them in. Submitted documents that specify their own font override .doc-content via inline style. */ html body .doc-content, html body .feedback-excerpt, html body .comment-excerpt, html body blockquote { font-family: "Liberation Serif", Georgia, serif; } /* Monospaced contexts: code, pre, kbd, and inputs typed as monospace (the invite URL share box). The form-element reset above applies `font-family: inherit !important` to all inputs, so this rule must also use !important to win for the invite-box input. */ html body pre, html body code, html body kbd, html body samp { font-family: "Meslo LG L", Menlo, Consolas, "Courier New", monospace; } html body .invite-box input[type="text"], html body input[type="datetime-local"], html body input[type="date"], html body input[type="time"] { font-family: "Meslo LG L", Menlo, Consolas, "Courier New", monospace !important; } html body input[type="datetime-local"], html body input[type="date"], html body input[type="time"] { font-size: 0.85rem !important; } /* Theme is forced per interface via data-theme on in each template. These rules pin the OS-level colour-scheme so scrollbars and form controls match without JavaScript. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Reviewer (light) interface: paper-cream background (Solarized base3 #f5f4f0) on both html and body so it covers the full viewport even on pages with a narrow centred body. The [data-theme="light"] body selector outweighs per-template inline body { ... } styles by specificity, so individual templates don't need any class additions. */ html[data-theme="light"], [data-theme="light"] body { background: #f5f4f0; } /* Admin (dark) interface: pin html background too so narrow centred body layouts don't expose the user-agent default white in the side margins. #192041 — midpoint between the original neutral navy #1a1a2e and the richer Tailwind blue-950 #172554. Warmer/bluer than neutral navy but not so saturated that it competes with the #2563eb brand banner. */ html[data-theme="dark"] { background: #192041; } /* Document body content (review view, my-comments) defaults to Liberation Serif. Submitted documents that specify their own font override this via inline style or class. */ .doc-content { font-family: "Liberation Serif", Georgia, serif; } [data-theme="dark"] body { background: #192041; color: #e0e0e0; } [data-theme="dark"] a { color: #7cacf8; } [data-theme="dark"] a:visited { color: #a88fd8; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #f0f0f0; } /* Form inputs */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #2a2a3e; color: #e0e0e0; border: 1px solid #444; } [data-theme="dark"] input[readonly] { background: #252538; color: #bbb; } [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } [data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit { color: #e0e0e0; } [data-theme="dark"]:root { color-scheme: dark; } /* Tables */ /* Tables — keep header and hover row in the same warm blue family as the #192041 page bg and #222a4f session-card bg. The previous neutral navy (#2a2a3e / #252538) was a light-mode carryover and looked grey on the warmer surroundings. */ [data-theme="dark"] th { background: #475569; color: #fff; font-weight: 600; } [data-theme="dark"] td { border-bottom-color: #2e3866; } [data-theme="dark"] tr:hover { background: #2c3768; } /* Dashboard session-card boxes default to a white background; override to a dark surface in dark mode. The card bg sits one tint lighter than the page bg #192041 so cards are clearly distinct, and the border is pulled from the same blue family but bright enough to be prominent rather than blending into the card. */ [data-theme="dark"] .session-card { background: #222a4f !important; border-color: #4a5a8e !important; border-width: 1.5px !important; color: #e0e0e0 !important; } [data-theme="dark"] .session-card:hover { border-color: #6a82c0 !important; box-shadow: 0 1px 6px rgba(74, 90, 142, 0.35) !important; } [data-theme="dark"] .session-meta { color: #94a3b8 !important; } /* Buttons — primary. Tailwind blue-700 #1d4ed8 fill for buttons that have no inline background (red destructive / grey revert buttons keep their own colours via inline styles, which beat this rule on specificity). Delineation comes from a 1px translucent-white outline rather than a fixed blue border so it works on any button colour without clashing. */ [data-theme="dark"] button, [data-theme="dark"] .actions a { background: #1d4ed8; color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 600; } [data-theme="dark"] button:hover, [data-theme="dark"] .actions a:hover { background: #2563eb; border-color: rgba(255, 255, 255, 0.45); } [data-theme="dark"] button.revert { background: #555 !important; } [data-theme="dark"] button:disabled { background: #444 !important; color: #888 !important; } /* State badges — per-state dark mode overrides. The previous generic #2a2a5e fallback collapsed all states to one navy pill, which on the warm #192041/#222a4f card bg looked like a smudge. Each state now has its own saturated dark-mode pill in the same family as its light-mode colour, but bright enough to clearly punch out from the card. */ [data-theme="dark"] .state-setup { background: #374151 !important; color: #d1d5db !important; } [data-theme="dark"] .state-registration_open { background: #0c4a6e !important; color: #7dd3fc !important; } [data-theme="dark"] .state-review_open { background: #14532d !important; color: #86efac !important; } [data-theme="dark"] .state-in_session { background: #78350f !important; color: #fcd34d !important; } [data-theme="dark"] .state-moderation { background: #831843 !important; color: #f9a8d4 !important; } [data-theme="dark"] .state-released { background: #4338ca !important; color: #c7d2fe !important; } [data-theme="dark"] .state-archived { background: #374151 !important; color: #9ca3af !important; } /* "moderated" badge — amber pill on the registrations / submissions tables. Light mode is cream-on-brown; dark mode is muted brown-on-deep-brown so the pill reads as a subtle annotation rather than a glowing alert. */ [data-theme="dark"] .badge-moderated { background: #3a2a14 !important; color: #d4a85c !important; } /* Invite box */ [data-theme="dark"] .invite-box { background: #252e58 !important; border: 2px solid #6a82c0 !important; box-shadow: 0 0 0 1px rgba(106, 130, 192, 0.15) !important; } /* The invite URL input itself — no general input[type=text] dark override exists, so without this it shows browser default white on white. */ [data-theme="dark"] .invite-box input[type="text"] { background: #1e2550 !important; color: #cbd5e1 !important; border: 1px solid #3a4480 !important; } /* The helper text inside the invite box ("Share this URL...") is inline-styled #555 in the template — barely readable on the dark surface. Bump to a light slate. */ [data-theme="dark"] .invite-box p { color: #cbd5e1 !important; } /* The "Copied to clipboard" feedback is inline-styled #16a34a — dark green on dark navy is invisible. Brighten to a vivid mint. */ [data-theme="dark"] #copy-feedback { color: #86efac !important; } /* Error / banner */ [data-theme="dark"] .error { background: #3e1a1a !important; color: #f8a0a0 !important; } [data-theme="dark"] .banner { background: #3e3218 !important; border-color: #6b5a2a !important; color: #e0d0a0 !important; } /* Meta text */ [data-theme="dark"] .meta, [data-theme="dark"] .empty { color: #999 !important; } /* Document content (review view) */ [data-theme="dark"] .doc-content { background: #252538; border-color: #3a3a4e; color: #ddd; } /* Admin preview override: when an admin previews a participant's submission from inside the dark admin chrome, the document itself should look like paper (cream) — not the dark surface. The preview-paper class is added by the inline preview render in internal/approval/handlers.go. For SVG docs with their own background, the SVG image overlays the cream wrapper naturally; for SVGs with transparent backgrounds, cream shows through. */ [data-theme="dark"] .doc-content.preview-paper { background: #f5f4f0 !important; color: #1a1a2e !important; border: 1px solid #6a5a3a !important; } /* Quoted text excerpt in moderation view (HTML annotations) */ [data-theme="dark"] .feedback-excerpt { background: #252538 !important; border-left-color: #4a4a5e !important; color: #c0c0c0 !important; } /* Feedback item card */ [data-theme="dark"] .feedback-item { background: #1f1f33; border-color: #3a3a4e !important; } [data-theme="dark"] .feedback-item.removed { background: #1a1a2a !important; } /* Crop wrapper preserves the SVG's own background; no override. */ /* Reject / un-reject icon buttons — transparent background by default, coloured glyph, soft tinted hover. Overrides the generic dark button rule. */ [data-theme="dark"] .reject-toggle { background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .reject-toggle.reject { color: #f87171 !important; } [data-theme="dark"] .reject-toggle.reject:hover { background: #3e1a1a !important; border-color: #7f1d1d !important; } [data-theme="dark"] .reject-toggle.unreject { color: #4ade80 !important; } [data-theme="dark"] .reject-toggle.unreject:hover { background: #14301c !important; border-color: #166534 !important; } /* Annotation bands */ [data-theme="dark"] .ann-sentence:hover { background: rgba(120, 160, 255, 0.15); } /* Checkboxes */ [data-theme="dark"] .checkbox { color: #ccc; } [data-theme="dark"] input[type="checkbox"] { accent-color: #7cacf8; } /* Code elements */ [data-theme="dark"] code { background: #2a2a3e; color: #c0c0c0; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; width: 1.8rem; height: 1.8rem; font-size: 1rem; cursor: pointer; z-index: 9999; line-height: 1; padding: 0; color: #fff; } .theme-toggle:hover { background: rgba(255,255,255,0.15) !important; } /* Banner dark mode — keep the bright #2563eb brand blue from light mode. Against a dark page background it pops as a clear brand bar rather than blending into the navigation chrome. */ [data-theme="dark"] #wb-banner { background: #2563eb !important; } /* Auth pages: centred card layout for login + registration landing. Reviewer-side (register_landing) inherits the cream page background via [data-theme="light"]; admin-side (login.html) inherits the dark page background via [data-theme="dark"]. No explicit background here — the card itself sits on the page with a subtle shadow. */ body.auth-page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; margin: 0; padding-top: 6rem; padding-bottom: 4rem; font-family: system-ui, sans-serif; } body.auth-page .auth-card { background: #fff; border-radius: 0.75rem; box-shadow: 0 4px 24px rgba(30, 60, 120, 0.12); padding: 2rem 2.5rem; width: 100%; max-width: 26rem; box-sizing: border-box; } body.auth-page .auth-card h1 { margin: 0 0 1.25rem 0; font-size: 1.5rem; color: #1e3a8a; text-align: center; } body.auth-page .auth-card label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; } body.auth-page .auth-card input[type="email"] { width: 100%; padding: 0.6rem 0.75rem; font-size: 1rem; border: 1px solid #cbd5e1; border-radius: 0.4rem; box-sizing: border-box; margin-bottom: 1rem; } body.auth-page .auth-card input[type="email"]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } body.auth-page .auth-card button { width: 100%; padding: 0.7rem 1rem; font-size: 1rem; background: #2563eb; color: #fff; border: none; border-radius: 0.4rem; cursor: pointer; font-weight: 600; } body.auth-page .auth-card button:hover { background: #1d4ed8; } body.auth-page .auth-card .message { padding: 0.75rem 1rem; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 0.4rem; margin-bottom: 1rem; font-size: 0.9rem; } body.auth-page .auth-card .message.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } body.auth-page .auth-card .helper { font-size: 0.85rem; color: #64748b; margin: 0 0 1rem 0; text-align: center; } /* Dark mode auth pages */ [data-theme="dark"] body.auth-page { background: #1a1a2e; } [data-theme="dark"] body.auth-page .auth-card { background: #252538; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] body.auth-page .auth-card h1 { color: #93c5fd; } [data-theme="dark"] body.auth-page .auth-card input[type="email"] { background: #2a2a3e; color: #e0e0e0; border-color: #3a3a4e; } [data-theme="dark"] body.auth-page .auth-card input[type="email"]:focus { border-color: #7cacf8; box-shadow: 0 0 0 3px rgba(124, 172, 248, 0.15); } [data-theme="dark"] body.auth-page .auth-card .message { background: #14301c; border-color: #166534; color: #86efac; } [data-theme="dark"] body.auth-page .auth-card .message.error { background: #3e1a1a; border-color: #7f1d1d; color: #fca5a5; } [data-theme="dark"] body.auth-page .auth-card .helper { color: #94a3b8; }