/* SPDX-License-Identifier: Apache-2.0 — Webkultur GmbH * * Eigenes, schlankes CSS. Kein Framework, kein CDN: die App darf nichts aus * dem Netz holen (VPN-intern), und ein Tailwind-Werkzeugkasten waere fuer * eine Handvoll Ansichten mehr Bau als Nutzen. * * ANMUTUNG bewusst wie die zugekauften Schwester-Apps (Urlaubsverwaltung und * Zeiterfassung von focus shift), weil die Praxis alle drei im selben Atemzug * benutzt: ruhige Zinc-Graustufen, gruene Hauptaktion, 0.875rem in * Bedienelementen, 6px Eckenradius, blauer Fokusring, drei Themen * (System/Hell/Dunkel) ueber eine Klasse am . * * Herkunft der Werte: die Farbrollen und Abstaende sind an der * **Urlaubsverwaltung** (Apache-2.0, github.com/urlaubsverwaltung/urlaubsverwaltung, * src/main/css/theme.css und components/*.css) abgelesen; die dortigen Werte * sind die Tailwind-Standardpalette (MIT). Uebernommen sind nur Farbwerte und * Maße — kein Code, kein CSS, keine Templates. Aus der Zeiterfassung ist * NICHTS uebernommen (AGPL-3.0, Netzwerk-Copyleft; siehe * docs/konzept-dienstplanung.md). */ /* --- Farbrollen: hell ---------------------------------------------------- */ :root { color-scheme: light; --grund: #fafafa; /* zinc-50 */ --flaeche: #ffffff; --flaeche-leise: #f4f4f5; /* zinc-100 */ --flaeche-tot: #e4e4e7; /* zinc-200 */ --linie: #e4e4e7; /* zinc-200 */ --linie-stark: #d4d4d8; /* zinc-300 */ --text: #27272a; /* zinc-800 */ --text-leise: #52525b; /* zinc-600 */ --text-schwach: #71717a; /* zinc-500 */ --haupt: #15803d; /* green-700 */ --haupt-rand: #166534; /* green-800 */ --haupt-leise: #f0fdf4; /* green-50 */ --haupt-text: #ffffff; --info: #1d4ed8; /* blue-700 */ --info-leise: #eff6ff; /* blue-50 */ --fokus: #93c5fd; /* blue-300 */ --warn: #b45309; /* amber-700 */ --warn-leise: #fffbeb; /* amber-50 */ --warn-rand: #fcd34d; /* amber-300 */ --gefahr: #b91c1c; /* red-700 */ --gefahr-leise: #fef2f2; /* red-50 */ --gefahr-rand: #fca5a5; /* red-300 */ --besetzt: #dbeafe; /* blue-100 */ --besetzt-rand: #1d4ed8; --besetzt-text: #1e3a8a; /* blue-900 */ --radius: 6px; --radius-klein: 4px; --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bedien-groesse: 0.875rem; --kopf-hoehe: 3.5rem; /* 32px je Kachel-Spur = Balkenhoehe der Vorlage (ohne Kopfzeile). */ --kachelhoehe: 2rem; --schatten: 0 1px 2px rgb(0 0 0 / 0.05); } /* --- Farbrollen: dunkel -------------------------------------------------- */ /* Zwei Wege, dasselbe Ergebnis: System-Einstellung (Klasse theme-system, der * Startwert) und ausdrueckliche Wahl (theme-dark). Jede Rolle wird hier neu * gesetzt -- genau das fehlte vorher, weshalb dunkel schwarze Baender ueber * den Zellen zeigte. */ @media (prefers-color-scheme: dark) { html.theme-system { color-scheme: dark; --grund: #18181b; /* zinc-900 */ --flaeche: #27272a; /* zinc-800 */ --flaeche-leise: #1f1f23; --flaeche-tot: #202024; --linie: #3f3f46; /* zinc-700 */ --linie-stark: #52525b; /* zinc-600 */ --text: #f4f4f5; /* zinc-100 */ --text-leise: #d4d4d8; /* zinc-300 */ --text-schwach: #a1a1aa; /* zinc-400 */ --haupt: #15803d; --haupt-rand: #16a34a; --haupt-leise: #14251a; --haupt-text: #f0fdf4; --info: #93c5fd; --info-leise: #1e293b; --fokus: #93c5fd; --warn: #fcd34d; --warn-leise: #2a2010; --warn-rand: #b45309; --gefahr: #fca5a5; --gefahr-leise: #2a1516; --gefahr-rand: #b91c1c; --besetzt: #1e3a5f; --besetzt-rand: #60a5fa; --besetzt-text: #dbeafe; --schatten: 0 1px 2px rgb(0 0 0 / 0.4); } } html.theme-dark { color-scheme: dark; --grund: #18181b; --flaeche: #27272a; --flaeche-leise: #1f1f23; --flaeche-tot: #202024; --linie: #3f3f46; --linie-stark: #52525b; --text: #f4f4f5; --text-leise: #d4d4d8; --text-schwach: #a1a1aa; --haupt: #15803d; --haupt-rand: #16a34a; --haupt-leise: #14251a; --haupt-text: #f0fdf4; --info: #93c5fd; --info-leise: #1e293b; --fokus: #93c5fd; --warn: #fcd34d; --warn-leise: #2a2010; --warn-rand: #b45309; --gefahr: #fca5a5; --gefahr-leise: #2a1516; --gefahr-rand: #b91c1c; --besetzt: #1e3a5f; --besetzt-rand: #60a5fa; --besetzt-text: #dbeafe; --schatten: 0 1px 2px rgb(0 0 0 / 0.4); } /* --- Grundlagen --------------------------------------------------------- */ * { box-sizing: border-box; } /* Das `hidden`-Attribut muss auch Elemente mit eigenem `display` verbergen * (z.B. `.knopf { display: inline-flex }`) — sonst zeigt der Bedarfs-Dialog * „zurueck zum Template" auch bei einem Template-Balken. */ [hidden] { display: none !important; } body { margin: 0; font: 15px/1.5 var(--schrift); color: var(--text); background: var(--grund); -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; } a { color: var(--info); } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; } .nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Kopfzeile ---------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; height: var(--kopf-hoehe); padding: 0 1.25rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); } .kopf .marke { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; } .marke-punkt { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--haupt); box-shadow: 0 0 0 3px var(--haupt-leise); } /* `> nav`, NICHT `nav`: der Wechsler ist selbst ein `