fix: Tag-Modus — Sidebar, Chat-Panel, Modals, Kacheln lesbar

- NavigationFAB/ChatFAB: bg-black/* → weisser Hintergrund im Light Mode
- Hover-States: bg-white/* → leichte Grautöne
- Shadows: dunkle Schatten → leichte Schatten
- Modal-Backdrops: transparent statt dunkel
- Input-Felder, KPI-Cards, Progress-Bar angepasst
- Farbige Akzent-Hintergründe (rot/grün/amber) leichter

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-27 08:27:43 +01:00
parent fa8010cf91
commit c4d8da6d0d

View File

@@ -175,6 +175,57 @@ html, body {
}
}
/* Light mode: panel backgrounds (NavigationFAB, ChatFAB, Overlays) */
.theme-light .bg-black\/80,
.theme-light .bg-black\/90,
.theme-light .bg-black\/60 {
background-color: rgba(255, 255, 255, 0.92) !important;
}
.theme-light .bg-slate-950 { background-color: #f8f9fc; }
/* Navigation FAB panel */
.theme-light .shadow-black\/50 { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; }
.theme-light .shadow-indigo-600\/30 { box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.15) !important; }
.theme-light .shadow-indigo-500\/30 { box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.15) !important; }
/* Active slide number badge in sidebar */
.theme-light .bg-white\/10 { background-color: rgba(0, 0, 0, 0.06); }
.theme-light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03); }
.theme-light .bg-white\/\[0\.1\] { background-color: rgba(0, 0, 0, 0.06); }
.theme-light .hover\:bg-white\/20:hover { background-color: rgba(0, 0, 0, 0.08) !important; }
.theme-light .hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(0, 0, 0, 0.04) !important; }
.theme-light .hover\:bg-white\/\[0\.1\]:hover { background-color: rgba(0, 0, 0, 0.06) !important; }
.theme-light .hover\:bg-white\/\[0\.15\]:hover { background-color: rgba(0, 0, 0, 0.08) !important; }
/* Chat input field */
.theme-light input.bg-white\/\[0\.06\],
.theme-light .bg-white\/\[0\.06\] { background-color: rgba(0, 0, 0, 0.04); }
/* KPI cards, glass cards with colored glows */
.theme-light .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important; }
/* Gradient text stays vibrant in light mode */
.theme-light .bg-gradient-to-r.from-indigo-400 {
background: linear-gradient(135deg, #4f46e5, #7c3aed, #3b82f6) !important;
-webkit-background-clip: text !important;
}
/* Navigation controls (prev/next arrows) */
.theme-light .bg-white\/\[0\.15\] { background-color: rgba(0, 0, 0, 0.08); }
/* Colored accent backgrounds — keep but lighten */
.theme-light .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.08); }
.theme-light .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.08); }
.theme-light .bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.08); }
/* Modal backdrops */
.theme-light .bg-black\/60 { background-color: rgba(0, 0, 0, 0.3) !important; }
.theme-light .bg-slate-900\/95 { background-color: rgba(255, 255, 255, 0.97) !important; }
/* Progress bar */
.theme-light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.05); }
.theme-light .text-shadow-glow {
text-shadow: none;
}