feat(design): neues Theme Rainy mit Nieselregen und Wetterleuchten
Schieferblau in hell und dunkel. Ein paar Tropfen fallen per Canvas ueber den Bildschirm und zerspritzen am unteren Rand; die Wolken der oberen Leiste leuchten alle 7-18 s auf (Maske = Wolken-SVG). Bei prefers-reduced-motion bleibt es 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
af3ca33743
commit
77b61b4a04
+163
-2
@@ -10,8 +10,8 @@
|
||||
*/
|
||||
|
||||
/*
|
||||
* Vier Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor, theme-cyberpunk); ohne Klasse gilt
|
||||
* Fuenf Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
|
||||
* <html> (theme-pixel, theme-outdoor, theme-cyberpunk, theme-rainy); ohne Klasse gilt
|
||||
* perinco. Der Modus bleibt die vorhandene Klasse "dark".
|
||||
*
|
||||
* Warum das ohne Aenderung an den Komponenten geht: im Markup steht nirgends
|
||||
@@ -590,6 +590,144 @@ html.theme-cyberpunk:not(.dark) {
|
||||
--font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* ===========================================================================
|
||||
* Rainy - Regenwetter.
|
||||
*
|
||||
* Das einzige Theme mit Bewegung: Nieselregen faellt ueber den Bildschirm und
|
||||
* die Wolken in der oberen Leiste leuchten ab und zu auf. Das macht nicht CSS,
|
||||
* sondern components/RainyWeather.tsx; hier stehen nur die Farben, darunter
|
||||
* --rain-color fuer die Tropfen.
|
||||
*
|
||||
* Die Farbwelt ist Schieferblau auf kuehlem Grau - nass, aber nicht trist.
|
||||
* Schrift bleibt Nunito Sans: das Wetter ist Auffaelligkeit genug.
|
||||
* =========================================================================== */
|
||||
html.theme-rainy:not(.dark) {
|
||||
/* Tagsueber bedeckt: der Schleier ist in der Mitte duenn genug, dass die
|
||||
grauen Wolken tragen und ein Blitz darauf sichtbar wird. */
|
||||
--theme-header-image: linear-gradient(
|
||||
90deg,
|
||||
rgb(248 250 252 / 0.96) 0%,
|
||||
rgb(248 250 252 / 0.35) 30%,
|
||||
rgb(248 250 252 / 0.3) 60%,
|
||||
rgb(248 250 252 / 0.96) 100%
|
||||
),
|
||||
url('/themes/rainy-header.svg');
|
||||
--theme-sidebar-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(248 250 252 / 0.97) 0%,
|
||||
rgb(248 250 252 / 0.88) 45%,
|
||||
rgb(248 250 252 / 0.4) 78%,
|
||||
rgb(248 250 252 / 0.55) 100%
|
||||
),
|
||||
url('/themes/rainy-sidebar.svg');
|
||||
|
||||
--rain-color: rgb(62 90 128 / 0.5);
|
||||
/* Auf hellem Grund macht "screen" aus Grau nur etwas helleres Grau - der
|
||||
Blitz waere kaum zu sehen. Tagsueber deckt er deshalb normal und bekommt
|
||||
einen warmen Stich, damit die Wolke sichtbar aufgluehen kann. */
|
||||
--flash-color: rgb(255 244 196);
|
||||
--flash-blend: normal;
|
||||
|
||||
--color-canvas: #e8ecf1;
|
||||
--color-surface: #f8fafc;
|
||||
|
||||
--color-brand-50: #eaf1f7;
|
||||
--color-brand-100: #d3e2ee;
|
||||
--color-brand-200: #a9c5dc;
|
||||
--color-brand-300: #7ba5c6;
|
||||
--color-brand-400: #4f84ad;
|
||||
--color-brand-500: #2f6690;
|
||||
--color-brand-600: #255477;
|
||||
--color-brand-700: #1e4461;
|
||||
--color-brand-800: #17354c;
|
||||
--color-brand-900: #112839;
|
||||
--color-brand-accent: #2f6690;
|
||||
|
||||
--color-ink-50: #f1f4f7;
|
||||
--color-ink-100: #e3e8ee;
|
||||
--color-ink-200: #cdd5de;
|
||||
--color-ink-300: #9aa6b4;
|
||||
--color-ink-400: #5f6b7a;
|
||||
--color-ink-500: #4d5866;
|
||||
--color-ink-600: #3d4753;
|
||||
--color-ink-700: #2f3741;
|
||||
--color-ink-800: #222931;
|
||||
--color-ink-900: #161b21;
|
||||
--color-ink-950: #0c0f13;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.4rem;
|
||||
--radius-lg: 0.55rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
|
||||
--shadow-card: 0 1px 2px rgb(22 27 33 / 0.05), 0 6px 20px rgb(47 102 144 / 0.08);
|
||||
--shadow-lift: 0 12px 30px rgb(47 102 144 / 0.16);
|
||||
}
|
||||
|
||||
/*
|
||||
* Rainy, dunkel: Gewitternacht. Tintenblaue Flaechen, die Wolken treten erst
|
||||
* beim Blitz richtig hervor.
|
||||
*/
|
||||
html.theme-rainy.dark {
|
||||
--theme-header-image: linear-gradient(
|
||||
90deg,
|
||||
rgb(21 27 36 / 0.95) 0%,
|
||||
rgb(21 27 36 / 0.45) 30%,
|
||||
rgb(21 27 36 / 0.4) 60%,
|
||||
rgb(21 27 36 / 0.95) 100%
|
||||
),
|
||||
url('/themes/rainy-header.svg');
|
||||
--theme-sidebar-image: linear-gradient(
|
||||
180deg,
|
||||
rgb(21 27 36 / 0.97) 0%,
|
||||
rgb(21 27 36 / 0.88) 45%,
|
||||
rgb(21 27 36 / 0.5) 78%,
|
||||
rgb(21 27 36 / 0.62) 100%
|
||||
),
|
||||
url('/themes/rainy-sidebar.svg');
|
||||
|
||||
--rain-color: rgb(170 195 225 / 0.45);
|
||||
--flash-color: rgb(225 236 255);
|
||||
--flash-blend: screen;
|
||||
|
||||
--color-canvas: #0d1117;
|
||||
--color-surface: #151b24;
|
||||
|
||||
--color-brand-50: #10202e;
|
||||
--color-brand-100: #15293b;
|
||||
--color-brand-200: #1f3d57;
|
||||
--color-brand-300: #2b5577;
|
||||
--color-brand-400: #3b6f99;
|
||||
--color-brand-500: #3a72a0;
|
||||
--color-brand-600: #447fae;
|
||||
--color-brand-700: #8fb8da;
|
||||
--color-brand-800: #bcd5ea;
|
||||
--color-brand-900: #e1edf7;
|
||||
--color-brand-accent: #7fb2dc;
|
||||
|
||||
--color-ink-50: #1a212b;
|
||||
--color-ink-100: #222b37;
|
||||
--color-ink-200: #313c4a;
|
||||
--color-ink-300: #5d6a7b;
|
||||
--color-ink-400: #8593a4;
|
||||
--color-ink-500: #a0adbc;
|
||||
--color-ink-600: #b9c4d0;
|
||||
--color-ink-700: #d0d8e1;
|
||||
--color-ink-800: #e4e9ef;
|
||||
--color-ink-900: #f4f7fa;
|
||||
--color-ink-950: #000000;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.4rem;
|
||||
--radius-lg: 0.55rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
|
||||
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);
|
||||
--shadow-lift: 0 12px 32px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@@ -662,6 +800,29 @@ html.theme-cyberpunk:not(.dark) {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/*
|
||||
* Wetterleuchten im Theme Rainy (components/RainyWeather.tsx legt das
|
||||
* Element exakt ueber die obere Leiste und blendet es kurz ein).
|
||||
*
|
||||
* Der Trick ist die Maske: sie ist dieselbe Wolken-SVG wie das
|
||||
* Hintergrundbild, gleich skaliert. Das Licht - ein Schein um eine zufaellige
|
||||
* Stelle (--flash-x) - erscheint deshalb nur auf den Wolken selbst, nicht auf
|
||||
* der ganzen Leiste. So leuchten die Wolken von innen auf.
|
||||
*/
|
||||
.rainy-flash {
|
||||
opacity: 0;
|
||||
background: radial-gradient(
|
||||
ellipse 30% 200% at var(--flash-x, 50%) 40%,
|
||||
var(--flash-color, #fff) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
mix-blend-mode: var(--flash-blend, screen);
|
||||
mask-image: url('/themes/rainy-header.svg');
|
||||
mask-size: cover;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/*
|
||||
* Pixelschrift hat eine feste Zeichenbreite und traegt ihre Sperrung selbst;
|
||||
* die negative Laufweite der Ueberschriften wuerde die Buchstaben ineinander
|
||||
|
||||
Reference in New Issue
Block a user