/** * Vordefinierte Farbpaletten für Hintergrund-Farbverlauf, Blobs, Kreuz * und Akzente (Vers-Referenz, Regler). Aktiv ist die Palette, deren * data-palette-Wert am steht — gesetzt von * assets/js/settings-applier.js anhand der gespeicherten Einstellung * (oder von assets/js/palette-rotator.js, wenn die automatische * Rotation läuft). * * Neue Palette hinzufügen: * 1. Neuen Block hier ergänzen (nach dem Muster unten). * 2. Passenden Vorschau-Kreis in assets/css/settings-panel.css bei * ".palette-swatch[data-palette=...]" ergänzen. * 3. Neuen Radio-Button im Panel-Markup in header.php ergänzen. * 4. Schlüssel in assets/js/palette-data.js ergänzen, damit die * automatische Rotation die neue Palette mit durchläuft. * * Siehe MANUAL.md, Abschnitt "Farbpalette hinzufügen". */ /* ========================================================================== Weicher Übergang beim Paletten-Wechsel -------------------------------------------------------------------------- Jede Farbvariable wird per @property als registriert — das erlaubt dem Browser, ihren WERT selbst (nicht nur eine Eigenschaft, die ihn benutzt) über Zeit zu interpolieren. Die Transition unten auf body sorgt dafür, dass ein Wechsel des data-palette-Attributs die Variablen weich überblendet statt hart umzuschalten. Jede Regel, die var(--gold) usw. liest (Gradient in background.css, Blobs, Kreuz, Atem-Kreise), verwendet dadurch automatisch den gerade interpolierten Zwischenwert mit — ohne dass diese Regeln selbst je eine eigene Transition bräuchten. Browser ohne @property-Unterstützung (siehe MANUAL.md, "Technische Hinweise") wechseln die Farben einfach weiterhin hart um — kein Fehler, nur kein weicher Übergang. Zwei unterschiedliche Geschwindigkeiten: - body (Standard): 1.6s — spürbar weich, aber zügig, für einen manuellen Klick auf einen Paletten-Kreis im Panel. - body.emds-palette-rotating: deutlich langsamer (40s) — beim automatischen Durchwechseln (Einstellung "Paletten automatisch durchwechseln") sollen die Farben ganz ruhig ineinander fließen, nicht "aufblitzen und stehen bleiben". Body-Klasse wird von assets/js/settings-applier.js gesetzt. ========================================================================== */ @property --bg-1{ syntax: ''; inherits: true; initial-value: #1a1a35; } @property --bg-2{ syntax: ''; inherits: true; initial-value: #2c1c3a; } @property --bg-3{ syntax: ''; inherits: true; initial-value: #17293a; } @property --bg-4{ syntax: ''; inherits: true; initial-value: #3a2440; } @property --gold{ syntax: ''; inherits: true; initial-value: #d8b26a; } @property --mist{ syntax: ''; inherits: true; initial-value: #9fb9c8; } @property --accent{ syntax: ''; inherits: true; initial-value: #78508c; } body{ transition: --bg-1 1.6s ease, --bg-2 1.6s ease, --bg-3 1.6s ease, --bg-4 1.6s ease, --gold 1.6s ease, --mist 1.6s ease, --accent 1.6s ease; } /* Während der automatischen Rotation deutlich langsamer, siehe Erklärung oben. Die Klasse allein reicht als Selektor (höhere Spezifität als die reine body-Regel oben), keine !important nötig. */ body.emds-palette-rotating{ transition: --bg-1 40s ease, --bg-2 40s ease, --bg-3 40s ease, --bg-4 40s ease, --gold 40s ease, --mist 40s ease, --accent 40s ease; } body[data-palette="midnight"]{ --bg-1: #1a1a35; --bg-2: #2c1c3a; --bg-3: #17293a; --bg-4: #3a2440; --gold: #d8b26a; --mist: #9fb9c8; --accent: #78508c; } body[data-palette="sunrise"]{ --bg-1: #3a1f2b; --bg-2: #5c2a2f; --bg-3: #7a3b2e; --bg-4: #9c5a34; --gold: #f2c079; --mist: #e7967a; --accent: #c9647a; } body[data-palette="ocean"]{ --bg-1: #0c2233; --bg-2: #123a4a; --bg-3: #0f4a53; --bg-4: #1c5f63; --gold: #7fd8c9; --mist: #6fa9c9; --accent: #2f7a8c; } body[data-palette="forest"]{ --bg-1: #16261c; --bg-2: #1f3324; --bg-3: #24402a; --bg-4: #35502f; --gold: #bcd88a; --mist: #8fae82; --accent: #4f7a4a; }