- 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
63 lines
1.4 KiB
CSS
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 */
|
|
}
|