Sascha/perinco-CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ad7f806258dce7acc16f59a0c0742bc79b6f5bbc
perinco-CRM/src/index.css
T
schakal00783andClaude Opus 5 ad7f806258 feat(design): Huegel im Theme Aura schaukeln leicht 
Die Seitenleiste im hellen Aura sah aus wie ein Standbild. Jetzt bewegt
@keyframes aura-hills die Grafik-Ebene in 26 s um +-9 px waagerecht und
4 px senkrecht - langsam genug, dass es beim Arbeiten nicht auffaellt.

Bewegt wird nur die zweite Hintergrundebene. Der Schleier davor bleibt
stehen, sonst wandert die Helligkeit unter den Menuepunkten. Die Grafik
ist unten verankert und beschnitten, deshalb reisst am Rand keine Luecke
auf. Bei "Bewegung reduzieren" bleibt sie stehen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 22:51:39 +02:00

1293 lines
40 KiB
CSS
Raw Blame History

@import 'tailwindcss';
/*
* perinco CRM - Corporate Identity
* Farben direkt aus dem perinco Logo gesampelt:
* Gruen #6BA04A (Akzent #68A33F)
* Grau #6E6E6E
* Schrift: perinco.de nutzt Avenir LT (Light 35 / Heavy 85). Ist Avenir lokal
* installiert, wird es verwendet, sonst Nunito Sans als freies Aequivalent.
*/
/*
* 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
* eine feste Farbe, sondern durchgaengig ink-*, brand-*, canvas und surface -
* und Tailwind v4 loest auch Eckenradien (--radius-*), Schatten und Schriften
* ueber Variablen auf. Ein Theme tauscht also nur Werte.
*
* Die Rollen der Skalen sind ueber die ganze App gleich (nachgezaehlt, damit
* ein Theme nichts unlesbar macht):
* ink-50/100 Flaechen und Hover
* ink-200 Rahmen (224 von 225 Verwendungen)
* ink-300-900 Text, 400 traegt die Hinweistexte
* ink-950 liegt nur unter Dialog-Overlays, bleibt immer dunkel
* brand-50/100 getoente Flaechen
* brand-200-400 Rahmen
* brand-500/600 gefuellte Knoepfe - hier steht WEISSE Schrift drauf, jedes
* Theme braucht dort also einen ausreichend dunklen Ton
* brand-600-800 Text auf getoenten Flaechen
*/
@theme {
--font-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
/*
* Zweite Schrift fuer Ueberschriften und Feldbeschriftungen. Meist ist sie mit
* der Grundschrift identisch; nur "Pixel Art" setzt hier eine andere ein - die
* Pixelschrift bleibt damit aus dem Fliesstext heraus, ohne dass es dafuer
* eigene Selektoren braucht.
*/
--font-display: 'Avenir Next', 'Avenir', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
/*
* Flaechen sind bewusst semantisch benannt statt "weiss": im Dark Mode werden
* unten nur diese Variablen umgesetzt, die Utility-Klassen in den Komponenten
* bleiben unveraendert.
* canvas = Seitenhintergrund
* surface = Karten, Leisten, Dialoge
*/
--color-canvas: #f7f7f7;
--color-surface: #ffffff;
--color-brand-50: #f2f8ee;
--color-brand-100: #e2efd9;
--color-brand-200: #c6e0b6;
--color-brand-300: #a3cd8a;
--color-brand-400: #85ba66;
--color-brand-500: #6ba04a;
--color-brand-600: #58873b;
--color-brand-700: #456a2f;
--color-brand-800: #375427;
--color-brand-900: #2d4421;
--color-brand-accent: #68a33f;
--color-ink-50: #f7f7f7;
--color-ink-100: #ededed;
--color-ink-200: #dcdcdc;
--color-ink-300: #c2c2c2;
--color-ink-400: #9a9a9a;
--color-ink-500: #6e6e6e;
--color-ink-600: #5a5a5a;
--color-ink-700: #464646;
--color-ink-800: #333333;
--color-ink-900: #1f1f1f;
--color-ink-950: #141414;
--shadow-card: 0 1px 2px rgb(31 31 31 / 0.04), 0 4px 16px rgb(31 31 31 / 0.06);
--shadow-lift: 0 8px 28px rgb(31 31 31 / 0.1);
}
/*
* Dark Mode. Die Komponenten benutzen durchgaengig die Skalen ink-* und brand-*
* sowie canvas/surface - hier werden nur deren Werte getauscht, deshalb braucht
* es keine dark:-Varianten im Markup.
*
* Zwei Ausnahmen bleiben absichtlich in beiden Modi gleich:
* ink-950 - liegt nur unter Dialog-Overlays, muss also dunkel bleiben
* text-white - steht immer auf farbigen Flaechen (Buttons, Termin-Chips)
*/
.dark {
--color-canvas: #141414;
--color-surface: #1c1c1c;
/* Neutrale Skala gedreht: 50 = dunkelste Flaeche, 900 = hellster Text */
--color-ink-50: #1f1f1f;
--color-ink-100: #292929;
--color-ink-200: #383838;
/* Nicht die exakte Umkehrung von #c2c2c2: dunkler waeren Hinweistexte
(text-ink-300) auf der Flaeche kaum noch zu lesen. */
--color-ink-300: #6e6e6e;
--color-ink-400: #909090;
--color-ink-500: #a8a8a8;
--color-ink-600: #bdbdbd;
--color-ink-700: #d2d2d2;
--color-ink-800: #e6e6e6;
--color-ink-900: #f5f5f5;
--color-ink-950: #000000;
/*
* brand-500 bleibt das CI-Gruen (Buttons). Die hellen Stufen werden zu
* dunklen Tints (Hintergruende), die dunklen zu hellen Toenen (Text) - 600
* dient beidem: als hellerer Button-Hover und als lesbare Textfarbe.
*/
--color-brand-50: #1d2b15;
--color-brand-100: #26381c;
--color-brand-200: #3a5a29;
--color-brand-300: #4e7739;
--color-brand-400: #6b9f4f;
--color-brand-600: #7fb75c;
--color-brand-700: #a3cd8a;
--color-brand-800: #c6e0b6;
--color-brand-900: #e2efd9;
/*
* Statusfarben der Kontakte und Toasts sind getoente Pillen: helle Flaeche mit
* dunklem Text. Im Dark Mode wird das gedreht. Die Stufen 500/600 bleiben
* unberuehrt - dort steht weisse Schrift drauf (Loeschen-Button).
*/
--color-sky-50: #0d2537;
--color-sky-200: #1d4a6b;
--color-sky-700: #7cc4ef;
--color-amber-50: #2e2008;
--color-amber-200: #5c4210;
--color-amber-700: #f0b356;
--color-violet-50: #241a3d;
--color-violet-200: #3f2f66;
--color-violet-700: #b49bf2;
--color-red-50: #2e1414;
--color-red-200: #5e2626;
--color-red-700: #f28b8b;
}
/* ===========================================================================
* Outdoor
*
* Wanderkarte und Bergsee: Sandpapier als Flaeche, Seeblau-Gruen als Akzent,
* warme Lehmgrautoene fuer Text. Bewusst kein zweites Blattgruen - das haette
* neben perinco wie ein Versehen gewirkt. Der Unterschied faellt an drei
* Stellen auf: die Flaeche ist warm statt neutral, die Ecken sind runder und
* die Schatten weicher.
*
* Der helle Block ist mit :not(.dark) abgegrenzt. Ohne das gewinnt er gegen
* .dark (eine Klasse mehr in der Spezifitaet) und der Dunkelmodus waere
* kaputt - genau das ist der Grund fuer die Schreibweise in allen Themes.
* =========================================================================== */
html.theme-outdoor:not(.dark) {
/* Blauer Himmel oben, Wiese links. Heller Schleier aus der Flaechenfarbe. */
--theme-header-image: linear-gradient(
90deg,
rgb(253 251 246 / 0.94) 0%,
rgb(253 251 246 / 0.38) 30%,
rgb(253 251 246 / 0.3) 55%,
rgb(253 251 246 / 0.94) 100%
),
url('/themes/outdoor-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(253 251 246 / 0.97) 0%,
rgb(253 251 246 / 0.88) 45%,
rgb(253 251 246 / 0.44) 78%,
rgb(253 251 246 / 0.58) 100%
),
url('/themes/outdoor-sidebar.svg');
--color-canvas: #f2eee3;
--color-surface: #fdfbf6;
--color-brand-50: #e8f2f1;
--color-brand-100: #d2e6e3;
--color-brand-200: #a8cfca;
--color-brand-300: #74b3ac;
--color-brand-400: #3f938b;
--color-brand-500: #12736c;
--color-brand-600: #0d5d57;
--color-brand-700: #0a4a45;
--color-brand-800: #073833;
--color-brand-900: #052b27;
--color-brand-accent: #12736c;
/* Lehmgrau: dieselbe Helligkeitstreppe wie perinco, nur mit warmem Stich. */
--color-ink-50: #f4f0e6;
--color-ink-100: #e9e3d4;
--color-ink-200: #d6cdb8;
--color-ink-300: #a1977f;
/* Hinweistexte (text-ink-400, 241 Stellen) muessen auf dem Sand lesbar
bleiben - deshalb dunkler als die reine Umkehrung. */
--color-ink-400: #6f6650;
--color-ink-500: #5c5344;
--color-ink-600: #4b4436;
--color-ink-700: #3b352a;
--color-ink-800: #2b271e;
--color-ink-900: #1d1a14;
--color-ink-950: #100e0a;
/* Runder und weicher als perinco - der zweite Wiedererkennungswert. */
--radius-sm: 0.3rem;
--radius-md: 0.45rem;
--radius-lg: 0.65rem;
--radius-xl: 0.9rem;
--radius-2xl: 1.25rem;
--shadow-card: 0 2px 4px rgb(61 53 42 / 0.06), 0 8px 24px rgb(61 53 42 / 0.1);
--shadow-lift: 0 12px 32px rgb(61 53 42 / 0.16);
--font-sans: 'Cabin', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Cabin', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
}
/*
* Outdoor, dunkel: Waldnacht. Die Flaechen sind nicht neutral schwarz, sondern
* ins Tannengruen gezogen; der Text bekommt einen warmen Stich, damit es nicht
* nach kaltem Terminal aussieht.
*/
html.theme-outdoor.dark {
/* Dieselben Grafiken, dunkler Schleier: aus dem Himmel wird Nacht, aus der
Wiese eine Silhouette. */
--theme-header-image: linear-gradient(
90deg,
rgb(26 32 22 / 0.95) 0%,
rgb(26 32 22 / 0.68) 30%,
rgb(26 32 22 / 0.6) 55%,
rgb(26 32 22 / 0.95) 100%
),
url('/themes/outdoor-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(26 32 22 / 0.97) 0%,
rgb(26 32 22 / 0.9) 45%,
rgb(26 32 22 / 0.62) 78%,
rgb(26 32 22 / 0.72) 100%
),
url('/themes/outdoor-sidebar.svg');
--color-canvas: #12170f;
--color-surface: #1a2016;
--color-brand-50: #0c2b28;
--color-brand-100: #103833;
--color-brand-200: #17544d;
--color-brand-300: #1d6d65;
--color-brand-400: #2f9187;
--color-brand-500: #14837a;
--color-brand-600: #1f9c91;
--color-brand-700: #74b3ac;
--color-brand-800: #a8cfca;
--color-brand-900: #d2e6e3;
--color-brand-accent: #1f9c91;
--color-ink-50: #1d2419;
--color-ink-100: #26301f;
--color-ink-200: #35412c;
--color-ink-300: #6f7a63;
--color-ink-400: #8e9a81;
--color-ink-500: #a7b39a;
--color-ink-600: #bdc7b2;
--color-ink-700: #d3dbca;
--color-ink-800: #e6ebe0;
--color-ink-900: #f4f7f0;
--color-ink-950: #000000;
--radius-sm: 0.3rem;
--radius-md: 0.45rem;
--radius-lg: 0.65rem;
--radius-xl: 0.9rem;
--radius-2xl: 1.25rem;
--shadow-card: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
--shadow-lift: 0 12px 32px rgb(0 0 0 / 0.6);
--font-sans: 'Cabin', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Cabin', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
/* Die Statusfarben kommen aus .dark und passen dort schon - hier nur die
Pillen leicht ins Warme gezogen, damit sie nicht herausfallen. */
--color-amber-50: #2c2109;
--color-amber-200: #574112;
}
/* ===========================================================================
* Pixel Art
*
* 8-bit: keine runden Ecken, harte Schatten ohne Weichzeichnung, Rahmen als
* schwarze Outlines, gesaettigtes Arcade-Gruen.
*
* Die Pixelschrift steckt nur in --font-display (Ueberschriften und
* Feldbeschriftungen). Der Fliesstext bleibt bewusst Nunito Sans: die
* Akquise-Tabelle hat acht Spalten bei 11-13 px, und eine Pixelschrift waere
* darin nicht mehr zu lesen - ein Design, das die Arbeit behindert, waere ein
* schlechtes Design.
* =========================================================================== */
html.theme-pixel:not(.dark) {
/* 8-bit-Himmel oben, Steinmauer links. */
--theme-header-image: linear-gradient(
90deg,
rgb(246 248 241 / 0.95) 0%,
rgb(246 248 241 / 0.45) 30%,
rgb(246 248 241 / 0.38) 55%,
rgb(246 248 241 / 0.95) 100%
),
url('/themes/pixel-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(246 248 241 / 0.97) 0%,
rgb(246 248 241 / 0.92) 48%,
rgb(246 248 241 / 0.72) 80%,
rgb(246 248 241 / 0.84) 100%
),
url('/themes/pixel-sidebar.svg');
/* Deutlich dunkler als die Karten: Pixelgrafik lebt von harten Kanten, und
bei zu aehnlichen Toenen verschwimmen Karte und Grund. */
--color-canvas: #cdd8c2;
--color-surface: #f6f8f1;
--color-brand-50: #e0f2d4;
--color-brand-100: #c8e8b4;
/* Rahmen sind hier keine Andeutung, sondern Kontur - deshalb dunkel. */
--color-brand-200: #2b7a1c;
--color-brand-300: #256b18;
--color-brand-400: #35931f;
--color-brand-500: #2e8b22;
--color-brand-600: #24701a;
--color-brand-700: #1b5613;
--color-brand-800: #143f0e;
--color-brand-900: #0e2f0a;
--color-brand-accent: #2e8b22;
--color-ink-50: #eef2e8;
--color-ink-100: #dde4d4;
/* Der Kniff des Themes: ink-200 ist fast ausschliesslich Rahmen, wird hier
also zur schwarzen Outline - 224 Stellen ohne eine Zeile im Markup. */
--color-ink-200: #1f2a1a;
--color-ink-300: #5a6653;
--color-ink-400: #47523f;
--color-ink-500: #38412f;
--color-ink-600: #2c3425;
--color-ink-700: #22291c;
--color-ink-800: #182015;
--color-ink-900: #0e140c;
--color-ink-950: #000000;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-2xl: 0;
/* Versetzt statt weichgezeichnet - so sehen Schatten in Pixelgrafik aus. */
--shadow-card: 4px 4px 0 0 #1f2a1a;
--shadow-lift: 6px 6px 0 0 #1f2a1a;
--font-display: 'Silkscreen', 'Courier New', ui-monospace, monospace;
}
/*
* Pixel Art, dunkel: Arcade-Automat im dunklen Raum. Flaechen fast schwarz mit
* blauem Stich, Konturen in gedecktem Gruen (schwarze Outlines waeren auf
* schwarzem Grund unsichtbar), das Gruen der Knoepfe leuchtet kraeftiger.
*/
html.theme-pixel.dark {
/* Nachtvariante: derselbe Himmel unter dunklem Schleier. */
--theme-header-image: linear-gradient(
90deg,
rgb(21 26 34 / 0.96) 0%,
rgb(21 26 34 / 0.7) 30%,
rgb(21 26 34 / 0.62) 55%,
rgb(21 26 34 / 0.96) 100%
),
url('/themes/pixel-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(21 26 34 / 0.97) 0%,
rgb(21 26 34 / 0.92) 48%,
rgb(21 26 34 / 0.78) 80%,
rgb(21 26 34 / 0.88) 100%
),
url('/themes/pixel-sidebar.svg');
--color-canvas: #0d0f14;
--color-surface: #151a22;
--color-brand-50: #0f2a0c;
--color-brand-100: #163c11;
--color-brand-200: #2c7a1f;
--color-brand-300: #35931f;
--color-brand-400: #3aa524;
--color-brand-500: #3aa524;
--color-brand-600: #49bf30;
--color-brand-700: #7fdc63;
--color-brand-800: #b0ec9c;
--color-brand-900: #d8f7cd;
--color-brand-accent: #49bf30;
--color-ink-50: #1a2029;
--color-ink-100: #232b36;
--color-ink-200: #33734a;
--color-ink-300: #6f7f92;
--color-ink-400: #93a3b5;
--color-ink-500: #adbccb;
--color-ink-600: #c2cfdb;
--color-ink-700: #d6e0ea;
--color-ink-800: #e9eff5;
--color-ink-900: #f6f9fc;
--color-ink-950: #000000;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
--radius-2xl: 0;
--shadow-card: 4px 4px 0 0 #000000;
--shadow-lift: 6px 6px 0 0 #000000;
--font-display: 'Silkscreen', 'Courier New', ui-monospace, monospace;
}
/* ===========================================================================
* Cyberpunk
*
* Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes
* Leuchten, Kanten so scharf, dass die Karten wie HUD-Elemente wirken (2 px
* statt 12 px Radius - nicht ganz eckig, das ist schon Pixel Art).
*
* Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und
* brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu lesen.
* Cyan sitzt deshalb nur in --color-brand-accent und in den Statusfarben, wo
* dunkler Text drauf steht.
*
* Schatten sind hier kein Schatten, sondern ein Schein: eine farbige Kontur
* plus weicher Halo in der Markenfarbe.
* =========================================================================== */
html.theme-cyberpunk.dark {
/* Neonroehren oben, regnerische Gasse links - hier ist die Grafik zu Hause,
der Schleier darf duenner sein. */
--theme-header-image: linear-gradient(
90deg,
rgb(15 17 32 / 0.94) 0%,
rgb(15 17 32 / 0.5) 28%,
rgb(15 17 32 / 0.42) 55%,
rgb(15 17 32 / 0.94) 100%
),
url('/themes/cyberpunk-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(15 17 32 / 0.96) 0%,
rgb(15 17 32 / 0.86) 45%,
rgb(15 17 32 / 0.45) 78%,
rgb(15 17 32 / 0.6) 100%
),
url('/themes/cyberpunk-sidebar.svg');
--color-canvas: #07080f;
--color-surface: #0f1120;
--color-brand-50: #1a0e2e;
--color-brand-100: #24123f;
--color-brand-200: #4a1f7a;
--color-brand-300: #5f27a0;
--color-brand-400: #7a30cc;
--color-brand-500: #8b31f0;
--color-brand-600: #a24cff;
--color-brand-700: #c79bff;
--color-brand-800: #ddc4ff;
--color-brand-900: #efe3ff;
--color-brand-accent: #00e5ff;
/* Blaustahl statt Neutralgrau - Grau waere hier zu brav. */
--color-ink-50: #141728;
--color-ink-100: #1c2135;
--color-ink-200: #2b4560;
--color-ink-300: #6b7899;
--color-ink-400: #8e9bbd;
--color-ink-500: #a9b5d4;
--color-ink-600: #c1cbe4;
--color-ink-700: #d6ddf0;
--color-ink-800: #e9eefa;
--color-ink-900: #f7f9ff;
--color-ink-950: #000000;
--radius-sm: 0.125rem;
--radius-md: 0.125rem;
--radius-lg: 0.1875rem;
--radius-xl: 0.25rem;
--radius-2xl: 0.375rem;
--shadow-card: 0 0 0 1px rgb(139 49 240 / 0.16), 0 0 22px rgb(139 49 240 / 0.2);
--shadow-lift: 0 0 0 1px rgb(139 49 240 / 0.3), 0 0 40px rgb(139 49 240 / 0.35);
--font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
/* Die getoenten Pillen aus .dark ins Neon gezogen. */
--color-sky-50: #04202e;
--color-sky-200: #0b4a63;
--color-sky-700: #22d3ee;
--color-amber-50: #2b1f04;
--color-amber-200: #57400a;
--color-amber-700: #ffcc4d;
--color-violet-50: #1d1140;
--color-violet-200: #382068;
--color-violet-700: #d0a2ff;
--color-red-50: #2c0e1c;
--color-red-200: #5c1c34;
--color-red-700: #ff6b8a;
}
/*
* Cyberpunk, hell: Konzern bei Tageslicht. Kuehles Blaugrau statt warmem
* Weiss, dasselbe Violett - nur dunkler, damit weisse Schrift darauf haelt.
* Die scharfen Kanten bleiben, das Leuchten wird zu einem knappen kalten
* Schatten: ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.
*/
html.theme-cyberpunk:not(.dark) {
/* Am Tag bleibt vom Neon nur ein Nachklang: heller Schleier, dicht genug,
dass aus den Roehren blasse Linien werden statt dunkler Flecken. */
--theme-header-image: linear-gradient(
90deg,
rgb(255 255 255 / 0.96) 0%,
rgb(255 255 255 / 0.62) 30%,
rgb(255 255 255 / 0.55) 55%,
rgb(255 255 255 / 0.96) 100%
),
url('/themes/cyberpunk-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(255 255 255 / 0.98) 0%,
rgb(255 255 255 / 0.9) 45%,
rgb(255 255 255 / 0.68) 78%,
rgb(255 255 255 / 0.78) 100%
),
url('/themes/cyberpunk-sidebar.svg');
--color-canvas: #eceff7;
--color-surface: #ffffff;
--color-brand-50: #f3ecff;
--color-brand-100: #e6d9ff;
--color-brand-200: #c9adff;
--color-brand-300: #a97bff;
--color-brand-400: #8d4df0;
--color-brand-500: #7326d6;
--color-brand-600: #5d1cb0;
--color-brand-700: #4a1590;
--color-brand-800: #380f6e;
--color-brand-900: #290a52;
--color-brand-accent: #7326d6;
--color-ink-50: #f2f4fb;
--color-ink-100: #e4e8f4;
--color-ink-200: #c3cbe0;
--color-ink-300: #98a2bd;
--color-ink-400: #5d6786;
--color-ink-500: #4a5473;
--color-ink-600: #3a4260;
--color-ink-700: #2c334d;
--color-ink-800: #1e2438;
--color-ink-900: #121728;
--color-ink-950: #0a0d18;
--radius-sm: 0.125rem;
--radius-md: 0.125rem;
--radius-lg: 0.1875rem;
--radius-xl: 0.25rem;
--radius-2xl: 0.375rem;
--shadow-card: 0 1px 2px rgb(18 23 40 / 0.06), 0 6px 18px rgb(115 38 214 / 0.1);
--shadow-lift: 0 12px 30px rgb(115 38 214 / 0.18);
--font-sans: 'Chakra Petch', 'Avenir Next', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
--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);
}
/* ===========================================================================
* Snow - Winter.
*
* Zweites Theme mit Bewegung: Schnee faellt und sammelt sich am unteren
* Fensterrand (components/SnowWeather.tsx). Hier stehen die Farben, dazu die
* --snow-* Variablen fuer Flocken und Schneedecke.
*
* Eisblau auf fast weissem Grund. Weisse Flocken waeren darauf unsichtbar,
* deshalb bekommen sie im hellen Modus eine zarte blaugraue Kontur, und die
* Schneedecke eine Schattierung nach unten.
* =========================================================================== */
html.theme-snow:not(.dark) {
--theme-header-image: linear-gradient(
90deg,
rgb(250 252 255 / 0.96) 0%,
rgb(250 252 255 / 0.35) 30%,
rgb(250 252 255 / 0.3) 60%,
rgb(250 252 255 / 0.96) 100%
),
url('/themes/snow-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(250 252 255 / 0.97) 0%,
rgb(250 252 255 / 0.88) 45%,
rgb(250 252 255 / 0.4) 78%,
rgb(250 252 255 / 0.55) 100%
),
url('/themes/snow-sidebar.svg');
--snow-flake: #f4f9ff;
--snow-flake-edge: rgb(90 125 160 / 0.7);
--snow-pile: #ffffff;
--snow-pile-shade: #c2d3e4;
--snow-pile-edge: rgb(80 115 150 / 0.75);
--color-canvas: #edf2f7;
--color-surface: #fafcff;
--color-brand-50: #e9f3fa;
--color-brand-100: #d0e5f3;
--color-brand-200: #a3cbe6;
--color-brand-300: #6eaad4;
--color-brand-400: #3f89bd;
--color-brand-500: #1f6a9e;
--color-brand-600: #185681;
--color-brand-700: #144566;
--color-brand-800: #10354f;
--color-brand-900: #0b273b;
--color-brand-accent: #1f6a9e;
--color-ink-50: #f1f5f9;
--color-ink-100: #e2e9f0;
--color-ink-200: #cbd6e1;
--color-ink-300: #97a6b6;
--color-ink-400: #5c6b7c;
--color-ink-500: #4a5868;
--color-ink-600: #3a4655;
--color-ink-700: #2c3643;
--color-ink-800: #1f2731;
--color-ink-900: #141a21;
--color-ink-950: #0a0e13;
--radius-sm: 0.3rem;
--radius-md: 0.45rem;
--radius-lg: 0.65rem;
--radius-xl: 0.85rem;
--radius-2xl: 1.15rem;
--shadow-card: 0 1px 2px rgb(20 26 33 / 0.05), 0 6px 20px rgb(31 106 158 / 0.08);
--shadow-lift: 0 12px 30px rgb(31 106 158 / 0.16);
}
/*
* Snow, dunkel: Winternacht. Tiefes Nachtblau, der Schnee leuchtet darauf von
* selbst und braucht keine Kontur.
*/
html.theme-snow.dark {
--theme-header-image: linear-gradient(
90deg,
rgb(18 26 38 / 0.95) 0%,
rgb(18 26 38 / 0.55) 30%,
rgb(18 26 38 / 0.5) 60%,
rgb(18 26 38 / 0.95) 100%
),
url('/themes/snow-header.svg');
--theme-sidebar-image: linear-gradient(
180deg,
rgb(18 26 38 / 0.97) 0%,
rgb(18 26 38 / 0.88) 45%,
rgb(18 26 38 / 0.55) 78%,
rgb(18 26 38 / 0.65) 100%
),
url('/themes/snow-sidebar.svg');
--snow-flake: rgb(240 246 252 / 0.9);
--snow-flake-edge: transparent;
--snow-pile: #e9f1f9;
--snow-pile-shade: #a9bdd1;
--snow-pile-edge: rgb(255 255 255 / 0.6);
--color-canvas: #0b1119;
--color-surface: #121a26;
--color-brand-50: #0e1f2e;
--color-brand-100: #13283c;
--color-brand-200: #1c3d59;
--color-brand-300: #27567c;
--color-brand-400: #3571a0;
--color-brand-500: #2f73a8;
--color-brand-600: #3b80b5;
--color-brand-700: #92c2e6;
--color-brand-800: #c0dcf1;
--color-brand-900: #e3f0fa;
--color-brand-accent: #8cc6ef;
--color-ink-50: #172131;
--color-ink-100: #1f2a3b;
--color-ink-200: #2e3b4e;
--color-ink-300: #5b6a7e;
--color-ink-400: #8493a7;
--color-ink-500: #9fadbf;
--color-ink-600: #b9c5d3;
--color-ink-700: #d0d9e4;
--color-ink-800: #e4eaf1;
--color-ink-900: #f5f8fb;
--color-ink-950: #000000;
--radius-sm: 0.3rem;
--radius-md: 0.45rem;
--radius-lg: 0.65rem;
--radius-xl: 0.85rem;
--radius-2xl: 1.15rem;
--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);
}
/* ===========================================================================
* 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 {
height: 100%;
}
body {
background-color: var(--color-canvas);
color: var(--color-ink-900);
font-family: var(--font-sans);
font-weight: 400;
-webkit-font-smoothing: antialiased;
/* Farbwechsel beim Umschalten laeuft weich, ohne Layout zu bewegen */
transition:
background-color 0.2s ease,
color 0.2s ease;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.015em;
}
/*
* Die Feldbeschriftungen (labelClass in components/leads/leadUi.tsx) tragen
* dieselbe Klasse, damit ein Theme sie mit einer Regel erreicht. Bei perinco
* und Outdoor ist --font-display die Grundschrift, hier aendert sich also
* nichts.
*/
.field-label {
font-family: var(--font-display);
}
/*
* Hintergrundbilder der oberen Leiste und der Seitenleiste.
*
* Ohne Theme steht in den Variablen nichts, dann greift der Rueckfall `none`
* und beide Flaechen bleiben einfarbig - perinco sieht also aus wie immer.
*
* Die Variable enthaelt **zwei** Ebenen: einen Schleier aus der Flaechenfarbe
* des Themes und darunter die Grafik. Das ist kein Umweg, sondern der Grund,
* dass eine Grafik in beiden Modi funktioniert - der Schleier des
* Dunkelmodus toent den blauen Himmel zur Nacht ab. Er ist ausserdem die
* Bedingung dafuer, dass die Schrift lesbar bleibt: in der oberen Leiste
* steht er an den Raendern dicht (Titel links, Knoepfe rechts) und laesst die
* Grafik nur in der leeren Mitte durch, in der Seitenleiste liegt er oben
* ueber den Menuepunkten und gibt nach unten frei.
*
* `bg-surface` an den Elementen bleibt: die Farbe liegt unter dem Bild und
* traegt, solange die Grafik laedt oder fehlt.
*/
.app-header {
background-image: var(--theme-header-image, none);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.app-sidebar {
background-image: var(--theme-sidebar-image, none);
background-repeat: no-repeat;
/* Unten verankert: dort sitzt in allen drei Grafiken das Motiv. */
background-position: bottom center;
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;
}
/*
* Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her.
*
* Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber
* bleibt stehen. Die Grafik ist an der Unterkante verankert und wird
* beschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine
* Luecke. 26 Sekunden pro Runde: als Bewegung kaum zu bemerken, aber die
* Leiste wirkt nicht mehr wie ein Standbild.
*/
html.theme-aura:not(.dark) .app-sidebar {
animation: aura-hills 26s ease-in-out 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,
html.theme-aura:not(.dark) .app-sidebar {
animation: none;
}
}
/*
* 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
* schieben. Ausserdem kein Kantenglaetten - Pixel sollen Pixel bleiben.
*/
html.theme-pixel h1,
html.theme-pixel h2,
html.theme-pixel h3,
html.theme-pixel h4,
html.theme-pixel h5,
html.theme-pixel h6,
html.theme-pixel .field-label {
letter-spacing: 0;
-webkit-font-smoothing: none;
font-smooth: never;
}
/*
* Cyberpunk laesst die Ueberschriften atmen: die negative Laufweite zieht
* Chakra Petch unangenehm zusammen, gesperrt liest es sich nach Anzeigetafel.
*/
html.theme-cyberpunk h1,
html.theme-cyberpunk h2,
html.theme-cyberpunk h3,
html.theme-cyberpunk h4,
html.theme-cyberpunk h5,
html.theme-cyberpunk h6 {
letter-spacing: 0.015em;
}
html.theme-cyberpunk .field-label {
letter-spacing: 0.12em;
}
/* Fokus-Ring durchgaengig in CI-Gruen */
:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
}
}
@layer utilities {
/*
* Das perinco Logo ist fuer helle Hintergruende gemacht - der Zusatz unter
* dem Wortzeichen ist dunkelgrau und waere im Dark Mode unsichtbar. invert
* dreht die Helligkeit, hue-rotate holt das CI-Gruen zurueck.
*/
.dark .logo-adaptive {
filter: invert(1) hue-rotate(180deg);
}
/*
* "rounded-full" laesst sich nicht ueber eine Variable abschalten - Tailwind
* schreibt dort einen festen Wert. Fuer Pixel Art muss es aber weg: runde
* Punkte, Pillen und Bilder neben eckigen Karten waeren ein Bruch. Der
* Attributselektor greift genau das eine Klassenwort und ist mit dem
* vorangestellten html spezifischer als die Utility-Klasse, deshalb ohne
* !important.
*/
html.theme-pixel [class~='rounded-full'] {
border-radius: 0;
}
.scrollbar-slim::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-slim::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-slim::-webkit-scrollbar-thumb {
background: var(--color-ink-200);
border-radius: 999px;
}
.scrollbar-slim::-webkit-scrollbar-thumb:hover {
background: var(--color-ink-300);
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
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;
}
}
/*
* Schaukelnde Huegel in der Seitenleiste (Theme Aura, hell). Der erste Wert ist
* der Schleier und bleibt stehen, der zweite die Grafik: 9 px nach rechts,
* dabei 4 px tiefer, und zurueck.
*/
@keyframes aura-hills {
0% {
background-position:
center top,
calc(50% - 9px) bottom;
}
50% {
background-position:
center top,
calc(50% + 9px) calc(100% + 4px);
}
100% {
background-position:
center top,
calc(50% - 9px) bottom;
}
}
Reference in New Issue View Git Blame Copy Permalink