Jonas MenzelandClaude Opus 5
d63cc0af65
- Demo-Seed mit realistischem deutschem Haushalt (make seed-demo): drei Konten, zehn Firmen samt Logos, zwölf Posten, bestätigte Historie, Buchungen, Budgets und Sparziele; alle Termine relativ zum heutigen Monat - Tastaturkürzel n / r / / / ? samt Übersicht; greifen nur außerhalb von Eingabefeldern - Fehlergrenze für Renderfehler und eigene 404-Seite - Farbtoken beider Modi gegen WCAG geprüft und nachgezogen: Hilfstext lag hell bei 2,56:1, Weiß auf dem Primärknopf bei 3,30:1 – jetzt überall >= 4,5:1 - Abo-Übersicht heißt „Laufende Kosten“, weil sie auch Miete und Sparplan enthält - build.yml fällt auf GITEA_TOKEN zurück, wenn REGISTRY_TOKEN fehlt, und erklärt im Fehlerfall, wie das Secret anzulegen ist - README mit Screenshot-Abschnitt, Kürzeln und Barrierefreiheit Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014e7t8UpmoVNMtWivY5LiSH
109 lines
2.9 KiB
CSS
109 lines
2.9 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer base {
|
||
/* Heller Modus.
|
||
Die Werte sind gegen die WCAG-Kontraste geprüft: Text erreicht überall
|
||
mindestens 4,5:1, Bedienelemente 3:1. Insbesondere `faint` und `accent`
|
||
sind bewusst dunkler als die naheliegenden Tailwind-Stufen – slate-400
|
||
käme auf 2,56:1 und Weiß auf green-600 nur auf 3,30:1. */
|
||
:root {
|
||
--color-ground: 248 250 252;
|
||
--color-surface: 255 255 255;
|
||
--color-raised: 241 245 249;
|
||
--color-line: 203 213 225;
|
||
--color-ink: 15 23 42;
|
||
--color-muted: 71 85 105;
|
||
--color-faint: 91 107 128;
|
||
--color-accent: 21 128 61;
|
||
--color-accent-ink: 255 255 255;
|
||
--color-positive: 21 128 61;
|
||
--color-negative: 190 18 60;
|
||
--color-warning: 180 83 9;
|
||
}
|
||
|
||
/* Diagrammfarben, heller Modus.
|
||
Die Reihenfolge der Serienfarben ist die Absicherung gegen Farbfehlsichtigkeit
|
||
und wurde gegen die Flächen dieser Anwendung geprüft – nicht umsortieren.
|
||
Grün/Rot wäre als Serienpaar bei Deuteranopie nicht unterscheidbar (ΔE 7,9)
|
||
und bleibt deshalb den Vorzeichen im Text vorbehalten. */
|
||
:root {
|
||
--viz-series-1: #2a78d6;
|
||
--viz-series-2: #eb6834;
|
||
--viz-series-3: #1baf7a;
|
||
--viz-grid: #e2e8f0;
|
||
--viz-axis: #94a3b8;
|
||
--viz-label: #64748b;
|
||
--viz-surface: #ffffff;
|
||
--viz-good: #0ca30c;
|
||
--viz-warning: #fab219;
|
||
--viz-critical: #d03b3b;
|
||
}
|
||
|
||
/* Dunkler Modus – die Vorgabe der Anwendung */
|
||
.dark {
|
||
--color-ground: 15 17 21;
|
||
--color-surface: 24 27 33;
|
||
--color-raised: 33 37 45;
|
||
--color-line: 59 66 80;
|
||
--color-ink: 226 232 240;
|
||
--color-muted: 148 163 184;
|
||
/* Heller als slate-500: dort läge der Hilfstext bei 3,62:1. */
|
||
--color-faint: 129 142 163;
|
||
--color-accent: 34 197 94;
|
||
--color-accent-ink: 4 20 11;
|
||
--color-positive: 74 222 128;
|
||
--color-negative: 248 113 113;
|
||
--color-warning: 251 191 36;
|
||
|
||
/* Eigene Stufen für die dunkle Fläche, kein automatisches Umdrehen. */
|
||
--viz-series-1: #3987e5;
|
||
--viz-series-2: #d95926;
|
||
--viz-series-3: #199e70;
|
||
--viz-grid: #2b3038;
|
||
--viz-axis: #4b5563;
|
||
--viz-label: #94a3b8;
|
||
--viz-surface: #181b21;
|
||
--viz-good: #0ca30c;
|
||
--viz-warning: #fab219;
|
||
--viz-critical: #d03b3b;
|
||
}
|
||
|
||
html {
|
||
@apply h-full;
|
||
}
|
||
|
||
body {
|
||
@apply h-full bg-ground font-sans text-ink antialiased;
|
||
}
|
||
|
||
#root {
|
||
@apply h-full;
|
||
}
|
||
|
||
/* Sichtbarer Fokus überall – die Anwendung ist vollständig per Tastatur bedienbar. */
|
||
:focus-visible {
|
||
@apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-ground;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
@apply h-2 w-2;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
@apply rounded-full bg-line;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
.card {
|
||
@apply rounded-card border border-line bg-surface;
|
||
}
|
||
|
||
/* Zahlen sollen untereinander bündig stehen. */
|
||
.tabular {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|