/* Flatpickr Dark-Theme — passt den Kalender an das Backend-/Veranstalter- Farbschema an (statt weißer Default-Optik). Wird sowohl im Backend (admin-edit-event) als auch im Frontend (Submit-Tab, EditEvent, Filter) geladen. Selektoren ohne Scope, weil Flatpickr seinen Kalender an `` anhängt — er ist nie Kind unseres `.ek-section`/`.ek-dashboard`. */ /* Container + Pfeil zur Source */ .flatpickr-calendar { background: #1e2530; border: 1px solid #3a4a5c; border-radius: 6px; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); color: #e4edf6; } .flatpickr-calendar.arrowTop::before { border-bottom-color: #3a4a5c; } .flatpickr-calendar.arrowTop::after { border-bottom-color: #1e2530; } .flatpickr-calendar.arrowBottom::before { border-top-color: #3a4a5c; } .flatpickr-calendar.arrowBottom::after { border-top-color: #1e2530; } /* Monats-Header (Pfeile + Monat/Jahr) */ .flatpickr-months, .flatpickr-month { background: transparent; color: #e4edf6; } .flatpickr-current-month { color: #e4edf6; padding-top: .55rem; } .flatpickr-current-month input.cur-year, .flatpickr-current-month .numInput.cur-year { color: #e4edf6; background: transparent; font-weight: 500; } .flatpickr-current-month .flatpickr-monthDropdown-months { color: #e4edf6; background: #1e2530; font-weight: 500; } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #1e2530; color: #e4edf6; } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: #2a3850; } .flatpickr-prev-month, .flatpickr-next-month { color: #e4edf6; fill: #e4edf6; } .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #cbd5e1; } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #14b8a6; } /* Wochentag-Header */ .flatpickr-weekdays { background: transparent; } span.flatpickr-weekday { color: #9ab0c4; background: transparent; font-weight: 500; } /* Tages-Zellen */ .flatpickr-day { color: #e4edf6; background: transparent; border-color: transparent; border-radius: 4px; } .flatpickr-day:hover, .flatpickr-day:focus { background: #2a3850; border-color: #2a3850; color: #ffffff; } .flatpickr-day.today { border-color: #14b8a6; color: #14b8a6; } .flatpickr-day.today:hover { background: #14b8a6; border-color: #14b8a6; color: #0c1623; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.startRange, .flatpickr-day.selected.endRange { background: #14b8a6; border-color: #14b8a6; color: #0c1623; font-weight: 600; } .flatpickr-day.inRange { background: rgba(20, 184, 166, .15); border-color: rgba(20, 184, 166, .15); color: #ffffff; box-shadow: none; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(155, 176, 196, .4); background: transparent; border-color: transparent; } /* Zeit-Picker (falls aktiviert) */ .flatpickr-time { background: #253040; border-top: 1px solid #3a4a5c; color: #e4edf6; } .flatpickr-time input { color: #e4edf6; background: transparent; } .flatpickr-time input:hover, .flatpickr-time input:focus { background: #2a3850; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: #e4edf6; } .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: #2a3850; } /* Numerischer Up/Down-Pfeil im Jahr-Spinner. Default-Flatpickr setzt opacity:0 (nur on-hover) und im Current-Month- Kontext eine spezifische dunkle Pfeil-Farbe. Beides hier überschreiben: Pfeile dauerhaft sichtbar + helle Farbe gegen das dunkle Calendar-BG. */ .numInputWrapper:hover { background: rgba(255, 255, 255, .04); } .numInputWrapper span { border-color: rgba(255, 255, 255, .08); opacity: 1; } .numInputWrapper span.arrowUp::after, .flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: #e4edf6; } .numInputWrapper span.arrowDown::after, .flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #e4edf6; } .numInputWrapper span:hover { background: rgba(255, 255, 255, .12); } .numInputWrapper span:hover.arrowUp::after, .flatpickr-current-month .numInputWrapper span:hover.arrowUp::after { border-bottom-color: #14b8a6; } .numInputWrapper span:hover.arrowDown::after, .flatpickr-current-month .numInputWrapper span:hover.arrowDown::after { border-top-color: #14b8a6; }