/* ============================================================================ * TechVision UC portal — theme system. Four iOS-inspired palettes selected * from the topbar. Each theme overrides the :root design tokens (and the * --d2-* dashboard tokens) via a [data-theme] attribute on . * Accent status colors (green/amber/red) intentionally stay constant so * "success / warning / danger" read the same in every theme. * ==========================================================================*/ :root { /* structural tokens the base sheet hardcoded — now themeable */ --sidebar-bg: #0a1020; --topbar-bg: rgba(11, 17, 32, 0.94); /* dashboard gauge track (the "remaining" half of the two-colour ring) */ --donut-track: rgba(148, 163, 184, 0.28); } /* ---- 1. Midnight (default dark navy — the original look) ---------------- */ :root, :root[data-theme="midnight"] { --bg-primary: #0b1120; --bg-card: #151e32; --bg-hover: #1e293b; --border: #1e293b; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #3b82f6; --info: #06b6d4; --sidebar-bg: #0a1020; --topbar-bg: rgba(11, 17, 32, 0.94); --donut-track: rgba(148, 163, 184, 0.28); --shadow: 0 12px 24px rgba(0, 0, 0, 0.18); --d2-bg: #0f172a; --d2-card: #182235; --d2-input: #020617; --d2-border: #243049; --d2-text: #e5e7eb; --d2-muted: #94a3b8; --d2-blue: #3b82f6; } /* ---- 2. Graphite (iOS system dark — neutral grays, iOS blue) ------------ */ :root[data-theme="graphite"] { --bg-primary: #1c1c1e; --bg-card: #2c2c2e; --bg-hover: #3a3a3c; --border: #38383a; --text-primary: #f5f5f7; --text-secondary: #aeaeb2; --text-muted: #8e8e93; --accent: #0a84ff; --info: #64d2ff; --sidebar-bg: #000000; --topbar-bg: rgba(0, 0, 0, 0.92); --donut-track: rgba(255, 255, 255, 0.16); --shadow: 0 12px 24px rgba(0, 0, 0, 0.4); --d2-bg: #000000; --d2-card: #2c2c2e; --d2-input: #1c1c1e; --d2-border: #38383a; --d2-text: #f5f5f7; --d2-muted: #8e8e93; --d2-blue: #0a84ff; } /* ---- 3. Daylight (iOS light mode — for people who dislike dark) --------- */ :root[data-theme="daylight"] { --bg-primary: #f2f2f7; --bg-card: #ffffff; --bg-hover: #e5e5ea; --border: #d1d1d6; --text-primary: #1c1c1e; --text-secondary: #3c3c43; --text-muted: #8e8e93; --accent: #007aff; --info: #0a84ff; --sidebar-bg: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.92); --donut-track: #e2e2e7; --shadow: 0 8px 20px rgba(0, 0, 0, 0.08); --d2-bg: #f2f2f7; --d2-card: #ffffff; --d2-input: #ffffff; --d2-border: #d1d1d6; --d2-text: #1c1c1e; --d2-muted: #8e8e93; --d2-blue: #007aff; } /* ---- 4. Violet (TechVision brand — purple accent, deep aubergine) ------- */ :root[data-theme="violet"] { --bg-primary: #14101f; --bg-card: #1e1730; --bg-hover: #2a2140; --border: #2e2547; --text-primary: #ece8f5; --text-secondary: #b8abd6; --text-muted: #8b7ba8; --accent: #a855f7; --info: #c084fc; --sidebar-bg: #0f0b18; --topbar-bg: rgba(20, 16, 31, 0.94); --donut-track: rgba(184, 171, 214, 0.22); --shadow: 0 12px 28px rgba(0, 0, 0, 0.35); --d2-bg: #14101f; --d2-card: #1e1730; --d2-input: #0f0b18; --d2-border: #2e2547; --d2-text: #ece8f5; --d2-muted: #b8abd6; --d2-blue: #a855f7; } /* Wire the newly-themeable structural surfaces (base sheet hardcoded these). */ .sidebar { background: var(--sidebar-bg); } .topbar { background: var(--topbar-bg); } /* Dashboard gauges: show the FULL ring in two colours — the value arc over a * clearly-visible track (base sheet made the track 6% white = invisible, * especially on the light theme). */ .donut-bg { stroke: var(--donut-track) !important; } /* Light theme: white cards on a near-white page need a firmer edge + lift so * the dashboard KPI cards and panels read as distinct surfaces. */ :root[data-theme="daylight"] .kpi-card, :root[data-theme="daylight"] .panel { border-color: #d1d1d6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); } :root[data-theme="daylight"] .kpi-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); } :root[data-theme="daylight"] .topbar h1 { color: #1c1c1e; } /* Topbar chips (env badge + live pill) get their colors from inline JS that * assumes a dark bar — force readable values on the light bar. !important * beats the (non-important) inline style. */ :root[data-theme="daylight"] #uc-env-badge { color: #1d4ed8 !important; background: rgba(59, 130, 246, 0.12) !important; border: 1px solid rgba(59, 130, 246, 0.3); } :root[data-theme="daylight"] #portal-state-pill { color: #15803d !important; background: rgba(34, 197, 94, 0.14) !important; } /* --- Daylight (light theme) contrast hardening ----------------------------- * The base sheets were authored for dark backgrounds and hardcode many light * text colors that vanish on white. These scoped overrides restore contrast. * Uses !important deliberately to beat inline styles and later cascade rules. */ :root[data-theme="daylight"] .sidebar { background: #ffffff !important; border-right-color: #d1d1d6; } :root[data-theme="daylight"] .topbar { border-bottom-color: #d1d1d6; } /* Sidebar text — brand, nav links, group headers, chevrons */ :root[data-theme="daylight"] .brand-title { color: #1c1c1e; } :root[data-theme="daylight"] .nav-link { color: #3c3c43 !important; } :root[data-theme="daylight"] .nav-link:hover, :root[data-theme="daylight"] .nav-link.active { color: #007aff !important; background: #e5e5ea; } :root[data-theme="daylight"] .nav-group-header { color: #6b6b70 !important; } :root[data-theme="daylight"] .nav-chev, :root[data-theme="daylight"] .nav-external { color: #8e8e93 !important; } /* Form controls white with dark text */ :root[data-theme="daylight"] input, :root[data-theme="daylight"] select, :root[data-theme="daylight"] textarea { background: #ffffff; color: #1c1c1e; } /* Pastel badge text (designed for dark cards) → saturated for white cards */ :root[data-theme="daylight"] .badge-success { background: rgba(34,197,94,.14); color: #15803d; } :root[data-theme="daylight"] .badge-danger { background: rgba(239,68,68,.12); color: #b91c1c; } :root[data-theme="daylight"] .badge-warning { background: rgba(245,158,11,.14); color: #b45309; } :root[data-theme="daylight"] .badge-info { background: rgba(6,182,212,.12); color: #0e7490; } :root[data-theme="daylight"] .badge-muted { background: rgba(100,116,139,.12); color: #475569; } /* Generic muted helper text used across pages */ :root[data-theme="daylight"] .muted, :root[data-theme="daylight"] small.muted { color: #6b6b70 !important; } /* Terminal / console blocks keep their own dark background + light text — leave * them alone so code output stays readable in every theme. */ :root[data-theme="daylight"] .terminal-output, :root[data-theme="daylight"] pre.terminal-output { color: #c8d4ee; } /* ---- Topbar clock + theme picker ---------------------------------------- */ .tv-clock { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--text-secondary); white-space: nowrap; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); } .tv-theme-wrap { position: relative; } .tv-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: .15s; } .tv-theme-btn:hover { color: var(--text-primary); border-color: var(--accent); } .tv-theme-pop { position: absolute; right: 0; top: 42px; z-index: 200; width: 230px; padding: 8px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); animation: tv-pop .14s ease-out; } @keyframes tv-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tv-theme-pop h4 { margin: 4px 8px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .tv-theme-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: var(--text-primary); text-align: left; font-size: 14px; } .tv-theme-row:hover { background: var(--bg-hover); } .tv-theme-row.active { background: var(--bg-hover); } .tv-swatch { display: inline-flex; gap: 3px; } .tv-swatch span { width: 12px; height: 20px; border-radius: 4px; border: 1px solid rgba(128,128,128,.25); } .tv-theme-row .tv-check { margin-left: auto; color: var(--accent); font-weight: 700; opacity: 0; } .tv-theme-row.active .tv-check { opacity: 1; }