653 lines
20 KiB
CSS
653 lines
20 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/*
|
|
* ICON CRM - Corporate Identity
|
|
*
|
|
* Primaerfarbe #C1862F (Gold), heller Akzent #DFA85A
|
|
* Flaechen neutrales Grau bis #0A0A0A im Dunkelmodus
|
|
* Schrift Montserrat
|
|
*
|
|
* Aufbau wie im perinco CRM: im Markup steht nirgends eine feste Farbe,
|
|
* sondern durchgaengig brand-*, ink-*, canvas und surface. Ein Moduswechsel
|
|
* oder ein Design tauscht deshalb nur Variablenwerte - die Komponenten
|
|
* brauchen keine dark:-Varianten.
|
|
*
|
|
* Die Rollen der Skalen sind ueberall gleich:
|
|
* ink-50/100 Flaechen und Hover
|
|
* ink-200 Rahmen
|
|
* 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 und Akzente
|
|
* brand-500 das CI-Gold - Logo, aktive Kanten, Fokusring
|
|
* brand-600 gefuellte Knoepfe; hier steht WEISSE Schrift drauf, deshalb
|
|
* dunkler als 500 (Kontrast 4.8:1 statt 2.9:1)
|
|
* brand-700-900 Text auf getoenten Flaechen
|
|
*/
|
|
|
|
@theme {
|
|
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Flaechen semantisch benannt statt "weiss" - im Dunkelmodus werden nur
|
|
diese Werte getauscht. */
|
|
--color-canvas: #f6f6f7;
|
|
--color-surface: #ffffff;
|
|
|
|
--color-brand-50: #fdf8f0;
|
|
--color-brand-100: #f8ecd8;
|
|
--color-brand-200: #efd8ae;
|
|
--color-brand-300: #e3bd7c;
|
|
--color-brand-400: #d3a253;
|
|
--color-brand-500: #c1862f;
|
|
--color-brand-600: #a06c22;
|
|
--color-brand-700: #7d541b;
|
|
--color-brand-800: #5f4116;
|
|
--color-brand-900: #48310f;
|
|
--color-brand-accent: #dfa85a;
|
|
|
|
--color-ink-50: #f7f7f8;
|
|
--color-ink-100: #ededef;
|
|
--color-ink-200: #dcdce0;
|
|
--color-ink-300: #bcbcc2;
|
|
--color-ink-400: #93939b;
|
|
--color-ink-500: #6b6b73;
|
|
--color-ink-600: #55555c;
|
|
--color-ink-700: #414147;
|
|
--color-ink-800: #2b2b30;
|
|
--color-ink-900: #1a1a1a;
|
|
--color-ink-950: #0a0a0a;
|
|
|
|
--shadow-card: 0 1px 2px rgb(10 10 10 / 0.04), 0 4px 16px rgb(10 10 10 / 0.06);
|
|
--shadow-lift: 0 8px 28px rgb(10 10 10 / 0.12);
|
|
}
|
|
|
|
/*
|
|
* Dunkelmodus. Die neutrale Skala wird gedreht: 50 ist die dunkelste Flaeche,
|
|
* 900 der hellste Text.
|
|
*
|
|
* Zwei Werte bleiben in beiden Modi gleich und sind deshalb bewusst so
|
|
* gewaehlt: ink-950 liegt nur unter Dialog-Overlays und muss dunkel bleiben,
|
|
* und text-white steht immer auf farbigen Flaechen.
|
|
*/
|
|
.dark {
|
|
--color-canvas: #0a0a0a;
|
|
--color-surface: #161616;
|
|
|
|
--color-ink-50: #1c1c1e;
|
|
--color-ink-100: #26262a;
|
|
--color-ink-200: #36363c;
|
|
/* Nicht die exakte Umkehrung von #bcbcc2 - dunkler waeren die Hinweistexte
|
|
(text-ink-300) auf der Flaeche kaum noch zu lesen. */
|
|
--color-ink-300: #6b6b73;
|
|
--color-ink-400: #90909a;
|
|
--color-ink-500: #a9a9b2;
|
|
--color-ink-600: #bfbfc6;
|
|
--color-ink-700: #d4d4d9;
|
|
--color-ink-800: #e7e7ea;
|
|
--color-ink-900: #f6f6f7;
|
|
--color-ink-950: #000000;
|
|
|
|
/* Das Gold bleibt das Gold. Die hellen Stufen werden zu dunklen Toenen
|
|
(Flaechen), die dunklen zu hellen (Text). 600 traegt weiter die gefuellten
|
|
Knoepfe, darf hier aber heller sein - auf Schwarz leuchtet es sonst nicht. */
|
|
--color-brand-50: #2a1e0a;
|
|
--color-brand-100: #3a290d;
|
|
--color-brand-200: #5a3f15;
|
|
--color-brand-300: #7d541b;
|
|
--color-brand-400: #a87428;
|
|
--color-brand-600: #d0953c;
|
|
--color-brand-700: #e3bd7c;
|
|
--color-brand-800: #efd8ae;
|
|
--color-brand-900: #f8ecd8;
|
|
|
|
/* Getoente Status-Pillen: hell mit dunklem Text wird hier gedreht. Die
|
|
Stufen 500/600 bleiben unberuehrt, dort steht weisse Schrift drauf. */
|
|
--color-sky-50: #0d2537;
|
|
--color-sky-200: #1d4a6b;
|
|
--color-sky-700: #7cc4ef;
|
|
|
|
--color-emerald-50: #0b2a1e;
|
|
--color-emerald-200: #14513a;
|
|
--color-emerald-700: #6ee7b7;
|
|
|
|
--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;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* Half-Life
|
|
*
|
|
* Black Mesa: Beton, Warnorange und harte Kanten. Der Akzent ist das Orange des
|
|
* HEV-Anzugs, die Flächen sind Sichtbeton mit kaltem Stich, die Ecken fast
|
|
* rechtwinklig - Laboreinrichtung hat keine Radien.
|
|
*
|
|
* Zwei Dinge sind bewusst so gelöst:
|
|
*
|
|
* * Der Akzent bleibt Orange und wird nicht zu Gelb. Auf brand-500 und
|
|
* brand-600 steht überall weiße Schrift; ein helleres Warngelb wäre dort
|
|
* nicht mehr lesbar. Das Gelb-Schwarz der Gefahrenstreifen kommt deshalb
|
|
* nicht als Fläche vor.
|
|
* * Die Überschriften laufen in Oswald und gesperrt in Versalien - eine
|
|
* schmale Grotesk ist das, was die Beschilderung in Black Mesa ausmacht.
|
|
* Der Fließtext bleibt Montserrat: die Akquise-Tabellen haben acht Spalten
|
|
* bei 12 px, und eine Schmalschrift wäre darin nicht mehr zu lesen.
|
|
*
|
|
* Der helle Block ist mit :not(.dark) abgegrenzt. Ohne das gewänne er gegen
|
|
* .dark (eine Klasse mehr in der Spezifität) und der Dunkelmodus wäre kaputt.
|
|
* =========================================================================== */
|
|
html.theme-halflife:not(.dark) {
|
|
/*
|
|
* Grafik hinter Kopfleiste und Menü.
|
|
*
|
|
* Die Variable enthält ZWEI Ebenen: einen Schleier aus der Flächenfarbe und
|
|
* darunter die Zeichnung. Das ist kein Umweg, sondern der Grund, dass
|
|
* dieselbe Grafik in hell und dunkel funktioniert - und die Bedingung dafür,
|
|
* dass die Schrift lesbar bleibt. In der Kopfleiste steht der Schleier an den
|
|
* Rändern dicht (Titel links, Knöpfe rechts) und lässt die Grafik nur in der
|
|
* Mitte durch; im Menü liegt er oben über den Einträgen und gibt nach unten
|
|
* frei.
|
|
*/
|
|
--theme-header-image: linear-gradient(
|
|
90deg,
|
|
rgb(244 242 236 / 0.96) 0%,
|
|
rgb(244 242 236 / 0.55) 28%,
|
|
rgb(244 242 236 / 0.5) 55%,
|
|
rgb(244 242 236 / 0.96) 100%
|
|
),
|
|
url('/themes/halflife-header.svg');
|
|
--theme-sidebar-image: linear-gradient(
|
|
180deg,
|
|
rgb(244 242 236 / 0.98) 0%,
|
|
rgb(244 242 236 / 0.93) 45%,
|
|
rgb(244 242 236 / 0.62) 78%,
|
|
rgb(244 242 236 / 0.72) 100%
|
|
),
|
|
url('/themes/halflife-sidebar.svg');
|
|
|
|
/* Laborflur: Sichtbeton, kalt-warm gemischt. Deutlich dunkler als die Karten,
|
|
damit die Panels wie eingesetzte Platten wirken. */
|
|
--color-canvas: #dedbd3;
|
|
--color-surface: #f4f2ec;
|
|
|
|
--color-brand-50: #fdf1e5;
|
|
--color-brand-100: #fae0c6;
|
|
--color-brand-200: #f4bf8a;
|
|
--color-brand-300: #ec9c4f;
|
|
--color-brand-400: #e5811f;
|
|
--color-brand-500: #e0720b;
|
|
/* Gefüllte Knöpfe tragen weiße Schrift - dieser Ton hält den Kontrast. */
|
|
--color-brand-600: #b85a05;
|
|
--color-brand-700: #8f4604;
|
|
--color-brand-800: #6a3403;
|
|
--color-brand-900: #4b2502;
|
|
--color-brand-accent: #ff8c1a;
|
|
|
|
/* Stahlgrau mit kaltem Stich statt Neutralgrau. */
|
|
--color-ink-50: #eceae4;
|
|
--color-ink-100: #dedbd3;
|
|
--color-ink-200: #bfbcb2;
|
|
--color-ink-300: #98958b;
|
|
/* Hinweistexte (text-ink-400) müssen auf dem Beton lesbar bleiben -
|
|
deshalb dunkler als die reine Umkehrung. */
|
|
--color-ink-400: #6b6961;
|
|
--color-ink-500: #55534c;
|
|
--color-ink-600: #44423c;
|
|
--color-ink-700: #35332e;
|
|
--color-ink-800: #26241f;
|
|
--color-ink-900: #171512;
|
|
--color-ink-950: #0b0a08;
|
|
|
|
/* Kanten wie an Laboreinrichtung: fast rechtwinklig. */
|
|
--radius-sm: 0.0625rem;
|
|
--radius-md: 0.0625rem;
|
|
--radius-lg: 0.125rem;
|
|
--radius-xl: 0.125rem;
|
|
--radius-2xl: 0.1875rem;
|
|
|
|
/* Hart und versetzt statt weich - Beton wirft keinen weichen Schatten. */
|
|
--shadow-card: 0 1px 0 0 rgb(23 21 18 / 0.12), 2px 2px 0 0 rgb(23 21 18 / 0.06);
|
|
--shadow-lift: 4px 4px 0 0 rgb(23 21 18 / 0.18);
|
|
|
|
--font-display: 'Oswald', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
/*
|
|
* Half-Life, dunkel: Ravenholm. Die Flächen sind nicht neutral schwarz, sondern
|
|
* ins Blaugrün gezogen; das Orange leuchtet kräftiger, weil es die einzige
|
|
* warme Farbe im Bild ist.
|
|
*/
|
|
html.theme-halflife.dark {
|
|
/* Dieselbe Zeichnung, dunkler Schleier: aus dem Laborflur wird Nachtschicht. */
|
|
--theme-header-image: linear-gradient(
|
|
90deg,
|
|
rgb(22 28 31 / 0.96) 0%,
|
|
rgb(22 28 31 / 0.62) 28%,
|
|
rgb(22 28 31 / 0.55) 55%,
|
|
rgb(22 28 31 / 0.96) 100%
|
|
),
|
|
url('/themes/halflife-header.svg');
|
|
--theme-sidebar-image: linear-gradient(
|
|
180deg,
|
|
rgb(22 28 31 / 0.97) 0%,
|
|
rgb(22 28 31 / 0.9) 45%,
|
|
rgb(22 28 31 / 0.55) 78%,
|
|
rgb(22 28 31 / 0.68) 100%
|
|
),
|
|
url('/themes/halflife-sidebar.svg');
|
|
|
|
--color-canvas: #0d1113;
|
|
--color-surface: #161c1f;
|
|
|
|
--color-brand-50: #2a1608;
|
|
--color-brand-100: #3a1e0a;
|
|
--color-brand-200: #5c3010;
|
|
--color-brand-300: #7d4315;
|
|
--color-brand-400: #b25f1c;
|
|
--color-brand-500: #e0720b;
|
|
--color-brand-600: #ff8c1a;
|
|
--color-brand-700: #f4bf8a;
|
|
--color-brand-800: #fae0c6;
|
|
--color-brand-900: #fdf1e5;
|
|
--color-brand-accent: #ff8c1a;
|
|
|
|
--color-ink-50: #191f22;
|
|
--color-ink-100: #222a2e;
|
|
--color-ink-200: #33403f;
|
|
--color-ink-300: #667470;
|
|
--color-ink-400: #8b9894;
|
|
--color-ink-500: #a6b2ae;
|
|
--color-ink-600: #bfc9c5;
|
|
--color-ink-700: #d5dcd9;
|
|
--color-ink-800: #e8edeb;
|
|
--color-ink-900: #f5f8f7;
|
|
--color-ink-950: #000000;
|
|
|
|
--radius-sm: 0.0625rem;
|
|
--radius-md: 0.0625rem;
|
|
--radius-lg: 0.125rem;
|
|
--radius-xl: 0.125rem;
|
|
--radius-2xl: 0.1875rem;
|
|
|
|
--shadow-card: 0 0 0 1px rgb(224 114 11 / 0.1), 2px 2px 0 0 rgb(0 0 0 / 0.5);
|
|
--shadow-lift: 4px 4px 0 0 rgb(0 0 0 / 0.6);
|
|
|
|
--font-display: 'Oswald', 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Die getönten Status-Pillen aus .dark ins Kalte gezogen. */
|
|
--color-amber-50: #2b1e05;
|
|
--color-amber-200: #573d0c;
|
|
--color-emerald-50: #0a2620;
|
|
--color-emerald-200: #14493c;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* Pixel Art
|
|
*
|
|
* 8-bit: keine runden Ecken, harte versetzte Schatten ohne Weichzeichnung,
|
|
* Rahmen als dunkle Outline, gesättigtes Arcade-Grün.
|
|
*
|
|
* Die Pixelschrift steckt nur in --font-display (Überschriften und
|
|
* Feldbeschriftungen). Der Fließtext bleibt Montserrat: die Tabellen haben bis
|
|
* zu acht Spalten bei 12 px, und eine Pixelschrift wäre darin nicht mehr zu
|
|
* lesen - ein Design, das die Arbeit behindert, wäre ein schlechtes Design.
|
|
* =========================================================================== */
|
|
html.theme-pixel:not(.dark) {
|
|
--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.4) 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.7) 80%,
|
|
rgb(246 248 241 / 0.8) 100%
|
|
),
|
|
url('/themes/pixel-sidebar.svg');
|
|
|
|
/* Deutlich dunkler als die Karten: Pixelgrafik lebt von harten Kanten, und
|
|
bei zu ähnlichen Tönen 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 Designs: ink-200 ist fast ausschließlich Rahmen und wird hier
|
|
zur schwarzen Outline - an allen Stellen zugleich, ohne eine Zeile 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. Flächen fast schwarz mit
|
|
* blauem Stich, Konturen in gedecktem Grün - schwarze Outlines wären auf
|
|
* schwarzem Grund unsichtbar.
|
|
*/
|
|
html.theme-pixel.dark {
|
|
--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.76) 80%,
|
|
rgb(21 26 34 / 0.86) 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;
|
|
}
|
|
|
|
@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;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
/* Feldbeschriftungen tragen dieselbe Klasse, damit ein spaeteres Design sie
|
|
mit einer Regel erreicht. */
|
|
.field-label {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
/* Fokus-Ring durchgaengig im CI-Gold */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-brand-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/*
|
|
* Half-Life: Überschriften und Feldbeschriftungen laufen gesperrt in
|
|
* Versalien - so ist Black Mesa beschildert. Die negative Laufweite der
|
|
* Grundeinstellung würde Oswald ineinanderschieben.
|
|
*/
|
|
html.theme-halflife h1,
|
|
html.theme-halflife h2,
|
|
html.theme-halflife h3,
|
|
html.theme-halflife h4,
|
|
html.theme-halflife h5,
|
|
html.theme-halflife h6 {
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
html.theme-halflife .field-label {
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
/*
|
|
* Pixelschrift hat eine feste Zeichenbreite und trägt ihre Sperrung selbst;
|
|
* die negative Laufweite der Überschriften würde die Buchstaben ineinander
|
|
* schieben. Außerdem kein Kantenglätten - 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;
|
|
}
|
|
|
|
/*
|
|
* Hintergrundbilder der Kopfleiste und des Menüs.
|
|
*
|
|
* Ohne Design steht in den Variablen nichts, dann greift der Rückfall `none`
|
|
* und beide Flächen bleiben einfarbig - ICON sieht also aus wie immer.
|
|
* `bg-surface` an den Elementen bleibt: die Farbe liegt unter dem Bild und
|
|
* trägt, solange die Grafik lädt 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 beiden Grafiken das Motiv. */
|
|
background-position: bottom center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/*
|
|
* "rounded-full" lässt sich nicht über eine Variable abschalten - Tailwind
|
|
* schreibt dort einen festen Wert. Für Pixel Art muss es aber weg: runde
|
|
* Punkte und Pillen neben eckigen Karten wären ein Bruch. Der
|
|
* Attributselektor greift genau dieses eine Klassenwort und ist mit dem
|
|
* vorangestellten html spezifischer als die Utility-Klasse.
|
|
*/
|
|
html.theme-pixel [class~='rounded-full'] {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Das ICON Logo ist fuer helle Hintergruende gemacht - im Dunkelmodus wird
|
|
die Helligkeit gedreht und das Gold per hue-rotate zurueckgeholt. */
|
|
.dark .logo-adaptive {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/*
|
|
* Der WYSIWYG-Editor und die Leseansicht der Ausschreibungstexte.
|
|
*
|
|
* Tailwind setzt Ueberschriften und Listen im Basis-Reset zurueck - in einem
|
|
* Feld, dessen Inhalt aus <h2>, <ul> und <p> besteht, saehe sonst alles
|
|
* gleich aus. Hier bekommen diese Elemente ihre Darstellung zurueck, und nur
|
|
* hier.
|
|
*/
|
|
/*
|
|
* Der Altbestand traegt Inline-Farben aus dem frueheren Editor. Sie hier
|
|
* auszuhebeln ist kein Schoenheitseingriff: im Dunkelmodus stuende sonst
|
|
* schwarze Schrift auf weissen Kaesten mitten auf dunklem Grund.
|
|
*
|
|
* !important ist noetig, weil Inline-Stile sonst immer gewinnen. Eigene
|
|
* Farbwahl gibt es in diesem Editor nicht - es geht also nichts verloren.
|
|
*/
|
|
.prose-editor [style] {
|
|
color: inherit !important;
|
|
background-color: transparent !important;
|
|
font-family: inherit !important;
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/*
|
|
* Lange Woerter und Adressen muessen umbrechen duerfen. Der Altbestand ist
|
|
* voller geschuetzter Leerzeichen; bis ein Text einmal gespeichert und dabei
|
|
* bereinigt wurde, haelt das hier die Zeilen im Rahmen.
|
|
*/
|
|
.prose-editor {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.prose-editor:empty::before {
|
|
content: attr(data-placeholder);
|
|
color: var(--color-ink-400);
|
|
}
|
|
.prose-editor h2 {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
margin: 0.9em 0 0.3em;
|
|
}
|
|
.prose-editor h3 {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin: 0.8em 0 0.25em;
|
|
}
|
|
.prose-editor p {
|
|
margin: 0.4em 0;
|
|
}
|
|
.prose-editor ul,
|
|
.prose-editor ol {
|
|
margin: 0.4em 0 0.4em 1.25em;
|
|
}
|
|
.prose-editor ul {
|
|
list-style: disc;
|
|
}
|
|
.prose-editor ol {
|
|
list-style: decimal;
|
|
}
|
|
.prose-editor li {
|
|
margin: 0.15em 0;
|
|
}
|
|
/* Ein Aufzaehlungspunkt, der nur eine weitere Liste enthaelt, bekommt kein
|
|
eigenes Zeichen - sonst stehen zwei nebeneinander. */
|
|
.prose-editor li:has(> ul):not(:has(> :not(ul))),
|
|
.prose-editor li:has(> ol):not(:has(> :not(ol))) {
|
|
list-style: none;
|
|
}
|
|
.prose-editor strong {
|
|
font-weight: 600;
|
|
}
|
|
.prose-editor > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|