Nick.Rosenloecher/ApiCore
1
0 Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): moderneres visuelles Redesign (Farben, Tiefe, Dashboard-Hero)

Browse Source 
Kartenhintergrund und Seitenhintergrund waren fast farbgleich, wodurch
alles flach wirkte trotz vorhandenem Schatten. Staerkerer Kontrast
(--background/--card/--muted/--border), neue Gradient- und
Schatten-Tokens (--gradient-honey/-sage/-sky, --shadow-soft/-elevated).

Card-Komponente: rounded-2xl, echter sichtbarer Schatten, optionaler
Hover-Lift (interactive-Prop). Sidebar: solide Gradient-Badge, kraeftiger
Active-Pill-Zustand statt blassem Tint. Header: sticky mit Blur-Schatten
statt hartem Rand. Dashboard: Gradient-Hero mit Begruessung und
Honeycomb-Muster, farbige Gradient-Icon-Badges pro KPI-Kachel,
Hinweise-Zeilen mit Icon statt rohem Enum-Badge (dabei toten
CONSPICUOUS_COLONY-Style-Key gefunden und auf COLONY_ATTENTION
korrigiert). Honeycomb-Hintergrund aus der Login-Seite in eine
gemeinsame Komponente extrahiert und dort mit dem gleichen
Gradient-Badge-Header konsistent gemacht.
This commit is contained in:
Nick Szaunig committed 2026-08-23 20:10:33 +02:00
1 parent 6ab028d1be
commit 5cacc3c60d
7 files changed
+202 -103
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ApiCore-Frontend/src/app/globals.css
+34 -24
View File
@@ -65,24 +65,24 @@
}
:root {
--background: oklch(0.98 0.012 85);
--foreground: oklch(0.24 0.025 55);
--card: oklch(0.995 0.006 85);
--card-foreground: oklch(0.24 0.025 55);
--popover: oklch(0.995 0.006 85);
--popover-foreground: oklch(0.24 0.025 55);
--primary: oklch(0.6 0.135 50);
--primary-foreground: oklch(0.98 0.02 85);
--secondary: oklch(0.46 0.06 145);
--background: oklch(0.955 0.017 80);
--foreground: oklch(0.22 0.028 55);
--card: oklch(0.995 0.004 90);
--card-foreground: oklch(0.22 0.028 55);
--popover: oklch(0.995 0.004 90);
--popover-foreground: oklch(0.22 0.028 55);
--primary: oklch(0.6 0.15 48);
--primary-foreground: oklch(0.99 0.02 85);
--secondary: oklch(0.44 0.07 145);
--secondary-foreground: oklch(0.98 0.015 100);
--muted: oklch(0.93 0.016 85);
--muted-foreground: oklch(0.5 0.03 65);
--accent: oklch(0.94 0.028 75);
--accent-foreground: oklch(0.28 0.04 50);
--muted: oklch(0.9 0.02 82);
--muted-foreground: oklch(0.48 0.032 65);
--accent: oklch(0.93 0.032 74);
--accent-foreground: oklch(0.26 0.045 50);
--destructive: oklch(0.5 0.16 30);
--border: oklch(0.88 0.02 78);
--input: oklch(0.88 0.02 78);
--ring: oklch(0.6 0.135 50);
--border: oklch(0.85 0.024 78);
--input: oklch(0.85 0.024 78);
--ring: oklch(0.6 0.15 48);
--warning: oklch(0.68 0.14 75);
--warning-foreground: oklch(0.24 0.04 60);
--success: oklch(0.46 0.06 145);
@@ -93,14 +93,19 @@
--chart-4: oklch(0.5 0.16 30);
--chart-5: oklch(0.55 0.05 250);
--radius: 0.75rem;
--sidebar: oklch(0.98 0.012 85);
--sidebar-foreground: oklch(0.24 0.025 55);
--sidebar-primary: oklch(0.6 0.135 50);
--sidebar-primary-foreground: oklch(0.98 0.02 85);
--sidebar-accent: oklch(0.94 0.028 75);
--sidebar-accent-foreground: oklch(0.28 0.04 50);
--sidebar-border: oklch(0.88 0.02 78);
--sidebar-ring: oklch(0.6 0.135 50);
--sidebar: oklch(0.995 0.004 90);
--sidebar-foreground: oklch(0.22 0.028 55);
--sidebar-primary: oklch(0.6 0.15 48);
--sidebar-primary-foreground: oklch(0.99 0.02 85);
--sidebar-accent: oklch(0.93 0.032 74);
--sidebar-accent-foreground: oklch(0.26 0.045 50);
--sidebar-border: oklch(0.85 0.024 78);
--sidebar-ring: oklch(0.6 0.15 48);
--gradient-honey: linear-gradient(135deg, oklch(0.74 0.15 62) 0%, oklch(0.56 0.16 38) 100%);
--gradient-sage: linear-gradient(135deg, oklch(0.64 0.09 150) 0%, oklch(0.4 0.075 145) 100%);
--gradient-sky: linear-gradient(135deg, oklch(0.68 0.1 235) 0%, oklch(0.5 0.1 255) 100%);
--shadow-elevated: 0 1px 2px -1px oklch(0.3 0.05 50 / 8%), 0 8px 24px -8px oklch(0.3 0.05 50 / 16%);
--shadow-soft: 0 1px 2px -1px oklch(0.3 0.05 50 / 6%), 0 4px 12px -4px oklch(0.3 0.05 50 / 10%);
}
.dark {
@@ -139,6 +144,11 @@
--sidebar-accent-foreground: oklch(0.94 0.02 80);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: oklch(0.72 0.13 55);
--gradient-honey: linear-gradient(135deg, oklch(0.62 0.14 55) 0%, oklch(0.38 0.13 40) 100%);
--gradient-sage: linear-gradient(135deg, oklch(0.5 0.08 148) 0%, oklch(0.3 0.06 145) 100%);
--gradient-sky: linear-gradient(135deg, oklch(0.55 0.09 235) 0%, oklch(0.34 0.09 255) 100%);
--shadow-elevated: 0 1px 2px -1px oklch(0 0 0 / 30%), 0 8px 24px -8px oklch(0 0 0 / 45%);
--shadow-soft: 0 1px 2px -1px oklch(0 0 0 / 25%), 0 4px 12px -4px oklch(0 0 0 / 30%);
}
@layer base {