- html/css split into tokens.css (custom properties), base.css (reset, typography, focus, skip link), components.css (buttons, inputs, tables, status cards, popups, menu, log lines) and layout.css (shell, sidebar, header, breakpoints); screen.css removed. Selectors and declarations moved as-is; three pairs of conflicting rules resolved in favour of the one that already won the cascade, two empty rules dropped. - Every literal colour outside tokens.css is now a token (category badge borders excepted). color-scheme set so native controls follow. - Light theme under prefers-color-scheme: light, with explicit data-theme="light"/"dark" overrides on :root for a future toggle. Body text 13.6:1, muted text 5.4:1, accent 5.1:1 on the light background. - HTML: lang="en" everywhere, one h1 per page, maintenance page uses <main>, an id typo fixed.
This commit is contained in:
@@ -0,0 +1,313 @@
|
||||
/*
|
||||
* tokens.css - design tokens (colours, spacing, radii, fonts, shadows).
|
||||
*
|
||||
* Load order: tokens.css, base.css, components.css, layout.css.
|
||||
*
|
||||
* The dark palette is the default. A light palette is applied when the user
|
||||
* agent prefers a light colour scheme, and either palette can be forced with
|
||||
* <html data-theme="dark"> or <html data-theme="light">, which always wins
|
||||
* over the media query. Only colour tokens change between themes.
|
||||
*/
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Space Grotesk", "Avenir Next", "Trebuchet MS", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
|
||||
|
||||
/* Radii and shadows */
|
||||
--radius-s: 10px;
|
||||
--radius-m: 14px;
|
||||
--radius-l: 18px;
|
||||
--shadow-1: 0 20px 45px rgba(0, 0, 0, 0.32);
|
||||
--shadow-2: 0 12px 30px rgba(0, 0, 0, 0.28);
|
||||
|
||||
/* Page background */
|
||||
--bg-0: #07111d;
|
||||
--bg-1: #0c1a2b;
|
||||
--bg-2: #12233a;
|
||||
--bg-deep: #060d17;
|
||||
--bg-glow-1: rgba(64, 132, 183, 0.22);
|
||||
--bg-glow-2: rgba(18, 185, 255, 0.16);
|
||||
|
||||
/* Panels and surfaces (translucent tints layered over the page) */
|
||||
--panel-top: rgba(17, 34, 56, 0.97);
|
||||
--panel-bottom: rgba(12, 27, 44, 0.97);
|
||||
--panel-glow: rgba(53, 210, 255, 0.12);
|
||||
--surface-0: rgba(8, 20, 33, 0.54);
|
||||
--surface-1: rgba(10, 22, 36, 0.72);
|
||||
--surface-2: rgba(13, 31, 49, 0.8);
|
||||
--surface-3: rgba(17, 35, 56, 0.84);
|
||||
--surface-solid: rgba(10, 22, 36, 0.92);
|
||||
--surface-raised: rgba(14, 32, 50, 0.85);
|
||||
--surface-input: rgba(10, 22, 36, 0.78);
|
||||
--surface-input-focus: rgba(9, 25, 40, 0.95);
|
||||
--logo-tint-top: rgba(26, 49, 73, 0.55);
|
||||
--logo-tint-bottom: rgba(13, 28, 45, 0.6);
|
||||
--table-head-top: rgba(23, 46, 72, 0.98);
|
||||
--table-head-bottom: rgba(16, 32, 50, 0.98);
|
||||
--row-line: rgba(29, 55, 80, 0.72);
|
||||
--row-hover: rgba(28, 53, 79, 0.5);
|
||||
--row-focus: rgba(39, 73, 106, 0.56);
|
||||
--overlay: rgba(3, 9, 16, 0.72);
|
||||
--overlay-soft: rgba(3, 9, 15, 0.48);
|
||||
--sticky-fade-from: rgba(12, 27, 44, 0.1);
|
||||
--sticky-fade-to: rgba(12, 27, 44, 0.96);
|
||||
--scroll-track: rgba(7, 17, 29, 0.65);
|
||||
--scroll-thumb-a: #2d597f;
|
||||
--scroll-thumb-b: #1e4060;
|
||||
--scroll-thumb-hover-a: #3678ac;
|
||||
--scroll-thumb-hover-b: #20537c;
|
||||
|
||||
/* Lines */
|
||||
--line: #274462;
|
||||
--line-soft: #1b334d;
|
||||
--line-strong: #3a5877;
|
||||
|
||||
/* Text */
|
||||
--text: #e9f5ff;
|
||||
--text-heading: #d6efff;
|
||||
--text-muted: #b7cee1;
|
||||
--text-soft: #8fb3cf;
|
||||
--text-placeholder: #7e9ab4;
|
||||
--text-on-accent: #03101a;
|
||||
--text-on-ok: #052219;
|
||||
--text-on-error: #ffe5e5;
|
||||
|
||||
/* Accent */
|
||||
--accent: #35d2ff;
|
||||
--accent-strong: #12b9ff;
|
||||
--accent-bright: #67e8ff;
|
||||
--accent-hover: #8de7ff;
|
||||
--accent-text: #8fd8ff;
|
||||
--accent-text-hover: #d7f4ff;
|
||||
--accent-soft: rgba(53, 210, 255, 0.2);
|
||||
--accent-ring: rgba(53, 210, 255, 0.17);
|
||||
--accent-border: rgba(103, 232, 255, 0.55);
|
||||
--accent-shadow: rgba(18, 185, 255, 0.3);
|
||||
--accent-shadow-strong: rgba(18, 185, 255, 0.36);
|
||||
--accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-strong) 100%);
|
||||
--link-underline: rgba(143, 220, 255, 0.6);
|
||||
--focus-ring: #7de5ff;
|
||||
--focus-ring-soft: #91eaff;
|
||||
--checkbox-checked: #39d6ff;
|
||||
--checkbox-checked-border: #89ebff;
|
||||
--loader: #58ddff;
|
||||
|
||||
/* Status */
|
||||
--ok: #2fd18a;
|
||||
--ok-bright: #92f0c0;
|
||||
--ok-mid: #4fce93;
|
||||
--ok-border: #9ff0c8;
|
||||
--ok-soft: rgba(67, 191, 130, 0.48);
|
||||
--ok-surface-top: rgba(20, 54, 44, 0.9);
|
||||
--ok-surface-bottom: rgba(12, 38, 31, 0.95);
|
||||
--warn: #ffc15a;
|
||||
--warn-soft: rgba(255, 193, 90, 0.5);
|
||||
--warn-surface-top: rgba(68, 50, 20, 0.86);
|
||||
--warn-surface-bottom: rgba(44, 32, 14, 0.96);
|
||||
--error: #ff6f6f;
|
||||
--error-text: #ff8d8d;
|
||||
--error-text-soft: #ffd8d8;
|
||||
--error-bright: #ff7f7f;
|
||||
--error-strong: #e94343;
|
||||
--error-border: #ff9e9e;
|
||||
--error-soft: rgba(255, 111, 111, 0.45);
|
||||
--error-surface: rgba(87, 22, 22, 0.45);
|
||||
--error-surface-top: rgba(73, 26, 26, 0.84);
|
||||
--error-surface-bottom: rgba(47, 19, 19, 0.96);
|
||||
--error-shadow: rgba(233, 67, 67, 0.35);
|
||||
--info: #87b0d1;
|
||||
--debug: #d687ff;
|
||||
}
|
||||
|
||||
/*
|
||||
* Light palette. Only tokens that differ from the dark palette are listed.
|
||||
* The same block appears twice on purpose: once for the media query (skipped
|
||||
* when dark is forced with data-theme="dark") and once for the explicit
|
||||
* data-theme="light" override. Keep the two copies identical.
|
||||
*/
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme="dark"]) {
|
||||
color-scheme: light;
|
||||
|
||||
--bg-0: #e9eff5;
|
||||
--bg-1: #f5f8fb;
|
||||
--bg-2: #dfe7ef;
|
||||
--bg-deep: #dfe7ef;
|
||||
--bg-glow-1: rgba(64, 132, 183, 0.14);
|
||||
--bg-glow-2: rgba(18, 185, 255, 0.12);
|
||||
|
||||
--panel-top: rgba(255, 255, 255, 0.97);
|
||||
--panel-bottom: rgba(246, 249, 252, 0.97);
|
||||
--panel-glow: rgba(18, 185, 255, 0.08);
|
||||
--surface-0: rgba(255, 255, 255, 0.55);
|
||||
--surface-1: rgba(255, 255, 255, 0.75);
|
||||
--surface-2: rgba(236, 243, 249, 0.85);
|
||||
--surface-3: rgba(232, 240, 247, 0.9);
|
||||
--surface-solid: rgba(255, 255, 255, 0.94);
|
||||
--surface-raised: rgba(228, 236, 244, 0.9);
|
||||
--surface-input: rgba(255, 255, 255, 0.85);
|
||||
--surface-input-focus: rgba(255, 255, 255, 1);
|
||||
--logo-tint-top: rgba(15, 31, 48, 0.96);
|
||||
--logo-tint-bottom: rgba(11, 23, 39, 0.98);
|
||||
--table-head-top: rgba(232, 240, 248, 0.98);
|
||||
--table-head-bottom: rgba(222, 232, 243, 0.98);
|
||||
--row-line: rgba(100, 130, 160, 0.3);
|
||||
--row-hover: rgba(0, 90, 150, 0.07);
|
||||
--row-focus: rgba(0, 90, 150, 0.14);
|
||||
--overlay: rgba(20, 35, 52, 0.5);
|
||||
--overlay-soft: rgba(20, 35, 52, 0.35);
|
||||
--sticky-fade-from: rgba(246, 249, 252, 0.1);
|
||||
--sticky-fade-to: rgba(246, 249, 252, 0.96);
|
||||
--scroll-track: rgba(200, 214, 228, 0.6);
|
||||
--scroll-thumb-a: #9fb6cb;
|
||||
--scroll-thumb-b: #7f9bb3;
|
||||
--scroll-thumb-hover-a: #7f9bb3;
|
||||
--scroll-thumb-hover-b: #61819c;
|
||||
|
||||
--line: #b9cadb;
|
||||
--line-soft: #d3dfea;
|
||||
--line-strong: #9fb4c8;
|
||||
|
||||
--text: #142434;
|
||||
--text-heading: #0f2033;
|
||||
--text-muted: #4a6379;
|
||||
--text-soft: #526a80;
|
||||
--text-placeholder: #58708a;
|
||||
--text-on-error: #4a0c0c;
|
||||
|
||||
--accent: #0069a8;
|
||||
--accent-hover: #00517f;
|
||||
--accent-text: #0b6a95;
|
||||
--accent-text-hover: #003a5c;
|
||||
--accent-soft: rgba(0, 105, 168, 0.2);
|
||||
--accent-ring: rgba(0, 105, 168, 0.18);
|
||||
--accent-border: rgba(0, 105, 168, 0.5);
|
||||
--accent-shadow: rgba(0, 105, 168, 0.22);
|
||||
--accent-shadow-strong: rgba(0, 105, 168, 0.3);
|
||||
--link-underline: rgba(11, 106, 149, 0.5);
|
||||
--focus-ring: #0a7fc0;
|
||||
--focus-ring-soft: #0a7fc0;
|
||||
--checkbox-checked: #12b9ff;
|
||||
--checkbox-checked-border: #0a7fc0;
|
||||
--loader: #0a7fc0;
|
||||
|
||||
--ok: #12734a;
|
||||
--ok-bright: #a9efcc;
|
||||
--ok-mid: #5fd39b;
|
||||
--ok-border: #4fb884;
|
||||
--ok-soft: rgba(18, 115, 74, 0.45);
|
||||
--ok-surface-top: rgba(226, 246, 235, 0.95);
|
||||
--ok-surface-bottom: rgba(208, 238, 222, 0.98);
|
||||
--warn: #7f5300;
|
||||
--warn-soft: rgba(183, 121, 31, 0.5);
|
||||
--warn-surface-top: rgba(253, 243, 224, 0.95);
|
||||
--warn-surface-bottom: rgba(248, 232, 200, 0.98);
|
||||
--error: #c62828;
|
||||
--error-text: #b02020;
|
||||
--error-text-soft: #8a1a1a;
|
||||
--error-bright: #f6a5a5;
|
||||
--error-strong: #e07575;
|
||||
--error-border: #d95c5c;
|
||||
--error-soft: rgba(198, 40, 40, 0.45);
|
||||
--error-surface: rgba(255, 220, 220, 0.6);
|
||||
--error-surface-top: rgba(253, 232, 232, 0.95);
|
||||
--error-surface-bottom: rgba(248, 214, 214, 0.98);
|
||||
--error-shadow: rgba(198, 40, 40, 0.25);
|
||||
--info: #3f6785;
|
||||
--debug: #7a35b5;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
--bg-0: #e9eff5;
|
||||
--bg-1: #f5f8fb;
|
||||
--bg-2: #dfe7ef;
|
||||
--bg-deep: #dfe7ef;
|
||||
--bg-glow-1: rgba(64, 132, 183, 0.14);
|
||||
--bg-glow-2: rgba(18, 185, 255, 0.12);
|
||||
|
||||
--panel-top: rgba(255, 255, 255, 0.97);
|
||||
--panel-bottom: rgba(246, 249, 252, 0.97);
|
||||
--panel-glow: rgba(18, 185, 255, 0.08);
|
||||
--surface-0: rgba(255, 255, 255, 0.55);
|
||||
--surface-1: rgba(255, 255, 255, 0.75);
|
||||
--surface-2: rgba(236, 243, 249, 0.85);
|
||||
--surface-3: rgba(232, 240, 247, 0.9);
|
||||
--surface-solid: rgba(255, 255, 255, 0.94);
|
||||
--surface-raised: rgba(228, 236, 244, 0.9);
|
||||
--surface-input: rgba(255, 255, 255, 0.85);
|
||||
--surface-input-focus: rgba(255, 255, 255, 1);
|
||||
--logo-tint-top: rgba(15, 31, 48, 0.96);
|
||||
--logo-tint-bottom: rgba(11, 23, 39, 0.98);
|
||||
--table-head-top: rgba(232, 240, 248, 0.98);
|
||||
--table-head-bottom: rgba(222, 232, 243, 0.98);
|
||||
--row-line: rgba(100, 130, 160, 0.3);
|
||||
--row-hover: rgba(0, 90, 150, 0.07);
|
||||
--row-focus: rgba(0, 90, 150, 0.14);
|
||||
--overlay: rgba(20, 35, 52, 0.5);
|
||||
--overlay-soft: rgba(20, 35, 52, 0.35);
|
||||
--sticky-fade-from: rgba(246, 249, 252, 0.1);
|
||||
--sticky-fade-to: rgba(246, 249, 252, 0.96);
|
||||
--scroll-track: rgba(200, 214, 228, 0.6);
|
||||
--scroll-thumb-a: #9fb6cb;
|
||||
--scroll-thumb-b: #7f9bb3;
|
||||
--scroll-thumb-hover-a: #7f9bb3;
|
||||
--scroll-thumb-hover-b: #61819c;
|
||||
|
||||
--line: #b9cadb;
|
||||
--line-soft: #d3dfea;
|
||||
--line-strong: #9fb4c8;
|
||||
|
||||
--text: #142434;
|
||||
--text-heading: #0f2033;
|
||||
--text-muted: #4a6379;
|
||||
--text-soft: #526a80;
|
||||
--text-placeholder: #58708a;
|
||||
--text-on-error: #4a0c0c;
|
||||
|
||||
--accent: #0069a8;
|
||||
--accent-hover: #00517f;
|
||||
--accent-text: #0b6a95;
|
||||
--accent-text-hover: #003a5c;
|
||||
--accent-soft: rgba(0, 105, 168, 0.2);
|
||||
--accent-ring: rgba(0, 105, 168, 0.18);
|
||||
--accent-border: rgba(0, 105, 168, 0.5);
|
||||
--accent-shadow: rgba(0, 105, 168, 0.22);
|
||||
--accent-shadow-strong: rgba(0, 105, 168, 0.3);
|
||||
--link-underline: rgba(11, 106, 149, 0.5);
|
||||
--focus-ring: #0a7fc0;
|
||||
--focus-ring-soft: #0a7fc0;
|
||||
--checkbox-checked: #12b9ff;
|
||||
--checkbox-checked-border: #0a7fc0;
|
||||
--loader: #0a7fc0;
|
||||
|
||||
--ok: #12734a;
|
||||
--ok-bright: #a9efcc;
|
||||
--ok-mid: #5fd39b;
|
||||
--ok-border: #4fb884;
|
||||
--ok-soft: rgba(18, 115, 74, 0.45);
|
||||
--ok-surface-top: rgba(226, 246, 235, 0.95);
|
||||
--ok-surface-bottom: rgba(208, 238, 222, 0.98);
|
||||
--warn: #7f5300;
|
||||
--warn-soft: rgba(183, 121, 31, 0.5);
|
||||
--warn-surface-top: rgba(253, 243, 224, 0.95);
|
||||
--warn-surface-bottom: rgba(248, 232, 200, 0.98);
|
||||
--error: #c62828;
|
||||
--error-text: #b02020;
|
||||
--error-text-soft: #8a1a1a;
|
||||
--error-bright: #f6a5a5;
|
||||
--error-strong: #e07575;
|
||||
--error-border: #d95c5c;
|
||||
--error-soft: rgba(198, 40, 40, 0.45);
|
||||
--error-surface: rgba(255, 220, 220, 0.6);
|
||||
--error-surface-top: rgba(253, 232, 232, 0.95);
|
||||
--error-surface-bottom: rgba(248, 214, 214, 0.98);
|
||||
--error-shadow: rgba(198, 40, 40, 0.25);
|
||||
--info: #3f6785;
|
||||
--debug: #7a35b5;
|
||||
}
|
||||
Reference in New Issue
Block a user