565849bd84
v2-Frontend (#139, ECOnGOOD CD Manual Juni 2024): - app/static/v2/: tokens.css, fonts.css, v2.css, Nunito-Sans woff2, Phosphor-Icons (21 SVGs) - app/templates/v2/: base.html + 11 Screens + 8 Component-Macros - AppShell mit Sidebar (Lesen/Pruefen/Daten/Admin), v2-Detail mit allen Features (ScoreHero, MatrixMini, QuoteCard, Redline, Fraktions-Scores) - v2 ist jetzt Default unter / — classic unter /classic - Login-Modal in v2-Topbar mit Tabs Anmelden/Registrieren (#129) - Phosphor-Icons in Sidebar + Topbar mit dynamischem Theme-Toggle - Keyboard-Shortcuts (j/k/Enter/Esc/?/path), Landtag-Suche, Antrag-Historie, Sort-Dropdown, Matrix-Feld-Info-Modal, Bookmarks/Comments/Voting/Share/Re-Analyze Backend-Erweiterungen: - main.py: ~30 neue Routes (/v2/*, /antrag/{ds}, /api/auth/{login,refresh,logout}, /api/me/merkliste/*, /api/admin/*, /v2/admin/*, OG-Cards, etc.) - og_card.py + og_template: Open-Graph-Bilder via Playwright (#141) - wahlprogramm_fetch.py + wahlprogramm-links.yaml: SHA-Gate Auto-DL (#138) - auswertungen.py: BL-Filter + get_wahlperioden Helper (#137) - auth.py: Direct-Access-Grant + Refresh-Token-Cookie Classic-Updates: - Header-DRY via _header.html, Auswertungen redirected, Batch-Inline raus Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
105 lines
4.5 KiB
CSS
105 lines
4.5 KiB
CSS
/*
|
|
* tokens.css — ECOnGOOD Corporate Design Tokens (Manual Juni 2024)
|
|
* Alle v2-Komponenten referenzieren ausschließlich diese Variablen.
|
|
* Kein Hardcoded Hex-Wert in Screens oder Primitives.
|
|
*/
|
|
|
|
:root {
|
|
/* ── Vier Grundfarben (Manual Seite 5) ─────────────────────────── */
|
|
--ecg-dark: #5A5A5A; /* Dunkelgrau — primary text, PANTONE 425 U */
|
|
--ecg-green: #889E33; /* Grün — accent, PANTONE 583 U */
|
|
--ecg-blue: #009DA5; /* Blau — accent, PANTONE 320 U */
|
|
--ecg-light: #BFBFBF; /* Hellgrau — hairlines, infografiken */
|
|
--ecg-teal: #009DA5; /* Alias für --ecg-blue (Kompatibilität) */
|
|
|
|
/* ── Oberflächen ────────────────────────────────────────────────── */
|
|
--paper: #FFFFFF;
|
|
--surface: #F7F7F5;
|
|
--hairline: #E6E6E3;
|
|
|
|
/* ── Semantische Oberflächen-Aliase (Dark-Mode-fähig) ───────────── */
|
|
--ecg-card-bg: #FFFFFF; /* Karten-Hintergrund (= --paper) */
|
|
--ecg-bg-subtle: #F7F7F5; /* Subtiler Hintergrund (= --surface) */
|
|
--ecg-border: #E6E6E3; /* Rahmenfarbe (= --hairline) */
|
|
--ecg-text-muted: #8C8C8C; /* Gedämpfter Text */
|
|
|
|
/* ── Score-Band — Tints aus ECG-Grün / zurückhaltendem Warn-Rot ── */
|
|
--score-high-bg: #E8EED1;
|
|
--score-high-fg: #5E6F1F;
|
|
--score-mid-bg: #F1F1EE;
|
|
--score-mid-fg: #5A5A5A;
|
|
--score-low-bg: #F1DCDA;
|
|
--score-low-fg: #9A2A2A;
|
|
|
|
/* ── Score-Chip-Farben (Fraktions-Tabelle) ──────────────────────── */
|
|
--score-chip-green-bg: #CDDAA1; /* = --redline-ins-bg */
|
|
--score-chip-green-fg: #236020; /* AA 5.1:1 auf chip-green-bg */
|
|
--score-chip-mid-bg: #fff3cd;
|
|
--score-chip-mid-fg: #7d5a00;
|
|
--score-chip-red-bg: #EFC9C3; /* = --redline-del-bg */
|
|
--score-chip-red-fg: #a00000;
|
|
|
|
/* ── Redline-Farben (nur für diff-Markup, nie als UI-Chrome) ────── */
|
|
--redline-del-bg: #EFC9C3;
|
|
--redline-ins-bg: #CDDAA1;
|
|
--redline-contra: #9A2A2A;
|
|
|
|
/* ── Typografie ─────────────────────────────────────────────────── */
|
|
--font-sans: "Avenir Next", "Avenir", "Nunito Sans", Arial, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
|
|
|
|
/* ── Spacing-Raster (4-px-Basis) ───────────────────────────────── */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* ── Layout ─────────────────────────────────────────────────────── */
|
|
--sidebar-width: 230px;
|
|
--content-max: 1180px;
|
|
--breakpoint-mobile: 900px;
|
|
|
|
}
|
|
|
|
/* ── Dark-Mode-Variante ─────────────────────────────────────────────── */
|
|
[data-theme="dark"] {
|
|
--ecg-dark: #D0D0CC;
|
|
--ecg-light: #444440;
|
|
--paper: #1A1A18;
|
|
--surface: #222220;
|
|
--hairline: #333330;
|
|
|
|
/* ── Semantische Oberflächen-Aliase (Dark) ──────────────────────── */
|
|
--ecg-card-bg: #222220; /* = --surface */
|
|
--ecg-bg-subtle: #2A2A28;
|
|
--ecg-border: #333330; /* = --hairline */
|
|
--ecg-text-muted: #888884;
|
|
|
|
/* Score-Bänder im Dark Mode: Chroma halten, Lightness leicht erhöht */
|
|
--score-high-bg: #2A3010;
|
|
--score-high-fg: #AABE55;
|
|
--score-mid-bg: #252523;
|
|
--score-mid-fg: #C0C0BC;
|
|
--score-low-bg: #2E1515;
|
|
--score-low-fg: #E07070;
|
|
|
|
/* ── Score-Chip-Farben (Dark) ───────────────────────────────────── */
|
|
--score-chip-green-bg: #1E3010;
|
|
--score-chip-green-fg: #8FBF6F;
|
|
--score-chip-mid-bg: #2A2510;
|
|
--score-chip-mid-fg: #C9A840;
|
|
--score-chip-red-bg: #301010;
|
|
--score-chip-red-fg: #E07070;
|
|
|
|
/* ── Redline (Dark) — Chroma gedämpft, lesbar auf dunklem Ground ── */
|
|
--redline-del-bg: #3A1A18;
|
|
--redline-ins-bg: #1E2E0A;
|
|
--redline-contra: #C04040;
|
|
}
|