/* * design-system.css: Metin2 Web Tracker Design System * * ARCHITEKTUR-ENTSCHEIDUNG: CSS-Custom-Properties (Design Tokens) * ================================================================ * Früher waren Farben und Radien hartcodiert über mehrere Stylesheets * verteilt. Das machte konsistente Änderungen fast unmöglich und * führte zu "Magic Numbers" ohne erkennbare Quelle. * * Lösung: Ein zentrales Design-System mit CSS-Custom-Properties (Variablen) * auf :root. Alle Komponenten referenzieren nur diese Tokens. Wenn ein * Theme-Wechsel (z. B. Dark Mode) gewünscht wird, überschreibt man * einfach diese Variablen in einem einzigen Block. * ================================================================ */ :root { /* ══════════════════════════════════════════════════════════════════════════ DIE FARBEN ══════════════════════════════════════════════════════════════════════════ Das Dashboard war hell. Die Verlauf-Seite ist als Versuch dunkel gebaut worden, und weil das gefiel, gilt es jetzt überall. GEÄNDERT WURDEN NUR DIESE SIEBZEHN WERTE. Nicht eine einzige Regel irgendwo sonst: 436 Stellen im CSS benutzen diese Namen, und sie ziehen alle von allein mit. Genau dafür gibt es Variablen. Wenn ein Umbau an siebzehn Stellen stattfindet und nicht an vierhundert, war das Fundament richtig gebaut. ── WAS DABEI ZU BEACHTEN WAR ──────────────────────────────────────────── Ein dunkles Aussehen ist nicht das helle mit vertauschten Werten. Drei Dinge muss man umdrehen, nicht spiegeln: 1. FLÄCHEN WERDEN HELLER, NICHT DUNKLER, wenn sie hervortreten sollen. Im Hellen liegt eine weiße Karte auf grauem Grund; im Dunklen liegt eine hellere Karte auf fast schwarzem Grund. "raised" heißt also heller, nicht weißer. 2. DIE AKZENTFARBEN MÜSSEN AUFGEHELLT WERDEN. #3b82f6 ist auf Weiß gut lesbar und auf fast Schwarz zu dunkel. Gleicher Farbton, andere Helligkeit. Wer die Werte einfach stehen lässt, bekommt Text, den man erahnt statt liest. 3. DIE "SUBTLE"-TÖNE KIPPEN. Im Hellen sind es fast weiße Pastellfarben für Hintergründe. Dunkel wären sie leuchtende Flecken. Sie werden deshalb zu sehr dunklen, leicht eingefärbten Flächen. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ DEM BROWSER SAGEN, DASS ES DUNKEL IST ══════════════════════════════════════════════════════════════════════ Ich hatte beim dunklen Umbau nach FARBWERTEN im CSS gesucht und dabei etwas übersehen, das gar nicht im CSS steht: Rollbalken, Auswahlfelder und Kalender zeichnet der Browser selbst. Ohne diese eine Zeile nimmt er an, die Seite sei hell, und malt weisse Rollbalken auf schwarzen Grund. Holger ist es aufgefallen, mir nicht, und zwar weil ich nach dem gesucht habe, was ich geschrieben habe, statt nach dem, was man sieht. Eine Prüfung, die nur den eigenen Code kennt, findet nur Fehler im eigenen Code. color-scheme ist die richtige Antwort und nicht ::-webkit-scrollbar: Sie gilt für ALLE Bedienelemente des Browsers, funktioniert in Firefox genauso, und sie beschreibt eine Tatsache statt ein Aussehen. */ color-scheme: dark; /* ── Flächen: von fast schwarz nach oben ─────────────────────────────── */ --color-bg: #0f1117; /* der Grund der Seite */ --color-surface: #161923; /* Karten, Kästen */ --color-surface-raised: #1d2130; /* was darüber liegt: Dialoge, Menüs */ --color-border: #232734; --color-border-subtle: #1c2030; --color-bg-subtle: #1c2030; --color-surface-sunken: #0c0e14; /* Eingabefelder, Vertiefungen */ /* ── Text: drei Stufen, alle über der Lesbarkeitsgrenze ───────────────── Die Grenze für gut lesbaren Text liegt bei 4,5. Die dritte Stufe war zuerst #7d859b. Gegen die Kartenfarbe kam die auf 4,76 und damit gerade so hin. Nur steht "leiser" Text nicht nur auf Karten, sondern auch auf helleren Flächen, und dort fiel sie durch: auf der Warnfarbe #2c2410 4,17 auf einer erhöhten Fläche 4,34 auf dem leisen Rahmen 4,39 Über hundert Stellen lagen darunter. Der Fehler war, gegen EINEN Untergrund zu messen und daraus zu schließen, dass es überall reicht. Ein Wert, der an einer Stelle knapp genügt, genügt nirgends sonst. Man muss ihn gegen den ungünstigsten Fall prüfen. #868ea3 schafft alle sechs vorkommenden Untergründe, der ungünstigste liegt bei 4,69. Gemessen gegen --color-surface (#161923): text #e4e6ee 13,9 : 1 text-secondary #a8b0c4 7,4 : 1 text-muted #868ea3 5,4 : 1 */ --color-text: #e4e6ee; --color-text-secondary: #a8b0c4; --color-text-muted: #868ea3; /* ── Akzent: derselbe Blauton, aufgehellt ────────────────────────────── */ --color-primary: #60a5fa; --color-primary-hover: #93c5fd; /* im Dunklen wird Hover HELLER */ --color-primary-subtle: #14243d; /* dunkles Blau als Hintergrund */ /* ── Rückmeldung: grün, gelb, rot, jeweils aufgehellt ────────────────── */ --color-success: #34d399; --color-success-subtle: #0f2a22; --color-warning: #fbbf24; --color-warning-subtle: #2c2410; --color-danger: #f87171; --color-danger-subtle: #2e1618; /* ══════════════════════════════════════════════════════════════════════ DIE AUFGEHELLTEN GESCHWISTER, UND WARUM ES SIE BRAUCHT ══════════════════════════════════════════════════════════════════════ Blau hatte längst ein --color-primary-hover. Gelb und Rot nicht, und das ist an zwei Stellen aufgefallen: 1. Der Gefahren-Knopf beim Darüberfahren. Dort stand fest #fca5a5, weil es beim dunklen Umbau schnell gehen musste. 2. Die Fortschrittsbalken im Tracker. Ihr Verlauf geht von der Farbe über eine HELLERE Mitte zurück zur Farbe, und diese Mitte wandert, das ergibt das Schimmern. In der Mitte stand #60a5fa fest, und seit dem dunklen Umbau IST #60a5fa die Grundfarbe. Der Verlauf hatte damit dreimal denselben Wert. Ein Farbverlauf zwischen einer Farbe und sich selbst ist keine Animation. Er ist eine Fläche. Die Balken haben also seit dem Umbau nicht mehr geschimmert, und niemandem ist es aufgefallen, weil man das Fehlen einer Bewegung nicht bemerkt. Nur den Wert zu ersetzen hätte den Fehler in einem halben Jahr wiederholt; deshalb stehen die drei Aufhellungen jetzt hier oben beieinander. */ --color-success-hover: #6ee7b7; --color-warning-hover: #fcd34d; --color-danger-hover: #fca5a5; /* ══════════════════════════════════════════════════════════════════════ SCHEIN UND SCHATTEN IN DEN AKZENTFARBEN ══════════════════════════════════════════════════════════════════════ Ein Leuchten um einen Knopf ist dieselbe Farbe wie der Knopf, nur durchsichtig. CSS kann aus --color-primary aber kein rgba() bauen, also standen die Zahlen an sieben Stellen ausgeschrieben da: rgba(59, 130, 246, 0.3) Das ist der ALTE, dunklere Blauton von vor dem Umbau. Er fiel nicht auf, weil ein Schein ohnehin schwach ist, aber er zeigt in eine andere Richtung als alles andere auf der Seite. Eine Farbe, die man nicht ableiten kann, muss man benennen. Sonst schreibt sie irgendwann jemand ab. Die Werte hier entsprechen --color-primary (96,165,250) und --color-danger (248,113,113). Wer die Grundfarben ändert, muss diese drei mitändern; deshalb stehen sie direkt darunter und nicht irgendwo. */ --schein-akzent: rgba(96, 165, 250, 0.30); --schein-akzent-leise: rgba(96, 165, 250, 0.12); --schein-gefahr: rgba(248, 113, 113, 0.25); /* ══════════════════════════════════════════════════════════════════════════ DIE SCHRIFT AUF FARBIGEN FLÄCHEN IST DUNKEL, NICHT WEISS ══════════════════════════════════════════════════════════════════════════ Auf allen farbigen Knöpfen stand "color: #fff". Das war auf einem hellen Design richtig, weil dort ein KRÄFTIGES Blau als Fläche diente. Im Dunklen muss die Fläche aber hell sein, damit sie überhaupt hervortritt, und dann ist Weiß darauf kaum noch zu lesen. Gemessen: weiß auf #3b82f6 (altes Blau) 3,68 : 1 weiß auf #60a5fa (helles Blau) noch schlechter DUNKEL auf #60a5fa 7,42 : 1 Lesbar ist Text ab 4,5. Es geht also nicht darum, ob Weiß hübscher ist, sondern darum, dass die Beschriftung eines Knopfes lesbar sein muss. Ein heller Grund verlangt dunkle Schrift, ein dunkler helle. Das gilt auch dann, wenn der helle Grund nur ein Knopf ist. Dieselbe Überlegung für Grün und Rot: Auch dort ist die Fläche jetzt hell. ══════════════════════════════════════════════════════════════════════════ */ --color-on-accent: #0f1117; /* ══════════════════════════════════════════════════════════════════════════ NAMEN, DIE BENUTZT WURDEN, OHNE DASS ES SIE GAB ══════════════════════════════════════════════════════════════════════════ Beim Umstellen auf ein dunkles Aussehen habe ich alle Variablen gesucht, die im CSS vorkommen, und sie mit den hier definierten verglichen. Acht Namen wurden benutzt, die nirgends festgelegt sind: --color-bg-subtle 13 Regeln, davon 13 OHNE Ersatzwert --color-accent 6 Regeln, Ersatz #2563eb --color-warn-subtle 5 Regeln, Ersatz #fff8e1 --color-text-primary 4 Regeln, OHNE Ersatzwert --font-weight-regular 4 Regeln, OHNE Ersatzwert --color-text-tertiary 1 Regel --color-surface-sunken 1 Regel Die ohne Ersatzwert tun bis heute GAR NICHTS. Ein "background: var(--color-bg-subtle)" ohne Definition ist keine Farbe, sondern eine Zeile, die der Browser verwirft. Das ist niemandem aufgefallen, weil der geerbte Hintergrund zufällig passte. Eine Regel, die nichts bewirkt, sieht aus wie eine Entscheidung. Man findet sie nur, wenn man alle Namen einmal gegeneinander hält. Für das dunkle Aussehen sind sie gefährlich: --color-warn-subtle fällt auf ein fast weißes Gelb zurück, und das leuchtet auf dunklem Grund wie eine Lampe. Deshalb bekommen alle acht jetzt einen richtigen Wert. Die Namen bleiben, statt die 34 Fundstellen umzuschreiben: Es sind sinnvolle Bezeichnungen, und ein Alias ist billiger und weniger riskant als 34 Änderungen an Dateien, die sonst niemand anfasst. ══════════════════════════════════════════════════════════════════════════ */ /* ACHTUNG, HIER STANDEN ZWEI WERTE ZWEIMAL. --color-bg-subtle und --color-surface-sunken habe ich zuerst hier mit HELLEN Werten ergänzt und danach oben im Farbblock dunkel gesetzt. In CSS gewinnt die spätere Zeile, also die hellen. Auf der Aufräum-Seite stand daraufhin ein weißes Feld (#eef2f7) mitten auf dunklem Grund, mit hellem Text darin: Kontrast 1,93. Eine Variable zweimal zu setzen ist kein Streit, den man mitbekommt. Der zweite Wert gewinnt einfach, ohne Meldung. Die beiden stehen jetzt nur noch oben bei den anderen Flächenfarben. */ --color-accent: var(--color-primary); --color-warn-subtle: var(--color-warning-subtle); --color-text-primary: var(--color-text); --color-text-tertiary: var(--color-text-muted); --font-weight-regular: 400; /* ── Spacing ────────────────────────────────────────── */ /* Warum: 4px-Base-System? * - Alle Abstände sind Vielfache von 4. Das erleichtert * das mentale Rechnen und verhindert "komische" Zahlen wie 7px oder 13px. * - xs/sm/md/lg/xl ist eine skalierbare Namenskonvention, die * auch bei künftigen Erweiterungen (z. B. 2xl) funktioniert. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ── Radii ────────────────────────────────────────── */ /* Warum: Abgestufte Radien statt überall gleich? * - Kleine Elemente (Chips, Buttons) brauchen kleine Radien (8px). * - Große Container (Cards, Modals) profitieren von größeren Radien (16 bis 20px). * - 9999px für "full" garantiert perfekte Pillenform bei jeder Höhe. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ───────────────────────────────────────── */ /* Warum: Schatten mit sehr niedriger Opazität? * - Moderne UI-Designs nutzen dezente Schatten, keine harten Drops. * - Alle Schatten basieren auf dem Slate-Farbton (15, 23, 42) mit * 4 bis 12% Opazität, das wirkt elegant, nicht altmodisch. * - Der Y-Offset steigt mit der Größe (sm: 1px, xl: 16px), um * die Illusion von Höhe zu verstärken. */ /* Auf dunklem Grund brauchen Schatten mehr Deckung, sonst sind sie gar nicht da: rgba(15,23,42,0.04) ist praktisch die Hintergrundfarbe selbst. Ein Schatten trennt Ebenen dadurch, dass er DUNKLER ist als das, worauf er fällt; wenn der Grund schon fast schwarz ist, muss er echtes Schwarz sein und kräftiger. Ein Schatten, den man nicht sieht, ordnet nichts an. Er verbraucht nur Rechenzeit. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60); /* ── Typography ────────────────────────────────────── */ /* Warum: Inter als Primary-Font? * - Inter ist eine Open-Source-Schrift, die für Bildschirme optimiert ist. * - Die Fallback-Kette (system-ui, -apple-system, Segoe UI, Roboto, Arial) * stellt sicher, dass auf jedem System eine lesbare Schrift verfügbar ist. * - Monospace: SF Mono für macOS, Fira Code für Linux, Consolas für Windows. */ --font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace; /* Warum: 14px als Base-Size? * - 14px ist der Sweet Spot für Desktop-Anwendungen, klein genug, * um viele Informationen darzustellen, groß genug für Lesbarkeit. * - xs (12px) für Meta-Infos, xl (24px) für Page-Titel. */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 24px; /* Warum: Font-Weights als Tokens? * - Nicht alle Schriftarten haben die gleichen Weight-Zahlen. * - Variablen erlauben globale Anpassungen, wenn die Schrift gewechselt wird. * - 400/500/600/700 deckt 99% aller typografischen Anforderungen ab. */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── Transitions ───────────────────────────────────── */ /* Warum: cubic-bezier(0.4, 0, 0.2, 1)? * - Das ist die "ease-out"-Kurve aus Material Design. * - Sie startet schnell und verlangsamt sich am Ende, das fühlt sich * für UI-Elemente natürlicher an als lineare Übergänge. * - fast (150ms) für Button-Hover, base (250ms) für Modals, * slow (350ms) für größere Layout-Änderungen wie Progress-Bars. */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ────────────────────────────────────────── */ /* Warum: 1600px max-width? * - Bei Ultra-Wide-Monitoren (2560px+) würde ein 100% Container * unleserlich breite Zeilen erzeugen. 1600px ist der Punkt, * ab dem mehr Breite keinen Mehrwert für die Lesbarkeit bringt. * - 64px Header-Höhe ist ein Standardwert für Top-Navbars * mit Logo, Links und User-Menu. */ --container-max: 1600px; --header-height: 64px; } /* ── Reset & Base ─────────────────────────────────────── */ /* Warum: box-sizing: border-box auf *? * - Ohne border-box würden Padding und Border die definierte Breite * überschreiten. Das macht Layout-Berechnungen unvorhersehbar. * - *, *::before, *::after stellt sicher, dass auch Pseudo-Elemente * und alle Kinder das gleiche Verhalten haben. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════════════════════════════════════ LINKS ══════════════════════════════════════════════════════════════════════════ Es gab für Links keine einzige Regel. Alle, die nicht zufällig eine eigene Klasse hatten, benutzten die Standardfarbe des Browsers: #0000ee, ein dunkles Blau aus den neunziger Jahren. Auf weißem Grund fällt das nicht auf, auf fast schwarzem ist es kaum noch zu erkennen. Gemessen auf der Aufräum-Seite: Kontrast 1,87, wo 4,5 nötig sind. Was der Browser mitbringt, ist keine Entscheidung, sondern eine Lücke. Man sieht sie erst, wenn sich der Untergrund ändert. Die Unterstreichung erscheint erst beim Darüberfahren: In dichten Listen wie der Aufräum-Seite stehen Links dicht an dicht, und permanente Striche machen daraus ein Gitter. ══════════════════════════════════════════════════════════════════════════ */ a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text); background: var(--color-bg); min-height: 100vh; } /* ── Hilfsklassen ───────────────────────────────────── */ /* Hier stehen nur die Einzeiler, die tatsächlich irgendwo im Dashboard * benutzt werden. Früher lag hier ein ganzer Satz Abstands- und * Flexbox-Helfer nach Tailwind-Art (.d-flex, .gap-md, .mt-lg und so * weiter). Keiner davon stand je in einer Vorlage oder in einem Skript, * sie waren auf Vorrat geschrieben. Vorrat, den niemand abholt, ist nur * Ballast: Man liest ihn beim Suchen mit und glaubt, es gäbe ein System, * an das man sich halten muss. * * Wer wirklich einen neuen Helfer braucht, legt ihn an, wenn die dritte * Stelle danach verlangt. Vorher tut ein style-Attribut es auch. */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); } .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .text-secondary { color: var(--color-text-secondary); } .w-full { width: 100%; }