/* ── Theme palettes ───────────────────────────────────────────────────────────────────────────── The theme follows the OS unless an app overrides it by stamping data-theme="light" or "dark" on (see lemur.setTheme). Removing the attribute hands the decision back to the OS, so an app offering a "use system default" option does not have to detect anything — the media query below already does it. The light palette is the unconditional base: it is the fallback, and a browser reporting "no-preference" matches NEITHER media query, which previously left every variable undefined. The dark palette is therefore declared TWICE — once for "the OS asked and no app override says light", once for "an app override says dark". CSS cannot share one block across a media-query boundary and a plain selector. KEEP THE TWO DARK BLOCKS IN SYNC: an edit to one is a bug in the other. They are adjacent, below, to make that as hard as possible to forget. */ :root { /* Colours - General */ --general-background: white; --text-colour: black; --menu-icon-colour: #053259BB; --appointment-history-icon-colour: #053259BB; --ui-element-background: #f1f1f1; --text-colour-indicator-title: #888888; --data-label-label-colour: #888888; --subtle-grey: #CCCCCC; --mid-grey: #888888; --mid-heavy-grey: #555555; --heavy-grey: #333333; --very-heavy-grey: #111111; /* Colours - Interaction */ --hover-colour: #98c0c3; --active-colour: #689093; --inactive-colour: #AAAAAA; --selected-colour: #b8e0e3; --menu-hover-colour: var(--hover-colour); --menu-active-colour: var(--active-colour); --menu-background: var(--general-background); --header-hover-color: var(--active-colour); --header-active-color: #487073; /* Colours - UI Components */ --header-colour: var(--hover-colour); --button-colour: #DFDFDF; --button-disabled-colour: #9F9F9F; --input-disabled-background: #ECECEC; --input-disabled-text-colour: var(--mid-heavy-grey); --error-colour: #F02020; --highlight-colour: #E6F74D; --highlight-colour-pulse: #F5FCB6; --background-error: #F0D0D0; --background-warning: #F0E0D0; --changed-field-background: #D6DFF7; --popup-dialog-backdrop: rgba(0, 0, 0, 0.55); --mandatory-colour: #DD3333; --staff-notes-background-colour: var(--selected-colour); --validation-fail-colour: var(--error-colour); --tick-list-unselected-color: var(--mid-grey); --tick-list-selected-color: rgba(0, 150, 32, 1); /* Colours - Scheduler */ --scheduler-header-colour: var(--header-colour); --scheduler-lead-header-colour: #487073; --scheduler-lead-header-text-colour: #ffffff; --appointment-colour-clinical: #a7bccf; --appointment-colour-tbc: #d56e6e; --appointment-colour-absence: #dbc993; --appointment-colour-cancelled: #bbbbbb; --appointment-colour-other: #b099cf; --appointment-hover-colour: #c7dcef; --appointment-active-colour: #d7ecff; --slot-colour: #a2e099; --slot-hover-colour: #c2f0a9; --slot-active-colour: #d2f0b9; --scheduler-weekday-colour: #e8e9dc; --scheduler-weekend-colour: #c8c9bc; --scheduler-nonworkingday-colour: #c8c9bc; --scheduler-today-colour: #f8f9ec; --scheduler-notloaded-stripe-light: #e0e0da; --scheduler-notloaded-stripe-mid: #d2d2cb; /* Colours - Imports */ --indicator-pending: #FAFAD2; --indicator-ignore: #D3D3D3; --indicator-processing: #ADD8E6; --indicator-complete: #90EE90; --indicator-failed: #F08080; --indicator-matched: #A09FD1; /* Colours - Appointment Statuses */ --status-started: #9EE6AA; --status-completed: #9EE6AA; --status-cancel: #E69E9E; --status-dna: #E6E39E; --status-could-not-complete: #C99EE6; /* Colours - Toasts */ --color-info: #444444; --color-success: #228866; --color-warning: #886622; --color-error: #882222; } /* These two look like toast styling that landed in :root by mistake — --color-info is a toast colour, and nothing else reads it. They are kept gated to light, exactly as they have always been, rather than moved into the base above, which would newly apply them in dark mode. Left alone deliberately: this sheet styles a released app. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { background-color: var(--color-info); color: white; } } /* Dark, block 1 of 2 — the OS asked for it, and no app override says otherwise. KEEP IN SYNC with block 2 below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Colours - General */ --general-background: #1E1E1E; --text-colour: #CCCCCC; --menu-icon-colour: #2592E9BB; --appointment-history-icon-colour: #2592E9BB; --ui-element-background: #0e0e0e; --text-colour-indicator-title: #888888; --data-label-label-colour: #777777; --subtle-grey: #333333; --mid-grey: #888888; --mid-heavy-grey: #AAAAAA; --heavy-grey: #CCCCCC; --very-heavy-grey: #EEEEEE; /* Colours - Interaction */ --hover-colour: #406656; --active-colour: #78A0A3; --inactive-colour: #666666; --selected-colour: #2D4046; --menu-hover-colour: var(--hover-colour); --menu-active-colour: var(--active-colour); --menu-background: var(--general-background); --header-hover-color: var(--active-colour); --header-active-color: #98B0B3; /* Colours - UI Components */ --header-colour: #305043; --button-colour: #404040; --button-disabled-colour: #666666; --input-disabled-background: #2A2A2A; --input-disabled-text-colour: var(--mid-heavy-grey); --error-colour: #F0D0D0; --highlight-colour: #E6F74D; --highlight-colour-pulse: #F5FCB6; --background-error: #F02020; --background-warning: #F09020; --changed-field-background: #33406B; --popup-dialog-backdrop: rgba(0, 0, 0, 0.55); --mandatory-colour: #DD3333; --staff-notes-background-colour: var(--selected-colour); --validation-fail-colour: var(--error-colour); --tick-list-unselected-color: var(--mid-grey); --tick-list-selected-color: rgba(0, 150, 32, 1); /* Colours - Scheduler */ --scheduler-header-colour: var(--header-colour); --scheduler-lead-header-colour: #98B0B3; --scheduler-lead-header-text-colour: #1E1E1E; --appointment-colour-clinical: #304070; --appointment-colour-tbc: #913131; --appointment-colour-absence: #806c30; --appointment-colour-cancelled: #555555; --appointment-colour-other: #54377a; --appointment-hover-colour: #506090; --appointment-active-colour: #6070A0; --slot-colour: #309030; --slot-hover-colour: #50B050; --slot-active-colour: #60C060; --scheduler-weekday-colour: #000000; --scheduler-weekend-colour: #222222; --scheduler-nonworkingday-colour: #222222; --scheduler-today-colour: #333333; --scheduler-notloaded-stripe-light: #333333; --scheduler-notloaded-stripe-mid: #292929; /* Colours - Imports */ --indicator-pending: #57410b; --indicator-ignore: #7a3d3d; --indicator-processing: #00008B; --indicator-complete: #006400; --indicator-failed: #614640; --indicator-matched: #343278; /* Colours - Appointment Statuses */ --status-started: #354D39; --status-completed: #354D39; --status-cancel: #4D3535; --status-dna: #4D4C35; --status-could-not-complete: #43354D; /* Colours - Toasts */ --color-info: #CCCCCC; --color-success: #77BB99; --color-warning: #BBAA77; --color-error: #BB7777; } :root:not([data-theme="light"]) body { scrollbar-color: var(--mid-grey) #222222; } } /* Dark, block 2 of 2 — an app override asked for it, whatever the OS says. KEEP IN SYNC with block 1 above. */ :root[data-theme="dark"] { /* Colours - General */ --general-background: #1E1E1E; --text-colour: #CCCCCC; --menu-icon-colour: #2592E9BB; --appointment-history-icon-colour: #2592E9BB; --ui-element-background: #0e0e0e; --text-colour-indicator-title: #888888; --data-label-label-colour: #777777; --subtle-grey: #333333; --mid-grey: #888888; --mid-heavy-grey: #AAAAAA; --heavy-grey: #CCCCCC; --very-heavy-grey: #EEEEEE; /* Colours - Interaction */ --hover-colour: #406656; --active-colour: #78A0A3; --inactive-colour: #666666; --selected-colour: #2D4046; --menu-hover-colour: var(--hover-colour); --menu-active-colour: var(--active-colour); --menu-background: var(--general-background); --header-hover-color: var(--active-colour); --header-active-color: #98B0B3; /* Colours - UI Components */ --header-colour: #305043; --button-colour: #404040; --button-disabled-colour: #666666; --input-disabled-background: #2A2A2A; --input-disabled-text-colour: var(--mid-heavy-grey); --error-colour: #F0D0D0; --highlight-colour: #E6F74D; --highlight-colour-pulse: #F5FCB6; --background-error: #F02020; --background-warning: #F09020; --changed-field-background: #33406B; --popup-dialog-backdrop: rgba(0, 0, 0, 0.55); --mandatory-colour: #DD3333; --staff-notes-background-colour: var(--selected-colour); --validation-fail-colour: var(--error-colour); --tick-list-unselected-color: var(--mid-grey); --tick-list-selected-color: rgba(0, 150, 32, 1); /* Colours - Scheduler */ --scheduler-header-colour: var(--header-colour); --scheduler-lead-header-colour: #98B0B3; --scheduler-lead-header-text-colour: #1E1E1E; --appointment-colour-clinical: #304070; --appointment-colour-tbc: #913131; --appointment-colour-absence: #806c30; --appointment-colour-cancelled: #555555; --appointment-colour-other: #54377a; --appointment-hover-colour: #506090; --appointment-active-colour: #6070A0; --slot-colour: #309030; --slot-hover-colour: #50B050; --slot-active-colour: #60C060; --scheduler-weekday-colour: #000000; --scheduler-weekend-colour: #222222; --scheduler-nonworkingday-colour: #222222; --scheduler-today-colour: #333333; --scheduler-notloaded-stripe-light: #333333; --scheduler-notloaded-stripe-mid: #292929; /* Colours - Imports */ --indicator-pending: #57410b; --indicator-ignore: #7a3d3d; --indicator-processing: #00008B; --indicator-complete: #006400; --indicator-failed: #614640; --indicator-matched: #343278; /* Colours - Appointment Statuses */ --status-started: #354D39; --status-completed: #354D39; --status-cancel: #4D3535; --status-dna: #4D4C35; --status-could-not-complete: #43354D; /* Colours - Toasts */ --color-info: #CCCCCC; --color-success: #77BB99; --color-warning: #BBAA77; --color-error: #BB7777; } :root[data-theme="dark"] body { scrollbar-color: var(--mid-grey) #222222; } :root { /* Gradients */ --activity-indicator-background: linear-gradient(to bottom, var(--general-background) 0%, var(--active-colour) 50%, var(--general-background) 100%); --activity-indicator: linear-gradient(to right, rgb(255,255,255,0) 30%, var(--active-colour) 33%, rgb(255,255,255,0) 36%, rgb(255,255,255,0) 63%, var(--active-colour) 66%, rgb(255,255,255,0) 69%); /* Borders */ --border-width: 1px; --border-highlight-width: 4px; --border-style: solid; --border-subtle-colour: var(--subtle-grey); --border-mid-colour: var(--mid-grey); --border-standard-colour: var(--heavy-grey); --border-heavy-colour: var(--very-heavy-grey); --border-error-colour: var(--error-colour); --border-highlight-colour: var(--highlight-colour); --border-subtle: var(--border-width) var(--border-style) var(--border-subtle-colour); --border-mid: var(--border-width) var(--border-style) var(--border-mid-colour); --border-standard: var(--border-width) var(--border-style) var(--border-standard-colour); --border-heavy: var(--border-width) var(--border-style) var(--border-heavy-colour); --border-error: var(--border-width) var(--border-style) var(--border-error-colour); --border-highlight: var(--border-highlight-width) var(--border-style) var(--border-highlight-colour); --border-invisible: var(--border-width) var(--border-style) transparent; /* Focus (see the :focus-visible rule below). The ring hugs the element edge: a 1px line of the main ring colour flush with the edge, then a 1px lighter accent line just inside it, separating the ring from the control's content — two tones so the ring reads on any surface. (The main line must be the one AT the edge: with the light line outermost it vanished into button/input surfaces and the ring appeared to float with a gap.) Drawn INSET via box-shadow rather than as an outline: an outline extends outside the element and gets clipped wherever a control sits flush against an overflow container (TickList rows etc.); an inset ring can never clip. The greys come off the theme scale, so dark mode inverts automatically. WCAG 1.4.11 contrast is carried by the main line (mid-grey holds ≥3:1 on both themes' backgrounds — don't lighten it further). */ --focus-ring-colour: var(--mid-grey); --focus-ring-accent-colour: var(--subtle-grey); --focus-ring-shadow: inset 0 0 0 1px var(--focus-ring-colour), inset 0 0 0 2px var(--focus-ring-accent-colour); /* Fonts */ --ui-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; --ui-font-size: 13px; --help-font-size: 14px; --history-font-size: 14px; --main-menu-item-font-size: 20px; --main-menu-sub-item-font-size: 18px; --main-menu-sub-sub-item-font-size: 14px; --data-edit-label-font-size: var(--ui-font-size); --data-edit-value-font-size: var(--ui-font-size); --header-font-size: 14px; --data-grid-font-size: 13px; --scheduler-header-font-size: var(--header-font-size); --scheduler-item-font-size: var(--ui-font-size); --scheduler-item-title-font-size: 16px; --scheduler-item-type-font-size: 11px; --dialog-title-font-size: 18px; --container-title-font-size: 16px; --indicator-title-font-size: 12px; --appointment-buttons-title-font-size: 16px; --appointment-buttons-subtitle-font-size: 12px; --data-label-font-size: 12px; --mandatory-indicator-font-size: 18px; /* Sizes */ --indicator-width: 110px; --indicator-height: 55px; --indicator-height-small: 22px; --dialog-scale-amount: 0.8; /* Timings */ --dialog-appear-time: 200ms; --dialog-disappear-time: 300ms; --menu-appear-time: 200ms; --menu-disappear-time: 300ms; } html { overflow: clip; } body { margin: 0; padding: 0; overflow: clip; font-family: var(--ui-font-family); font-size: var(--ui-font-size); font-weight: normal; background-color: var(--general-background); color: var(--text-colour); } p { margin-top: 0.4em; margin-bottom: 0.4em; } h1 { margin: 0; padding: 0; border: 0; font-size: 30px; font-weight: bold; } h3 { margin: 24px 0px 6px 0px; padding: 0; font-size: 24px; font-weight: normal; } .text-emphasis { font-weight: bold; } .page-layout { display: flex; flex-direction: column; height: 100%; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; border-radius: 0; border: var(--border-heavy); background-color: var(--general-background); color: var(--text-colour); } /* Disabled fields must be visibly distinct: the base rule above pins background and text colour, which also wipes out the browser's own dimmed-disabled rendering. The grey surface plus slightly dimmed text restores that signal on both themes. */ input:disabled, textarea:disabled, select:disabled { background-color: var(--input-disabled-background); color: var(--input-disabled-text-colour); } /* Focus is only ever indicated via the :focus-visible ring below — the default browser ring on plain :focus (which some browsers draw for mouse focus too) stays suppressed. */ input:focus, textarea:focus, select:focus { outline: none; } /* The single library-wide keyboard-focus indicator. :focus-visible matches keyboard-driven focus (browsers do not apply it to mouse clicks on buttons and other non-text controls), so mouse interaction looks unchanged while every tabbable element — native or tabindex-based — gets a visible ring, as WCAG 2.4.7 requires. See --focus-ring-shadow for why it is an inset shadow. */ :focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } input[type=file]::file-selector-button { background-color: var(--button-colour); color: var(--text-colour); padding: 5px 10px; font-size: var(--ui-font-size); border: none; border-right: var(--border-heavy); cursor: pointer; user-select: none; transition: 1.2s; } input[type=file] { font-size: var(--ui-font-size); width: 350px; margin-left: 2px; } input[type=file]::file-selector-button:hover { background-color: var(--hover-colour); transition: 0.2s; } input[type=file]::file-selector-button:active { background-color: var(--active-colour); transition: 0.2s; } a:link { color: #487073; text-decoration: underline; text-decoration-color: #48707333; } a:visited { color: #986093; text-decoration: underline; text-decoration-color: #98609333; } a:hover { color: #184043; text-decoration: underline; text-decoration-color: #18404333; } a:active { color: #082023; text-decoration: underline; text-decoration-color: #08202333; } /* Editor - item label */ .form-edit-item-label { font-size: var(--data-edit-label-font-size); grid-column: 1; margin: 4px; white-space: nowrap; } /* Editor - mandatory indicator */ .form-edit-mandatory-indicator { display: flex; flex-direction: row; justify-content: center; align-items: center; color: var(--mandatory-colour); font-size: var(--mandatory-indicator-font-size); font-weight: bold; margin-left: 6px; margin-right: 6px; width: 8px; } /* Editor - copy button */ .form-edit-copy-button-container { grid-column: 2; display: flex; } /* Editor grid placement. The grid has two columns (label | control, see Editor.razor.css). The standard form parts are placed explicitly below; ANY other direct child (section headers, notes, snippet selectors, consumer-supplied tables, etc.) defaults to spanning the full width via the catch-all. This stops a stray child without an explicit column from spawning an extra, content-sized column that makes the form resize sideways (which is exactly what an unplaced validation message used to do). The qualified selectors carry higher specificity than the catch-all, so they always win. */ .edit-form-parent > * { grid-column: 1 / -1; } .edit-form-parent > .form-edit-item-label { grid-column: 1; } .edit-form-parent > .form-edit-copy-button-container { grid-column: 2; } .edit-form-parent > .validation-message-list { grid-column: 2 / -1; } /* Standard single-line edit controls (.item-edit: text, number, date, email, etc.) are deliberately kept compact rather than filling the control column, to hint at the expected length of short fields like names and codes. They still flex-grow up to this cap and shrink in narrow dialogs. The wide/long variants (.item-edit-wide / .item-edit-long) deliberately have no cap, so they fill the column. Tune per-field or per-form via the --edit-control-width custom property. */ /* Single source of truth for standard single-line edit-control metrics. The identical per-component `.item-edit` rules (flex-grow / font-size / height / margin) were folded in here and their scoped EditFormItem*.razor.css files removed. Controls that genuinely differ keep a thin scoped override (Checkbox height, Colour non-stretch, DropdownOther grid placement). No other rule anywhere targets `.item-edit`, so this global rule behaves exactly as the old higher-specificity scoped copies did. The 2px margin is the per-row gutter that keeps every field aligned. */ .item-edit { box-sizing: border-box; flex-grow: 1; font-size: var(--data-edit-value-font-size); max-width: var(--edit-control-width, 280px); height: 23px; margin: 2px 2px; } /* The copy affordance is a real