/* * Quipu overrides for Vanilla Calendar Pro. * Keep all customisations here so the stock library stylesheet * (vanilla-calendar-pro.css) can be replaced on upgrade without losing them. * This file must be loaded AFTER vanilla-calendar-pro.css. */ /* * Day-of-week header row: the stock library bold-weights (700) these via the * attribute selector [data-vc-week-day]. No config option exists, so override * with normal weight here. */ [data-vc-week-day] { font-weight: 400; } /* * Scrollbar flash fix: in inputMode the library lazily appends the popup to * on the very first click. The stock CSS hides it with opacity:0 only, * so the element still occupies space in the layout and can briefly trigger a * scrollbar before JS positions it. Moving it off-screen while hidden prevents * any layout impact. */ [data-vc-calendar-hidden] { position: absolute !important; top: -9999px !important; left: -9999px !important; } /* Stronger popup shadow in input mode (both themes). */ [data-vc-theme=light].vc[data-vc-input], [data-vc-theme=dark].vc[data-vc-input] { --tw-shadow: 0 16px 40px rgba(0, 0, 0, .28); --tw-shadow-colored: 0 16px 40px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* * Navigation arrows: the stock library renders these as inline data:image/svg+xml * background images, which requires a CSP "img-src data:" exception. To keep the CSP * free of data: URIs (security/pentest hardening on this IdentityServer), serve the * same SVGs from our own origin instead. */ [data-vc-theme=light] .vc-arrow:before { background-image: url("../images/icons/vc-arrow-light.svg"); } [data-vc-theme=dark] .vc-arrow:before { background-image: url("../images/icons/vc-arrow-dark.svg"); } /* * Selected date: the stock library hard-codes a cyan/blue background * (rgb(6 182 212)) with no config option, so override it to a neutral light * grey (#E0E0E0) with black text here. Same colour is used in both themes so * the selected day is always clearly readable regardless of the panel colour. * Covers the current month plus prev/next-month selected cells, hover state, * and both themes. */ [data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn, [data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover, [data-vc-theme=light] .vc-date[data-vc-date-selected][data-vc-date-month=next] .vc-date__btn, [data-vc-theme=light] .vc-date[data-vc-date-selected][data-vc-date-month=prev] .vc-date__btn, [data-vc-theme=light] .vc-date[data-vc-date-selected][data-vc-date-month=next] .vc-date__btn:hover, [data-vc-theme=light] .vc-date[data-vc-date-selected][data-vc-date-month=prev] .vc-date__btn:hover { background-color: #858585; color: #fff; } [data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn, [data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn:hover, [data-vc-theme=dark] .vc-date[data-vc-date-selected][data-vc-date-month=next] .vc-date__btn, [data-vc-theme=dark] .vc-date[data-vc-date-selected][data-vc-date-month=prev] .vc-date__btn, [data-vc-theme=dark] .vc-date[data-vc-date-selected][data-vc-date-month=next] .vc-date__btn:hover, [data-vc-theme=dark] .vc-date[data-vc-date-selected][data-vc-date-month=prev] .vc-date__btn:hover { background-color: #E0E0E0; color: #000; } /* * Calendar surface background: replace the library's hard-coded white (light) / * navy (dark) so the calendar matches the rest of the UI. Light theme uses the * page background (--color-bg = white); dark theme uses the input background * (--color-input-bg = #1A1A1A) so the popup reads as a slightly elevated surface * matching the field it opens from, rather than blending into pure black. * Both variables are defined on the document root per theme (site.scss) and the * calendar's data-vc-theme is kept in sync with the page theme, so they resolve * correctly here. We override the panel plus the neutral inner tiles (base day * cells and the month/year buttons) so the whole calendar reads as one surface; * accent states (selected, today, weekend, hover) keep their own colours. */ [data-vc-theme=light].vc { background-color: var(--color-bg); } [data-vc-theme=dark].vc { background-color: var(--color-input-bg); } [data-vc-theme=light] .vc-date__btn { background-color: var(--color-bg); } [data-vc-theme=dark] .vc-date__btn { background-color: var(--color-input-bg); } [data-vc-theme=light] .vc-months__month, [data-vc-theme=light] .vc-years__year { background-color: var(--color-bg); } [data-vc-theme=dark] .vc-months__month, [data-vc-theme=dark] .vc-years__year { background-color: var(--color-input-bg); } /* * Dark theme date text: the stock library renders current-month dates in a * muted slate (#94a3b8). Make them white so they stand out on the dark panel. * Adjacent (prev/next month) dates keep their dimmed colour via the library's * more specific rule - the standard "outside current month" treatment. */ [data-vc-theme=dark] .vc-date__btn { color: #fff; } /* * Dark theme hover highlight: the stock library highlights the hovered day with * a blue-tinted slate (rgb(30 41 59)). Use the neutral card-hover grey * (--color-bg-card-hover) instead so the highlight matches the rest of the dark * UI rather than looking blue. */ [data-vc-theme=dark] .vc-date__btn:hover { background-color: var(--color-bg-card-hover); } /* * Today cell: for a birthdate selector today has no special meaning, so strip * the cyan accent (background + text colour) and make the cell look like any * other date in both themes. The :hover state is also reset so the generic * hover rule (above) takes over rather than inheriting the cyan text. */ [data-vc-theme=light] .vc-date[data-vc-date-today] .vc-date__btn, [data-vc-theme=light] .vc-date[data-vc-date-today] .vc-date__btn:hover { background-color: var(--color-bg); color: var(--color-text); } [data-vc-theme=dark] .vc-date[data-vc-date-today] .vc-date__btn, [data-vc-theme=dark] .vc-date[data-vc-date-today] .vc-date__btn:hover { background-color: var(--color-input-bg); color: #fff; } /* * Month / year picker selected state: the stock library uses cyan (light) and * slate (dark) — override to match the selected date colour so the accent is * consistent throughout the calendar. */ [data-vc-theme=light] .vc-months__month[data-vc-months-month-selected], [data-vc-theme=light] .vc-years__year[data-vc-years-year-selected], [data-vc-theme=light] .vc-months__month[data-vc-months-month-selected]:hover, [data-vc-theme=light] .vc-years__year[data-vc-years-year-selected]:hover { background-color: #858585; color: #fff; } [data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected], [data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected], [data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected]:hover, [data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected]:hover { background-color: #E0E0E0; color: #000; } /* * Month / year picker hover: stock uses a blue-tinted slate (light: rgb(241 245 249), * dark: rgb(30 41 59)). Override to a neutral grey using the same card-hover token * already used for date cell hover, so the whole calendar is consistent. */ [data-vc-theme=light] .vc-months__month:hover, [data-vc-theme=light] .vc-years__year:hover { background-color: var(--color-bg-card-hover); } [data-vc-theme=dark] .vc-months__month:hover, [data-vc-theme=dark] .vc-years__year:hover { background-color: var(--color-bg-card-hover); } /* * Focus outline removal: the browser paints its own default focus ring on * :focus for button elements (Chrome/Edge do this regardless of input method). * The stock library additionally applies an orange outline via :focus-visible. * Both pseudo-classes must be suppressed for the header title buttons * (.vc-month / .vc-year), the picker grid cells (.vc-months__month / * .vc-years__year) and the navigation arrows (.vc-arrow) to prevent the ring * from persisting after a mouse click. * !important beats the stock themed specificity without duplicating the full * ancestor chain. Date cell keyboard focus is intentionally left intact. */ [data-vc-theme=light] .vc-month:focus, [data-vc-theme=light] .vc-month:focus-visible, [data-vc-theme=light] .vc-year:focus, [data-vc-theme=light] .vc-year:focus-visible, [data-vc-theme=light] .vc-months__month:focus, [data-vc-theme=light] .vc-months__month:focus-visible, [data-vc-theme=light] .vc-years__year:focus, [data-vc-theme=light] .vc-years__year:focus-visible, [data-vc-theme=light] .vc-arrow:focus, [data-vc-theme=light] .vc-arrow:focus-visible, [data-vc-theme=dark] .vc-month:focus, [data-vc-theme=dark] .vc-month:focus-visible, [data-vc-theme=dark] .vc-year:focus, [data-vc-theme=dark] .vc-year:focus-visible, [data-vc-theme=dark] .vc-months__month:focus, [data-vc-theme=dark] .vc-months__month:focus-visible, [data-vc-theme=dark] .vc-years__year:focus, [data-vc-theme=dark] .vc-years__year:focus-visible, [data-vc-theme=dark] .vc-arrow:focus, [data-vc-theme=dark] .vc-arrow:focus-visible { outline: none !important; }