/* ========================================================================== Date & time fields -------------------------------------------------------------------------- A native date/time control is painted by the browser, not the page: the grey "dd-mm-yyyy" stub, the system calendar button and the popup behind it all ignore the card they sit on, so every birth-date and date-range field on the site read like a form borrowed from another website. date-field.js skins the control and hangs the panel defined below off it, while the real stays in the DOM as the field that validates and submits. If the script never runs, only the type-in skin below applies and the browser's own picker is still there. Every colour comes from --dtp-*, re-pointed per surface (storefront, admin, each calculator theme) so one panel serves the whole site. The script copies the resolved values onto the panel because the panel lives on , out of reach of the .calc-page / .admin-body scopes that set them. ========================================================================== */ :root { --dtp-accent: #8A26A4; --dtp-accent-2: #48439F; --dtp-surface: #FFFFFF; --dtp-fg: #211D36; --dtp-muted: #6E6683; --dtp-border: #E7E1F5; } .admin-body { --dtp-accent: #2E4482; --dtp-accent-2: #1E2E5C; --dtp-fg: #1C2233; --dtp-muted: #656C82; --dtp-border: #E2E4EE; } /* Each calculator swaps its own accent, so the panel arrives in the colour of the tool that opened it. */ .calc-page { --dtp-accent: var(--calc-accent); --dtp-accent-2: var(--calc-accent-2); } /* ========================================================================== The input itself ========================================================================== */ /* The native popup is an OS surface; color-scheme is the one lever the page has over it, and it keeps the fallback picker light like the site. */ input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: light; } /* Chrome renders each segment as its own focusable box with a system-blue selection. Brand it, so tabbing through day/month/year matches the field. */ input[type="date"]::-webkit-datetime-edit-day-field:focus, input[type="date"]::-webkit-datetime-edit-month-field:focus, input[type="date"]::-webkit-datetime-edit-year-field:focus, input[type="time"]::-webkit-datetime-edit-hour-field:focus, input[type="time"]::-webkit-datetime-edit-minute-field:focus, input[type="time"]::-webkit-datetime-edit-ampm-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus, input[type="datetime-local"]::-webkit-datetime-edit-ampm-field:focus { background-color: var(--dtp-accent); border-radius: 4px; color: #fff; outline: none; } /* ========================================================================== Wrapper + trigger -------------------------------------------------------------------------- The wrapper only exists once the script has taken the field over, so the rules that hide the browser's own button can live here unconditionally. ========================================================================== */ .date-field { position: relative; display: block; } .date-field > input { /* The lane the trigger sits in. Set on the input rather than the wrapper so the caret never runs under the icon while typing. */ padding-inline-end: 2.35rem; } .date-field > input::-webkit-calendar-picker-indicator { display: none; } .date-field__btn { position: absolute; top: 50%; inset-inline-end: 0.4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin-top: -0.9rem; padding: 0; border: 0; border-radius: 8px; background-color: transparent; color: var(--dtp-accent); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .date-field__btn svg { width: 1.05rem; height: 1.05rem; } .date-field__btn:hover { background-color: color-mix(in srgb, var(--dtp-accent) 12%, transparent); } /* The trigger holds focus for the whole time the panel is open - the keyboard drives the calendar from here - so its ring has to stay obvious. */ .date-field__btn:focus-visible { outline: 2px solid var(--dtp-accent); outline-offset: 1px; } .date-field__btn[aria-expanded="true"] { color: #fff; background: linear-gradient(135deg, var(--dtp-accent), var(--dtp-accent-2)); } .date-field__btn:disabled { color: var(--dtp-muted); opacity: 0.45; cursor: not-allowed; background-color: transparent; } /* Small toolbar filters (.form-control-sm) get a proportionally smaller lane. */ .date-field > input.form-control-sm { padding-inline-end: 2.05rem; } .date-field > input.form-control-sm + .date-field__btn { width: 1.55rem; height: 1.55rem; margin-top: -0.775rem; } /* ========================================================================== Panel -------------------------------------------------------------------------- Positioned in page coordinates by the script and parented to : filter bars, modals and cards routinely clip their own overflow, and a panel opened inside one gets sliced at the card edge. ========================================================================== */ .dtp { position: absolute; top: 0; left: 0; z-index: 1085; width: 18rem; padding: 0.55rem; border: 1px solid var(--dtp-border); border-radius: 14px; background-color: var(--dtp-surface); box-shadow: 0 22px 48px -18px rgba(33, 29, 54, 0.45); color: var(--dtp-fg); font-size: 0.85rem; line-height: 1.2; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } .dtp.is-up { transform: translateY(6px); } .dtp.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .dtp [hidden] { display: none; } /* Header */ .dtp__head { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.4rem; } .dtp__nav { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 8px; background-color: transparent; color: var(--dtp-muted); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .dtp__nav svg { width: 0.9rem; height: 0.9rem; } .dtp__nav:hover:not(:disabled) { background-color: color-mix(in srgb, var(--dtp-accent) 10%, transparent); color: var(--dtp-accent); } .dtp__nav:disabled { opacity: 0.35; cursor: default; } .dtp__title { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 0; height: 1.9rem; padding: 0 0.5rem; border: 0; border-radius: 8px; background-color: transparent; font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--dtp-fg); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .dtp__title:hover { background-color: color-mix(in srgb, var(--dtp-accent) 10%, transparent); color: var(--dtp-accent); } .dtp__title svg { flex: none; width: 0.75rem; height: 0.75rem; transition: transform 160ms ease; } .dtp__title[aria-expanded="true"] svg { transform: rotate(180deg); } /* Day grid */ .dtp__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; } .dtp__week span { padding: 0.25rem 0; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dtp-muted); } .dtp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dtp__day { display: flex; align-items: center; justify-content: center; height: 2rem; padding: 0; border: 0; border-radius: 9px; background-color: transparent; font-family: inherit; font-size: 0.82rem; color: var(--dtp-fg); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .dtp__day.is-outside { color: var(--dtp-muted); opacity: 0.45; } .dtp__day:hover:not(:disabled) { background-color: color-mix(in srgb, var(--dtp-accent) 12%, transparent); color: var(--dtp-accent); } /* Focus travels by keyboard while focus itself stays on the trigger, so the cursor row needs a visible ring of its own. */ .dtp__day.is-cursor { box-shadow: inset 0 0 0 1.5px var(--dtp-accent); } .dtp__day.is-today { font-weight: 700; color: var(--dtp-accent); } .dtp__day[aria-pressed="true"] { font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--dtp-accent), var(--dtp-accent-2)); } .dtp__day:disabled { opacity: 0.3; cursor: not-allowed; } /* Month / year pane */ .dtp__pane { display: grid; gap: 0.4rem; } .dtp__years { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-height: 8.5rem; overflow-y: auto; scrollbar-width: thin; } .dtp__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-top: 0.4rem; border-top: 1px solid var(--dtp-border); } .dtp__cell { height: 1.95rem; padding: 0 0.2rem; border: 0; border-radius: 8px; background-color: transparent; font-family: inherit; font-size: 0.78rem; color: var(--dtp-fg); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .dtp__cell:hover { background-color: color-mix(in srgb, var(--dtp-accent) 12%, transparent); color: var(--dtp-accent); } .dtp__cell.is-on { font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--dtp-accent), var(--dtp-accent-2)); } /* Time columns */ .dtp__time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } /* On a datetime field the clock is a footnote to the calendar, so it gets a shorter well and a rule to sit under. */ .dtp--datetime .dtp__time { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--dtp-border); } .dtp__col { display: grid; gap: 2px; max-height: 11rem; padding-inline-end: 2px; overflow-y: auto; scrollbar-width: thin; } .dtp--datetime .dtp__col { max-height: 6.5rem; } .dtp__col::-webkit-scrollbar { width: 5px; } .dtp__col::-webkit-scrollbar-thumb { border-radius: 999px; background-color: var(--dtp-border); } .dtp__opt { height: 1.9rem; padding: 0; border: 0; border-radius: 8px; background-color: transparent; font-family: inherit; font-size: 0.82rem; color: var(--dtp-fg); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .dtp__opt:hover { background-color: color-mix(in srgb, var(--dtp-accent) 12%, transparent); color: var(--dtp-accent); } .dtp__opt[aria-pressed="true"] { font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--dtp-accent), var(--dtp-accent-2)); } /* Footer */ .dtp__foot { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--dtp-border); } .dtp__action { padding: 0.35rem 0.7rem; border: 1px solid var(--dtp-border); border-radius: 999px; background-color: transparent; font-family: inherit; font-size: 0.76rem; font-weight: 600; color: var(--dtp-muted); cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease; } .dtp__action:hover { border-color: var(--dtp-accent); color: var(--dtp-accent); } .dtp__action--done { margin-inline-start: auto; border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--dtp-accent), var(--dtp-accent-2)); } .dtp__action--done:hover { border-color: transparent; color: #fff; filter: brightness(1.06); } @media (prefers-reduced-motion: reduce) { .dtp, .dtp__title svg { transition: none; } }