/* TotmDatePicker / TotmTimePicker - the app's own date and time fields. See Mobile-DateTimePicker-Design.md section 7 for the theming rules. Every colour comes from a Tokens.css variable and nothing here depends on Theme.css, which is disabled under Tradie Classic. Dark.css redefines those same tokens, so Dark Mode works under either base theme with no duplicate colour-only rules - there are no jQuery Mobile swatch classes in this widget to fight with. Sizing: the field row is exactly as tall as one of the app's own buttons (.ui-btn.AddButton - Save, Cancel and friends). That height is emergent from the button's font size and padding rather than declared, and it differs by theme, so this takes two measured values: Tradie Classic - the button renders 40.4px on a 390px-wide phone. CellPhone.css zooms .ui-page to 80% there, so the 50.5px below lands on 40.4. Tradie Light - Theme.css cancels that zoom and restyles .ui-btn, leaving the button 47px. The matching override lives in Theme.css, next to the rest of the Light-only sizing, and needs !important because this stylesheet is linked after Theme.css and would otherwise win on source order alone. box-sizing is set explicitly: without it the 1.5px borders are added to the declared height, and the row comes out 3px taller than whatever number is written here. That matching height puts the row below the ~48px a gloved thumb ideally wants, on Classic especially - a deliberate trade, made because a field that does not line up with the buttons above and below it looks broken. The steppers are 60px wide, so the target is still generous across. The sheet is appended to , outside .ui-page, so its own 56px controls are never zoomed and stay at full size. */ /* The original keeps the value, the id and the change event - the widget beside it is what the user sees. Visually hidden rather than display:none so .val(), change handlers and the Playwright suite's toHaveValue() all keep working. The !importants are needed to beat Theme.css's input rules and .GenericControlDimensions. */ .totm-picker-input { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px 0 0 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); pointer-events: none; box-shadow: none !important; } /* A picker whose was built inside jQuery Mobile's text-input chrome - which is how ReportHelper.addGenericField renders Report Designer Date fields - would otherwise sit inside a second border and inset shadow. Only that chrome is switched off, not the wrapper's padding or layout, which the surrounding screens rely on. */ .ui-input-text.totm-picker-host, .ui-shadow-inset.totm-picker-host { border: 0 !important; box-shadow: none !important; background: transparent !important; } /* ---- The field ---- */ .totm-picker { display: flex; box-sizing: border-box; height: 50.5px; margin: 0 0 2px 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .totm-picker .totm-step { flex: 0 0 60px; width: 60px; border: 0; margin: 0; padding: 0; background: var(--surface-2); color: var(--brand); font-family: var(--font); font-size: 26px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-picker .totm-step-prev { border-right: 1.5px solid var(--border); } .totm-picker .totm-step-next { border-left: 1.5px solid var(--border); } .totm-picker .totm-step[disabled] { color: var(--border-strong); cursor: default; } .totm-picker .totm-value { flex: 1; min-width: 0; border: 0; margin: 0; padding: 0 4px; background: transparent; color: var(--text); font-family: var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-picker .totm-v { font-size: 19px; font-weight: 600; } /* A picker in a paired field sits in about half the width the full-width fields get - 185px, of which two 60px steppers leave 63 for the value while "10:30 AM" wants 79, so the time wrapped onto two lines. Narrower steppers and a slightly smaller value fit it on one. Scoped to that compact context so the full-width fields keep their larger targets. The rules themselves now live in Mobile.css as .CompactPickerField, shared with the Work Log's Start/End rows and anything else that pairs a date with its time - this comment stays here because the arithmetic above is about picker geometry, which is this file's subject. The old DateBox had an inline clock icon here rather than two steppers, which is why this only showed up once those arrived. */ .totm-picker .totm-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .totm-picker .totm-sub:empty { display: none; } .totm-hint { font-size: 12px; color: var(--text-muted); margin: 4px 2px 0 2px; } .totm-hint-centred { text-align: center; margin-top: 10px; } /* ---- The sheet ---- */ .totm-scrim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity 180ms ease; /* Above jQuery Mobile's fixed toolbars and popups, and above the retired #ui-datepicker-div rule in Mobile.css. */ z-index: 3000; } .totm-scrim.totm-open { opacity: 1; pointer-events: auto; } .totm-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--surface); color: var(--text); font-family: var(--font); border-radius: 16px 16px 0 0; padding: 8px 14px 16px 14px; box-shadow: 0 -4px 20px rgba(0, 0, 0, .25); transform: translateY(105%); visibility: hidden; transition: transform 180ms ease, visibility 180ms ease; z-index: 3001; outline: none; } .totm-sheet.totm-open { transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { .totm-scrim, .totm-sheet { transition: none; } } .totm-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 10px auto; } .totm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .totm-sheet-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .totm-sheet-close { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 18px; background: var(--surface-2); color: var(--text-muted); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-sheet-done { display: block; width: 100%; height: 52px; margin-top: 12px; border: 0; border-radius: var(--radius); background: var(--btn-add-bg); color: var(--text-on-brand); font-family: var(--font); font-size: 17px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; } /* ---- Date sheet ---- */ .totm-chips { display: flex; gap: 8px; margin-bottom: 12px; } .totm-chip { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-chip.totm-chip-on { background: var(--btn-add-bg); border-color: var(--btn-add-bg); color: var(--text-on-brand); } .totm-chip[disabled] { color: var(--border-strong); border-color: var(--border); cursor: default; } /* Carried by the two stepping buttons, pointing the way they move the date. Inherits colour, so it dims with the label when the day is out of range. The 2px lift is an optical correction, not a layout fix: flexbox already centres the span's box exactly, but a single guillemet's ink sits low inside its own em box, so next to text it reads as dropped. Measured against the label's x-height at the rendered size. The sheet lives outside .ui-page and so is never zoomed, which is why one value serves both themes. */ .totm-chip-chevron { position: relative; top: -2px; font-size: 18px; line-height: 1; opacity: .75; } .totm-chip-label { white-space: nowrap; } .totm-month-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px 0; } .totm-month-label { font-size: 17px; font-weight: 700; } .totm-month-nav .totm-step { width: 48px; height: 40px; flex: 0 0 48px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--brand); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-month-nav .totm-step[disabled] { color: var(--border-strong); cursor: default; } .totm-dow, .totm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .totm-dow span { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 0; } .totm-grid .totm-cell { height: 46px; border: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 17px; border-radius: 23px; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-grid .totm-cell-blank { display: block; } .totm-grid .totm-cell-off { color: var(--border-strong); cursor: default; } .totm-grid .totm-cell-today { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); font-weight: 700; } .totm-grid .totm-cell-sel { background: var(--btn-add-bg); color: var(--text-on-brand); font-weight: 700; box-shadow: none; } /* ---- Time sheet ---- */ .totm-readout { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 12px 0; flex-wrap: wrap; } .totm-readout b { font-size: 40px; font-weight: 700; letter-spacing: -.5px; } .totm-now { height: 32px; padding: 0 14px; border: 1.5px solid var(--brand); border-radius: 16px; background: transparent; color: var(--brand); font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: start; } .totm-cols-24 { grid-template-columns: 1fr 1fr; } .totm-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .totm-col-label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .totm-round { width: 64px; height: 56px; flex: 0 0 56px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--brand); font-family: var(--font); font-size: 30px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-col-value { width: 100%; height: 56px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* The AM/PM toggle lines up with the two value cells rather than the +/- above them. */ .totm-seg { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 64px; } .totm-seg-button { height: 56px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font-family: var(--font); font-size: 20px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; } .totm-seg-button.totm-seg-on { background: var(--btn-add-bg); border-color: var(--btn-add-bg); color: var(--text-on-brand); }