/* ailh-status.css (2026-08-01) * Zweck: WCAG-AA-Kontrastkorrekturen fuer Status-Abzeichen, Hinweiskaesten und sekundaere * Schaltflaechen im Kundenbereich (/dashboard/user/**). Bewusst eine EIGENE Datei statt * Aenderungen in ailh-layout.css/ailh-legal.css: an ailh-layout.css arbeitet parallel ein * anderer Agent (Tab "Verbrauch & Guthaben", usage.blade.php + Diagramm-CSS). Diese Datei * wird NACH ailh-layout.css/ailh-legal.css eingebunden und gewinnt damit ohne !important * ueber gleich-spezifische Regeln dort (Ausnahme: generische .badge.bg-*-Utilities, siehe * unten -- dort steht !important, weil deren genaue Herkunft/Spezifitaet im vorkompilierten * Tailwind/Tabler-Bundle nicht zuverlaessig bestimmbar war). * * ROOT CAUSE der gemeldeten Kontrastprobleme im API-Tab: die vorhandenen Dunkelmodus-Regeln * in ailh-layout.css nutzen den Selektor "[data-theme='dark'] ...". Der Panel-Umschalter * (resources/views/default/panel/layout/partials/mode-script.blade.php) setzt beim Umschalten * aber NICHT das Attribut data-theme am , sondern die KLASSE body.theme-dark bzw. * body.theme-light (per localStorage "lqdDarkMode"). Das Attribut data-theme wird nur einmal * serverseitig aus setting('dash_theme') gesetzt und aendert sich beim Umschalten nie. * Ergebnis: die eigens fuer Dunkelmodus vorgesehenen helleren Text-/Randfarben griffen NIE, * stattdessen blieben die (fuer Hellmodus gedachten) dunklen Gruen-/Rottoene auf dunklem * Grund stehen -- daher "praktisch unlesbar". Alle Regeln hier verwenden deshalb konsequent * ".theme-dark" (Klassenselektor), nicht "[data-theme='dark']". * * Farbstrategie: Abzeichen/Buttons/Hinweiskaesten bekommen JEWEILS eine VOLLE (deckende) * Hintergrundfarbe statt der bisherigen halbtransparenten Tönung. Damit ist der Kontrast * Text-vs-Abzeichenhintergrund exakt berechenbar und unabhaengig vom (je nach gewaehltem * Farbschema/"Customizer" unterschiedlichen) Seiten-/Kartenhintergrund darunter -- die * Vorgabe verlangt ausdruecklich, dass bei Abzeichen der Text gegen die Abzeichen- * Hintergrundfarbe zaehlt, nicht gegen die Seitenfarbe. Randfarbe = Textfarbe, das sichert * zusaetzlich einen sichtbaren Rand (Non-Text-Kontrast) gegen so gut wie jeden Seitenhintergrund. * Alle Werte unten sind gegen die jeweilige Abzeichen-/Kasten-Hintergrundfarbe gerechnet * (WCAG-2.x-Formel, relative Luminanz) -- siehe Handoff/Bericht fuer die Tabelle. */ /* ========================================================================== 1) API-Tab: Zugangsschluessel-Tabelle (resources/views/.../settings/tabs/api.blade.php) Ersetzt/ueberschreibt die (im Dunkelmodus wirkungslosen) Regeln aus ailh-layout.css. ========================================================================== */ .ailh-apikeys__badge { border: 1px solid transparent; } .ailh-apikeys__badge--active { background: #dcfce7; border-color: #166534; color: #166534; } .ailh-apikeys__badge--revoked { background: #fee2e2; border-color: #991b1b; color: #991b1b; } .ailh-apikeys__badge--expired { background: #f1f5f9; border-color: #334155; color: #334155; opacity: 1; } .theme-dark .ailh-apikeys__badge--active { background: #064e3b; border-color: #86efac; color: #86efac; } .theme-dark .ailh-apikeys__badge--revoked { background: #7f1d1d; border-color: #fca5a5; color: #fca5a5; } .theme-dark .ailh-apikeys__badge--expired { background: #334155; border-color: #e2e8f0; color: #e2e8f0; } /* "Widerrufen"-Button: volle Fuellfarbe statt schwacher Tönung, gleiches Rot in beiden Modi (in allen ueberprueften Dunkel-Seitenhintergruenden >= 3:1 Non-Text-Kontrast, siehe Bericht). Hover dunkelt bewusst ab (Weiss-auf-Rot bleibt dabei ueberall >= 4.5:1). */ .ailh-apikeys__btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; } .ailh-apikeys__btn--danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; } /* Werte sind in beiden Modi identisch -- explizit unter .theme-dark wiederholt, damit sie die (wirkungslose, aber weiterhin vorhandene) [data-theme='dark']-Regel in ailh-layout.css in jedem Fall ueberschreiben, falls diese je wirksam werden sollte. */ .theme-dark .ailh-apikeys__btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; } .theme-dark .ailh-apikeys__btn--danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; } /* ========================================================================== 2) Hinweiskaesten: neue Markerklasse "ailh-status-note", die dem Kundenbereich in mehreren Settings-Tabs + der Anbieter-Schluessel-Seite an die bestehende -Instanzen angehaengt wurde (siehe api.blade.php, apiKeys/index.blade.php, settings/tabs/{security,notifications,data,legal,profile}.blade.php). Grund: die Standard-Variante von (kein variant=..) nutzt "text-blue-600" auf "bg-input-background" -- im Dunkelmodus ca. 2.6:1..3.1:1 (gemessen gegen mehrere plausible dunkle Kartenfarben), also klar unter AA. Volle, deckende Kastenfarbe behebt das unabhaengig vom Farbschema. Die Basisklasse lqd-alert bleibt fuer Layout/Icon aktiv, hier werden nur Hintergrund/Rand/Text ueberschrieben. */ .ailh-status-note { background: #dbeafe !important; border-color: #1e3a8a !important; color: #1e3a8a !important; } .ailh-status-note p { color: inherit; } .theme-dark .ailh-status-note { background: #1e3a8a !important; border-color: #bfdbfe !important; color: #bfdbfe !important; } /* ========================================================================== 3) Generische Status-Badges "bg-primary/secondary/success/danger/dark" + ".badge" Betrifft (im Kundenbereich): settings/tabs/notifications.blade.php (Newsletter-Status), settings/tabs/legal.blade.php (AVV-Vertragsstatus), team/edit.blade.php (Einladungsstatus). !important, weil im vorkompilierten Bundle nicht zuverlaessig zu klaeren war, ob/welche gleich- oder hoeherspezifische Regel (Tabler-CSS-Variablen --tblr-badge-color u.ae.) dort noch mitspielt; mit !important ist das Ergebnis unabhaengig davon deterministisch. Kein Blade-Edit noetig -- reine Klassen-Umdefinition. */ .badge.bg-success { background-color: #dcfce7 !important; color: #166534 !important; } .badge.bg-danger { background-color: #fee2e2 !important; color: #991b1b !important; } .badge.bg-primary { background-color: #dbeafe !important; color: #1e3a8a !important; } .badge.bg-secondary { background-color: #f1f5f9 !important; color: #334155 !important; } .badge.bg-dark { background-color: #111827 !important; color: #fff !important; } .theme-dark .badge.bg-success { background-color: #064e3b !important; color: #86efac !important; } .theme-dark .badge.bg-danger { background-color: #7f1d1d !important; color: #fca5a5 !important; } .theme-dark .badge.bg-primary { background-color: #1e3a8a !important; color: #bfdbfe !important; } .theme-dark .badge.bg-secondary { background-color: #334155 !important; color: #e2e8f0 !important; } /* bg-dark bleibt in beiden Modi gleich (Text bereits weiss auf sehr dunklem Grund, 17.7:1 -- unproblematisch, kein Modus-Unterschied noetig). */ /* ========================================================================== 4) settings/tabs/security.blade.php: ".ailh-sec-badge" -- bisher VOELLIG unstyled (kein einziger CSS-Treffer im ganzen Projekt), rendert also als reiner Fliesstext ohne Abzeichen-Optik. Kontrast war dadurch zufaellig schon AA-konform (normale Textfarbe), aber das Muster "Status-Abzeichen" aus dem Auftrag verlangt eine echte, konsistente Abzeichen-Darstellung wie beim API-Tab -- deshalb hier ergaenzt, gleiche Farbpaare wie oben (aktiv=gruen, nicht aktiv/nicht verbunden=neutral). ========================================================================== */ .ailh-sec-badge { display: inline-block; padding: 0.15rem 0.5rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.7rem; font-weight: 600; } .ailh-sec-badge-on { background: #dcfce7; border-color: #166534; color: #166534; } .ailh-sec-badge-off { background: #f1f5f9; border-color: #334155; color: #334155; } .theme-dark .ailh-sec-badge-on { background: #064e3b; border-color: #86efac; color: #86efac; } .theme-dark .ailh-sec-badge-off { background: #334155; border-color: #e2e8f0; color: #e2e8f0; }