/* ============================================================ DATE PICKER THEME — datepicker-theme.css ============================================================ Gives the two non-flatpickr calendars on the quote page the same card that flatpickr-theme.css gives flatpickr: .tempus-dominus-widget Tempus Dominus 6.9.4 — the start / end date-and-time pickers (#datetimepicker1, #datetimepicker2) #ui-datepicker-div jQuery UI 1.14 — the speakers' date of birth field (#target_dob_*) Same 318px card, same 16px radius, same --shadow-pop, same 30px nav pills, same 36px / 11px-radius day cells, same gold selected day. Both libraries attach their popup to , outside the form, so none of this can be scoped by an ancestor — it is safe unscoped because the two widgets only exist while the interpretation panel is loaded. Depends on the tokens in variables.css (--color-*, --radius-*, --shadow-pop, --transition-*, --font-body) and on the --fptheme-* day colours declared by flatpickr-theme.css, which must be linked before this file — sharing them is what keeps the three calendars from drifting apart. The Tempus Dominus rules are prefixed with `body`, and the jQuery UI ones hang off the #ui-datepicker-div id, purely to out-specify the two CDN stylesheets. Both of those load from footer.html, i.e. after this file, so plain-equal specificity would lose (see the load-order note in quote.html). ============================================================ */ /* ============================================================ TEMPUS DOMINUS — start / end date & time ============================================================ */ /* ── palette ───────────────────────────────────────────────── Tempus Dominus resolves every colour through these custom properties, so re-pointing them re-skins the whole widget — day grid, month / year / decade views, clock and toolbar — in one place, no per-rule overrides needed. The --td-dark-* twins carry the same values on purpose: TD's default theme is "auto", so on a machine set to dark mode it labels the widget .dark and reads that second set instead. Pointing both at the light palette keeps the picker matching this (light-only) site either way. */ body .tempus-dominus-widget { --fptheme-placeholder: #A9A49C; /* weekday labels */ --fptheme-day: #3D3833; /* a selectable day */ --fptheme-today-ring: #E6E2D8; /* the hairline around today */ --fptheme-day-muted: #D6D2CC; /* disabled + adjacent-month days */ --td-widget-background: var(--color-surface-white); --td-font-color: var(--fptheme-day); --td-active-bg: var(--color-brand-gold); --td-active-color: var(--color-surface-white); --td-active-border-color: var(--color-surface-white); --td-border-radius: 11px; --td-btn-hover-bg: var(--color-surface-inset); --td-disabled-color: var(--fptheme-day-muted); --td-alternate-color: var(--fptheme-day-muted); --td-dow-color: var(--fptheme-placeholder); --td-secondary-border-color: var(--color-border); --td-text-shadow: none; --td-dark-widget-background: var(--color-surface-white); --td-dark-font-color: var(--fptheme-day); --td-dark-active-bg: var(--color-brand-gold); --td-dark-active-color: var(--color-surface-white); --td-dark-active-border-color: var(--color-surface-white); --td-dark-btn-hover-bg: var(--color-surface-inset); --td-dark-disabled-color: var(--fptheme-day-muted); --td-dark-alternate-color: var(--fptheme-day-muted); --td-dark-dow-color: var(--fptheme-placeholder); --td-dark-secondary-border-color: var(--color-border); --td-dark-text-shadow: none; /* ── the card ──────────────────────────────────────────── */ width: 318px; padding: 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font-body); font-size: 13px; } /* ── month bar ─────────────────────────────────────────────── TD lays the header out as three equal auto columns; pinning the outer two to 30px puts the nav buttons flush against the card's padding, where flatpickr's sit. */ body .tempus-dominus-widget .calendar-header { grid-template-columns: 30px 1fr 30px; align-items: center; height: 30px; margin-bottom: 14px; font-weight: 600; } body .tempus-dominus-widget .calendar-header .picker-switch { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary); } body .tempus-dominus-widget .calendar-header .previous, body .tempus-dominus-widget .calendar-header .next { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 10px; background: var(--color-surface-inset); /* the chevrons are Font Awesome tags, so they size off the parent — 11px matches flatpickr's 11px arrow svg */ font-size: 11px; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } body .tempus-dominus-widget .calendar-header .previous:hover, body .tempus-dominus-widget .calendar-header .next:hover { background: var(--color-surface-subtle); color: var(--color-brand-gold); } /* ── weekday row + grid ────────────────────────────────────── The weekday labels are the grid's one *explicit* row, so grid-template-rows sizes them alone and leaves the six week rows to grid-auto-rows. 28px = flatpickr's 24px weekday row plus the 4px it sets underneath it. TD centres .dow with align-items but never gives it a display, so it needs one. */ body .tempus-dominus-widget .date-container-days { grid-template-rows: 28px; grid-auto-rows: 36px; } body .tempus-dominus-widget .date-container-days .dow { display: flex; font-size: 11px; font-weight: 400; } /* Cells fill their track instead of TD's inset 90%, which is what turns a 40.3 x 36 track into flatpickr's day box. */ body .tempus-dominus-widget .date-container-days div:not(.no-highlight), body .tempus-dominus-widget .date-container-months div:not(.no-highlight), body .tempus-dominus-widget .date-container-years div:not(.no-highlight), body .tempus-dominus-widget .date-container-decades div:not(.no-highlight) { width: 100%; height: 100%; font-weight: 400; transition: background var(--transition-fast), color var(--transition-fast); } /* flatpickr marks today with a hairline ring; TD draws a corner triangle instead, so that gets dropped. */ body .tempus-dominus-widget .date-container-days div:not(.no-highlight).today::before { display: none; } body .tempus-dominus-widget .date-container-days div:not(.no-highlight).today { box-shadow: inset 0 0 0 1.5px var(--fptheme-today-ring); font-weight: 600; color: var(--color-text-primary); } /* after .today, so a selected today loses the ring */ body .tempus-dominus-widget .date-container-days div:not(.no-highlight).active { box-shadow: none; font-weight: 600; } /* ── month / year / decade views + clock ───────────────────── TD sizes all of these as (card width − padding) / 7, hard-coded against its own 19rem card. 282 / 7 keeps that intent against the 318px one. */ body .tempus-dominus-widget .date-container-months, body .tempus-dominus-widget .date-container-years, body .tempus-dominus-widget .date-container-decades, body .tempus-dominus-widget .time-container-clock, body .tempus-dominus-widget .time-container-hour, body .tempus-dominus-widget .time-container-minute, body .tempus-dominus-widget .time-container-second { grid-auto-rows: 40px; } /* the clock's hour / minute readout. [data-time-component] is the stacked layout TD builds here; .timepicker-* is the same readout in its side-by-side layout, covered so this survives a switch. */ body .tempus-dominus-widget [data-time-component], body .tempus-dominus-widget .timepicker-hour, body .tempus-dominus-widget .timepicker-minute, body .tempus-dominus-widget .timepicker-second, body .tempus-dominus-widget .separator { font-size: 15px; font-weight: 600; color: var(--color-text-primary); } /* qualified with `button` on purpose: TD paints every button gold via `.tempus-dominus-widget.light button`, which ties this on specificity and would win on load order without the extra tag. */ body .tempus-dominus-widget button.toggleMeridiem { height: 26px; padding: 0 10px; background: var(--color-surface-inset); border: 0; border-radius: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } body .tempus-dominus-widget button.toggleMeridiem:hover { background: var(--color-surface-subtle); color: var(--color-brand-gold); } body .tempus-dominus-widget .toolbar { grid-auto-rows: 36px; margin-top: 4px; color: var(--color-text-secondary); } /* ── the date / time toggle glyph ──────────────────────────── TD has no option for "one custom icon": display.icons.type is all-or-nothing, so swapping this to real it emits keeps its place and gets repainted — the glyph is dropped and the lucide artwork applied as a mask, the same trick the jQuery UI chevrons use further down. Being a mask, only the alpha of the svg counts; `stroke` there is a placeholder (masks have no colour of their own). What you actually see is background-color: currentColor, so the icon inherits the toolbar's colour and turns gold on hover. */ body .tempus-dominus-widget .toolbar [data-action="togglePicker"] i::before { content: none; } body .tempus-dominus-widget .toolbar [data-action="togglePicker"] i { display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--dpt-toggle-icon) center / 20px 20px no-repeat; mask: var(--dpt-toggle-icon) center / 20px 20px no-repeat; } /* TD swaps the class on this one : .fa-clock while the calendar is up ("Select Time"), .fa-calendar while the clock is up ("Select Date"). */ body .tempus-dominus-widget .toolbar [data-action="togglePicker"] i.fa-clock { --dpt-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } body .tempus-dominus-widget .toolbar [data-action="togglePicker"] i.fa-calendar { --dpt-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); } body .tempus-dominus-widget .toolbar [data-action="togglePicker"]:hover { color: var(--color-brand-gold); } /* ============================================================ JQUERY UI DATEPICKER — speakers' date of birth ============================================================ One #ui-datepicker-div is shared by every jQuery UI datepicker on a page; on the quote page the speakers' DOB fields are the only ones that use it. */ #ui-datepicker-div { /* the nav chevrons — jQuery UI ships a png sprite, which has nothing in common with the flatpickr / Font Awesome arrows the other two calendars use. Masked rather than set as a background image so the glyph takes its colour from the button and can go gold on hover. */ --dpt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); width: 318px; padding: 18px; background: var(--color-surface-white); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font-body); font-size: 13px; color: var(--fptheme-day); } /* ── month bar ───────────────────────────────────────────── */ #ui-datepicker-div .ui-datepicker-header { position: relative; height: 30px; margin-bottom: 14px; padding: 0; background: transparent; border: 0; border-radius: 0; } #ui-datepicker-div .ui-datepicker-title { height: 30px; margin: 0; line-height: 30px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); } #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { top: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--color-surface-inset); border: 0; border-radius: 10px; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } #ui-datepicker-div .ui-datepicker-prev { left: 0; } #ui-datepicker-div .ui-datepicker-next { right: 0; } #ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover { background: var(--color-surface-subtle); color: var(--color-brand-gold); } /* jQuery UI absolutely positions and negative-margins this span to centre the sprite; the flex parent above centres it now. */ #ui-datepicker-div .ui-datepicker-prev span.ui-icon, #ui-datepicker-div .ui-datepicker-next span.ui-icon { position: static; width: 11px; height: 11px; margin: 0; background-image: none; background-color: currentColor; -webkit-mask: var(--dpt-chevron) center / 11px 11px no-repeat; mask: var(--dpt-chevron) center / 11px 11px no-repeat; } #ui-datepicker-div .ui-datepicker-next span.ui-icon { transform: rotate(180deg); } /* ── weekday row + grid ────────────────────────────────────── The !important out-punches the .ui-datepicker th padding that jquery_datePicker.html sets !important in its own inline