/* ========================================================================== theme.css — YOUR FILE. Tune the dashboard's look here. This loads AFTER styles.css, so anything set here wins. Keeping your changes in this file (rather than editing styles.css) means the rest of the stylesheet can be updated without clobbering your palette. It is bind-mounted into the nginx container, so: edit, save, reload the browser. No rebuild, no restart. HOW COLOURS WORK ---------------- Accents are declared as raw "R G B" channel triplets, not hex. Every border, glow, gradient and chart line derives its own transparency from those channels, so changing one line here recolours ~30 places at once. --accent-rgb: 255 138 0; <- correct (space separated, no commas) --accent-rgb: #ff8a00; <- WRONG, breaks every derived colour Need a hex value? Convert it: #ff8a00 -> 255 138 0. Charts and gauges read these same variables at page load (see app.js), so the canvas graphics recolour along with the CSS. ========================================================================== */ :root { /* ---------------------------------------------------------------------- ACTIVE THEME Uncomment a preset below to replace these, or just edit these five. ---------------------------------------------------------------------- */ --accent-rgb: 243 230 0; --accent-alt-rgb: 197 0 60; --warn-rgb: 243 163 0; --ok-rgb: 85 234 212; --alert-rgb: 255 42 90; --text-primary: #fdf6d8; --text-dim: #8f8a5e; --bg-void: #000000; --bg-panel: rgba(136, 4, 37, 0.26); --bg-panel-solid: #1a0308; /* --accent-rgb: 0 255 245; */ /* primary — CPU, net DOWN, frames */ /* --accent-alt-rgb: 255 43 214; */ /* secondary — RAM, net UP */ /* --warn-rgb: 255 183 0; */ /* warning — swap, restarting */ /* --ok-rgb: 57 255 136; */ /* healthy — disk, running, LIVE */ /* --alert-rgb: 255 59 92; */ /* critical — stopped, offline */ /* Surfaces and text --------------------------------------------------- */ /* --bg-void: #05070c; */ /* page background */ /* --bg-panel: rgba(10, 18, 28, 0.55); */ /* glass panel fill */ /* --bg-panel-solid:#0a1220; */ /* opaque fill (sticky table heads) */ /* --text-primary: #d9fbff; */ /* values, numbers */ /* --text-dim: #6f97a3; */ /* labels, units */ /* Effects ------------------------------------------------------------- */ /* --scanline-opacity: 0.18; */ /* CRT scanlines: 0 disables them */ /* --noise-opacity: 0.035; */ /* film grain: 0 disables it */ } /* ========================================================================== PRESETS — uncomment ONE block to switch the whole dashboard over. ========================================================================== */ /* --- URGENT: orange + green. Reads well under warm ambient light. --------- :root { --accent-rgb: 255 138 0; --accent-alt-rgb: 57 255 136; --warn-rgb: 255 210 0; --ok-rgb: 57 255 136; --alert-rgb: 255 59 92; --text-primary: #ffeedd; --text-dim: #a3846f; --bg-void: #0c0703; --bg-panel: rgba(28, 18, 10, 0.55); --bg-panel-solid: #1a1006; } */ /* --- TOXIC: acid green terminal. ----------------------------------------- :root { --accent-rgb: 57 255 136; --accent-alt-rgb: 200 255 0; --warn-rgb: 255 210 0; --ok-rgb: 57 255 136; --alert-rgb: 255 59 92; --text-primary: #d9ffe4; --text-dim: #6fa385; --bg-void: #030c06; --bg-panel: rgba(10, 28, 18, 0.55); --bg-panel-solid: #061a10; } */ /* --- ICE: cold blue + violet, low glare for a dark room. ----------------- :root { --accent-rgb: 80 170 255; --accent-alt-rgb: 150 120 255; --warn-rgb: 255 200 90; --ok-rgb: 90 230 190; --alert-rgb: 255 90 120; --text-primary: #e2f0ff; --text-dim: #7d93ab; --bg-void: #04070d; --bg-panel: rgba(12, 20, 34, 0.55); --bg-panel-solid: #0a1424; } */ /* --- AMBER CRT: single-colour vintage terminal. -------------------------- :root { --accent-rgb: 255 176 0; --accent-alt-rgb: 255 120 0; --warn-rgb: 255 220 100; --ok-rgb: 255 176 0; --alert-rgb: 255 70 40; --text-primary: #ffd899; --text-dim: #99764a; --bg-void: #0a0600; --bg-panel: rgba(30, 20, 4, 0.55); --bg-panel-solid: #1a1200; --scanline-opacity: 0.28; } */ /* --- CYBERPUNK 2077: yellow + turquoise on true black. ------------------- Source palette: #f3e600 yellow, #55ead4 turquoise, #c5003c crimson, #880425 oxblood, #000000 black. Measured contrast on #000000 (WCAG 2.1): yellow 16.1:1 turquoise 14.1:1 text-dim 6.0:1 crimson 3.4:1 -- passes for graphics and borders, NOT body text oxblood 2.1:1 -- unusable as a foreground, so it is the panel surface instead, which is what it is good at Two tones are derived, because the source has no distinct warning colour and its crimson is too dark to carry error text: --warn #f3a300 the yellow, deepened --alert #ff2a5a the crimson, brightened to 5.7:1 so it passes AA Roles here: yellow = CPU and net DOWN, crimson = RAM and net UP, amber = swap and restarting, turquoise = disk and running, bright red = stopped and offline. NOTE: DESIGN.md argues against pure #000 -- glows have nothing to sit against, and bright accents smear on OLED as they move. This palette specifies it, so it is used as given. Lift --bg-void to #0a0206 if you see either problem on your screen. :root { --accent-rgb: 243 230 0; --accent-alt-rgb: 197 0 60; --warn-rgb: 243 163 0; --ok-rgb: 85 234 212; --alert-rgb: 255 42 90; --text-primary: #fdf6d8; --text-dim: #8f8a5e; --bg-void: #000000; --bg-panel: rgba(136, 4, 37, 0.26); --bg-panel-solid: #1a0308; } */ /* --- FLAT: no scanlines, no grain. Best for a matte kiosk panel. --------- :root { --scanline-opacity: 0; --noise-opacity: 0; } */ /* ========================================================================== Anything else is fair game too — this file is plain CSS loaded last. .alias { font-size: 2.2rem; } bigger server name .panel-vitals { --gauge-size: 210px; } force a gauge size .scanlines, .noise, .vignette { display: none; } strip all effects ========================================================================== */