102 lines
3.1 KiB
CSS
102 lines
3.1 KiB
CSS
:root {
|
||
/* Hue-System */
|
||
--h-primary: 295; /* Ihr Violett-Rosa */
|
||
--h-bg: 270; /* Ihr Hintergrund-Violett */
|
||
--h-success: 145; /* Grün */
|
||
--h-warning: 65; /* Orange */
|
||
--h-error: 25; /* Rot */
|
||
--h-info: 240; /* Blau */
|
||
|
||
/* Einheitliche Lightness-Abstufungen */
|
||
--l-subtle: 25%; /* Für dezente Hintergründe */
|
||
--l-hover: 50%; /* Für Hover-States */
|
||
--l-border: 70%; /* Für sichtbare Rahmen */
|
||
--l-text: 85%; /* Für gut lesbaren Text */
|
||
|
||
/* Chroma-System basierend auf Anwendungsfall */
|
||
--c-vivid: 0.18; /* Für Hauptfarben, Buttons */
|
||
--c-moderate: 0.12; /* Für UI-Elemente */
|
||
--c-subtle: 0.06; /* Für Hintergründe */
|
||
--c-muted: 0.03; /* Für sehr dezente Effekte */
|
||
|
||
/**
|
||
* 🖤 Hintergrundfarben – kein HDR nötig
|
||
* L: Lightness, C: Chroma, H: Hue
|
||
*/
|
||
--bg: oklch(18% 0.01 270); /* sehr dunkles Violettblau */
|
||
--bg-alt: oklch(26% 0.015 270); /* leicht aufgehellt */
|
||
|
||
/**
|
||
* 🤍 Textfarben – hoher Kontrast
|
||
*/
|
||
--text: oklch(95% 0.005 270); /* fast weiß */
|
||
--muted: oklch(70% 0.01 270); /* leichtes Grau mit Farbstich */
|
||
|
||
/**
|
||
* 🎨 Akzentfarbe – sichtbar, auch auf HDR
|
||
* oklch ist bevorzugt, da linear; P3 gibt extra Boost bei HDR-Displays
|
||
*/
|
||
--accent: oklch(70% 0.2 295); /* sattes Violett-Rosa */
|
||
--accent-p3: color(display-p3 1 0.3 0.8); /* pink/lila – intensiver auf HDR */
|
||
|
||
/** Border */
|
||
--border: oklch(40% 0.02 var(--h-bg));
|
||
|
||
/**
|
||
* ✨ Glow-Farbe – über 100% L (= HDR-like)
|
||
*/
|
||
--glow: oklch(115% 0.22 295); /* extrem helles pink, über weiß hinaus */
|
||
|
||
|
||
/**
|
||
* Semantische Farbpalette
|
||
*/
|
||
--success-base: oklch(60% var(--c-vivid) var(--h-success));
|
||
--success: var(--success-base);
|
||
--success-subtle: oklch(var(--l-subtle) var(--c-muted) var(--h-success));
|
||
--success-hover: oklch(var(--l-hover) var(--c-vivid) var(--h-success));
|
||
--success-border: oklch(var(--l-border) var(--c-moderate) var(--h-success));
|
||
--success-text: oklch(var(--l-text) var(--c-subtle) var(--h-success));
|
||
|
||
--error-base: oklch(55% 0.18 25);
|
||
|
||
|
||
|
||
|
||
--warning-base: oklch(70% 0.12 65);
|
||
|
||
--info-base: oklch(60% 0.15 240);
|
||
|
||
|
||
|
||
/* Manuelle Varianten für bessere Browser-Unterstützung */
|
||
|
||
--error: var(--error-base);
|
||
--error-subtle: oklch(var(--l-subtle) 0.036 25);
|
||
--error-hover: oklch(var(--l-hover) 0.18 25);
|
||
--error-border: oklch(var(--l-border) 0.14 25);
|
||
--error-text: oklch(var(--l-text) 0.12 25);
|
||
|
||
--warning: var(--warning-base);
|
||
--warning-subtle: oklch(25% 0.024 65);
|
||
--warning-border: oklch(80% 0.096 65);
|
||
|
||
/**
|
||
* 🎯 Fallback für alte Browser: überschreiben P3 mit oklch automatisch
|
||
*/
|
||
color-scheme: dark;
|
||
|
||
background-color: var(--bg);
|
||
color: var(--text);
|
||
}
|
||
|
||
/**
|
||
* 🖥️ HDR-Support – bei Geräten mit Dynamic Range Support (aktuell v. a. Safari)
|
||
*/
|
||
/* noinspection CssInvalidMediaFeature */
|
||
@media (dynamic-range: high) {
|
||
:root {
|
||
--accent: var(--accent-p3);
|
||
}
|
||
}
|