/* ============================================================ * themes.css — Phase 8 multi-theme + font controls. * * Themes override the CSS custom properties defined in base.css. * Applied by setting data-theme on . Font size/family are set * via data-font-size / data-font-family on . * * Each theme overrides backgrounds, borders, text, and accents so the * entire app re-skins from a single attribute swap. The default * (dark-industrial) lives in base.css :root and needs no block here. * ============================================================ */ /* ---- High Contrast (accessibility) ---- */ html[data-theme="high-contrast"] { --bg-0:#000000; --bg-1:#0a0a0a; --bg-2:#141414; --bg-3:#1f1f1f; --bg-log:#000; --border-1:#5a5a5a; --border-2:#7a7a7a; --border-soft:rgba(255,255,255,0.15); --text-1:#ffffff; --text-2:#f0f0f0; --text-3:#cfcfcf; --text-4:#a8a8a8; --accent-cyan:#00ffff; --accent-blue:#4da6ff; --accent-violet:#d08bff; --accent-amber:#ffd000; --accent-green:#00ff66; --accent-red:#ff4d4d; } /* ---- Matrix Green ---- */ html[data-theme="green"] { --bg-0:#020a04; --bg-1:#04130a; --bg-2:#061c0e; --bg-3:#0a2715; --bg-log:#010d05; --border-1:#0f3d22; --border-2:#165733; --border-soft:rgba(0,255,100,0.05); --text-1:#c8ffd8; --text-2:#7fe6a0; --text-3:#4caf74; --text-4:#357a52; --accent-cyan:#2bd47d; --accent-blue:#27c98f; --accent-violet:#5fe0a0; --accent-amber:#9fef6a; --accent-green:#39ff88; --accent-red:#ff5f6d; } /* ---- Blue ---- */ html[data-theme="blue"] { --bg-0:#040912; --bg-1:#071326; --bg-2:#0a1c3a; --bg-3:#0f284f; --bg-log:#03060f; --border-1:#163764; --border-2:#1f4d8c; --border-soft:rgba(80,160,255,0.06); --text-1:#e3eeff; --text-2:#a9c4ee; --text-3:#6f8fc4; --text-4:#4b699a; --accent-cyan:#38bdf8; --accent-blue:#2f7df6; --accent-violet:#7aa2ff; --accent-amber:#ffc14d; --accent-green:#37d39a; --accent-red:#ff5d6c; } /* ---- Tactical Red ---- */ html[data-theme="tactical-red"] { --bg-0:#0c0303; --bg-1:#160606; --bg-2:#1f0909; --bg-3:#2c0d0d; --bg-log:#080202; --border-1:#4a1414; --border-2:#6e1d1d; --border-soft:rgba(255,80,80,0.06); --text-1:#ffe2e2; --text-2:#e7a9a9; --text-3:#bb7474; --text-4:#8a5050; --accent-cyan:#ff7a45; --accent-blue:#ff9d5c; --accent-violet:#ff6b8a; --accent-amber:#ffb454; --accent-green:#7bd47d; --accent-red:#ff3b3b; } /* ---- Modern (clean dark, indigo accents) ---- */ html[data-theme="modern"] { --bg-0:#0e1116; --bg-1:#161b22; --bg-2:#1c232e; --bg-3:#262d3a; --bg-log:#0a0d12; --border-1:#2a313c; --border-2:#3a4350; --border-soft:rgba(255,255,255,0.05); --text-1:#f5f7fa; --text-2:#c4ccd6; --text-3:#8b95a3; --text-4:#646e7c; --accent-cyan:#22d3ee; --accent-blue:#6366f1; --accent-violet:#a78bfa; --accent-amber:#f59e0b; --accent-green:#34d399; --accent-red:#f43f5e; } /* ---- Light ---- */ html[data-theme="light"] { --bg-0:#eef1f6; --bg-1:#f6f8fb; --bg-2:#ffffff; --bg-3:#eef2f8; --bg-log:#1b2230; --border-1:#d4dbe6; --border-2:#c0cad9; --border-soft:rgba(0,0,0,0.05); --text-1:#0f1726; --text-2:#33405a; --text-3:#5f6c84; --text-4:#8a95a8; --accent-cyan:#0891b2; --accent-blue:#2563eb; --accent-violet:#7c3aed; --accent-amber:#b45309; --accent-green:#15803d; --accent-red:#dc2626; --shadow-panel: 0 1px 0 rgba(0,0,0,0.02) inset, 0 4px 16px rgba(0,0,0,0.08); } /* ---- Midnight (deep purple) ---- */ html[data-theme="midnight"] { --bg-0:#0a0813; --bg-1:#120e22; --bg-2:#1a1430; --bg-3:#241b42; --bg-log:#070510; --border-1:#2e2350; --border-2:#43326f; --border-soft:rgba(160,120,255,0.06); --text-1:#ece6ff; --text-2:#bcb0e6; --text-3:#897fb0; --text-4:#5f5680; --accent-cyan:#22d3ee; --accent-blue:#818cf8; --accent-violet:#c084fc; --accent-amber:#fbbf24; --accent-green:#4ade80; --accent-red:#fb7185; } /* ---- Amber CRT ---- */ html[data-theme="amber"] { --bg-0:#0e0a02; --bg-1:#1a1304; --bg-2:#241a06; --bg-3:#33260a; --bg-log:#080500; --border-1:#4d3a12; --border-2:#70551d; --border-soft:rgba(255,190,60,0.06); --text-1:#ffe9bf; --text-2:#e6c489; --text-3:#b8965a; --text-4:#8a6f3f; --accent-cyan:#ffcc66; --accent-blue:#ffb347; --accent-violet:#ffd98a; --accent-amber:#ffb000; --accent-green:#d4e157; --accent-red:#ff6f3c; } /* ---- Slate (neutral gray) ---- */ html[data-theme="slate"] { --bg-0:#0f1214; --bg-1:#171b1f; --bg-2:#1e242a; --bg-3:#283037; --bg-log:#0a0d0f; --border-1:#2c343c; --border-2:#3c4650; --border-soft:rgba(255,255,255,0.04); --text-1:#eef1f4; --text-2:#c0c8d0; --text-3:#8b949e; --text-4:#646d77; --accent-cyan:#56c5d0; --accent-blue:#5b8bd0; --accent-violet:#9b8bd0; --accent-amber:#d0a85b; --accent-green:#5bbd7a; --accent-red:#d05b6b; } /* ---- Ocean (teal/deep sea) ---- */ html[data-theme="ocean"] { --bg-0:#03121a; --bg-1:#06212e; --bg-2:#082e40; --bg-3:#0b3d54; --bg-log:#020c12; --border-1:#0f4f6b; --border-2:#166d92; --border-soft:rgba(60,200,220,0.06); --text-1:#dcf6ff; --text-2:#9fd4e6; --text-3:#69a3b8; --text-4:#477588; --accent-cyan:#2dd4bf; --accent-blue:#38bdf8; --accent-violet:#5eead4; --accent-amber:#fcd34d; --accent-green:#34d399; --accent-red:#fb7185; } /* ---- Solarized Dark ---- */ html[data-theme="solarized-dark"] { --bg-0:#002029; --bg-1:#00303b; --bg-2:#073642; --bg-3:#0a4150; --bg-log:#001a21; --border-1:#0f4f5e; --border-2:#176573; --border-soft:rgba(131,148,150,0.08); --text-1:#fdf6e3; --text-2:#93a1a1; --text-3:#839496; --text-4:#657b83; --accent-cyan:#2aa198; --accent-blue:#268bd2; --accent-violet:#6c71c4; --accent-amber:#b58900; --accent-green:#859900; --accent-red:#dc322f; } /* ============================================================ * Font size controls — scale the root font-size. The app uses rem/em * in most places; body is 14px in base.css. We override here. * ============================================================ */ html[data-font-size="small"] { font-size: 14px; } html[data-font-size="small"] body { font-size: 0.9rem; } html[data-font-size="medium"] { font-size: 16px; } html[data-font-size="medium"] body { font-size: 1rem; } html[data-font-size="large"] { font-size: 18px; } html[data-font-size="large"] body { font-size: 1rem; } html[data-font-size="xlarge"] { font-size: 20px; } html[data-font-size="xlarge"] body { font-size: 1rem; } /* ============================================================ * Font family controls. * ============================================================ */ html[data-font-family="mono"] { --font-sans: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } html[data-font-family="rounded"] { --font-sans: "Nunito", "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif; } html[data-font-family="serif"] { --font-sans: Georgia, Cambria, "Times New Roman", Times, serif; } /* ===== QA #10: apply font-size selection across the WHOLE UI ===== The app uses absolute px units, so scaling the root font-size alone has little visible effect. Zoom the document body so every component — tables, forms, dialogs, dashboard widgets, navigation and reports — scales proportionally and consistently with the selected size. */ html[data-font-size="small"] body { zoom: 0.92; } html[data-font-size="medium"] body { zoom: 1; } html[data-font-size="large"] body { zoom: 1.10; } html[data-font-size="xlarge"] body { zoom: 1.22; } /* GH #370/#397: `zoom` scales an element's whole rendered box, but a * `100vh` height computed on a DESCENDANT of a zoomed element still * resolves against the true, unzoomed viewport and then gets the same * zoom factor applied on top -- so `.app-frame`'s `height: 100vh` (base.css * #253's fixed single-viewport shell) rendered at 122% of one physical * screen at "Extra Large" (100vh * 1.22), guaranteed to overflow by * exactly the zoom factor above 1. GH #370 worked around the resulting * "unreachable content" by giving `body` its own document-level scrollbar * -- which did make the overflow reachable, but left TWO independent * scroll regions on screen at once: that new outer one, AND `.app-main`'s * pre-existing inner one (base.css #253's actual intended single scroll * region) -- the double-vertical-scrollbar GH #397 reported, since * neither one was disabled when the other was added. * * Fixed at the actual source instead: counter-scale `.app-frame`'s height * by the inverse of the zoom factor so its RENDERED size (after the * ancestor zoom multiplies it back up) lands on exactly 100vh again -- * matching the true viewport at any zoom level, the same way it already * does at zoom 1. That removes the outer overflow entirely, so the * document-level scrollbar this rule used to add is no longer needed * (`body` reverts to base.css's plain `overflow: hidden`, same as small/ * medium) and `.app-main`'s own internal scroll -- unchanged, still the * only scroll region -- reaches every pixel of content on its own. */ html[data-font-size="large"] .app-frame { height: calc(100vh / 1.10); } html[data-font-size="xlarge"] .app-frame { height: calc(100vh / 1.22); }