/* ============================================================ flatpickr — pumbum theme Loaded AFTER vendor/flatpickr/flatpickr.min.css so it wins the cascade. Uses the site's CSS custom properties (defined on :root in style.css); the calendar is appended to , so the variables are in scope. ============================================================ */ .flatpickr-calendar { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); } /* Pointer triangle that connects the calendar to the input */ .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--line); } .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); } .flatpickr-calendar.arrowBottom::before { border-top-color: var(--line); } .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); } /* ---------- header: month + year ---------- */ .flatpickr-months, .flatpickr-weekdays, .flatpickr-month { background: transparent; } .flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--fg); fill: var(--fg); } .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--surface); } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--surface-2); } .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--surface); color: var(--fg); } /* prev / next arrows */ .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--muted); color: var(--muted); } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--muted); } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); } /* year stepper arrows */ .numInputWrapper span { border-color: var(--line); } .numInputWrapper span:hover { background: rgba(244, 241, 234, 0.06); } .numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); } .numInputWrapper span.arrowDown::after { border-top-color: var(--muted); } .numInputWrapper:hover { background: rgba(244, 241, 234, 0.04); } /* ---------- weekday labels ---------- */ span.flatpickr-weekday { color: var(--muted-2); font-weight: 600; } /* ---------- days ---------- */ .flatpickr-day { color: var(--fg); border-radius: 8px; border-color: transparent; } .flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--surface-2); border-color: var(--line); color: var(--fg); } .flatpickr-day.today { border-color: var(--accent); } .flatpickr-day.today:hover { background: var(--surface-2); border-color: var(--accent); color: var(--fg); } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--accent); border-color: var(--accent); color: #fff; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed { color: var(--muted-2); opacity: 0.5; background: transparent; border-color: transparent; } /* readable date shown by altInput inherits .field input styling already */