18c7719cd7
All checks were successful
Deploy / deploy (push) Successful in 23s
The palette lived in a :root block duplicated across all three templates, so every reshade meant three edits — and drifted twice in practice (the favicon hardcoded its own hex; stale danger-border rgba literals survived two palette changes). Move tokens to a single static/css/base.css, derive every dim/border tint from the four source hues with color-mix, and point the favicon at one static/favicon.svg. Also splits the 1558-line dashboard.html into template + static assets: 662 lines of CSS and 396 of JS were re-sent uninlined on every load with no browser caching, which costs real time on the remote/cellular access this app is built for. Templates drop to 501/42/107 lines. Server-rendered config (timezone, script_root) now arrives via <body data-*>; wiring URL_BASE to request.script_root also fixes /api/* fetches for a future subpath mount, which the hardcoded "" would break. Header service pills now wrap instead of scrolling — they were clipped at narrow widths, and a hidden pill is a service whose status you cannot see. Verified 0 clipped and no page overflow at 320/375/700/1280. Footer gains a version and date so the running build is identifiable without trusting the Unraid Docker tab's cached container IDs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
74 lines
2.6 KiB
CSS
74 lines
2.6 KiB
CSS
/* ═══════════════════════════════════════════════════════
|
|
Media Centre — shared design tokens + base reset.
|
|
|
|
Single source of truth for the palette. Loaded by
|
|
dashboard.html, login.html and settings.html; page-specific
|
|
rules live in dashboard.css / login.css / settings.css.
|
|
|
|
To reshade the whole app, change the four hues below —
|
|
every dim/border variant is derived from them via color-mix.
|
|
═══════════════════════════════════════════════════════ */
|
|
:root {
|
|
/* ── Surfaces ── */
|
|
--bg: #141416;
|
|
--surface: #1a1a1d;
|
|
--surface-2: #202024;
|
|
--border: #2c2c31;
|
|
--border-lt: #38383f;
|
|
|
|
/* ── Text (all ≥ 4.5:1 on every surface above) ── */
|
|
--text: #edecf1;
|
|
--text-2: #a8a7b0;
|
|
--text-3: #7c7b84;
|
|
|
|
/* ── Accent + semantics (the four source hues) ── */
|
|
--accent: #7c86ff;
|
|
--ok: #68b98a;
|
|
--warn: #d0a75a;
|
|
--danger: #dc5b52;
|
|
|
|
/* ── Derived tints — never hardcode these as literals ── */
|
|
--accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
|
|
--ok-dim: color-mix(in srgb, var(--ok) 14%, transparent);
|
|
--warn-dim: color-mix(in srgb, var(--warn) 14%, transparent);
|
|
--danger-dim: color-mix(in srgb, var(--danger) 14%, transparent);
|
|
--danger-border: color-mix(in srgb, var(--danger) 35%, transparent);
|
|
|
|
/* ── Type scale (6 steps, no one-offs) ── */
|
|
--fs-xs: 0.75rem; /* 12px — smallest permitted */
|
|
--fs-sm: 0.8125rem; /* 13px */
|
|
--fs-base: 0.9375rem; /* 15px */
|
|
--fs-lg: 1.125rem; /* 18px */
|
|
--fs-xl: 1.5rem; /* 24px */
|
|
--fs-2xl: 2rem; /* 32px */
|
|
|
|
/* ── Spacing / shape ── */
|
|
--gap: 1rem;
|
|
--gap-lg: 1.5rem;
|
|
--radius: 10px;
|
|
--radius-sm: 7px;
|
|
--tap: 44px; /* minimum touch target */
|
|
|
|
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: var(--fs-base);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a { color: var(--accent); }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|