Mario
843acea652
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
158 lines
5.5 KiB
CSS
158 lines
5.5 KiB
CSS
/* ──────────────────────────────────────────────────────────────────────────
|
||
xXx Sphere – Design Tokens
|
||
Dark ist der Default.
|
||
Reihenfolge der Auflösung:
|
||
1. :root → dark (Fallback, Spez. 0,1,0)
|
||
2. @media prefers-light → light via OS (Spez. 0,1,0, überschreibt via Position)
|
||
3. :root[data-theme=dark] → dark manuell (Spez. 0,2,0 – schlägt immer :root)
|
||
4. :root[data-theme=light]→ light manuell (Spez. 0,2,0 – schlägt immer :root)
|
||
JS setzt data-theme auf <html> und gewinnt damit immer.
|
||
────────────────────────────────────────────────────────────────────────── */
|
||
|
||
/* ── 1. Dark mode – Default ───────────────────────────────────────────────── */
|
||
:root {
|
||
color-scheme: dark;
|
||
|
||
/* Surfaces */
|
||
--color-bg: #0e0c15;
|
||
--color-card: #19162a;
|
||
--color-secondary: #272338;
|
||
--color-surface: #201d2f;
|
||
|
||
/* Text */
|
||
--color-text: #eae8f0;
|
||
--color-muted: #8a879a;
|
||
|
||
/* Brand */
|
||
--color-primary: #e94560;
|
||
--color-primary-rgb: 233, 69, 96;
|
||
|
||
/* Semantic */
|
||
--color-success: #27ae60;
|
||
--color-danger: #e74c3c;
|
||
|
||
/* Aliases */
|
||
--color-border: #272338;
|
||
--color-hover: #272338;
|
||
|
||
/* Shadows */
|
||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
|
||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||
|
||
/* Overlay */
|
||
--overlay-bg: rgba(0, 0, 0, 0.55);
|
||
|
||
/* Message boxes */
|
||
--msg-error-bg: #3d0f1a;
|
||
--msg-warning-bg: #3a2c0a;
|
||
--msg-warning-text: #f5c518;
|
||
--msg-success-bg: #0f3d1a;
|
||
|
||
/* Buttons */
|
||
--btn-primary-hover: #c73652;
|
||
--btn-secondary-hover: #1a3a6a;
|
||
|
||
/* Misc */
|
||
--placeholder: rgba(234, 232, 240, 0.35);
|
||
--unread: #e94560;
|
||
--accept: #27ae60;
|
||
--decline: #c0392b;
|
||
--breakpoint-mobile: 768px;
|
||
}
|
||
|
||
/* ── 2. Light mode via OS (CSS-Fallback, wenn JS nicht verfügbar) ─────────── */
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--color-bg: #f2f0f9;
|
||
--color-card: #ffffff;
|
||
--color-secondary: #e9e6f5;
|
||
--color-surface: #f7f5fc;
|
||
--color-text: #1a1628;
|
||
--color-muted: #6a677e;
|
||
--color-primary: #c9324d;
|
||
--color-primary-rgb: 201, 50, 77;
|
||
--color-success: #1a8c4e;
|
||
--color-danger: #c0392b;
|
||
--color-border: #d8d4ed;
|
||
--color-hover: #e9e6f5;
|
||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
|
||
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||
--overlay-bg: rgba(0, 0, 0, 0.35);
|
||
--msg-error-bg: #fde8ec;
|
||
--msg-warning-bg: #fdf5e0;
|
||
--msg-warning-text: #b38800;
|
||
--msg-success-bg: #e0f5e8;
|
||
--btn-primary-hover: #a82942;
|
||
--btn-secondary-hover: #d8d4ed;
|
||
--placeholder: rgba(26, 22, 40, 0.30);
|
||
--unread: #c9324d;
|
||
--accept: #1a8c4e;
|
||
--decline: #c0392b;
|
||
}
|
||
}
|
||
|
||
/* ── 3+4. JS-Override via data-theme auf <html> ───────────────────────────── */
|
||
/* :root[data-theme] hat Spezifität (0,2,0) und schlägt :root (0,1,0) immer. */
|
||
|
||
:root[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
|
||
--color-bg: #0e0c15;
|
||
--color-card: #19162a;
|
||
--color-secondary: #272338;
|
||
--color-surface: #201d2f;
|
||
--color-text: #eae8f0;
|
||
--color-muted: #8a879a;
|
||
--color-primary: #e94560;
|
||
--color-primary-rgb: 233, 69, 96;
|
||
--color-success: #27ae60;
|
||
--color-danger: #e74c3c;
|
||
--color-border: #272338;
|
||
--color-hover: #272338;
|
||
--shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
|
||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||
--overlay-bg: rgba(0, 0, 0, 0.55);
|
||
--msg-error-bg: #3d0f1a;
|
||
--msg-warning-bg: #3a2c0a;
|
||
--msg-warning-text: #f5c518;
|
||
--msg-success-bg: #0f3d1a;
|
||
--btn-primary-hover: #c73652;
|
||
--btn-secondary-hover: #1a3a6a;
|
||
--placeholder: rgba(234, 232, 240, 0.35);
|
||
--unread: #e94560;
|
||
--accept: #27ae60;
|
||
--decline: #c0392b;
|
||
}
|
||
|
||
:root[data-theme="light"] {
|
||
color-scheme: light;
|
||
|
||
--color-bg: #f2f0f9;
|
||
--color-card: #ffffff;
|
||
--color-secondary: #e9e6f5;
|
||
--color-surface: #f7f5fc;
|
||
--color-text: #1a1628;
|
||
--color-muted: #6a677e;
|
||
--color-primary: #c9324d;
|
||
--color-primary-rgb: 201, 50, 77;
|
||
--color-success: #1a8c4e;
|
||
--color-danger: #c0392b;
|
||
--color-border: #d8d4ed;
|
||
--color-hover: #e9e6f5;
|
||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
|
||
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||
--overlay-bg: rgba(0, 0, 0, 0.35);
|
||
--msg-error-bg: #fde8ec;
|
||
--msg-warning-bg: #fdf5e0;
|
||
--msg-warning-text: #b38800;
|
||
--msg-success-bg: #e0f5e8;
|
||
--btn-primary-hover: #a82942;
|
||
--btn-secondary-hover: #d8d4ed;
|
||
--placeholder: rgba(26, 22, 40, 0.30);
|
||
--unread: #c9324d;
|
||
--accept: #1a8c4e;
|
||
--decline: #c0392b;
|
||
}
|