/* Chrome-Neutral.css - OPTIONAL variant, off by default. Implements two changes discussed as recommendations #1 and #2: #1 Neutral chrome. Brand blue currently paints the header bar, every section heading, the calendar toolbar, the hamburger panel and every table header - as well as buttons, selection and hover. When the accent colour is on everything, nothing reads as emphasised. This variant moves all *chrome* to a graphite palette and leaves blue to mean one thing only: an action, a selection, or a hover. Deliberately still blue: buttons, the selected date, .ResourceHoursNumber, the jobs-to-display toggle, staff-member hover, .WhiteTextBlueBackground. Those are actions and selection, which is the whole point. #2 One blue, not three. Scheduler.css writes the brand colour three ways: #1976D2 (x12), rgba(25,118,210,1) (x16) - identical - and rgba(25,118,210,0.8) (x4), which composites over white to a visibly lighter, washed blue. That last one is .SectionHeading and .fc-toolbar, so dialog titlebars and the calendar toolbar did not match the header above them. Here they become chrome, and the two remaining 0.8 uses (button hover text) are pinned to the solid brand. EVERYTHING is scoped to .totm-chrome-neutral on , so with the class absent this file changes nothing at all. Toggle at runtime: TotmChrome.toggle() // or Ctrl+Alt+K See Scripts/Utils/Util.ChromeTheme.js. The choice persists in localStorage. Load order: after Modern.css. */ .totm-chrome-neutral { /* App frame - the outermost shell. */ --totm-chrome: #232D3B; /* One step lighter, so section headings and dialog titlebars read as a level *below* the app frame rather than competing with it. */ --totm-chrome-2: #2E3A4B; } /* --------------------------------------------------------------------------- App frame --------------------------------------------------------------------------- */ .totm-chrome-neutral #SchedulerHeader { background-color: var(--totm-chrome); } /* A step darker than --totm-chrome (used for the header bar) - the panel covers a much larger, flatter area, so it reads better a shade darker rather than matching the header exactly. */ .totm-chrome-neutral #HamburgerMenu { background-color: #171e28; } /* Offline state must still be obvious against graphite rather than against blue, so it shifts warm instead of just going grey. */ .totm-chrome-neutral .HeaderOffline { background-color: #6B5638 !important; } /* --------------------------------------------------------------------------- Section headings, dialog titlebars, calendar toolbar, table headers These were the rgba(25,118,210,0.8) washed blue (#2 above). .cal-toolbar is the in-house Calendar replacing FullCalendar (Scheduler-Calendar-Design.md) - it was deliberately matched to the same washed-blue value as .SectionHeading/ .fc-toolbar, so it gets the same neutral-chrome treatment for the same reason. Its own button/icon colours (white text on a transparent, bordered fill - Calendar.css) already read fine on graphite with no further change, unlike .fc-toolbar button below - Calendar.css's buttons never had the solid-blue-on-blue problem those needed fixing. --------------------------------------------------------------------------- */ .totm-chrome-neutral .SectionHeading, .totm-chrome-neutral .fc-toolbar, .totm-chrome-neutral .cal-toolbar { background-color: var(--totm-chrome-2); } .totm-chrome-neutral .UserTable thead, .totm-chrome-neutral .BatchTable thead { background-color: var(--totm-chrome-2); } /* --------------------------------------------------------------------------- Buttons living on chrome Modern.css already turns header and hamburger buttons into translucent white chips; those work unchanged on graphite. The calendar toolbar has the same problem Modern.css fixed for the app header - its buttons were blue-on-blue and effectively invisible - so it gets the same treatment here. --------------------------------------------------------------------------- */ .totm-chrome-neutral .fc-toolbar button { background-color: rgba(255, 255, 255, 0.14) !important; } .totm-chrome-neutral .fc-toolbar button:hover { background-color: rgba(255, 255, 255, 0.26) !important; } /* The two remaining rgba(25,118,210,0.8) declarations in Scheduler.css are the hover text on these buttons. Against a white fill the washed blue looked muddy; pin them to the solid brand (#2 above). */ .totm-chrome-neutral #HeaderMiddlePanel button:hover, .totm-chrome-neutral #SettingsDialogHeaderButtonContainer button:hover { background-color: #fff !important; color: var(--totm-brand) !important; } /* --------------------------------------------------------------------------- Jobs list, Job Details pane and main calendar body These are plain white/light-grey (#fff, #eee in Scheduler.css) regardless of this variant. Dark Mode dims them a step so the whole working area reads as part of the darker chrome, not just its bars. --------------------------------------------------------------------------- */ .totm-chrome-neutral #CalendarWrapper { background-color: #dcdcdc; } .totm-chrome-neutral #external-events { background: #d4d4d4; } .totm-chrome-neutral #Details { background-color: #d4d4d4; } /* #Spacer (the strip beneath the calendar the status bar sits in) is styled inline in index.html, which otherwise beats this stylesheet - !important is required to override it. */ .totm-chrome-neutral #Spacer { background-color: #dcdcdc !important; } /* The calendar's own horizontal/vertical scrollbar track (Scheduler.css' "Main Calendar Scroller") is #F5F5F5, which reads as a white strip along the bottom/side of the darkened calendar body above. */ .totm-chrome-neutral .fc-scroller::-webkit-scrollbar-track, .totm-chrome-neutral .fc-scroller::-webkit-scrollbar { background-color: #c8c8c8; } /* The old engine's own FullCalendar markup has no dark-mode-aware CSS of its own, so dimming #CalendarWrapper above only shows through in the margins around it - FullCalendar's internal grid/resource-area paint solid white over the top regardless. The new engine (Calendar.css) is our own component, so its internals get dimmed directly instead of relying on the same wrapper trick - same #d4d4d4/#c8c8c8 pair used for every other body panel above, so the calendar reads as part of the same dimmed working area rather than introducing a third grey. */ .totm-chrome-neutral .cal-root, .totm-chrome-neutral .cal-resource-area, .totm-chrome-neutral .cal-timeline, .totm-chrome-neutral .cal-grid { background: #d4d4d4; } .totm-chrome-neutral .cal-resource-area-header, .totm-chrome-neutral .cal-time-axis, .totm-chrome-neutral .cal-group-row, .totm-chrome-neutral .cal-lane--group { background: #c8c8c8; } /* --totm-border/--totm-border-strong were tuned for hairlines on white and all but disappear against the greys above - darken them for the calendar's own separators (row/column dividers, hour gridlines) rather than touching the shared tokens every other (still-white) screen relies on. */ .totm-chrome-neutral .cal-resource-area, .totm-chrome-neutral .cal-resource-area-header, .totm-chrome-neutral .cal-time-axis { border-color: rgba(0, 0, 0, .2); } .totm-chrome-neutral .cal-group-row, .totm-chrome-neutral .cal-resource-row, .totm-chrome-neutral .cal-lane, .totm-chrome-neutral .cal-slot-label { border-color: rgba(0, 0, 0, .12); } .totm-chrome-neutral .cal-slot-line { background: rgba(0, 0, 0, .12); } .totm-chrome-neutral .cal-slot-line--hour { background: rgba(0, 0, 0, .2); } /* Resource-row highlighting (View.Calendar.js's highlightUserRow, used by the staff map overlay) is a selection state, not chrome - per this file's own "deliberately still blue" rule it stays on the brand accent rather than a plain grey, which would otherwise blend straight into the dimmed resource area above. */ .totm-chrome-neutral .cal-resource-row--highlighted { background: rgba(25, 118, 210, .25); } .totm-chrome-neutral .cal-timeline::-webkit-scrollbar-track, .totm-chrome-neutral .cal-resource-rows-viewport::-webkit-scrollbar-track { background-color: #c8c8c8; } /* --------------------------------------------------------------------------- Settings dialog #SettingWrapperDialog is the one shell reused for every Settings sub-view (Company Info, Users, Products, Job Statuses, etc. via View.SettingDialog.displayView) - darkening it here covers all of them. Scoped to the id (not .ModalDialog, which other, unrelated dialogs like Create Job/Memo also use) so those are left alone. --------------------------------------------------------------------------- */ .totm-chrome-neutral #SettingWrapperDialog { background-color: #d4d4d4; } .totm-chrome-neutral #SettingsDialogContent::-webkit-scrollbar-track, .totm-chrome-neutral #SettingsDialogContent::-webkit-scrollbar { background-color: #c8c8c8; } /* Jobs list and Job Details pane scrollers - same #F5F5F5 track as the calendar/settings ones above, matching the darkened panels they sit in. */ .totm-chrome-neutral #TheJobs::-webkit-scrollbar-track, .totm-chrome-neutral #TheJobs::-webkit-scrollbar, .totm-chrome-neutral #JobInformationArea::-webkit-scrollbar-track, .totm-chrome-neutral #JobInformationArea::-webkit-scrollbar { background-color: #c8c8c8; }