/*
Modern.css - visual refresh layer for the Schedule app.
This file is PURELY ADDITIVE. Scheduler.css and Colours.css are untouched;
everything here is an override applied on top. To revert the whole refresh,
remove the single - the Font Awesome classes go directly on the
button rather than on a nested . The button/input rule above would
otherwise stomp the icon glyph font on that exact element (icons render
blank), so those elements are excluded above and get their icon font
restored here instead. */
.fa {
font-family: FontAwesome !important;
}
.ModalDialog,
#JobInformationArea,
#SettingsDialogContent,
#SwitchTenantContent {
line-height: 1.45;
}
/* Segoe UI's default line boxes are taller than Arial's at the same font-size,
which pushed these two out of their fixed-height parents (#SchedulerHeader is
40px; #DateQuickLinks is 43px with overflow:auto, so a 1px overrun produced a
scrollbar). Pinning line-height reproduces the original Arial heights exactly
and makes them font-independent from here on. */
#HeaderBar_CompanyName {
line-height: 24px;
}
.DateQuickLinkDayName {
line-height: 16px;
}
.DateQuickLinkDateNumber {
line-height: 21px;
}
/* Dates and quantities line up in columns instead of jittering. */
.DateQuickLinkDateNumber,
.UserTable td,
.BatchTable td {
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
2. Corner radius - REMOVED
Buttons, inputs, dialogs, job cards and tags deliberately keep their original
square corners. Scheduler.css's `border-radius: 0 !important` on buttons is
left to stand rather than being overridden.
What remains below is not corner radius: the job card's resting shadow (which
pairs with the hover lift in section 5) and the header button treatment.
Those buttons share the exact background colour of the blue bar behind them
and were previously legible only because of a white bottom border; a
translucent white fill reads more clearly as a button.
.HamburgerMenuButton is deliberately NOT included - it keeps its original
Scheduler.css appearance (solid #1976D2 fill, white bottom-border divider,
and its own rgba(240,240,240,0.15) hover).
--------------------------------------------------------------------------- */
.UnassignedJob {
box-shadow: var(--totm-shadow-card);
/* Without this, a fast mousedown-and-move onto the calendar can register as a text
selection instead of (or as well as) a jQuery UI drag start, especially since the job
number/customer name text inside is otherwise perfectly normal selectable text. Inherits
onto .JobStatusIndicator/.JobListItemDetailArea/.JobHeadingJobNo/.JobHeadingCustomerName
below it, so nothing inside the card is selectable either. */
-webkit-user-select: none;
user-select: none;
}
#SchedulerHeader button,
#SchedulerHeader input[type=button],
#HeaderMiddlePanel button,
#SettingsDialogHeaderButtonContainer button {
background-color: rgba(255, 255, 255, 0.14) !important;
border-bottom: none;
}
#SchedulerHeader button:hover,
#SchedulerHeader input[type=button]:hover {
background-color: rgba(255, 255, 255, 0.26) !important;
}
/* ---------------------------------------------------------------------------
3. Dialog elevation
All 14 modals carry .ModalDialog, so one rule covers the lot. The hard
1px #ababab border is removed per-id, because each dialog sets its own
`border` at id specificity which a class rule cannot beat. The shadow
is what separates the dialog from the page now.
Corners stay square (see section 2), so the .SectionHeading titlebar needs
no matching radius.
--------------------------------------------------------------------------- */
.ModalDialog {
box-shadow: var(--totm-shadow-dialog);
}
#LoginScreen,
#NewJobScreen,
#AlterAllocationDurationScreen,
#CreateBookingScreen,
#CreateMemoScreen,
#TextEntryDialog,
#BookingTimePickerDialog,
#DoubleTextEntryDialog,
#TextReminderDialog,
#ConfirmActionScreen,
#NewCustomerScreen,
#SettingWrapperDialog,
#SwitchTenantDialog,
#SetupWizardScreen {
border: none;
}
/* Edge-anchored slide-in panel: shadow only, no radius. */
#HamburgerMenu {
box-shadow: var(--totm-shadow-panel);
}
/* ---------------------------------------------------------------------------
4. Modal overlays
Both scrims were a light grey at 50% opacity, which washed the page out
rather than pushing it back. opacity must be reset to 1 because the colour
now carries its own alpha.
--------------------------------------------------------------------------- */
#GreyOut,
#HamburgerScreen {
background-color: var(--totm-scrim);
opacity: 1;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* ---------------------------------------------------------------------------
5. Motion / hover states
Scheduler.css contained exactly one transition. Deliberately limited to
colour and shadow - no transform, because .UnassignedJob is a FullCalendar
external draggable and a transform would offset the drag helper.
--------------------------------------------------------------------------- */
button,
input[type=button],
.JobDetailsAttachmentButton,
.UnassignedJob,
.TenantOption,
.TenantOptionLabel,
.SelectableStaffMember,
.DateQuickLinkButton,
.HamburgerMenuItem,
.NewCustomerTypeOption,
.JobDetailsAllocationItem {
transition: background-color var(--totm-motion),
color var(--totm-motion),
box-shadow var(--totm-motion),
border-color var(--totm-motion);
}
/* Fading a card out on hover reads as "disabled". Lift it instead. */
.UnassignedJob:hover {
opacity: 1;
box-shadow: var(--totm-shadow-hover);
}
.UnassignedJob:focus {
opacity: 1;
}
/* ---------------------------------------------------------------------------
6. Focus rings
Scheduler.css line 16 has `*:focus { outline: 0 }`, which removes every
keyboard focus indicator in the app. :focus-visible restores a ring for
keyboard users only - mouse clicks stay clean.
Same specificity as *:focus (0,1,0), so this wins on source order.
--------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--totm-brand);
outline-offset: 2px;
}
/* A blue ring is invisible against the blue chrome. */
#SchedulerHeader :focus-visible,
#HamburgerMenu :focus-visible,
.SectionHeading :focus-visible,
.fc-toolbar :focus-visible {
outline-color: #fff;
}
/* ---------------------------------------------------------------------------
8. Scrollbars
Six near-identical webkit blocks in Scheduler.css shared a dark inset track
shadow and a solid blue thumb. Consolidated into one rounded neutral thumb.
The 8px track width is deliberately unchanged: FullCalendar v3 measures
scrollbar width to align the timeline header against the body, so widening
.fc-scroller risks column misalignment. The visible thumb is inset to 4px
via a transparent border + background-clip.
--------------------------------------------------------------------------- */
.fc-scroller,
#TheJobs,
#JobInformationArea,
#SettingsDialogContent,
#SwitchTenantContent,
.ui-dropdownchecklist-dropcontainer,
.ui-autocomplete {
scrollbar-width: thin;
scrollbar-color: var(--totm-scrollbar) transparent;
}
.fc-scroller::-webkit-scrollbar,
#TheJobs::-webkit-scrollbar,
#JobInformationArea::-webkit-scrollbar,
#SettingsDialogContent::-webkit-scrollbar,
#SwitchTenantContent::-webkit-scrollbar,
.ui-dropdownchecklist-dropcontainer::-webkit-scrollbar,
.ui-autocomplete::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
.fc-scroller::-webkit-scrollbar-track,
#TheJobs::-webkit-scrollbar-track,
#JobInformationArea::-webkit-scrollbar-track,
#SettingsDialogContent::-webkit-scrollbar-track,
#SwitchTenantContent::-webkit-scrollbar-track,
.ui-dropdownchecklist-dropcontainer::-webkit-scrollbar-track,
.ui-autocomplete::-webkit-scrollbar-track {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.fc-scroller::-webkit-scrollbar-thumb,
#TheJobs::-webkit-scrollbar-thumb,
#JobInformationArea::-webkit-scrollbar-thumb,
#SettingsDialogContent::-webkit-scrollbar-thumb,
#SwitchTenantContent::-webkit-scrollbar-thumb,
.ui-dropdownchecklist-dropcontainer::-webkit-scrollbar-thumb,
.ui-autocomplete::-webkit-scrollbar-thumb {
background-color: var(--totm-scrollbar);
border: 2px solid transparent;
background-clip: padding-box;
border-radius: 8px;
-webkit-box-shadow: none;
box-shadow: none;
}
.fc-scroller::-webkit-scrollbar-thumb:hover,
#TheJobs::-webkit-scrollbar-thumb:hover,
#JobInformationArea::-webkit-scrollbar-thumb:hover,
#SettingsDialogContent::-webkit-scrollbar-thumb:hover,
#SwitchTenantContent::-webkit-scrollbar-thumb:hover,
.ui-dropdownchecklist-dropcontainer::-webkit-scrollbar-thumb:hover,
.ui-autocomplete::-webkit-scrollbar-thumb:hover {
background-color: var(--totm-scrollbar-hover);
}
/* ---------------------------------------------------------------------------
9. Date quick-links strip
28 equal columns separated by hard 1px rules become spaced segments. Corners
stay square, matching the rest of the app.
The gap comes from transparent LEFT/RIGHT borders only, never top or bottom:
#DateQuickLinks is a fixed 43px tall with overflow:auto, and adding vertical
borders would push the buttons past that and trigger a scrollbar. Vertical
size is therefore identical to before.
--------------------------------------------------------------------------- */
.DateQuickLinkButton {
border: 0;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
background-clip: padding-box;
}
/* Scheduler.css uses `#DateQuickLinks :hover`, a descendant selector that also
matches the two inner s - so each label paints its own square blue
block inside the pill. These rules keep the fill on the pill itself. */
#DateQuickLinks .DateQuickLinkButton:hover {
background-color: var(--totm-brand-tint);
color: var(--totm-brand-ink);
}
#DateQuickLinks .DateQuickLinkButton:hover .DateQuickLinkDayName,
#DateQuickLinks .DateQuickLinkButton:hover .DateQuickLinkDateNumber,
#DateQuickLinks .DateQuickLinkButtonSelected:hover .DateQuickLinkDayName,
#DateQuickLinks .DateQuickLinkButtonSelected:hover .DateQuickLinkDateNumber {
background-color: transparent !important;
color: inherit !important;
}
.DateQuickLinkButtonSelected {
box-shadow: 0 1px 4px rgba(25, 118, 210, 0.45);
}
.DateQuickLinkDayName {
opacity: 0.75;
letter-spacing: 0.02em;
}
/* Restores the "has allocations" underline that the `border: 0` reset above
clears. Must stay after .DateQuickLinkButton - same specificity, so source
order decides. */
.DateQuickLinkButtonHasAllocations {
border-bottom: 2px solid #8B1A1A;
}
/* =============================================================================
The sections below are from a separate, later "executive polish" list with
its own 1-8 numbering (1 neutral chrome / 2 one blue - both live in
Chrome-Neutral.css - 3 type scale, 4 consolidate greys, 5 status palette -
not requested, 6 tables, 7 icon set, 8 highlight state). Numbers below refer
to THAT list, not the 1-10 list at the top of this file.
============================================================================= */
/* ---------------------------------------------------------------------------
3. Type scale
Scheduler.css has 14 distinct font-size values, several arriving via pt
(10pt/14pt/16pt/18pt) rather than px, which round to odd fractional pixel
sizes (10pt = 13.33px) that don't line up with anything else on screen.
Most already land close to the scale above and are left alone; only the
genuinely mismatched ones are normalised here.
The other half of this item is the dialog/section titlebars: .SectionHeading
never sets its own font-size (the `font-size: 1.6em` at Scheduler.css:143 is
commented out and was never live), so its / render at the browser's
default h2 size (~21px bold). Large bold titlebars read as loud rather than
considered; shrinking to a small uppercase label - the same pattern used for
the table headers below - is the highest-value change in this section.
.SectionHeading's 40px height/line-height (Scheduler.css) is unaffected:
line-height is inherited by the heading unless overridden, and nothing here
sets it, so vertical centring is untouched.
--------------------------------------------------------------------------- */
.SectionHeading h2,
.SectionHeading h3 {
font-size: var(--totm-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.92;
}
/* #HeaderBar_CompanyName is also an , but it's the app's brand/company
name in the main header bar, not a section titlebar - deliberately not
included above (it lives outside .SectionHeading, so the selectors above
don't match it anyway; called out so that stays a deliberate choice rather
than an oversight). */
.JobMemo {
font-size: var(--totm-fs-sm); /* was 10pt (13.33px) */
}
.FetchingNewJobsHeading {
font-size: var(--totm-fs-lg); /* was 16pt (~21.3px) */
}
.SetupWizardTaskRow .fa-check-circle {
font-size: 24px; /* was 18pt - this literally is 24px, just spelled oddly */
}
.SetupWizardTaskRow .fa-circle-o {
font-size: var(--totm-fs-xl); /* was 14pt (~18.7px) */
}
/* ---------------------------------------------------------------------------
4. Consolidate greys
Borders across the app use nine different greys for the same job: #ababab,
#dcdcdc, #ddd, #eee/#EEE, #ABADB3 (dead - commented out), #999 (dead -
commented out), #888, #777. Reduced to two - a hairline and a stronger
divider - reusing the exact values from the Mobile app's Tokens.css
(--border / --border-strong) so both apps share one grey vocabulary.
Scoped to LIGHT surfaces only (dialogs, tables, cards on a white
background). Dividers that sit on dark chrome - .HamburgerMenuItem's
border-bottom, the #fff dividers on header/hamburger buttons - are
deliberately left alone: swapping them for a bluish-grey token would lose
contrast against a dark background, the opposite of the goal here.
#ababab is not listed below because the dialog-elevation section earlier in
this file already replaces it with `border: none`.
--------------------------------------------------------------------------- */
.JobInfoElementTitle,
.JobDetailsAllocationItem,
.SetupWizardTaskRow,
.UserTable td,
.BatchTable td {
border-color: var(--totm-border);
}
.CreateBookingSearchBox,
.WebHookItemDiv {
border-color: var(--totm-border-strong);
}
.fc-timeline-event {
border-color: var(--totm-border-strong) !important; /* Scheduler.css's own #888 border is !important */
}
/* .ui-state-hover sets border-bottom to black separately from its other three
sides (a deliberate active-state accent) - only the non-accent sides are
touched, via longhand properties, so that accent survives. */
.ui-state-hover {
border-top-color: var(--totm-border) !important;
border-left-color: var(--totm-border) !important;
border-right-color: var(--totm-border) !important;
}
/* ---------------------------------------------------------------------------
6. Tables & badges
Solid-blue-filled table headers become a plain surface with a small
uppercase label and a single strong rule beneath - the same language as the
.SectionHeading titlebars above, so table headers and dialog titles now
read as one design language instead of two.
Both tables render (not ) inside their - confirmed against
View.Users.js/View.Batch.js, this app never uses - so the header cell
selectors below target thead td, not thead th.
Sticky headers: both tables render inside #SettingsDialogContent, a fixed
max-height (720px) scrolling pane (Scheduler.css), so position:sticky is
contained and safe - it cannot escape that scroller. The header cells need
their own opaque background (not just the thead's) for sticky to paint
correctly over scrolled-under rows.
--------------------------------------------------------------------------- */
.UserTable thead,
.BatchTable thead {
background-color: #fff;
color: #333;
}
.UserTable thead td,
.BatchTable thead td {
position: sticky;
top: 0;
z-index: 2;
background-color: #fff;
border-bottom: 2px solid var(--totm-border-strong);
font-size: var(--totm-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--totm-text-muted);
}
/* Retire the Bootstrap-3-era solid badge fills (and their 3px radius - square
corners throughout, matching the rest of the app) for tinted labels that
read as status text rather than loud blocks. */
.CompletedFormsDraftBadge {
background-color: rgba(249, 168, 37, 0.18);
color: #8A5A00;
border-radius: 0;
}
.CompletedFormsCompleteBadge {
background-color: rgba(46, 125, 50, 0.14);
color: #1B5E20;
border-radius: 0;
}
/* ---------------------------------------------------------------------------
7. Icon rendering quality - CSS-only part
The real fix for "chunky, inconsistent stroke weight" icons is a new icon
asset - a newer Font Awesome release, or an SVG set like Lucide/Phosphor -
which means new font/SVG files added to the project. That's a bigger call
than a CSS pass (licensing, ~57 call sites across ~15 files using two
different markup patterns - see the .fa rule in the typography section
above for one of them). Flagged to the user separately rather than done
silently here.
What IS safely fixable without new assets: several icon-only utility
buttons (Batch line actions, and the Recurring Job/User row actions that
share .UserTable's markup pattern) never had an explicit font-size, so they
inherited the body text size (14px), while the visually-equivalent
SetupWizard/header icon buttons are 18px. Normalising closes that
inconsistency without touching the icon font itself.
--------------------------------------------------------------------------- */
.batchLineButton,
.UserTable button.fa {
font-size: var(--totm-fs-xl);
}
/* ---------------------------------------------------------------------------
8. Highlighted-job state preserves the underlying status colour
.HighlightedJob (Scheduler.css) sets a flat !important background-color,
which has two problems rather than one:
- For jobs using a Colours.css status class (DarkBlue/LightGreen/etc,
the palette dispatchers actually rely on) it has NO effect at all:
Colours.css loads after Scheduler.css, so its !important status colour
already wins over .HighlightedJob's !important - confirmed empirically
against the live page, not assumed. Highlighting is therefore already
invisible today for any job with a status colour.
- For jobs using a Scheduler.css-internal class (plain/.OnHoldUnassignedJob/
.CompletedJob, all defined earlier in the same file) .HighlightedJob DOES
win, and wipes out that status colour while highlighted.
Fixed by moving the highlight indicator off background-color entirely, onto
a box-shadow ring, so status colour survives in every case rather than a
different case in each direction. The ring uses a white-then-brand double
layer specifically because a single colour cannot have reliable contrast
against all ~14 Colours.css palette values, which range from near-white
(Yellow, FluroGreen) to near-black (Black, DarkRed) - this is the same
double-ring technique selection outlines use for exactly this reason.
CSS cannot "un-apply" a property from another rule, only replace it outright
- so every status colour's background needs restoring explicitly (with
!important, matching what it's overriding). This can't be left as a single
generic fallback rule either: an early version of this fix used just
`.UnassignedJob.HighlightedJob { background-color: #777 !important }` to
restore the plain-job default, but that selector's specificity (0,2,0) with
!important beats every Colours.css class's own !important rule (0,1,0)
regardless of which one is also present - verified against the live page,
this actually forced EVERY highlighted job to flat grey, the opposite of
the goal. Each status combination below is listed explicitly so its
specificity (0,3,0) only wins for jobs that actually carry that class,
correctly losing to nothing else and correctly not firing for any other
status. The bare .UnassignedJob.HighlightedJob rule is still needed as the
plain-job (no status class) case - it's fine at (0,2,0) precisely because
every rule below it outranks it when a status class is also present. Every
colour value below is copied verbatim from Colours.css/Scheduler.css. */
.UnassignedJob.HighlightedJob {
background-color: #777 !important; /* restores .UnassignedJob's own default (no status class) */
}
.UnassignedJob.OnHoldUnassignedJob.HighlightedJob {
background-color: #B77 !important; /* restores .OnHoldUnassignedJob (Scheduler.css) */
}
.UnassignedJob.CompletedJob.HighlightedJob {
background-color: #55a955 !important; /* restores .CompletedJob (Scheduler.css) */
}
.UnassignedJob.DarkBlue.HighlightedJob { background-color: #183B8C !important; }
.UnassignedJob.GreenBlue.HighlightedJob { background-color: #00A8A8 !important; }
.UnassignedJob.DarkGreen.HighlightedJob { background-color: #008040 !important; }
.UnassignedJob.LightGreen.HighlightedJob { background-color: #79BE50 !important; }
.UnassignedJob.DarkRed.HighlightedJob { background-color: #AC042B !important; }
.UnassignedJob.LightRed.HighlightedJob { background-color: #EE3224 !important; }
.UnassignedJob.Gray.HighlightedJob { background-color: #6D7587 !important; }
.UnassignedJob.Purple.HighlightedJob { background-color: #9A459A !important; }
.UnassignedJob.Pink.HighlightedJob { background-color: #E90169 !important; }
.UnassignedJob.Black.HighlightedJob { background-color: #000 !important; }
/* These four also set color:#000 in Colours.css (dark text needed on a light
fill) - restoring only background-color would leave the highlighted card
with a dark fill but whatever text colour some other rule happens to
supply, so color is restored alongside it. */
.UnassignedJob.LightBlue.HighlightedJob { background-color: rgba(187, 221, 255, 0.85) !important; color: #000 !important; }
.UnassignedJob.FluroGreen.HighlightedJob { background-color: rgba(124, 255, 76, 0.85) !important; color: #000 !important; }
.UnassignedJob.Yellow.HighlightedJob { background-color: #FFE633 !important; color: #000 !important; }
.UnassignedJob.Orange.HighlightedJob { background-color: #FA9205 !important; color: #000 !important; }
.UnassignedJob.HighlightedJob,
.UnassignedJob.HighlightedJob:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--totm-brand);
}
/* =============================================================================
Job Details pane (#Details) redesign - own 1-4 list, unrelated to either
numbering above. Measured against the live pane before writing this: at a
300px pane width, .JobInfoElement's `width: 84%` (Scheduler.css) wastes
76px of 370px usable width, and the label (14px/700/#444) and value
(14px/400/#000) are close enough in size/weight that neither reads as more
important than the other - every field looks like a disabled form input on
a grey page rather than a data summary.
============================================================================= */
/* ---------------------------------------------------------------------------
1. Invert label/value hierarchy
.JobInfoElementTitle was a bordered, boxed 14px bold label - visually
louder than the data it's labelling. Shrunk to the same small-uppercase
treatment already used for table headers and section titlebars elsewhere
in this file, so the pane reads as one consistent language rather than
inventing a fourth. Values get their own deliberate weight (500) and the
shared --totm-text tone instead of inheriting whatever black Scheduler.css
happened to set.
--------------------------------------------------------------------------- */
#JobInformationArea .JobInfoElementTitle {
border: none;
padding: 0;
margin: 0 0 4px 0;
font-size: var(--totm-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--totm-text-muted);
}
/* Scoped under #JobInformationArea because Scheduler.css's own rule here -
`.JobInfoElement label, textarea` - is a comma-selector bug that styles
EVERY textarea on the page, not just ones inside .JobInfoElement. Scoping
to the pane's container avoids repeating that mistake. */
#JobInformationArea .JobInfoElement label,
#JobInformationArea .JobInfoElement textarea {
background-color: transparent;
border: none;
padding: 0;
font-size: 14px;
font-weight: 500;
color: var(--totm-text);
}
/* #JobInfo_Description is a real