feat(design): neues Theme Aura (hell Sunshine, dunkel Mond)
Sonne bzw. Mond in der Ecke oben rechts der Leiste, dahinter ziehen Wolken in zwei Lagen langsam von links nach rechts (reines CSS, nahtlose Kacheln). Im hellen Modus fallen alle 16-24 s zwei bis drei Sonnenstrahlen diagonal ueber den Bildschirm. Bernstein bei Tag, Lavendel und Sterne bei Nacht. Bei prefers-reduced-motion still. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
co-authored by
Claude Opus 5
Claude Opus 5
parent
5cdc42002a
commit
3c56cf8361
+210
-2
@@ -10,8 +10,8 @@
|
||||
*/
|
||||
|
||||
/*
|
||||
* Sechs Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor, theme-cyberpunk, theme-rainy, theme-snow); ohne Klasse gilt
|
||||
* Sieben Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor, theme-cyberpunk, theme-rainy, theme-snow, theme-aura); ohne Klasse gilt
|
||||
* perinco. Der Modus bleibt die vorhandene Klasse "dark".
|
||||
*
|
||||
* Warum das ohne Aenderung an den Komponenten geht: im Markup steht nirgends
|
||||
@@ -865,6 +865,148 @@ html.theme-snow.dark {
|
||||
--shadow-lift: 0 12px 32px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
/* ===========================================================================
|
||||
* Aura - hell "Sunshine", dunkel "Mond".
|
||||
*
|
||||
* Ein Theme mit zwei Gesichtern: bei Tag Sonne in der Ecke oben rechts,
|
||||
* Himmelblau in der Leiste und warmes Bernstein als Akzent; bei Nacht der
|
||||
* Mond an derselben Stelle, Sterne und Lavendel. In beiden ziehen Wolken
|
||||
* langsam von links nach rechts durch die Leiste (reines CSS, siehe
|
||||
* .app-header::before weiter unten), bei Tag fallen dazu ab und zu
|
||||
* Sonnenstrahlen quer ueber den Bildschirm (components/AuraWeather.tsx).
|
||||
*
|
||||
* Die Leiste hat hier vier Ebenen statt zwei, und jede braucht eigene
|
||||
* Position und Groesse - deshalb stehen die in --aura-header-position und
|
||||
* --aura-header-size neben dem Bild.
|
||||
* =========================================================================== */
|
||||
html.theme-aura:not(.dark) {
|
||||
/* Sonne ueber dem Schleier: sie soll leuchten, nicht verblassen. */
|
||||
--theme-header-image: url('/themes/aura-sun.svg'),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(255 253 247 / 0.95) 0%,
|
||||
rgb(255 253 247 / 0.25) 30%,
|
||||
rgb(255 253 247 / 0.2) 70%,
|
||||
rgb(255 253 247 / 0.7) 100%
|
||||
),
|
||||
linear-gradient(transparent, transparent),
|
||||
linear-gradient(180deg, #a9d6ff 0%, #d6ecff 70%, #fff3d6 100%);
|
||||
--aura-header-position: right -45px top -55px, center, center, center;
|
||||
--aura-header-size: 130px 130px, cover, cover, cover;
|
||||
--aura-cloud-opacity: 1;
|
||||
|
||||
--theme-sidebar-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(255 253 247 / 0.97) 0%,
|
||||
rgb(255 253 247 / 0.88) 45%,
|
||||
rgb(255 253 247 / 0.35) 78%,
|
||||
rgb(255 253 247 / 0.5) 100%
|
||||
),
|
||||
url('/themes/aura-sidebar.svg');
|
||||
|
||||
--color-canvas: #fbf6ea;
|
||||
--color-surface: #fffdf7;
|
||||
|
||||
/* Bernstein. 500/600 dunkel genug fuer weisse Schrift. */
|
||||
--color-brand-50: #fff7e6;
|
||||
--color-brand-100: #ffeac2;
|
||||
--color-brand-200: #fdd28a;
|
||||
--color-brand-300: #f9b54f;
|
||||
--color-brand-400: #e48a17;
|
||||
--color-brand-500: #b85f08;
|
||||
--color-brand-600: #9a4d07;
|
||||
--color-brand-700: #7d3f0a;
|
||||
--color-brand-800: #66340c;
|
||||
--color-brand-900: #522b0d;
|
||||
--color-brand-accent: #e8930c;
|
||||
|
||||
--color-ink-50: #f8f4ec;
|
||||
--color-ink-100: #efe8dc;
|
||||
--color-ink-200: #e0d6c5;
|
||||
--color-ink-300: #aca08e;
|
||||
--color-ink-400: #6f6454;
|
||||
--color-ink-500: #5b5145;
|
||||
--color-ink-600: #4a4137;
|
||||
--color-ink-700: #3a332b;
|
||||
--color-ink-800: #2a251f;
|
||||
--color-ink-900: #1c1814;
|
||||
--color-ink-950: #0f0d0a;
|
||||
|
||||
--radius-sm: 0.35rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.35rem;
|
||||
|
||||
--shadow-card: 0 1px 2px rgb(28 24 20 / 0.04), 0 8px 24px rgb(232 147 12 / 0.1);
|
||||
--shadow-lift: 0 14px 34px rgb(232 147 12 / 0.18);
|
||||
}
|
||||
|
||||
html.theme-aura.dark {
|
||||
/* Der Mond liegt wie die Sonne ueber dem Schleier - darunter verschwand er
|
||||
fast. Er sitzt so weit in der Ecke, dass er den Umschalter kaum streift. */
|
||||
--theme-header-image: url('/themes/aura-moon.svg'),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(19 22 42 / 0.95) 0%,
|
||||
rgb(19 22 42 / 0.3) 30%,
|
||||
rgb(19 22 42 / 0.25) 70%,
|
||||
rgb(19 22 42 / 0.45) 100%
|
||||
),
|
||||
url('/themes/aura-stars.svg'),
|
||||
linear-gradient(180deg, #0e1230 0%, #1b1f4a 100%);
|
||||
--aura-header-position: right -45px top -55px, center, center, center;
|
||||
--aura-header-size: 130px 130px, cover, cover, cover;
|
||||
/* Wolken bei Nacht: blass und vom Mond angeleuchtet statt weiss. */
|
||||
--aura-cloud-opacity: 0.28;
|
||||
|
||||
--theme-sidebar-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(19 22 42 / 0.97) 0%,
|
||||
rgb(19 22 42 / 0.9) 45%,
|
||||
rgb(19 22 42 / 0.6) 78%,
|
||||
rgb(19 22 42 / 0.7) 100%
|
||||
),
|
||||
url('/themes/aura-sidebar.svg');
|
||||
|
||||
--color-canvas: #0c0e1c;
|
||||
--color-surface: #13162a;
|
||||
|
||||
/* Mondsilber und Lavendel */
|
||||
--color-brand-50: #16183a;
|
||||
--color-brand-100: #1d2150;
|
||||
--color-brand-200: #2b3170;
|
||||
--color-brand-300: #3a4290;
|
||||
--color-brand-400: #4b55ad;
|
||||
--color-brand-500: #4d57b8;
|
||||
--color-brand-600: #5a64c6;
|
||||
--color-brand-700: #aab2f0;
|
||||
--color-brand-800: #cfd4fa;
|
||||
--color-brand-900: #eceefe;
|
||||
--color-brand-accent: #c9cff7;
|
||||
|
||||
--color-ink-50: #171a30;
|
||||
--color-ink-100: #1f233c;
|
||||
--color-ink-200: #2d3250;
|
||||
--color-ink-300: #5b6182;
|
||||
--color-ink-400: #868cab;
|
||||
--color-ink-500: #a1a7c3;
|
||||
--color-ink-600: #babfd6;
|
||||
--color-ink-700: #d1d5e6;
|
||||
--color-ink-800: #e5e8f2;
|
||||
--color-ink-900: #f6f7fb;
|
||||
--color-ink-950: #000000;
|
||||
|
||||
--radius-sm: 0.35rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.35rem;
|
||||
|
||||
--shadow-card: 0 0 0 1px rgb(170 178 240 / 0.06), 0 8px 26px rgb(0 0 0 / 0.35);
|
||||
--shadow-lift: 0 0 0 1px rgb(170 178 240 / 0.12), 0 14px 36px rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@@ -937,6 +1079,62 @@ html.theme-snow.dark {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/*
|
||||
* Aura: vier Hintergrundebenen in der Leiste, jede mit eigener Lage.
|
||||
*
|
||||
* Dazu ziehende Wolken als ::before. Zwei nahtlose 800-px-Kacheln, die per
|
||||
* background-position genau um ihre Breite (bzw. das Doppelte) wandern -
|
||||
* beim Neustart der Animation steht dasselbe Bild, deshalb kein Ruck. Die
|
||||
* vordere Lage ist doppelt so schnell, das gibt Tiefe.
|
||||
*
|
||||
* isolation: isolate macht die Leiste zu einem eigenen Stapelkontext. Nur
|
||||
* so kann z-index: -1 die Wolken hinter Titel und Knoepfe legen, ohne dass
|
||||
* sie hinter dem Hintergrund der Leiste verschwinden. overflow: hidden
|
||||
* kommt bewusst nicht an die Leiste - sie enthaelt Aufklappmenues.
|
||||
*/
|
||||
html.theme-aura .app-header {
|
||||
isolation: isolate;
|
||||
background-position: var(--aura-header-position);
|
||||
background-size: var(--aura-header-size);
|
||||
}
|
||||
|
||||
html.theme-aura .app-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image: url('/themes/aura-clouds-near.svg'), url('/themes/aura-clouds-far.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-size: 800px 100%;
|
||||
opacity: var(--aura-cloud-opacity, 1);
|
||||
/* Links unter dem Titel ausblenden, rechts vor den Knoepfen duenner. */
|
||||
mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 75%, rgb(0 0 0 / 0.4) 100%);
|
||||
animation: aura-clouds 150s linear infinite;
|
||||
}
|
||||
|
||||
/* Sonnenstrahl (components/AuraWeather.tsx): verjuengt zur Sonne hin. */
|
||||
.aura-ray {
|
||||
position: absolute;
|
||||
transform-origin: 0 50%;
|
||||
opacity: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(255 214 110 / 0.9) 0%,
|
||||
rgb(255 224 150 / 0.45) 35%,
|
||||
rgb(255 236 190 / 0.18) 75%,
|
||||
rgb(255 236 190 / 0) 100%
|
||||
);
|
||||
clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html.theme-aura .app-header::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Wetterleuchten im Theme Rainy (components/RainyWeather.tsx legt das
|
||||
* Element exakt ueber die obere Leiste und blendet es kurz ein).
|
||||
@@ -1045,3 +1243,13 @@ html.theme-snow.dark {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ziehende Wolken im Theme Aura: vordere Kachel 2 x 800 px, hintere 1 x 800 px. */
|
||||
@keyframes aura-clouds {
|
||||
from {
|
||||
background-position: 0 0, 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 1600px 0, 800px 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user