/* chrisinterface UI-Kit Christian Steiner · chrisinterface.com Version siehe Datei VERSION. TOKENS — die eine Quelle aller Werte: Farbrollen für hell und dunkel, Abstände, Rundungen, Schatten, Schrift. Anderswo steht nur var(--rolle). HELL ist die Grundlage (:root), DUNKEL eine Schicht darüber, die nur die Farbrollen neu belegt (:root.dunkel). Die Klasse setzt der Baustein modus.js im , noch vor dem ersten Bild. Auf Papier gilt die Schicht nicht (@media not print), denn Papier ist weiß. Ein Werkzeug ergänzt eigene Rollen in einer eigenen Datei, nie hier: Der Sync überschreibt diese Datei bei jedem Lauf. Die Schriften liegen neben dieser Datei in fonts/. Im Werkzeug landet sie unter css/, deshalb schreibt der Sync den Pfad beim Kopieren auf ../fonts/ um. */ @font-face { font-family: 'Roboto'; src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Mono'; src: url('fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ── FLÄCHEN — die Leiter der Höhe ────────────────────────────────── Hell trägt der Schatten die Höhe, alle erhabenen Flächen sind Weiß. Dunkel gibt es keinen sichtbaren Schatten; dort wird heller, was höher liegt. Deshalb heißen die Stufen nach ihrer Aufgabe, nicht nach ihrem Ton. */ --flaeche: #fafafa; /* der Grund der Seite */ --flaeche-erhaben: #ffffff; /* Karte, Panel */ --flaeche-gehoben: #ffffff; /* Kopf, Dialog */ --flaeche-schwebend: #ffffff; /* Menü, Meldung, alles über dem Inhalt */ --flaeche-betont: #f4f4f5; /* unter Zeiger und getroffener Wahl */ --flaeche-aktiv: #ffffff; /* der aktive Griff im Umschalter */ --eingabe: #ffffff; /* Eingabefeld — eine Vertiefung, keine Erhebung */ --vertieft: #f4f4f5; /* die tiefste Fläche: Instrument, Diagramm-Grund */ /* ── LINIEN ── */ --linie: #e4e4e7; --linie-zart: #f4f4f5; /* Haarlinie — und die leise Hover-Fläche des Schließen-Kreuzes */ --linie-stark: #d4d4d8; --linie-tief: #a1a1aa; /* die stärkste Trennlinie */ /* ── TEXT ── */ --text: #18181b; --text-gedaempft: #71717a; --text-leise: #a1a1aa; --text-auf-akzent: #ffffff; /* Schrift auf gefülltem Akzent und auf Rot */ /* ── AKZENT ── */ --akzent: #27274d; --akzent-aktiv: #49496f; /* Hover des Hauptknopfs */ /* ── SIGNALE ────────────────────────────────────────────────────────── Drei Rollen je Signal: der TON für Text und Chips, die FLÄCHE für Knöpfe und Kreise, die TINTE für Schrift auf der Fläche. Rot hat dazu eine Hover-Fläche, weil der Löschen-Knopf sonst beim Darüberfahren nicht antwortet. */ --ok: #15803d; --warnung: #d28009; --fehler: #d32f2f; --info: #3d78a8; --ok-tinte: #ffffff; --warnung-tinte: #ffffff; --fehler-tinte: #ffffff; --info-tinte: #ffffff; --fehler-flaeche: #d32f2f; --fehler-flaeche-aktiv: #b02525; /* ── DIAGRAMM-BALKEN — drei Blaustufen um den Info-Ton ── */ --balken: #5c97c3; --balken-stark: #3d78a8; --balken-leicht: #82b3d4; /* ── DIE VERDUNKELUNG hinter Dialog, Schublade und Sperrfläche ── */ --overlay: rgba(24, 24, 27, 0.45); /* ── SCHATTEN — vier Rollen nach Aufgabe ────────────────────────────── Kante: Fläche auf Fläche. Knopf: ein Griff auf farbiger Bahn, der braucht mehr, sonst verschwindet er. Schwebend: Menü und Meldung, sie hängen an einem Knopf. Fenster: der Dialog liegt über allem. */ --schatten-kante: 0 1px 2px rgba(0,0,0,0.05); --schatten-knopf: 0 1px 2px rgba(0,0,0,0.2); --schatten-schwebend: 0 8px 28px rgba(0,0,0,0.16); --schatten-fenster: 0 16px 48px rgba(0,0,0,0.18); /* ── RUNDUNG ────────────────────────────────────────────────────────── Ein Radius wirkt relativ zur Fläche: Dieselben 8 px sehen an einer Karte rund aus und an einem 520 px breiten Dialog kantig. Deshalb rundet der Dialog stärker als die Karte. */ --rundung-klein: 4px; /* Pillen, Badges, Marker */ --rundung-mittel: 6px; /* Knöpfe, Felder, Meldungen */ --rundung-karte: 8px; /* Karten, Kacheln, große Flächen */ --rundung-gross: 12px; /* Dialoge */ /* ── ABSTÄNDE — eine erlaubte Menge ─────────────────────────────────── Kein Umschalt-Hebel, sondern das Raster: Jeder Abstand außerhalb fällt auf. Unter 4 px ist Feinjustage, über 24 gilt das 8er-Raster. */ --abstand-4: 4px; --abstand-6: 6px; --abstand-8: 8px; --abstand-10: 10px; --abstand-12: 12px; --abstand-14: 14px; --abstand-16: 16px; --abstand-20: 20px; --abstand-24: 24px; --abstand-32: 32px; --abstand-40: 40px; /* Der Abstand zwischen zwei Feldzeilen im Dialog — eine eigene Rolle, weil man den Rhythmus eines Formulars als Ganzes nachjustiert. */ --formular-reihe: 16px; /* ── TREFFERGRÖSSEN AM FINGER ───────────────────────────────────────── Sie greifen nur unter (pointer: coarse). Der Knopf bleibt sichtbar 34 px hoch; ein unsichtbarer Rand trägt das Ziel auf 44. Eine Tabellen- zeile läuft über die volle Breite und braucht weniger. */ --ziel-touch: 44px; --ziel-zeile: 32px; /* ── SCHRIFT ────────────────────────────────────────────────────────── Roboto liegt lokal und steht vorn; die Kette dahinter ist der Notfall, falls die Datei nicht lädt. Mono nur für Kennungen, die Buchstaben und Ziffern mischen — reine Zahlen tragen Robotos tabellarische Ziffern. */ --schriftart-ui: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --schriftart-mono: "Roboto Mono", "SF Mono", Menlo, monospace; /* Die Leiter, benannt nach ihrer Rolle: Wer sie als Ganzes nachjustiert, ändert eine Zeile statt hundert Fundstellen. */ --schrift-2xs: 11px; /* Feld-Etiketten, Tabellenköpfe in Versalien */ --schrift-xs: 12px; /* Hinweise, Fehlertexte, Fußzeilen */ --schrift-kompakt: 13px; /* Felder, Tabellenzellen, Meta, leise Knöpfe */ --schrift-sm: 13px; /* Knöpfe, Tabs, Grundtext in Listen */ --schrift-md: 14px; /* tragende Zeilen im Dialog, Titel eines Leerzustands */ --schrift-grund: 16px; /* Fließtext, Sektions- und Dialogtitel */ --schrift-lg: 18px; /* Blocktitel */ --schrift-titel: 20px; /* Seitentitel, das Schließen-Kreuz */ --schrift-kpi: 24px; /* die große Zahl */ --gewicht-leicht: 300; --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-halbfett: 600; --gewicht-fett: 700; --laufweite: 0.08em; /* Versalien in Sektions- und Tabellenköpfen */ } /* ── DUNKEL ───────────────────────────────────────────────────────────── Nur die Farbrollen. Die Entscheidung hängt an der Klasse `dunkel` am , nicht am Betriebssystem: CSS kann nur fragen, ob der Rechner dunkel steht — umschalten kann der Benutzer nur, was die Seite selbst kontrolliert. `color-scheme: dark` sagt dem Browser Bescheid, sonst bleiben Scrollbalken und Datumsfelder hell auf dunklem Grund. */ /* Auf Papier gilt die Schicht nicht: Papier ist weiß, auch aus der dunklen Welt. Die Klasse `druck-hell` hebt sie zusätzlich am Bildschirm auf, etwa für eine Druckvorschau; modus.js setzt sie beim Drucken. */ @media not print { :root.dunkel:not(.druck-hell) { color-scheme: dark; --flaeche: #121A23; --flaeche-erhaben: #17212C; --flaeche-gehoben: #1c232e; --flaeche-schwebend: #222B3C; --flaeche-betont: #2a3345; --flaeche-aktiv: #2e3748; --eingabe: #151D27; /* tiefer als die Karte: das Feld liegt IN ihr */ --vertieft: #0e131c; --linie: #2e3748; --linie-zart: #232c3a; --linie-stark: #3f4a5e; --linie-tief: #0B1119; --text: #e6e9ef; --text-gedaempft: #8a94a6; --text-leise: #79839a; --text-auf-akzent: #ffffff; --akzent: #4d7da8; --akzent-aktiv: #5e8eb9; /* Dunkel sind die Signaltöne hell, also wird die Tinte darauf dunkel. */ --ok: #4ade80; --warnung: #fbbf24; --fehler: #ef5e6e; --info: #38bdf8; --ok-tinte: #0a3d18; --warnung-tinte: #4a3200; --fehler-tinte: #ffffff; --info-tinte: #073049; --fehler-flaeche: #d04040; --fehler-flaeche-aktiv: #b91c1c; --balken: #6aa8d4; --balken-stark: #7fb2d4; --balken-leicht: #4f86b3; --overlay: rgba(0, 0, 0, 0.6); /* Auf dunklem Grund verschwindet ein 16-%-Schatten fast; hier tragen die zwei großen Schatten deshalb mehr Schwarz. */ --schatten-schwebend: 0 6px 24px rgba(0,0,0,0.35); --schatten-fenster: 0 16px 48px rgba(0,0,0,0.45); } }