chore: complete update

2025-07-17 16:24:20 +02:00
parent 899227b0a4
commit 64a7051137
1300 changed files with 85570 additions and 2756 deletions
--- a/resources/css/settings/colors.css
+++ b/resources/css/settings/colors.css
@@ -0,0 +1,101 @@
+: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);
+    }
+}