mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
ca8081575c
Scope: variables.css, search.css, todo/04-accessibility.md - variables.css: add @media (prefers-color-scheme: dark) block scoped to body:not(.admin-body); overrides all semantic tokens with dark equivalents: --bg-* (#111→#333 range), --text-* (#eee/aaa/777), --border-* (#333/#444), --accent-primary lightened to #b87fd4 (4.5:1 contrast on #111 background), --accent-secondary stays #9557b5, --accent-foreground flipped to #111111 for dark buttons, --accent-muted adjusted to rgba(184,127,212,0.15), status colours muted for dark (success #4db886, error #e05555, warning #d4a830); new --search-error-{bg,border,color} tokens added to :root (light: #fff0f0/#c00) and overridden in dark (#2a1515/#e05555) - search.css: replace three hardcoded hex values in .search-error rule with var(--search-error-bg/border/color) so dark mode applies cleanly - Admin pages are entirely unaffected: .admin-body body class is excluded from the dark-mode selector; system.css already has its own dark palette
70 lines
2.1 KiB
CSS
70 lines
2.1 KiB
CSS
/* ============================================================
|
|
CSS VARIABLES (CUSTOM PROPERTIES)
|
|
============================================================ */
|
|
|
|
/* ── Light mode (default) ─────────────────────────────────────────────── */
|
|
:root {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f5f5f5;
|
|
--bg-tertiary: #e8e8e8;
|
|
--bg-active: #d0d0d0;
|
|
--text-primary: #111111;
|
|
--text-secondary: #666666;
|
|
--text-tertiary: #999999;
|
|
--border-primary: #ddd;
|
|
--border-secondary: #ccc;
|
|
--success: #5cd69d;
|
|
--error: #f25a5a;
|
|
--warning: #fbca51;
|
|
--accent-primary: #9557b5;
|
|
--accent-secondary: #683d7f;
|
|
--accent-foreground: #ffffff;
|
|
--accent-muted: rgba(149, 87, 181, 0.12);
|
|
--accent-blue: #41adff;
|
|
--accent-green: #4caf50;
|
|
--accent-yellow: #f39c12;
|
|
--accent-red: #f25a5a;
|
|
--gradient-start: #3C856C;
|
|
--gradient-2: #60ECB4;
|
|
--gradient-3: #E390FF;
|
|
--gradient-4: #9557B5;
|
|
|
|
/* Search error block (public only, overridden in dark mode) */
|
|
--search-error-bg: #fff0f0;
|
|
--search-error-border: #c00;
|
|
--search-error-color: #c00;
|
|
}
|
|
|
|
/* ── Dark mode — public pages only (.admin-body keeps light vars) ─────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
body:not(.admin-body) {
|
|
--bg-primary: #111111;
|
|
--bg-secondary: #1a1a1a;
|
|
--bg-tertiary: #252525;
|
|
--bg-active: #333333;
|
|
|
|
--text-primary: #eeeeee;
|
|
--text-secondary: #aaaaaa;
|
|
--text-tertiary: #777777;
|
|
|
|
--border-primary: #333333;
|
|
--border-secondary: #444444;
|
|
|
|
/* Accent hue lightened for contrast on dark bg (4.5:1 against #111) */
|
|
--accent-primary: #b87fd4;
|
|
--accent-secondary: #9557b5;
|
|
--accent-foreground: #111111;
|
|
--accent-muted: rgba(184, 127, 212, 0.15);
|
|
|
|
/* Status colours — slightly muted on dark */
|
|
--success: #4db886;
|
|
--error: #e05555;
|
|
--warning: #d4a830;
|
|
|
|
/* Search error block */
|
|
--search-error-bg: #2a1515;
|
|
--search-error-border: #e05555;
|
|
--search-error-color: #e05555;
|
|
}
|
|
}
|