/* ══════════════════════════════════════════════════════════════════════════ DANFLIX SHARED THEME Single source of truth for color, type, and the topbar so every page — admin and public — looks and behaves the same way. Light is the default; dark is opt-in via [data-theme="dark"] on (see theme.js). Backward-compatible aliases are included for every variable name the older per-page stylesheets used (--panel, --text-dim, etc.) so those pages can drop their own :root block and pick up this palette without rewriting every rule that references them. ══════════════════════════════════════════════════════════════════════════ */ :root { --font-body: 'Inter', sans-serif; --font-display: 'VT323', monospace; --font-mono: 'JetBrains Mono', monospace; /* ── core surfaces ── */ --bg: #f4f2ef; --surface: #ffffff; --surface2: #f9f8f6; --surface3: #f2f0ec; --border: #e4e0da; --border2: #d0cbc4; /* ── text ── */ --text: #1c1917; --text-2: #57534e; --text-3: #a8a29e; /* ── semantic colors ── */ --accent: #2563eb; --accent-lt: #eff6ff; --green: #16a34a; --green-lt: #f0fdf4; --amber: #d97706; --amber-lt: #fffbeb; --red: #dc2626; --red-lt: #fef2f2; --purple: #7c3aed; --purple-lt: #f5f3ff; --yellow: #ca8a04; --yellow-lt: #fefce8; /* ── topbar (stays a dark "chrome" strip in both themes) ── */ --tb-bg: #0d0d0f; --tb-accent: #4da8da; --tb-warn: #e08030; /* ── glow/shadow strength — near-zero in light mode, where a neon glow just reads as smudged; real in dark mode. Reference these instead of writing a bare rgba() so an effect looks right in both themes. ── */ --glow-accent: rgba(37,99,235,0.08); --glow-strong: rgba(0,0,0,0.06); /* ── legacy aliases (older per-page stylesheets) ── */ --panel: var(--surface); --panel2: var(--surface2); --panel3: var(--surface3); --border-dim: var(--border); --text-bright:var(--text); --text-dim: var(--text-3); --accent2: var(--green); --danger: var(--red); --warn: var(--amber); } :root[data-theme="dark"] { --bg: #0a0e14; --surface: #0f1520; --surface2: #121a26; --surface3: #1a2235; --border: #1e2d42; --border2: #2a3a52; --text: #e8f0f8; --text-2: #8fa5bf; --text-3: #55708c; --accent: #4da8da; --accent-lt: rgba(77,168,218,0.12); --green: #00ffaa; --green-lt: rgba(0,255,170,0.08); --amber: #e08030; --amber-lt: rgba(224,128,48,0.12); --red: #e05565; --red-lt: rgba(224,85,101,0.1); --purple: #a855f7; --purple-lt: rgba(168,85,247,0.12); --yellow: #fbbf24; --yellow-lt: rgba(251,191,36,0.1); --glow-accent: rgba(77,168,218,0.16); --glow-strong: rgba(0,0,0,0.6); } *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--bg); } body { font-family: var(--font-body); color: var(--text); } a { color: inherit; } /* ══════════════════════════════════════════════════════════════════════════ SHARED TOPBAR — injected by topbar.js into ══════════════════════════════════════════════════════════════════════════ */ .topbar{ height:48px; background:var(--tb-bg); display:flex; align-items:center; justify-content:space-between; padding:0 20px; flex-shrink:0; position:sticky; top:0; z-index:200; } .topbar .logo{ font-family:var(--font-display); font-size:1.6rem; color:var(--tb-accent); letter-spacing:4px; text-decoration:none; line-height:1; } .topbar .logo span{ color:var(--tb-warn); } .topbar .logo small{ font-family:var(--font-body); font-size:0.58rem; letter-spacing:2px; color:#6b7280; margin-left:8px; vertical-align:middle; font-weight:500; } .topbar .nav{ display:flex; align-items:center; gap:2px; } .topbar .nav-link{ font-family:var(--font-body); font-size:0.7rem; font-weight:500; color:#9099a8; text-decoration:none; padding:5px 10px; border-radius:4px; border:1px solid transparent; transition:all 0.15s; white-space:nowrap; text-transform:none; letter-spacing:normal; } .topbar .nav-link:hover{ color:#fff; background:rgba(255,255,255,0.08); } .topbar .nav-link.active{ color:var(--tb-accent); background:rgba(77,168,218,0.16); } .topbar .nav-link.danger{ color:#f87171; } .topbar .nav-link.danger:hover{ background:rgba(248,113,113,0.14); } .topbar .nav-sep{ width:1px; height:16px; background:#282828; margin:0 4px; flex-shrink:0; } /* Donate — only ever rendered when the owner has set a URL, so it always needs to stand out as a real CTA rather than blend in with plain links. Shared across viewer pages now (was previously index.html-local only). */ .topbar .nav-link.nav-donate{ color:var(--tb-warn); border-color:rgba(224,128,48,0.35); } .topbar .nav-link.nav-donate:hover{ background:rgba(224,128,48,0.16); color:#fff; } .topbar .nav-watch{ font-family:var(--font-mono); font-size:0.65rem; font-weight:700; letter-spacing:1px; color:var(--tb-accent); text-decoration:none; padding:5px 11px; border-radius:3px; transition:all 0.15s; white-space:nowrap; } .topbar .nav-watch:hover{ background:rgba(77,168,218,0.14); } .topbar .nav-user{ font-family:var(--font-mono); font-size:0.62rem; color:var(--tb-accent); padding:3px 8px; border:1px solid var(--tb-accent); border-radius:3px; background:rgba(77,168,218,0.1); text-decoration:none; transition:all 0.15s; white-space:nowrap; } .topbar .nav-user:hover{ background:rgba(77,168,218,0.22); } .topbar .owner-badge{ font-size:0.5rem; font-weight:700; letter-spacing:1.5px; padding:1px 5px; border:1px solid var(--tb-accent); color:var(--tb-accent); border-radius:2px; font-family:var(--font-mono); margin-left:4px; vertical-align:middle; } /* ══════════════════════════════════════════════════════════════════════════ GUIDE SEARCH — shared by index.html/guide.html/schedule.html via static/guidesearch.js (originally guide.html-only, ported to all three) ══════════════════════════════════════════════════════════════════════════ */ .guide-search-wrap { position: relative; } .guide-search-input { background: var(--panel3); border: 1px solid var(--border); color: var(--text-bright); font-family: var(--font-body); font-size: 0.78rem; padding: 0 12px; height: 28px; width: 220px; outline: none; border-radius: 3px; transition: border-color 0.15s; } .guide-search-input:focus { border-color: var(--accent); } .guide-search-input::placeholder { color: var(--text-dim); } .guide-search-results { display: none; position: absolute; top: 34px; right: 0; width: 340px; background: var(--panel2); border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.6); z-index: 400; max-height: 360px; overflow-y: auto; } .guide-search-results.open { display: block; } .gsr-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background 0.1s; } .gsr-item:last-child { border-bottom: none; } .gsr-item:hover { background: var(--panel3); } .gsr-title { font-size: 0.82rem; font-weight: 600; color: var(--text-bright); } .gsr-meta { font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); } .gsr-empty { padding: 16px 14px; font-size: 0.75rem; color: var(--text-dim); text-align: center; } /* ══════════════════════════════════════════════════════════════════════════ VIEWER CHROME — injected by viewerchrome.js. The rail (#chrome-root) mounts inline wherever a page's topbar wants it; the drawer/overlay/ banner-slot are appended straight to as fixed overlays so they work the same regardless of a page's own layout (index.html's absolutely- positioned video player included). ══════════════════════════════════════════════════════════════════════════ */ .chrome-rail{ display:flex; align-items:center; gap:10px; } /* Desktop (≥681px): a full inline nav, no hamburger/drawer at all — this is what keeps the desktop experience matching the old per-page navs instead of looking like a compressed mobile menu. Reuses .topbar .nav-link (the same class the admin topbar and the old viewer navs both used), since #chrome-root/.chrome-rail always sits inside a .topbar. */ .chrome-desktop-nav{ display:none; align-items:center; gap:2px; } .chrome-hamburger{ background:none; border:1px solid transparent; color:#9099a8; font-size:1.1rem; line-height:1; padding:4px 8px; border-radius:4px; cursor:pointer; transition:all 0.15s; } .chrome-hamburger:hover{ color:#fff; background:rgba(255,255,255,0.08); } .chrome-donate{ font-family:var(--font-body); font-size:0.7rem; font-weight:600; letter-spacing:0.5px; color:var(--tb-warn); text-decoration:none; padding:5px 10px; border-radius:4px; border:1px solid rgba(224,128,48,0.35); white-space:nowrap; transition:all 0.15s; } .chrome-donate:hover{ background:rgba(224,128,48,0.16); color:#fff; } @media (min-width:681px){ .chrome-desktop-nav{ display:flex; } .chrome-hamburger{ display:none; } #chrome-donate-mobile{ display:none !important; } /* desktop's Donate is inline in .chrome-desktop-nav via .nav-donate instead */ } .chrome-drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:400; opacity:0; pointer-events:none; transition:opacity 0.2s; } .chrome-drawer-overlay.open{ opacity:1; pointer-events:auto; } .chrome-drawer{ position:fixed; top:0; bottom:0; left:0; width:260px; max-width:80vw; background:var(--tb-bg); border-right:1px solid #282828; z-index:401; display:flex; flex-direction:column; padding:16px 0; transform:translateX(-100%); transition:transform 0.22s ease; overflow-y:auto; } .chrome-drawer.open{ transform:translateX(0); } .chrome-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:0 16px 16px; border-bottom:1px solid #282828; margin-bottom:10px; } .chrome-drawer-logo{ font-family:var(--font-display); font-size:1.3rem; color:var(--tb-accent); letter-spacing:3px; text-decoration:none; } .chrome-drawer-logo span{ color:var(--tb-warn); } .chrome-drawer-close{ background:none; border:none; color:#9099a8; font-size:1.4rem; line-height:1; cursor:pointer; padding:2px 6px; } .chrome-drawer-close:hover{ color:#fff; } .chrome-drawer-links{ display:flex; flex-direction:column; padding:0 10px; gap:1px; } .chrome-drawer-link, .chrome-drawer-user{ display:block; font-family:var(--font-body); font-size:0.82rem; font-weight:500; color:#c8ccd4; text-decoration:none; padding:10px 10px; border-radius:5px; transition:all 0.15s; } .chrome-drawer-link:hover, .chrome-drawer-user:hover{ color:#fff; background:rgba(255,255,255,0.08); } .chrome-drawer-link.active{ color:var(--tb-accent); background:rgba(77,168,218,0.16); } .chrome-drawer-link.danger{ color:#f87171; } .chrome-drawer-link.danger:hover{ background:rgba(248,113,113,0.14); } .chrome-drawer-sep{ height:1px; background:#282828; margin:8px 10px; } .chrome-drawer-account{ margin-top:auto; padding:14px 10px 4px; border-top:1px solid #282828; display:flex; flex-direction:column; gap:1px; } .chrome-banner-slot{ position:fixed; top:0; left:0; right:0; z-index:500; display:none; } .chrome-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; font-size:0.78rem; font-weight:500; text-align:center; } .chrome-banner-body{ flex:1; } .chrome-banner-info{ background:#0e2a45; color:#cfe6fa; } .chrome-banner-warn{ background:#3a2a06; color:#ffd98a; } .chrome-banner-danger{ background:#3a0f0f; color:#ffb4b4; } .chrome-banner-dismiss{ background:none; border:none; color:inherit; font-size:1.1rem; line-height:1; cursor:pointer; opacity:0.7; } .chrome-banner-dismiss:hover{ opacity:1; } .chrome-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:600; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.15s; } .chrome-modal-backdrop.open{ opacity:1; pointer-events:auto; } .chrome-modal{ background:var(--tb-bg); border:1px solid #282828; border-radius:8px; padding:20px; width:360px; max-width:90vw; max-height:80vh; overflow-y:auto; } .chrome-modal-title{ font-size:0.95rem; font-weight:700; color:#f4f2ef; margin-bottom:12px; } .chrome-modal-body{ margin-bottom:14px; } .chrome-calendar-row{ margin-bottom:14px; padding-top:10px; border-top:1px solid #282828; } .chrome-calendar-label{ font-size:0.72rem; color:#9099a8; margin-bottom:6px; } .chrome-calendar-linkrow{ display:flex; gap:6px; } .chrome-calendar-linkrow input{ flex:1; min-width:0; font-family:var(--font-mono); font-size:0.68rem; padding:7px 8px; border-radius:5px; border:1px solid #2c2c31; background:#1e1e22; color:#f4f2ef; } .chrome-modal-empty{ color:#9099a8; font-size:0.8rem; text-align:center; padding:12px 0; } .chrome-modal textarea{ width:100%; background:#1e1e22; border:1px solid #2c2c31; color:#f4f2ef; font-family:var(--font-body); font-size:0.82rem; padding:9px 10px; border-radius:5px; outline:none; resize:vertical; } .chrome-modal textarea:focus{ border-color:var(--tb-accent); } .chrome-suggest-msg{ font-size:0.72rem; color:#f87171; margin-top:6px; min-height:1em; } .chrome-suggest-existing{ margin-bottom:12px; max-height:180px; overflow-y:auto; } .chrome-suggest-existing-label{ font-size:0.68rem; color:#9099a8; margin-bottom:6px; } .chrome-suggest-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #282828; } .chrome-suggest-row:last-child{ border-bottom:none; } .chrome-suggest-desc{ font-size:0.76rem; color:#f4f2ef; flex:1; min-width:0; } .chrome-upvote-btn{ flex-shrink:0; background:#1e1e22; border:1px solid #2c2c31; color:#9099a8; font-size:0.7rem; font-weight:700; padding:4px 8px; border-radius:5px; cursor:pointer; white-space:nowrap; } .chrome-upvote-btn:hover{ border-color:var(--tb-accent); color:var(--tb-accent); } .chrome-upvote-btn.voted{ background:rgba(77,168,218,0.15); border-color:var(--tb-accent); color:var(--tb-accent); } .chrome-suggest-msg.ok{ color:#4ade80; } .chrome-modal-submit,.chrome-modal-close{ padding:9px 16px; font-size:0.78rem; font-weight:600; border-radius:5px; cursor:pointer; margin-right:8px; margin-top:4px; } .chrome-modal-submit{ background:var(--tb-accent); border:none; color:#06121a; } .chrome-modal-submit:hover{ filter:brightness(1.1); } .chrome-modal-close{ background:#1e1e22; border:1px solid #2c2c31; color:#f4f2ef; } .chrome-modal-close:hover{ background:rgba(255,255,255,0.08); } .chrome-reminder-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #282828; } .chrome-reminder-row:last-child{ border-bottom:none; } .chrome-reminder-title{ font-size:0.82rem; color:#f4f2ef; } .chrome-reminder-series-tag{ font-size:0.58rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--tb-accent); border:1px solid rgba(77,168,218,0.35); border-radius:3px; padding:1px 5px; margin-left:4px; vertical-align:middle; } .chrome-reminder-when{ font-size:0.68rem; color:#9099a8; margin-top:2px; } .chrome-reminder-remove{ background:none; border:none; color:#9099a8; font-size:1.1rem; line-height:1; cursor:pointer; padding:4px 8px; flex-shrink:0; } .chrome-reminder-remove:hover{ color:#f87171; } /* ══════════════════════════════════════════════════════════════════════════ THEME TOGGLE — used on the Account page ("user settings") ══════════════════════════════════════════════════════════════════════════ */ .theme-toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .theme-toggle-label{ font-size:0.78rem; font-weight:500; color:var(--text-2); } .theme-toggle-track{ width:40px; height:22px; border-radius:11px; background:var(--border2); position:relative; transition:background 0.2s; flex-shrink:0; } .theme-toggle-thumb{ width:16px; height:16px; border-radius:50%; background:var(--surface); position:absolute; top:3px; left:3px; transition:left 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; font-size:0.6rem; } [data-theme="dark"] .theme-toggle-track{ background:var(--accent); } [data-theme="dark"] .theme-toggle-thumb{ left:21px; }