/* 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); } .totm-chrome-neutral #HamburgerMenu { background-color: var(--totm-chrome); } /* 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). --------------------------------------------------------------------------- */ .totm-chrome-neutral .SectionHeading, .totm-chrome-neutral .fc-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; }