/* ============================================================================ OJUDS — Shared UI Theme (theme.css) ---------------------------------------------------------------------------- ONE file, linked by EVERY page. It does two things: 1. Declares design tokens (CSS custom properties) for BOTH looks: - :root -> "classic" (the current look) [DEFAULT] - :root[data-theme="dark"] -> "dark" instrument look 2. Applies the DARK skin to generic/base elements and common wrappers, scoped ENTIRELY under [data-theme="dark"]. >>> KEY GUARANTEE <<< In "classic" mode (no data-theme, or data-theme="classic") this file adds NO visible rules. Linking it changes NOTHING until a user switches to dark. That is what makes adoption zero-risk and instantly reversible. Runtime switching is driven by the `data-theme` attribute on , set by /js/theme-switch.js (and a no-flash inline snippet in ). ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* Type (kept identical to the app's current stack so classic is unchanged) */ --uds-font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --uds-font-mono: 'Consolas', 'SF Mono', 'Ubuntu Mono', Menlo, 'Courier New', monospace; /* Geometry (shared by both themes) */ --uds-r: 10px; /* card / container radius */ --uds-r-sm: 7px; /* control radius */ --uds-r-xs: 5px; /* chip / small radius */ /* ---- CLASSIC palette = the current look (inert unless a token is used) ---- */ --uds-bg: #f0f0f0; --uds-surface-1: #f8f9fa; --uds-surface-2: #ffffff; --uds-surface-3: #e9ecef; --uds-line: #dee2e6; --uds-line-2: #ced4da; --uds-text-hi: #333333; --uds-text: #495057; --uds-text-dim: #6c757d; --uds-accent: #007bff; --uds-accent-ink: #ffffff; --uds-accent-soft: #e7f1ff; --uds-header-bg: #2c3e50; --uds-header-line: #233140; --uds-header-text: #ffffff; --uds-header-dim: #bdc3c7; --uds-ok: #28a745; --uds-warn: #ffc107; --uds-danger: #dc3545; --uds-info: #17a2b8; --uds-primary-bg: #007bff; --uds-primary-ink: #ffffff; --uds-focus: rgba(0, 123, 255, .25); --uds-shadow: 0 2px 4px rgba(0, 0, 0, .10); } /* ---- DARK palette = the "instrument cluster" look ------------------------- */ :root[data-theme="dark"] { --uds-bg: #0e1217; --uds-surface-1: #161b22; --uds-surface-2: #1c232c; --uds-surface-3: #232c37; --uds-line: #28313c; --uds-line-2: #37424f; --uds-text-hi: #eaf0f6; --uds-text: #a7b4c2; --uds-text-dim: #66727f; --uds-accent: #e0a458; /* warm amber / copper — the single accent */ --uds-accent-ink: #20160a; /* dark ink for text on the amber */ --uds-accent-soft: #2a2114; --uds-header-bg: #12171e; --uds-header-line: #28313c; --uds-header-text: #eaf0f6; --uds-header-dim: #66727f; --uds-ok: #4fbf83; --uds-warn: #e6b34c; --uds-danger: #e5626d; --uds-info: #5aa9e6; --uds-primary-bg: #e0a458; --uds-primary-ink: #20160a; --uds-focus: rgba(224, 164, 88, .30); --uds-shadow: 0 8px 24px -12px rgba(0, 0, 0, .70); } /* =========================================================================== 1b. HEADER LAYOUT FIX (both themes) The header overflows when dev-role elements (Admin, Download Agent, user-info) are injected. These rules shrink/wrap items to keep it single-line on wide screens and wrapping gracefully on narrow ones. =========================================================================== */ .header-info { flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-end; } .header-info .btn, .header-nav .btn { padding: 4px 8px !important; font-size: 11px !important; white-space: nowrap; } .user-info { font-size: 12px !important; gap: 6px !important; } .header-title, .header h1 { font-size: 15px !important; white-space: nowrap; } .version-display { font-size: 10px !important; } /* =========================================================================== 2. DARK SKIN — everything below is scoped to [data-theme="dark"] only. These rules give ANY page a coherent dark base. They use !important on color/background/border because they must override page-level inline styles and Bootstrap defaults. Classic mode is never touched. =========================================================================== */ /* ---- Ground + typography ------------------------------------------------- */ :root[data-theme="dark"] body { background: var(--uds-bg) !important; color: var(--uds-text) !important; font-family: var(--uds-font-ui); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--uds-text-hi) !important; } :root[data-theme="dark"] a { color: var(--uds-accent); } :root[data-theme="dark"] hr { border-color: var(--uds-line) !important; } :root[data-theme="dark"] ::selection { background: var(--uds-accent-soft); color: var(--uds-text-hi); } :root[data-theme="dark"] small, :root[data-theme="dark"] .text-muted { color: var(--uds-text-dim) !important; } /* ---- Form controls ------------------------------------------------------- */ :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .form-control { background: var(--uds-surface-2) !important; color: var(--uds-text-hi) !important; border: 1px solid var(--uds-line-2) !important; border-radius: var(--uds-r-sm); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--uds-text-dim) !important; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] .form-control:focus { border-color: var(--uds-accent) !important; box-shadow: 0 0 0 3px var(--uds-focus) !important; outline: none; } :root[data-theme="dark"] label { color: var(--uds-text-dim) !important; } /* Native dropdown arrow recolor for