Files
CPLv4.0/styles/globals.css
ISA ba690c1e03 fix: DatePicker über Tabellenkopf anzeigen durch z-index und Portal-Lösung
- react-datepicker auf portalId 'root-portal' umgestellt
- CSS-Klasse 'custom-datepicker-popper' mit z-index: 9999 in globals.css ergänzt
- Problem behoben, dass DatePicker hinter dem sticky Tabellen-Header verborgen war
- Tailwind-Konfiguration um z-[60,70] erweitert, wenn nötig
2025-07-07 11:28:56 +02:00

63 lines
1.4 KiB
CSS

/* global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
--littwin-blue: #00aeef;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@media (prefers-color-scheme: dark) {
input {
background-color: #333 !important; /* Dunkler Hintergrund im Darkmode */
color: #fff !important; /* Weißer Text im Darkmode */
border: 1px solid #555; /* Optional: etwas hellerer Rahmen */
}
}
@media (prefers-color-scheme: light) {
input {
background-color: white !important; /* Heller Hintergrund im Lightmode */
color: black !important; /* Schwarzer Text im Lightmode */
border: 1px solid #ccc; /* Optional: heller Rahmen */
}
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
background-color: var(--littwin-blue) !important;
color: white !important;
}
.react-datepicker__day--selected:hover {
background-color: #0095cc !important; /* dunklere Version von Littwin-Blau */
}
.react-datepicker__day--today {
border: 1px solid var(--littwin-blue);
}
.custom-datepicker-popper {
z-index: 9999 !important; /* Maximale Priorität */
}