:root { /* Tell the browser which theme native controls (select popups, date pickers, scrollbars) should match. Without this the dropdown option list renders light-on-white in dark mode - invisible text. */ color-scheme: light; /* THE NAV STANDS ON THE BRAND'S NAVY, not on a neutral near-black. #10233F is the same dark the marketing page's footer and the sign-in screen stand on, so the three surfaces a customer sees in order - the site, the door, the app - are one colour rather than three. It also gives the Fleet Cadence mark a ground it was drawn for: the mark is white and amber, and on #15181d it read as floating on a grey slab. Professional's rail is its own light grey, below. */ --sidebar-bg: #10233F; --sidebar-bg-gradient: linear-gradient(180deg, #14294A 0%, #0D1D35 100%); --sidebar-bg-hover: #1B3155; --sidebar-text: #93A3BE; --sidebar-text-active: #FFFFFF; --sidebar-border: #24395C; /* The nav's own accent, deliberately NOT the app's indigo. Safety amber is the vernacular of the actual job (hi-vis, dock markings, van livery) and it matches the marketing site, so the product and the page that sells it read as one company. Scoped to the nav so changing it never disturbs buttons, focus rings or charts. */ /* The nav accent FOLLOWS the colour theme. It was pinned to amber, so picking Terminal or Sandstone left an amber nav bolted to a cyan or teal app - the one thing a theme picker must not do. Lightened off --accent rather than used raw: every theme's sidebar ground is dark, and Sandstone's deep teal (#0f766e) is close to invisible on its own brown panel. 80% keeps the hue and guarantees it reads. Self-maintaining, so a ninth theme needs no nav edit. */ /* THE NAV'S HUE IS ITS OWN TOKEN, because the page's accent is the wrong colour to lighten. --accent is picked to read on PAPER, so on Light it is the dark #9A5806 and on Professional a deep #1d4ed8 - and 80% of either on this navy measured 4.21:1 and 3.68:1, under AA on every section heading in the nav. The sidebar is the same navy in Light and Dark, so both take the brand's own #E8901B, which Dark was already using (7.61:1). Professional's rail is light grey, so it names its nav accent outright instead. */ --nav-hue: #E8901B; /* A DSP'S OWN COLOUR (app/tools/dsp_brand.py) when it has one, set after the themes by _dsp_brand_style.html; the app's amber and its ink otherwise. The Home band, the Dashboard row and the public pages' band read these. */ --dsp: #E8901B; --dsp-on: #14181F; --dsp-band: var(--dsp); --dsp-band-on: var(--dsp-on); --nav-accent: color-mix(in srgb, var(--nav-hue) 80%, #ffffff); --nav-accent-soft: color-mix(in srgb, var(--accent) 15%, transparent); /* Text on the current row, and the dark ink used on an accent plate. */ --nav-accent-text: color-mix(in srgb, var(--accent) 45%, #ffffff); --nav-on-accent: color-mix(in srgb, var(--accent) 22%, #08090b); /* The section band: the sidebar ground, pushed darker. */ --nav-band: color-mix(in srgb, var(--sidebar-bg) 82%, #000000); --nav-band-hover: color-mix(in srgb, var(--sidebar-bg) 94%, #000000); /* A solid fill for the Dense style's current row. Darkened off the accent so white text on it stays legible even on the themes whose accent is pale, where the raw accent would not carry it. */ --nav-solid: color-mix(in srgb, var(--accent) 85%, #000000); /* The nav has its own face, held across every colour theme, because it is chrome rather than content. Condensed earns its place twice: it gives the panel a voice the system stack cannot, and it fits names like "Timecard compliance" on one line without shrinking the type to the point of being unreadable. */ --font-nav: "Barlow Condensed", "Arial Narrow", var(--font-body); /* THE BRAND'S AMBER, AND IT TAKES TWO VALUES RATHER THAN ONE. "make the main theme Light match the home page too. Orange not purple." Indigo could be one token because it happened to work as both a text colour and a fill: #6366f1 measures 4.47:1 against white either way round. Amber cannot. The brand's #E8901B is 2.49:1 on white, so it is unreadable AS text, and white on it is the same 2.49:1, so it is unreadable UNDER text. Painting the app with one amber would have produced links nobody can read on buttons nobody can read. So it splits the way the marketing page already splits it: --accent DOES BOTH JOBS, and its value is chosen so that it can. 154 rules set it as TEXT and 45 set it as a BACKGROUND under white, so it has to clear 4.5:1 in both directions and on every ground the app paints. #9A5806 does: 5.57:1 as text on white, 5.24:1 on the page, 4.91:1 on the zebra stripe, 4.95:1 on its own tint, and 5.57:1 under white text. Worst case 4.91:1, against the indigo it replaces, which was 4.47:1 at best and 4.13:1 on the zebra. #A55F07 was the first pick and was rejected here: it reads 4.95:1 on white and looks fine, then lands at 4.37:1 on the zebra stripe, which is most of the tables in this app. --accent-gradient is the FILL amber, the marketing page's own #E8901B, and it carries the ink in --accent-gradient-on at 6.88:1. That is the same pairing as the home page's call to action and the Sign in button, and it is the thing that makes the two read as one company rather than as an indigo app with orange buttons. EVERY DERIVED TOKEN FOLLOWS --accent, not the fill: --nav-accent, --nav-solid, --nav-on-accent and --nav-accent-text are all color-mix off it, so the sidebar re-tints itself and no nav edit is needed here. */ --accent: #9A5806; --accent-dark: #864C04; /* 6.89:1 on white */ --accent-darker: #7E4A05; /* 7.32:1 on white */ --accent-light: #FDF0DC; /* THE INK THAT SITS ON THE GRADIENT FILL. It exists because four places hard-coded `color: #fff` on top of --accent-gradient, and white on amber is the exact failure this palette has to avoid. Every theme defines it; Professional's is still white, because its fill is graphite. IT WAS CALLED --accent-on AND HAD TO BE RENAMED, because the plain -on suffix belongs to the plain token: --accent-dark-on is the ink on --accent-dark, so --accent-on has to be the ink on --accent. The gradient is a different fill and needs its own. */ --accent-gradient-on: #2B1704; /* AND THE INK ON THE SOLID --accent, WHICH CANNOT BE ONE COLOUR. 43 rules paint a solid --accent plate and set `color: #fff` on it, and the two themes need opposite inks: Light's #9A5806 wants white (5.57:1) and reads only 3.07:1 under the gradient's dark ink, while Dark's #E8901B wants that dark ink (6.88:1) and reads 2.49:1 under white. NO SINGLE INK CAN SERVE BOTH, and it is worth writing down so nobody tries: white needs a ground darker than about L 0.14 and the dark ink needs one lighter than about L 0.37, and those two grounds are the two accents. So this is a token per theme, like --accent-dark-on beside it and for the same reason. */ --accent-on: #ffffff; /* AND THE INK ON --accent-dark, WHICH IS A SEPARATE QUESTION. It is the pressed state of every button in the app, and the two themes disagree about which way it runs: on paper --accent-dark is the DARKER amber (#864C04) and wants white at 6.89:1, in dark it is the LIGHTER one (#F0A94A) and wants the ink at 8.54:1. Hard-coding #fff there measured 2.00:1 in the dark theme, which is a pressed button with no label on it - and it measured 1.99:1 before this repaint too, with the pale indigo that used to sit there, so this is an old bug being closed rather than a new one introduced. */ --accent-dark-on: #ffffff; --accent-gradient: linear-gradient(135deg, #E8901B 0%, #D9820F 100%); --accent-gradient-hover: linear-gradient(135deg, #D9820F 0%, #C9760B 100%); --accent-glow: 0 0 0 3px rgba(232, 144, 27, 0.30); --gold: #92400e; --gold-on: #ffffff; /* 7.09:1 on #92400e; see --red-on */ --gold-light: #fde68a; --gold-bg: #fffbeb; /* White rides on this (.btn-gold): #d97706 was 3.19:1 at the light end. */ --gold-gradient: linear-gradient(135deg, #b45309 0%, #92400e 100%); /* STATUS COLOURS READ AS 12px BOLD TEXT ON THEIR OWN TINTS, so they are held to 4.5:1 there, not just on white. #059669, #dc2626 and #b45309 managed 3.58, 4.41 and 4.38 on their -bg pills, and every "Signed", "Over 48h" and warning count in the app missed AA. Darker, each clears it on every tint the app paints them on - green the most, because it also sits on its own 16% wash (5.12:1 there); white on the solid fills goes up with them. */ --green: #05654a; --green-on: #ffffff; /* 7.08:1 on #05654a; see --red-on */ --green-bg: #ecfdf5; /* THE STANDING COLOURS (2026-11-02: "Fantastic Plus should be Deep Blue, Fantastic blue, great green, anything below Red"), defined once for the scorecard pages. -X the fill (a ladder rung, the Fantastic Plus pill); -X-ink text on the card or on its own 14% wash, 4.5:1 or better; --tier-fplus-on the text on the solid Fantastic Plus pill. Fair and Poor are one red. Professional reads these Light values. The --ring-* four are the scorecard rings: muted orange, lavender, gold, mauve - none of them blue, green or red, so a ring is never mistaken for a standing. */ --tier-fplus: #1B2E7B; --tier-fplus-ink: #1B2E7B; --tier-fplus-on: #FFFFFF; --tier-fantastic: #2F6FE0; --tier-fantastic-ink: #1D4ED8; --tier-great: #1E9A55; --tier-great-ink: #0B6B3A; --tier-red: #D6453D; --tier-red-ink: #B42318; --ring-safety: #EE9B5A; --ring-delivery: #9486C7; --ring-pickup: #E3BD5F; --ring-service: #C994A8; --red: #b91c1c; /* The ink on a SOLID --red (a count badge, a danger button on hover): white is 6.47:1 on #b91c1c. Dark overrides it - see there. */ --red-on: #ffffff; --red-bg: #fef2f2; --orange: #c2410c; --orange-bg: #ffedd5; --yellow: #854d0e; --yellow-bg: #fef9c3; --gray: #5b6b80; /* 4.97:1 on the grey pill; #64748b was 4.34 */ --gray-bg: #f1f5f9; /* Tile palette - cycled across grid boxes (.dashboard-grid items, .stat-grid items) so a row/grid of cards reads as genuinely distinct boxes instead of the same indigo card repeated. */ /* Tile 1 mirrors the accent by convention, so it moves with it - an indigo tile in an amber app is the one card that looks pasted in. */ --tile1: #9A5806; --tile1-dark: #864C04; --tile1-bg: #FDF0DC; --tile2: #0d9488; --tile2-dark: #0f766e; --tile2-bg: #ecfdfb; --tile3: #d97706; --tile3-dark: #b45309; --tile3-bg: #fffbeb; --tile4: #7c3aed; --tile4-dark: #6d28d9; --tile4-bg: #f6f3ff; --tile5: #0284c7; --tile5-dark: #0369a1; --tile5-bg: #f0f9ff; /* THE HOME PAGE'S OWN GROUND AND INK, not slate. #10233F is the navy the marketing page sets every word in, and #F6F8FC is the cool paper it stands on - the blue in the paper is what makes the amber read as daybreak rather than as a warm editorial accent. --text-muted at #40506B is 8.4:1 on that paper, against the 4.8:1 the slate it replaces managed. */ --text: #10233F; --text-muted: #40506B; --border: #D8DEEA; --card-bg: #FFFFFF; --page-bg: #F6F8FC; --zebra: #EDF1F8; /* Aliases for names pages reached for that the palette never had. Every one of these was written with a hard-coded fallback after the comma, and an undefined token always renders that fallback - so they painted one light colour in every theme, including the dark ones. A page painting #fff7ed behind text coloured for a dark ground is not broken enough to throw; it just reads wrong, which is why they sat here. Defined as var(...) of a real token rather than copied values, so a theme that redefines the target redefines these with it. One place; no per-palette duplication of a token used twice. */ --bg: var(--page-bg); --bg-subtle: var(--zebra); --surface-2: var(--card-bg); --card-bg-alt: var(--zebra); --chip-bg: var(--gray-bg); --code-bg: var(--gray-bg); --nav-muted: var(--sidebar-text); --ok: var(--green); --blue-bg: var(--tile2-bg); --amber: var(--gold); --amber-bg: var(--gold-bg); --amber-dark: var(--gold-light); /* THE "YOU ARE HERE" MARK OF A TAB ROW: the line under the current tab, the line under the current settings group, the focus ring on a tab. --gold in Light, Dusk and Dark, as it always was; a theme whose accent is not amber names its own (Professional: graphite), so no tab bar on any page has to know which theme it is in. */ --tab-mark: var(--gold); /* THE PAGE TABS' TRACK AND THE RAISED TAB ON IT (.settings-tabs, the Settings groups). Mixed from the theme's own ink and page here, so Professional and any later light theme get a track in their own grey; Dusk and Dark name theirs, measured below. The muted ink reads 6.7:1 on Light's track. */ --tab-track: color-mix(in srgb, var(--text) 7%, var(--page-bg)); --tab-track-shade: color-mix(in srgb, var(--text) 6%, transparent); --tab-thumb: var(--card-bg); --tab-thumb-ring: color-mix(in srgb, var(--text) 8%, transparent); --tab-thumb-shadow: 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 6%, transparent); --tab-hover: color-mix(in srgb, var(--text) 5%, transparent); /* A font stack, not a colour - the same in every theme. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --input-bg: #ffffff; --radius: 10px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lift: 0 14px 30px rgba(15, 23, 42, 0.13), 0 4px 10px rgba(76, 29, 149, 0.06); --transition: all 0.15s ease; --sidebar-width: 300px; /* Gap around the "floating" sidebar - it sits inset from all four viewport edges as a rounded card rather than flush to the left. */ /* 0 = the nav sits flush against the viewport edge. The floating inset card (rounded corners, big drop shadow) is the single most recognisable AI-default chrome there is; being part of the window instead of hovering over it is most of the difference. */ --sidebar-gap: 0rem; /* Type: themes swap these for a genuinely different look. Default is the native system UI stack (Light/Dark). */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-body); --heading-spacing: 0; /* THE PAGE HAS A GROUND, NOT A FLAT FILL. It was one radial at 6% in the top right, which is close enough to nothing that the page read as a slab of #f8fafc with cards on it. Three wide, slow blooms give it depth without becoming something you look AT: the cards are opaque, so this is only ever seen in the gutters and between blocks, which is exactly where a page wants some air. MIXED FROM THE THEME'S OWN TOKENS rather than written as literal colours, so it follows whichever palette is on - Modern's ground comes out violet and fuchsia, Sandstone's comes out warm - and a tenth theme needs no edit here. The percentages are the only thing tuned by hand, and they are tuned for a LIGHT ground; dark redefines them below, because a dark page swallows colour and the same numbers there are invisible. */ /* LIGHT'S GROUND IS FLAT PAPER NOW, and that is the point of the repaint rather than a casualty of it. The wash mixed --accent with --tile2 (teal) and --tile4 (violet), which under indigo read as one cool haze and under amber reads as three arguing hues. The home page it is copying is flat #F6F8FC with nothing behind it. Dark went flat too, for the same reason - see its block below. */ --page-ground: none; } /* ---------------- Harbor (the theme keyed "dark") ---------------- "almost doesn't really fit the website", "something that's just darker than Dusk, but not so black". Four takes went up on real pages and the owner picked Harbor: Fleet Cadence's own navy, lifted well off black. The near-black slate it replaces had a page and a card of 5 and 10 on a 0-100 brightness scale; Harbor's page is #1E314D (20) and its card #253956 (24), still far darker than Dusk's 83 and nothing like Light's 98. LIFTED ONCE MORE, A LITTLE: "Harbor is still just a little too dark". The page went from 17 to 20, a field and a card with it, the zebra a point and the grey pill not at all. --gray-bg is the worst ground for every ink below, so leaving it where it was is what let every ink, the amber included, stay exactly as it was. THE KEY STAYS "dark", and only the name a person reads is Harbor (My App's picker, the setup walk, the FAQ answers, What's new). A saved choice lives in localStorage as "dark", the boot script and the retired-theme map send old themes to that key, and the capture script and a dozen tests all say data-theme="dark". Renaming the key would drop everybody who picked it back onto their OS setting. THE SIDEBAR IS NOT PART OF THIS. It is still the brand's #10233F (the nav tokens above are not redefined here), a band darker than the #1E314D page beside it. Only the neutral/surface tokens and the light tinted "-bg" tokens flip; the accent hues carry over. Set via data-theme on (see the head script) so there's no flash, and so it never depends on the OS setting once a user picks. FIVE GROUNDS carry text in this app: the page #1E314D, a card #253956, the zebra stripe #273B5D, the grey pill --gray-bg #2B3F5F and a form field #213552. --gray-bg is the lightest and so the worst ground for every ink below. Every text ink was re-measured on all five AND on the -bg tints it sits on (the hover row, the five status washes, the five tile washes, the gold plate), and each is 4.5:1 or better on every one of them. The worst ground is named beside each ink; tests/test_harbor_theme.py repeats the arithmetic. */ :root[data-theme="dark"] { color-scheme: dark; /* HARBOR TAKES THE AMBER TOO. It never redefined the brand and does not start now: one brand across every theme is the point, and amber on navy is the home page's own pairing. The primary button's FILL and its ink are inherited unchanged - #2B1704 on #E8901B is 6.88:1 whatever is behind the button. */ /* HARBOR IS FLAT. "i hate those random orange/blue hues on dark mode in the backgrounds." The page had three blooms behind it - amber, blue, amber - turned up because a dark page swallows colour. Light and Overcast dropped theirs for reading as arguing hues, and on a navy ground they read as stray light leaking in. The cards and the sidebar carry the depth on their own. */ --page-ground: none; /* HARBOR CANNOT HAVE ITS CAKE, and this is worth writing down because the obvious fix is wrong. --accent is read as TEXT in 154 rules and used as a BACKGROUND UNDER WHITE in 45, and on a light ground one amber can serve both: #9A5806 above is 5.57:1 either way. On #253956 the two requirements pull apart - a text amber has to be LIGHT to clear the ground, a fill under white has to be DARK - and the crossover where they meet is only 3.42:1. SO THE FILLS GAVE UP THE WHITE, AND THE TEXT GOT ITS COLOUR. The 43 rules that painted white on a solid accent take --accent-on, which is the ink per theme, and that frees --accent to be the one thing it still has to be here: readable TEXT on a navy ground. THE BRAND'S OWN #E8901B ALMOST CLEARS IT, and the one ground it misses is the grey pill: 5.27:1 on the page, 4.69:1 on a card, 4.51:1 on the zebra, but 4.26:1 on --gray-bg, which is a chip or a tag with amber words in it. So --accent is the same hue lifted a few points of lightness to #EA982B, and that is the whole change: 5.63:1 on the page, 5.02 on a card, 4.83 on the zebra, 5.32 in a field and 4.56 on --gray-bg, the worst. The primary button does not move - it paints --accent-gradient, which this block does not touch - so the brand's #E8901B is still the fill of every call to action, and #2B1704 on the lifted plate is 7.35:1. THE SIDEBAR IS UNMOVED: its accent is --nav-hue, the brand's own #E8901B, on its own navy. The few nav tokens mixed off --accent (the current row's text, the ink on an accent plate) moved a hair with it, and the brand test measures them again. --accent-dark and --accent-darker go LIGHTER here, which is what those names have always meant in this block, and they carry the 54 rules that set accent text on a tint. #F0A94A is 5.83:1 on a card and 5.30:1 on --gray-bg; #F5B25C 6.34 and 5.76. */ --accent: #EA982B; --accent-on: #2B1704; /* 7.35:1 on the plate above */ --accent-light: #3E3420; /* the hover row; --text on it 10.89:1, --accent 5.26:1 */ --accent-dark: #F0A94A; /* 5.30:1 on --gray-bg, 5.83:1 on a card */ --accent-darker: #F5B25C; /* 5.76:1 on --gray-bg, 6.34:1 on a card */ /* Harbor's -dark variants are the LIGHT ones, so what sits on them is the ink: #2B1704 on #F0A94A is 8.54:1, where white is 2.00:1. */ --accent-dark-on: #2B1704; /* Warning text. Light's dark amber #92400e is 1.77:1 on a Harbor card, so this theme names its own. */ --gold: #f59e0b; /* 4.94:1 on --gray-bg, 5.44:1 on a card */ /* The fills under white needed an ink once --gold went light here: white on #f59e0b is 2.15:1, #2b1704 is 7.97:1. */ --gold-on: #2b1704; --gold-gradient: linear-gradient(135deg, #b45309 0%, #92400e 100%); /* white 5.02:1+ */ --gold-light: #443A1A; /* a plate, not an ink; --gold on it 5.24:1 */ --gold-bg: #3A3218; /* --gold on it 5.93:1 */ --green: #34d399; /* 5.52:1 on --gray-bg, 6.45:1 on --green-bg */ /* White on #34d399 is 1.92:1 - an Approve button with no word on it. Same split as --red-on: #052e22 is 7.69:1. */ --green-on: #052e22; --green-bg: #173A35; /* The standing colours and rings on the dark card (see :root). */ --tier-fplus: #5068F0; --tier-fplus-ink: #A9B7FF; --tier-fantastic: #5AA9FF; --tier-fantastic-ink: #8DC2FF; --tier-great: #3FCB7E; --tier-great-ink: #6EE0A0; --tier-red: #FF7A70; --tier-red-ink: #FF9D95; --ring-safety: #F4B47F; --ring-delivery: #B0A4DD; --ring-pickup: #EBCC80; --ring-service: #DCAFC0; /* THE ONE STATUS INK THAT HAD TO MOVE. The palette's #f87171 reads 4.74:1 on the page but 4.22 on a card, 4.06 on the zebra, 3.84 on --gray-bg and 4.2 to 4.5 on seven of the eleven washes - every red count in a striped table was under AA. The same hue, lifted to #F98C8C: 5.72:1 on the page, 5.09 on a card, 4.90 on the zebra, 4.63 on --gray-bg (the worst) and 6.11 on --red-bg. */ --red: #F98C8C; /* THE SAME SPLIT AS --accent-on. The lifted red is light so it reads as text on this ground, which leaves white on it at 2.29:1 - every unread badge in the app failed. The fill keeps its colour and the ink goes dark: #2a0a0a is 7.99:1 on it. */ --red-on: #2a0a0a; --red-bg: #3E2430; --orange: #fdba74; /* 6.29:1 on --gray-bg, 7.50:1 on --orange-bg */ --orange-bg: #40301E; --yellow: #fde047; /* 8.05:1 on --gray-bg */ --yellow-bg: #3D3818; --gray: #A9B6CA; /* 5.17:1 on --gray-bg, 5.69:1 on a card */ --gray-bg: #2B3F5F; /* THE TILE HUES TOO. Harbor never redefined them, so a chart line, a "Chat" chip or an avatar's initials painted Light's mid-tone hues on navy: 2 to 3.5:1 on a card. Each is the same hue lifted until it clears 4.5:1 on all five grounds and on every wash (the worst is --gray-bg, 4.61 to 4.64:1), and each -dark is four points lighter again, the way --accent-dark is lighter than --accent. Tile 1 mirrors the accent. Nothing paints white on a tile hue in this theme: the one rule that did, .dashboard-card .icon, has no markup. */ --tile1: #EA982B; --tile1-dark: #F0A94A; --tile1-bg: #2A3555; --tile2: #11C0B0; --tile2-dark: #13D3C1; --tile2-bg: #1A3D44; --tile3: #F9921B; --tile3-dark: #FA9C2F; --tile3-bg: #3A3420; --tile4: #BD9BF6; --tile4-dark: #C9AEF8; --tile4-bg: #312B55; --tile5: #29B5FD; --tile5-dark: #3DBCFD; --tile5-bg: #1C3A58; --text: #EEF2F8; /* 9.45:1 on --gray-bg, 10.39:1 on a card */ --text-muted: #B3C0D4; /* 5.76:1 on --gray-bg, 6.34:1 on a card */ --border: #3D5579; /* 1.54:1 against a card: an edge, not an ink */ --card-bg: #253956; --page-bg: #1E314D; --zebra: #273B5D; --input-bg: #213552; /* The page tabs' track is a well below the page, the raised tab a step above a card. --text-muted 8.0:1 on the track, --text 8.1:1 on the raised tab. */ --tab-track: #172941; --tab-track-shade: rgba(0, 0, 0, 0.28); --tab-thumb: #30496D; --tab-thumb-ring: rgba(255, 255, 255, 0.08); --tab-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2); --tab-hover: rgba(238, 242, 248, 0.07); --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-lift: 0 14px 30px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3); } /* Components with hardcoded light colors that tokens can't reach, written from Harbor's own tokens rather than as hex: the borders are the status ink mixed into the card, the gold and orange badges take their wash and their ink from the tokens measured above. */ :root[data-theme="dark"] .badge-red { border-color: color-mix(in srgb, var(--red) 35%, var(--card-bg)); } :root[data-theme="dark"] .badge-green { border-color: color-mix(in srgb, var(--green) 35%, var(--card-bg)); } :root[data-theme="dark"] .badge-gold { background: var(--gold-bg); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, var(--card-bg)); } :root[data-theme="dark"] .badge-orange { background: var(--orange-bg); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, var(--card-bg)); } /* ---------------- Dusk theme ---------------- "I also want another Color theme. We have Light, Dark. we need something inbetween this." IT WAS A DIMMED DARK, AND THAT WAS STILL TOO DARK. "I feel that our dusk theme is still too dark." The slate #273041 measured 20 on a 0-100 brightness scale, with Dark at 5 and Light at 98: a dark theme, not an in-between one. Four lighter takes were put up side by side and the answer was "I like overcast". SO IT IS A DIMMED LIGHT: Light with the glare taken off. Soft blue- grey where Light has white (the page #c7cfdb, cards a step lighter at #d8dee7), Light's own navy text, and the brand amber taken darker until it reads on the grey. The middle of the scale, about 44 to 57, is out of bounds for any theme here: neither the app's off-white nor its navy reaches 4.5:1 there, so an in-between has to sit on one side of it, and this one sits on the light side. IT STILL DEFINES EVERY TOKEN DARK DEFINES. Light's values are tuned for white, and on this grey most of its inks slip under AA - Light's #9A5806 amber is 4.33:1 on a Dusk card, its red 4.27:1 on the grey pill. So the whole palette is restated rather than inherited. tests/test_the_dusk_theme.py diffs the two blocks. EVERY INK IS MEASURED on all five grounds this app paints - the page, a card, the zebra stripe, --gray-bg and an input - at 4.5:1 or better. --gray-bg is the darkest of them and the worst every time. */ :root[data-theme="dusk"] { color-scheme: light; /* No blooms: Light has none, and on a grey ground they read as smudges rather than depth. */ --page-ground: none; /* THE BRAND AMBER, TAKEN DARKER. Light's #9A5806 is 4.33:1 on this card. #7A4604 is the same hue: 4.80:1 on --gray-bg, 5.74:1 on a card, and white on it is 7.76:1, so a solid accent keeps white ink the way Light's does. */ --accent: #7A4604; --accent-on: #ffffff; --accent-light: #e9dfcc; /* the hover row; --text on it 11.91:1, --accent 5.87:1 */ --accent-dark: #6A3C03; /* DARKER, as in Light; 5.74:1 on --gray-bg */ --accent-darker: #5E3503; /* 6.53:1 */ --accent-dark-on: #ffffff; /* 9.29:1 on --accent-dark */ --gold: #7a360b; /* 5.50:1 on --gray-bg */ --gold-on: #ffffff; --gold-gradient: linear-gradient(135deg, #b45309 0%, #92400e 100%); /* white 5.02:1+ */ --gold-light: #eadcb2; /* a plate, not an ink */ --gold-bg: #e6d9b4; --green: #04573f; /* 5.32:1 on --gray-bg */ --green-on: #ffffff; --green-bg: #bfdcd0; /* The standing colours and rings on the Dusk card (see :root). */ --tier-fplus: #16276B; --tier-fplus-ink: #16276B; --tier-fantastic: #1E5BC6; --tier-fantastic-ink: #173F9E; --tier-great: #12783F; --tier-great-ink: #0A5A2E; --tier-red: #BF2F28; --tier-red-ink: #8F1A14; --ring-safety: #DC8848; --ring-delivery: #7F70B5; --ring-pickup: #D0AA4B; --ring-service: #B67F94; --red: #9b1818; /* 5.11:1 on --gray-bg */ --red-on: #ffffff; --red-bg: #e8c9c9; --orange: #8f3208; /* 4.94:1 on --gray-bg */ --orange-bg: #ecd3bf; --yellow: #664006; /* 5.64:1 on --gray-bg */ --yellow-bg: #e5dfb1; --gray: #3b4a61; /* 5.55:1 on --gray-bg */ --gray-bg: #c4ccd8; /* THE TILE HUES TOO. A stat card paints its number in its tile's gradient, so the hue is the text there, and Light's #d97706 or #0284c7 on this card is near 3:1. Each is the same hue taken darker until it clears 4.5:1 on a card and on its own -bg. */ --tile1: #7A4604; --tile1-dark: #6A3C03; --tile1-bg: #e9dfcc; --tile2: #0b5a52; --tile2-dark: #084a43; --tile2-bg: #c5dedb; --tile3: #7c4a03; --tile3-dark: #6b3f02; --tile3-bg: #e8dec2; --tile4: #5b2bb5; --tile4-dark: #4c239a; --tile4-bg: #d8d2ec; --tile5: #0a4f82; --tile5-dark: #083f69; --tile5-bg: #c8daea; --text: #10233F; /* Light's navy: 11.63:1 on a card */ --text-muted: #34435c; /* 7.38:1 on a card, 6.17:1 on --gray-bg */ --border: #adb7c6; --card-bg: #d8dee7; --page-bg: #c7cfdb; --zebra: #ced5e0; --input-bg: #e2e7ee; /* The page tabs' track, a shade under the page, and a raised tab lighter than a card. --text-muted 5.6:1 on the track. */ --tab-track: #BAC3CF; --tab-track-shade: rgba(16, 35, 63, 0.10); --tab-thumb: #E6EAF0; --tab-thumb-ring: rgba(16, 35, 63, 0.10); --tab-thumb-shadow: 0 1px 2px rgba(16, 35, 63, 0.18), 0 2px 6px rgba(16, 35, 63, 0.08); --tab-hover: rgba(16, 35, 63, 0.06); --shadow: 0 1px 3px rgba(16, 35, 63, 0.10), 0 1px 2px rgba(16, 35, 63, 0.07); --shadow-lift: 0 14px 30px rgba(16, 35, 63, 0.16), 0 4px 10px rgba(16, 35, 63, 0.08); } /* Dark's component overrides, written from Dusk's own tokens rather than copied as hex. Dark's are tuned for near-black and Light's defaults for white; routed through the tokens above, each of these components gets inks that were measured on Dusk's grey. */ :root[data-theme="dusk"] .badge-red { border-color: color-mix(in srgb, var(--red) 35%, var(--card-bg)); } :root[data-theme="dusk"] .badge-green { border-color: color-mix(in srgb, var(--green) 35%, var(--card-bg)); } :root[data-theme="dusk"] .badge-gold { background: var(--gold-bg); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, var(--card-bg)); } :root[data-theme="dusk"] .badge-orange { background: var(--orange-bg); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, var(--card-bg)); } * { box-sizing: border-box; } body { font-family: var(--font-body); margin: 0; padding: 0; color: var(--text); /* LONGHANDS, NOT THE SHORTHAND, and this is load-bearing. `background: var(--page-bg) var(--page-ground) fixed` looks right and is invalid: --page-ground is THREE comma-separated layers, so the substitution puts a background-colour on the first of several layers, which the shorthand only permits on the last. An invalid shorthand is dropped whole, so the body ended up with no background at all - a white page, which is worse than the flat one this replaced. It rendered as if nothing had changed, which is how it nearly shipped. */ background-color: var(--page-bg); background-image: var(--page-ground); background-attachment: fixed; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Headings pick up the theme's display face + tracking (a no-op in Light/Dark, where display == body). */ h1, h2, h3, h4, h5, h6, .sidebar-brand-name { font-family: var(--font-display); letter-spacing: var(--heading-spacing); } a { color: var(--accent); text-decoration: none; transition: var(--transition); } a:hover { color: var(--accent-dark); } h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 1rem; letter-spacing: -0.015em; } h2 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 0.75rem; letter-spacing: -0.01em; } /* ================= Professional: graphite and white ================= "I also want to experiment with another version of the professional theme, i want something different for this." Three candidates went up side by side - Ledger, Harbor and Graphite - and Graphite was picked. It replaced the navy-and-serif Professional UNDER THE SAME KEY, so everybody already on Professional got it with no setting change, and a device still holding one of the three preview keys is sent here by ZIPSTER_RETIRED_THEMES. MONOCHROME. Graphite ink for every control and mark, so the only colour on a screen is a status - a red count, a green tick, an amber warning - and it means something. The nav stands on the page's own grey with no panel of its own, white cards are lifted on soft shadows instead of outlined, and the faces are Schibsted Grotesk with Bitter for headings. THE ONE LIGHT SIDEBAR, so it restates every nav token the shell derives with color-mix: those lighten the hue into white for a dark rail, which on this grey would be close to invisible. Its component rules are at the END of this sheet ("Professional's components"), because several restate generic rules - button, th, table - at the same weight and only win by coming after them. EVERY TOKEN DARK AND DUSK DEFINE IS RESTATED, and every ink is measured on every ground: tests/test_the_professional_theme.py. */ :root[data-theme="professional"] { color-scheme: light; /* The scorecard tiers and rings, Light's values: Professional is a light theme and these were picked for a white card. */ --tier-fplus: #1B2E7B; --tier-fplus-ink: #1B2E7B; --tier-fplus-on: #FFFFFF; --tier-fantastic: #2F6FE0; --tier-fantastic-ink: #1D4ED8; --tier-great: #1E9A55; --tier-great-ink: #0B6B3A; --tier-red: #D6453D; --tier-red-ink: #B42318; --ring-safety: #EE9B5A; --ring-delivery: #9486C7; --ring-pickup: #E3BD5F; --ring-service: #C994A8; --font-body: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Bitter", Georgia, "Times New Roman", serif; --font-nav: "Schibsted Grotesk", -apple-system, "Segoe UI", sans-serif; --heading-spacing: -0.01em; --page-ground: none; /* The rail is the page's own grey. Sidebar text 7.01:1 on it, 6.26:1 on a hovered row. */ --sidebar-bg: #E9ECEF; --sidebar-bg-gradient: linear-gradient(180deg, #E9ECEF 0%, #E9ECEF 100%); --sidebar-bg-hover: #DCE0E4; --sidebar-text: #474F58; --sidebar-text-active: #14181C; --sidebar-border: #D3D8DD; /* Named outright rather than derived: graphite on the grey rail is 10.94:1, and white on a graphite plate 12.98:1. */ --nav-hue: #2B3239; --nav-accent: #2B3239; --nav-accent-soft: #D6DBE0; --nav-accent-text: #14181C; --nav-on-accent: #FFFFFF; --nav-band: #E2E6EA; --nav-band-hover: #DCE0E4; --nav-solid: #2B3239; /* Graphite is text and fill at once: 12.98:1 as text on a card, and white on it the same. */ --accent: #2B3239; --accent-dark: #1E2329; --accent-darker: #161A1F; --accent-light: #E4E8EC; --accent-on: #FFFFFF; --accent-dark-on: #FFFFFF; /* 15.82:1 on #1E2329 */ --accent-gradient: linear-gradient(180deg, #2B3239 0%, #22282E 100%); --accent-gradient-hover: linear-gradient(180deg, #1E2329 0%, #161A1F 100%); /* The fill is graphite, so its ink is white: 12.98:1. */ --accent-gradient-on: #FFFFFF; --accent-glow: 0 0 0 3px rgba(43, 50, 57, 0.2); --gold: #8A3C0D; /* Amber is a status here, not where you are: the current tab is marked in graphite, on every tab bar (--tab-mark, above). */ --tab-mark: var(--accent); --gold-on: #FFFFFF; --gold-light: #FBE7B5; --gold-bg: #FDF6E3; --gold-gradient: linear-gradient(135deg, #b45309 0%, #92400e 100%); --green: #0B6239; --green-on: #FFFFFF; --green-bg: #E5F3EA; --red: #A61B1B; --red-on: #FFFFFF; --red-bg: #FCEDED; --orange: #A3380B; /* the worst ink here: 5.66:1 on the page */ --orange-bg: #FCEBDD; --yellow: #774508; --yellow-bg: #FBF4D2; --gray: #4B535B; --gray-bg: #EBEEF1; /* Calm, muted category hues: the tiles and the chart lines (the dashboard draws Received in tile 5 and Executed in tile 3). */ --tile1: #2B3239; --tile1-dark: #1E2329; --tile1-bg: #E4E8EC; --tile2: #1F6267; --tile2-dark: #184F53; --tile2-bg: #E1EFF0; --tile3: #885000; --tile3-dark: #6F4100; --tile3-bg: #F8EEDD; --tile4: #634A86; --tile4-dark: #503B6D; --tile4-bg: #EEEAF4; --tile5: #2C5A88; --tile5-dark: #234970; --tile5-bg: #E4ECF4; --text: #14181C; /* 15.04:1 on the page, 17.84:1 on a card */ --text-muted: #4B535B; /* 7.81:1 on a card, 6.71:1 on --gray-bg */ --border: #D6DADF; --card-bg: #FFFFFF; --page-bg: #E9ECEF; --zebra: #F5F6F8; --input-bg: #FFFFFF; /* The page tabs: a grey track a step under the page and a white key on it, the raised tab. --text-muted 5.7:1 on the track. */ --tab-track: #DADDE0; --tab-track-shade: rgba(20, 24, 28, 0.06); --tab-thumb: #FFFFFF; --tab-thumb-ring: rgba(20, 24, 28, 0.08); --tab-thumb-shadow: 0 1px 2px rgba(20, 24, 28, 0.12), 0 2px 6px rgba(20, 24, 28, 0.06); --tab-hover: rgba(20, 24, 28, 0.05); --radius: 9px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(20, 24, 28, 0.06), 0 3px 10px rgba(20, 24, 28, 0.06); --shadow-lift: 0 12px 30px rgba(20, 24, 28, 0.14), 0 3px 8px rgba(20, 24, 28, 0.07); } /* The flat page, with no glow behind it. */ :root[data-theme="professional"] body { background: var(--page-bg); } /* NOT ON A PHONE. backdrop-filter is per-element GPU work, and these are the screens with the least of it and the most to lose - a dispatcher's laptop can afford eleven blurred panes on a board, a driver's phone on a dock scanning parcels cannot. The colour, the rim and the ground all stay; only the blur is dropped, and the pane is thickened so the text has the same ground to sit on. */ /* ================= The two nav layouts ================= "I want a B and D toggle for top bar/side bar nav in the preferences." A preference (data-nav on , set pre-paint in ), independent of the colour theme, and desktop only: a phone has the tab bar and the More sheet whichever is picked. BOTH SHOW ONE SECTION AT A TIME. The nav is ten sections, not forty rows, and what is on screen is one section's pages - the one holding this page, marked .is-shown on the server (app/tools/nav_sections.py), or the one somebody has just picked. Every section stays open, so the markup is a plain full list to anything without these rules. SIDE BAR ("side", the default): a 76px rail of section squares down the left, and the shown section's pages in a panel beside it. The panel pushes the page rather than covering it - it is where you work from, not a menu that gets in the way - and pressing the shown square folds it away (html.nav-collapsed, remembered). TOP BAR ("top"): the sections as pills across a bar, and the shown section's pages as a row of tabs under it. The page gets the full width. Tokens: the rail and the bar stand on --sidebar-bg, which is dark in every theme; the panel and the tab row stand on --card-bg, like the page, so a section's pages read as part of it. */ /* THE WHOLE SCREEN SCALES TO THE MONITOR. "The side nav is too large on smaller monitors, it needs to scale. My zoom is on 100% on my work laptop." and "Same with the loadout board." Nearly everything is sized in rem, so one number scales the lot: text, controls, the space round them, and the board's container breakpoints (72rem is 1008px at 14px, so a laptop gets the one-line board a big monitor gets). A laptop window is 1280 to 1536px wide and 600 to 750px tall; 15px is a browser at 94% and 14px one at 88%. Only where there is a mouse (a tablet's fingers keep their full-size targets) and only above the phone layout. */ @media (min-width: 901px) and (max-width: 1600px) and (hover: hover) and (pointer: fine) { html { font-size: 15px; } } @media (min-width: 901px) and (max-width: 1440px) and (hover: hover) and (pointer: fine) { html { font-size: 14px; } } :root { --rail-w: 76px; --panel-w: 236px; --tabrow-h: 2.85rem; } .nav-search-btn, .nav-roxxy-btn, .nav-whatsnew-btn { display: inline-flex; align-items: center; gap: 0.4rem; } /* What's new's dot: amber on the menu's own ground, ringed in it so it reads on the icon at any size. */ .nav-whatsnew-ico { position: relative; display: inline-block; line-height: 0; } .nav-whatsnew-dot { position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--nav-accent); box-shadow: 0 0 0 2px var(--sidebar-bg); pointer-events: none; } .topbar-whatsnew { position: relative; } .topbar-whatsnew .nav-whatsnew-dot { top: 4px; right: 4px; background: var(--accent-gradient); box-shadow: 0 0 0 2px var(--accent-light); } .nav-whatsnew-btn { text-decoration: none; } @media (min-width: 901px) { /* ---- side bar: the rail ------------------------------------- */ html:not([data-nav="top"]) { --sidebar-width: var(--rail-w); } html.nav-has-panel:not([data-nav="top"]):not(.nav-collapsed) { --sidebar-width: calc(var(--rail-w) + var(--panel-w)); } /* The panel is position:fixed inside the rail, and a transform on the rail would make the rail its containing block - clipping the panel to 76px. The old collapse slid the whole aside away with one, so it is switched off here rather than trusted. */ html:not([data-nav="top"]) .sidebar { width: var(--rail-w); transform: none !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } html:not([data-nav="top"]) .sidebar-head { border-bottom: none; padding: var(--rs-head, 0.7rem) 0 0.3rem; } html:not([data-nav="top"]) .sidebar-head-row { justify-content: center; } /* The mark alone: there is no room for the DSP's name at 76px, and the panel carries the section's name instead. */ html:not([data-nav="top"]) .sidebar-brand { flex: 0 0 auto; justify-content: center; gap: 0; padding: 0.2rem; } html:not([data-nav="top"]) .sidebar-brand-text { display: none; } /* In the 76px rail there is room for the logo's height and not much more. */ html:not([data-nav="top"]) .sidebar-brand-icon.brand-logo-own { max-width: 3.4rem; } /* THE SQUARES SCROLL, YOU STAY PUT. Scorecard became a section of its own and the vehicle pages two (Fleet and Repairs), which is two more squares - and the rail was already a hair too tall for 1280x720 with a Pinned square, so the whole rail scrolled and the signed-in block at its foot (Log out with it) slid off the bottom. Now only the squares scroll, between Search and Ask Roxxy above and you below, which both stay where they are. The scrollbar stays hidden like the rail's own; the edge that has more past it shows a shadow (.nav-more-above / .nav-more-below, set by the script after the nav). The min-height keeps two squares on a very short window, where the whole rail scrolls again as it did before. Most of the space above the first square is margin rather than padding, so a square scrolled up stops short of Ask Roxxy instead of running into it. */ html:not([data-nav="top"]) .sidebar-nav { flex: 1 1 auto; min-height: 7.5rem; display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.3rem; padding: 0.05rem 0.4rem 0.6rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; } html:not([data-nav="top"]) .sidebar-nav::-webkit-scrollbar { display: none; } html:not([data-nav="top"]) .sidebar-nav > details.sidebar-section { flex: none; } html:not([data-nav="top"]) .sidebar.nav-more-above .sidebar-icon-actions { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.55); } html:not([data-nav="top"]) .sidebar.nav-more-below .sidebar-user { box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.55); } html:not([data-nav="top"]) details.sidebar-section { margin: 0; } /* One square per section: its icon over its name. The name stays - a rail you have to hover square by square to read is a worse sidebar than the one it replaced. */ html:not([data-nav="top"]) details.sidebar-section > summary, html:not([data-nav="top"]) :is(.nav-search-btn, .nav-whatsnew-btn) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; box-sizing: border-box; min-height: var(--rs-sq, 3.35rem); margin: 0; padding: var(--rs-pad, 0.45rem) 0.1rem; border: none; border-radius: 10px; background: transparent; box-shadow: none; font-family: var(--font-body); font-size: max(var(--rs-fs, 0.64rem), 9.5px); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-transform: none; text-align: center; overflow-wrap: anywhere; color: var(--sidebar-text); } html:not([data-nav="top"]) details.sidebar-section > summary::after { content: none; } html:not([data-nav="top"]) .sidebar-section-caret { display: none; } html:not([data-nav="top"]) .sidebar-section-ico { display: block; line-height: 0; position: relative; } html:not([data-nav="top"]) .sidebar-section-ico .ui-ico, html:not([data-nav="top"]) :is(.nav-search-btn, .nav-whatsnew-btn) .ui-ico { width: var(--rs-ico, 1.3rem); height: var(--rs-ico, 1.3rem); opacity: 0.8; vertical-align: 0; } html:not([data-nav="top"]) details.sidebar-section > summary:hover, html:not([data-nav="top"]) :is(.nav-search-btn, .nav-whatsnew-btn):hover { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); box-shadow: none; transform: none; } html:not([data-nav="top"]) :is(.nav-search-btn, .nav-whatsnew-btn):active { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); } html:not([data-nav="top"]) .nav-whatsnew-btn { margin-top: 0.25rem; } html:not([data-nav="top"]) .nav-whatsnew-btn.is-here { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); } html:not([data-nav="top"]) .nav-whatsnew-btn.is-here .ui-ico { color: var(--nav-accent); opacity: 1; } html:not([data-nav="top"]) details.sidebar-section.is-shown > summary { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); box-shadow: inset 0 0 0 1px var(--sidebar-border); } html:not([data-nav="top"]) details.sidebar-section.is-shown .sidebar-section-ico .ui-ico { color: var(--nav-accent); opacity: 1; } html:not([data-nav="top"]) .sidebar-icon-actions { display: block; margin: 0.15rem 0.4rem 0; } /* ---- side bar: the panel ------------------------------------ */ html:not([data-nav="top"]) .sidebar-section-body { display: none; } html.nav-has-station:not([data-nav="top"]) { --panel-top: 2.6rem; } html:not([data-nav="top"]):not(.nav-collapsed) details.sidebar-section.is-shown > .sidebar-section-body { display: flex; flex-direction: column; gap: 0.1rem; position: fixed; top: var(--panel-top, 0rem); bottom: 0; left: var(--rail-w); width: var(--panel-w); box-sizing: border-box; padding: 0 0.7rem 1rem; overflow-y: auto; background: var(--card-bg); border-right: 1px solid var(--border); z-index: 29; } /* The section's name heads its panel. */ html:not([data-nav="top"]) details.sidebar-section.is-shown > .sidebar-section-body::before { content: attr(data-title); display: block; flex: none; padding: 1.05rem 2.4rem 0.7rem 0.55rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } html:not([data-nav="top"]) .sidebar-section-body a { flex: none; margin: 0; padding: 0.5rem 0.6rem; gap: 0.65rem; border: none; border-radius: 8px; color: var(--text); font-size: 0.93rem; letter-spacing: 0.01em; } html:not([data-nav="top"]) .sidebar-section-body a .ui-ico { color: var(--text-muted); opacity: 1; } html:not([data-nav="top"]) .sidebar-section-body a:hover { background: var(--gray-bg); color: var(--text); } html:not([data-nav="top"]) .sidebar-section-body a:hover .ui-ico { color: var(--accent-dark); } html:not([data-nav="top"]) .sidebar-section-body a.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; } html:not([data-nav="top"]) .sidebar-section-body a.active .ui-ico { color: var(--accent-dark); } /* RICHER ROWS. "for the options, I like 3. we need different quick actions though. copy week doesnt make sense." The panel runs the window's full height, and a section of four pages left most of it blank. So each page is a row of two lines - its name, and under it what the page is for (.nav-desc) - with its icon on a small tile to the left and a count that is waiting at the right (the unread badge, the padlock, a pin's cross); and the section ends in a few Quick actions (.nav-quick). The name is still the row's first words, so it is still what a screen reader says first. Placed on a grid rather than wrapped in new markup, so the row is the same anchor every other reader of the nav reads: the name is the one thing not placed, and falls into the first free cell, beside the tile. A row with no line under it (a pin, a DSP's own page) keeps its tile on the one line it has. */ html:not([data-nav="top"]):not(.nav-collapsed) details.sidebar-section.is-shown > .sidebar-section-body { gap: 0.15rem; } html:not([data-nav="top"]) .sidebar-section-body > a { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.7rem; row-gap: 0.1rem; padding: 0.45rem 0.55rem; white-space: normal; line-height: 1.2; font-size: 0.92rem; } html:not([data-nav="top"]) .sidebar-section-body > a > :is(svg, .nav-messenger-ico) { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; box-sizing: border-box; padding: 0.48rem; border-radius: 9px; background: var(--gray-bg); transition: background 0.12s ease, box-shadow 0.12s ease; } html:not([data-nav="top"]) .sidebar-section-body > a > .nav-messenger-ico { padding: 0; font-size: 1rem; } html:not([data-nav="top"]) .sidebar-section-body > a > .nav-messenger-ico .ui-ico { width: 1.05rem; height: 1.05rem; flex: none; vertical-align: 0; } html:not([data-nav="top"]) .sidebar-section-body > a:not(:has(> .nav-desc)) > :is(svg, .nav-messenger-ico) { grid-row: 1; } html:not([data-nav="top"]) .sidebar-section-body > a:hover > :is(svg, .nav-messenger-ico) { background: var(--card-bg); } html:not([data-nav="top"]) .sidebar-section-body > a.active > :is(svg, .nav-messenger-ico) { background: var(--card-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } html:not([data-nav="top"]) .sidebar-section-body > a > .nav-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; grid-column: 2; grid-row: 2; font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--text-muted); } html:not([data-nav="top"]) .sidebar-section-body > a.active > .nav-desc { color: color-mix(in srgb, var(--accent-dark) 78%, var(--text-muted)); } html:not([data-nav="top"]) .sidebar-section-body > a > :is(.nav-chat-badge, .nav-lock) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; } /* The Quick actions: a rule, a small heading, then the buttons, quiet like the page's own secondary buttons - the first, the one that adds something, tinted. Each is as wide as its words with room either side, and a line fills out to the panel's edge. "new schedule needs to be moved a bit its too close to the right edge": two fixed columns squeezed the longer labels against their own borders and ran the right one to the panel's edge. */ html:not([data-nav="top"]) .sidebar-section-body > .nav-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; flex: none; margin: 1.1rem 0.6rem 0 0.15rem; padding-top: 1rem; border-top: 1px solid var(--border); } html:not([data-nav="top"]) .nav-quick-h { flex: 0 0 100%; margin: 0 0.3rem 0.2rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* A GROUP'S LABEL inside a section (Scorecard & Coaching: Scorecard, then Coaching), set like the Quick actions heading so the two read as one family. A label after rows gets room above it, so the groups part where one ends rather than with a rule. */ html:not([data-nav="top"]) .sidebar-section-body > .nav-group-h { display: block; flex: none; margin: 0.35rem 0.55rem 0.2rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } html:not([data-nav="top"]) .sidebar-section-body > a ~ .nav-group-h { margin-top: 0.9rem; } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; flex: 1 1 auto; max-width: 100%; margin: 0; padding: 0.5rem 0.75rem; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a .ui-ico { flex: none; width: 0.95rem; height: 0.95rem; opacity: 1; vertical-align: 0; color: var(--text-muted); } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a:hover { background: var(--gray-bg); color: var(--text); border-color: var(--border); } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a.is-primary { background: var(--accent-light); color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a.is-primary:hover { background: color-mix(in srgb, var(--accent) 18%, var(--accent-light)); } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a:is(.is-primary, :hover) .ui-ico { color: var(--accent-dark); } html:not([data-nav="top"]) .sidebar-section-body .nav-quick a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Where you are, on the top line of the panel - it is the one control in the header block. The one-station line goes when the panel does; any square brings both back. THE PICKER NO LONGER GOES WITH IT. Folding the panel used to leave no sign of which station the page was showing, so with no panel the pill becomes a square of the rail under the mark - the pin over the code, on the rail's own ground, like the section squares below it. 76px holds a code; the station's name is in the list it opens. The rail is the nav's ground, not paper, so the pill takes the nav's tokens here (and on the top bar). */ html:not([data-nav="top"]) .sidebar-head .station-static { display: none; } html:not([data-nav="top"]) .sidebar-head .station-switch { margin: 0.35rem 0.4rem 0; } html:not([data-nav="top"]):is(:not(.nav-has-panel), .nav-collapsed) .sidebar-head .station-switch-pill { --stn-bg: var(--sidebar-bg-hover); --stn-ink: var(--sidebar-text-active); --stn-ico: var(--nav-accent); --stn-rim: color-mix(in srgb, var(--nav-accent) 55%, transparent); --stn-rim-on: var(--nav-accent); flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.15rem; width: 100%; height: auto; padding: var(--rs-pad, 0.45rem) 0.15rem; border-radius: 10px; font-size: 0.8rem; white-space: normal; text-align: center; } /* The chevron rides beside the pin and the words get the line under them, so the longest label still takes one line. */ html:not([data-nav="top"]):is(:not(.nav-has-panel), .nav-collapsed) .sidebar-head .station-switch-ico { width: var(--rs-ico, 1.3rem); height: var(--rs-ico, 1.3rem); } html:not([data-nav="top"]):is(:not(.nav-has-panel), .nav-collapsed) .sidebar-head .station-switch-now { order: 1; flex-basis: 100%; } html:not([data-nav="top"]):is(:not(.nav-has-panel), .nav-collapsed) .sidebar-head .station-switch-name { display: none; } html:not([data-nav="top"]):is(:not(.nav-has-panel), .nav-collapsed) .sidebar-head .station-switch-caret { width: 0.75rem; height: 0.75rem; } html.nav-has-panel:not([data-nav="top"]):not(.nav-collapsed) .sidebar-head :is(.station-switch, .station-static) { display: flex; align-items: center; position: fixed; z-index: 31; top: 0; left: var(--rail-w); width: var(--panel-w); height: var(--panel-top); box-sizing: border-box; margin: 0; padding: 0.35rem 2.6rem 0 1.25rem; background: var(--card-bg); border-right: 1px solid var(--border); color: var(--text-muted); } /* The pill's edge lines up with the panel's rows under it. */ html.nav-has-panel:not([data-nav="top"]):not(.nav-collapsed) .sidebar-head .station-switch { padding-left: 0.7rem; } /* The fold arrow sits on the panel it folds. */ html:not([data-nav="top"]) .sidebar-head .sidebar-collapse { display: none; } html.nav-has-panel:not([data-nav="top"]):not(.nav-collapsed) .sidebar-head .sidebar-collapse { display: inline-flex; position: fixed; z-index: 32; margin: 0; top: 0.55rem; left: calc(var(--rail-w) + var(--panel-w) - 2.5rem); color: var(--text-muted); background: transparent; border: none; opacity: 1; } html:not([data-nav="top"]) .sidebar-head .sidebar-collapse:hover { color: var(--accent-dark); background: var(--gray-bg); } /* ---- side bar: you, at the foot of the rail ----------------- */ html:not([data-nav="top"]) .sidebar-user { flex-direction: column; align-items: stretch; gap: var(--rs-gap, 0.3rem); padding: var(--rs-user, 0.55rem) 0.4rem var(--rs-user, 0.7rem); } html:not([data-nav="top"]) .sidebar-user > span { display: none; } /* YOU, AS A SQUARE OF THE RAIL: the face over the first name and role, set like the section squares above (a face where they have an icon), because a rail you have to hover to read is the thing those squares were built not to be. 76px holds a first name and a role at this size; anything longer is cut with an ellipsis and is whole in the tooltip and the label. */ html:not([data-nav="top"]) .nav-me { flex-direction: column; justify-content: center; gap: var(--rs-gap, 0.3rem); padding: var(--rs-pad, 0.45rem) 0.1rem var(--rs-pad, 0.4rem); text-align: center; } html:not([data-nav="top"]) .nav-me-text { align-items: center; width: 100%; } html:not([data-nav="top"]) .nav-me-av { width: var(--rs-av, 2.1rem); height: var(--rs-av, 2.1rem); } html:not([data-nav="top"]) .nav-me-name { max-width: 100%; font-size: max(var(--rs-name, 0.68rem), 9.5px); } html:not([data-nav="top"]) .nav-me-role { max-width: 100%; font-size: max(0.6rem, 9.5px); } html:not([data-nav="top"]) .nav-me-as { flex-direction: column; align-items: center; max-width: 100%; box-sizing: border-box; padding: 0.15rem 0.2rem; font-size: 0.58rem; } html:not([data-nav="top"]) .nav-me-as-v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; } html:not([data-nav="top"]) .sidebar-user-acts { flex-direction: column; align-items: stretch; gap: var(--rs-gap, 0.3rem); } html:not([data-nav="top"]) .sidebar-user-app, html:not([data-nav="top"]) .sidebar-user button { width: 100%; box-sizing: border-box; padding: var(--rs-btn, 0.4rem) 0.1rem; font-size: max(var(--rs-fs, 0.64rem), 9.5px); text-align: center; } html:not([data-nav="top"]) .sidebar-footer { display: none; } /* ---- top bar ------------------------------------------------ */ html[data-nav="top"] .app-shell { flex-direction: column; } /* Sticky: a bar you have to scroll back up to reach is worse than a sidebar, and the boards this layout is for are the long ones. `inset` clears the sidebar's offsets and would reset `top` too, so `top: 0` comes after it. */ html[data-nav="top"] .sidebar { position: sticky; inset: auto; top: 0; width: 100%; height: auto; align-self: stretch; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.45rem 1rem 0.45rem 0.9rem; box-sizing: border-box; border-right: none; border-bottom: 1px solid var(--sidebar-border); overflow: visible; transform: none !important; z-index: 30; } html[data-nav="top"].nav-has-panel .sidebar { padding-bottom: calc(0.45rem + var(--tabrow-h)); border-bottom-color: var(--border); } /* An anchor lands below this bar, not under it (see the phone's value beside .topbar): 3.2rem of bar, plus the row of tabs when a section is open, and a little air. */ html[data-nav="top"] { scroll-padding-top: 4.5rem; } html[data-nav="top"].nav-has-panel { scroll-padding-top: calc(4.5rem + var(--tabrow-h)); } html[data-nav="top"] .app-main { margin-left: 0; } html[data-nav="top"] .sidebar-head { order: 1; flex-direction: row; align-items: center; gap: 0.7rem; border-bottom: none; padding: 0; margin-right: 0.4rem; } html[data-nav="top"] .sidebar-brand { padding: 0.2rem 0; font-size: 0.95rem; } html[data-nav="top"] .sidebar-collapse { display: none; } html[data-nav="top"] :is(.station-switch, .station-static) { margin: 0; padding-left: 0; } /* Beside the DSP's name, the height of the section pills, and on the bar's ground like the rail's square. */ html[data-nav="top"] .sidebar-head .station-switch-pill { --stn-bg: var(--sidebar-bg-hover); --stn-ink: var(--sidebar-text-active); --stn-ico: var(--nav-accent); --stn-rim: color-mix(in srgb, var(--nav-accent) 55%, transparent); --stn-rim-on: var(--nav-accent); height: 2.3rem; padding: 0 0.85rem 0 0.7rem; font-size: 0.95rem; } html[data-nav="top"] .sidebar-nav { order: 2; flex: 1 1 auto; min-width: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; } html[data-nav="top"] details.sidebar-section { margin: 0; } /* One pill per section. */ html[data-nav="top"] details.sidebar-section > summary { display: inline-flex; align-items: center; gap: 0.45rem; height: 2.3rem; padding: 0 0.85rem; border-radius: 999px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--sidebar-text); } html[data-nav="top"] details.sidebar-section > summary::after { content: none; } html[data-nav="top"] .sidebar-section-caret { display: none; } html[data-nav="top"] .sidebar-section-ico { display: inline-flex; position: relative; } html[data-nav="top"] .sidebar-section-ico .ui-ico { width: 1.05rem; height: 1.05rem; opacity: 0.8; vertical-align: 0; } html[data-nav="top"] details.sidebar-section > summary:hover { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); } html[data-nav="top"] details.sidebar-section.is-shown > summary { background: var(--nav-accent); color: var(--nav-on-accent); font-weight: 700; } html[data-nav="top"] details.sidebar-section.is-shown > summary .ui-ico { opacity: 1; } /* The shown section's pages: a row of tabs along the foot of the bar, on the page's own ground. */ html[data-nav="top"] .sidebar-section-body { display: none; } html[data-nav="top"] details.sidebar-section.is-shown > .sidebar-section-body { display: flex; align-items: stretch; gap: 0.1rem; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tabrow-h); box-sizing: border-box; padding: 0 1rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; background: var(--card-bg); border-bottom: 1px solid var(--border); } html[data-nav="top"] .sidebar-section-body a { flex: 0 0 auto; margin: 0; padding: 0 0.85rem; gap: 0.4rem; border: none; border-radius: 0; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; letter-spacing: 0; } html[data-nav="top"] .sidebar-section-body a :is(.ui-ico, svg) { display: none; } /* A tab is a name: no line under it, and no Quick actions in a row of pages. */ html[data-nav="top"] .sidebar-section-body :is(.nav-desc, .nav-quick) { display: none; } /* ...but not the padlock on a locked row, which is not the row's icon. */ html[data-nav="top"] .sidebar-section-body a .nav-lock .nav-lock-ico { display: inline-block; } html[data-nav="top"] .sidebar-section-body a:hover { color: var(--text); background: var(--gray-bg); } html[data-nav="top"] .sidebar-section-body a.active { color: var(--accent-dark); background: transparent; font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); } html[data-nav="top"] .sidebar-icon-actions { order: 3; margin: 0 0 0 auto; } html[data-nav="top"] :is(.nav-search-btn, .nav-whatsnew-btn) { height: 2.3rem; min-height: 0; padding: 0 0.9rem; border-radius: 999px; background: transparent; border: 1px solid var(--sidebar-border); box-shadow: none; color: var(--sidebar-text); font-size: 0.84rem; font-weight: 600; } html[data-nav="top"] :is(.nav-search-btn, .nav-whatsnew-btn):is(:hover, :active, .is-here) { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); border-color: var(--sidebar-border); box-shadow: none; transform: none; } html[data-nav="top"] .sidebar-user { order: 4; border-top: none; border-left: 1px solid var(--sidebar-border); padding: 0 0 0 0.75rem; gap: 0.7rem; } html[data-nav="top"] .sidebar-user > span { font-size: 0.75rem; } /* On the bar, you sit beside My App: face, then first name over role, then - only while viewing as somebody - who that is. */ html[data-nav="top"] .nav-me { padding: 0.15rem 0.5rem 0.15rem 0.2rem; gap: 0.55rem; } html[data-nav="top"] .nav-me-av { width: 1.9rem; height: 1.9rem; font-size: 0.74rem; } html[data-nav="top"] .nav-me-text { max-width: 9rem; } html[data-nav="top"] .nav-me-as { flex-wrap: nowrap; max-width: 13rem; white-space: nowrap; } html[data-nav="top"] .nav-me-as-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; } html[data-nav="top"] .sidebar-footer { display: none; } /* Switch account's menu drops from the bar's right-hand end (the script at the foot of this file pins it to the button). */ html[data-nav="top"] .acct-menu { left: auto; bottom: auto; top: 3.75rem; right: 1rem; } /* ---- both: Ask Roxxy, beside Search ------------------------- */ /* THE ONE BUTTON IN THE CHROME THAT IS LIT. Search is a quiet square because every page has a way to get somewhere; this is the thing that was "pretty hidden", so it carries the nav's own accent - a soft plate, an accent rim and the sparkles in full colour - without being the filled pill that means "the section you are in". All nav tokens, so it is right on every theme's dark rail and bar. */ html:not([data-nav="top"]) .nav-roxxy-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; box-sizing: border-box; min-height: var(--rs-sq, 3.35rem); margin: 0.25rem 0 0; padding: var(--rs-pad, 0.45rem) 0.1rem; border: none; border-radius: 10px; background: var(--nav-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-accent) 45%, transparent); font-family: var(--font-body); font-size: max(var(--rs-fs, 0.64rem), 9.5px); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; text-transform: none; text-align: center; overflow-wrap: anywhere; color: var(--sidebar-text-active); } html:not([data-nav="top"]) .nav-roxxy-btn .ui-ico { width: var(--rs-ico, 1.3rem); height: var(--rs-ico, 1.3rem); color: var(--nav-accent); vertical-align: 0; } html:not([data-nav="top"]) .nav-roxxy-btn:is(:hover, :active, [aria-expanded="true"]) { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); box-shadow: inset 0 0 0 1px var(--nav-accent); transform: none; } html[data-nav="top"] .nav-roxxy-btn { height: 2.3rem; min-height: 0; padding: 0 0.95rem; border-radius: 999px; background: var(--nav-accent-soft); border: 1px solid var(--nav-accent); box-shadow: none; color: var(--sidebar-text-active); font-size: 0.84rem; font-weight: 700; white-space: nowrap; } html[data-nav="top"] .nav-roxxy-btn .ui-ico { width: 1.05rem; height: 1.05rem; color: var(--nav-accent); vertical-align: 0; } html[data-nav="top"] .nav-roxxy-btn:is(:hover, :active, [aria-expanded="true"]) { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); border-color: var(--nav-accent); box-shadow: none; transform: none; } .nav-roxxy-btn:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; } /* ---- both: an unread count shows on its section ------------- */ details.sidebar-section:has(.nav-chat-badge) > summary .sidebar-section-ico::after { content: ""; position: absolute; top: -3px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--sidebar-bg); } } /* ================= The star beside a menu row ================= "I don't like how intrusive the pin button is." A page carries no Pin button now; pinning is a small star beside each page in the menu, and pinned pages sit in a Pinned group at the top. THE STAR'S FORM IS THE ELEMENT BEFORE ITS ROW (nav_sections.add_stars), because a form cannot live inside a link. It takes no height of its own: the star hangs off the top of the row that follows, which is the one edge of a row that is the same whether the row is one line or two. The flex gap it would add is taken back with a negative margin. SHOWN WHEN THE ROW IS POINTED AT OR FOCUSED, and always when the page is pinned (a filled star). Only where there are rows to point at: the side bar's panel and the icon rail's flyout. The rail's own icons never carry one. The phone's sheet and the top bar's tabs draw none and take a long press instead (see the script after the nav). */ .nav-star-form { display: none; margin: 0; padding: 0; } .nav-star { appearance: none; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--text-muted); cursor: pointer; line-height: 1; } .nav-star-ico { width: 1rem; height: 1rem; flex: none; fill: none; } .nav-star.is-on .nav-star-ico { fill: currentColor; } .nav-star.is-on { color: var(--accent-dark); } .nav-star:hover { color: var(--accent-dark); background: color-mix(in srgb, var(--text) 10%, transparent); } .nav-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (min-width: 901px) { html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form { display: block; position: relative; height: 0; overflow: visible; z-index: 1; margin-bottom: calc(-1 * var(--nav-gap, 0.1rem)); } html:not([data-nav="top"]):not([data-nav="iconrail"]):not(.nav-collapsed) details.sidebar-section.is-shown > .sidebar-section-body { --nav-gap: 0.15rem; } html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form .nav-star { position: absolute; top: var(--nav-star-top, 0.5rem); right: 0.4rem; opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease; } :root[data-nav="iconrail"] .sidebar-section-body { --nav-star-top: 0.4rem; } html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form:hover .nav-star, html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form:has(+ a:is(:hover, :focus-visible)) .nav-star, html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form .nav-star:focus-visible, html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form .nav-star.is-on { opacity: 1; } html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form:hover + a { background: var(--gray-bg); color: var(--text); } /* Room for the star at the row's right edge, so a long name never runs under it. */ html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form + a { padding-right: 2.3rem; } } /* A touch screen wide enough for the panel has no hover to find the star by, so it is drawn quietly all the time. */ @media (min-width: 901px) and (hover: none) { html:not([data-nav="top"]) .sidebar-section-body > .nav-star-form .nav-star { opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .nav-star { transition: none !important; } } /* THE LONG PRESS CHOICE. The phone's sheet (and the top bar's tabs) draw no star; about half a second on a page opens this beside it. */ .nav-pop { position: fixed; z-index: 60; min-width: 10.5rem; box-sizing: border-box; padding: 0.25rem; border-radius: 12px; background: var(--text); color: var(--card-bg); box-shadow: 0 10px 30px rgba(16, 35, 63, 0.35); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; } .nav-pop-pin, .nav-pop-open { display: flex; align-items: center; gap: 0.6rem; width: 100%; box-sizing: border-box; min-height: 2.75rem; margin: 0; padding: 0.55rem 0.8rem; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .nav-pop-pin .nav-star-ico { width: 1.05rem; height: 1.05rem; fill: none; color: var(--accent); } .nav-pop-pin:is(:hover, :focus-visible), .nav-pop-open:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--card-bg) 16%, transparent); color: inherit; outline: none; } @media (max-width: 900px) { /* A finger held on a row is a press, not a text selection or the browser's link menu. */ .sidebar-nav .sidebar-section-body > a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .sidebar-nav .sidebar-section-body > a.is-pressed { box-shadow: inset 0 0 0 2px var(--accent); } /* A page you have pinned wears a small filled star in the sheet. */ .sidebar-nav .sidebar-section-body > .nav-star-form:has(.nav-star.is-on) + a::after { content: "\2605"; position: absolute; top: 0.3rem; left: 0.4rem; color: var(--accent); font-size: 0.8rem; line-height: 1; } .sidebar-nav details[data-section=pinned] .sidebar-section-body > .nav-star-form + a::after { content: none; } } .sidebar-section[hidden] { display: none !important; } /* ================= The icon rail ================= "Main menu mockup B": a slim rail of icons that opens to labels, with search on top. The third layout (data-nav="iconrail"), and the one anybody who has never picked a layout gets. A computer only, like the other two: a phone has its tab bar whatever is stored, so every rule of this layout sits inside this one desktop query. IT BUILDS ON THE SIDE BAR'S RULES, NOT BESIDE THEM. The side bar's selectors say "not the top bar", so they still match here; what is written below only changes what differs. The rail is 64px of icons (the names stay in the markup for a screen reader and head the flyout), and a section's pages are a flyout over the page rather than a panel that pushes it: the page keeps its width, and the rail stays 64px whichever section is open. THE FLYOUT is the section's own list, opened by hovering its icon, by tapping it, or by tabbing to it (.is-fly, set by the script after the nav). It stands on the nav's ground, so each theme's rail and flyout match; the side bar's rows are written for a light card, so the colour tokens they read are re-pointed at the nav's own inside the flyout instead of every rule being said twice. Rows here are a name, an icon and a count: the line under each name and the Quick actions belong to the side bar's roomier panel. The selector starts at the root element so that it outranks the side bar's, which it shares every property with. */ .nav-fly-search { display: none; } @media (min-width: 901px) { :root[data-nav="iconrail"][data-nav][data-nav] { --rail-w: 64px; --sidebar-width: 64px; --panel-top: 0rem; } :root[data-nav="iconrail"] .sidebar-brand-icon.brand-logo-own { max-width: 2.9rem; } /* One icon per section, centred in the rail. */ :root[data-nav="iconrail"] details.sidebar-section > summary, :root[data-nav="iconrail"] .nav-search-btn, :root[data-nav="iconrail"] .nav-roxxy-btn, :root[data-nav="iconrail"] .nav-whatsnew-btn { width: 2.8rem; min-height: 2.8rem; margin-left: auto; margin-right: auto; padding: 0; gap: 0; font-size: 0; border-radius: 12px; } :root[data-nav="iconrail"] details.sidebar-section.is-fly > summary { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); } :root[data-nav="iconrail"] details.sidebar-section.is-fly .sidebar-section-ico .ui-ico { opacity: 1; } /* The section holding this page keeps its mark when its flyout is shut. */ :root[data-nav="iconrail"] details.sidebar-section.is-shown > summary { background: var(--nav-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-accent) 40%, transparent); } :root[data-nav="iconrail"] details.sidebar-section > summary:focus-visible, :root[data-nav="iconrail"] .nav-search-btn:focus-visible, :root[data-nav="iconrail"] .nav-roxxy-btn:focus-visible, :root[data-nav="iconrail"] .nav-whatsnew-btn:focus-visible, :root[data-nav="iconrail"] .nav-me:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; } /* ---- the flyout --------------------------------------------- */ :root[data-nav="iconrail"][data-nav] details.sidebar-section.is-shown > .sidebar-section-body { display: none; } :root[data-nav="iconrail"][data-nav] details.sidebar-section.is-fly > .sidebar-section-body { display: flex; flex-direction: column; gap: 0.1rem; position: fixed; top: 0; bottom: 0; left: var(--rail-w); width: var(--panel-w); box-sizing: border-box; padding: 4.1rem 0.7rem 1rem; overflow-y: auto; overscroll-behavior: contain; z-index: 29; --text: var(--sidebar-text-active); --text-muted: var(--sidebar-text); --card-bg: var(--sidebar-bg); --gray-bg: var(--sidebar-bg-hover); --border: var(--sidebar-border); --accent-light: var(--nav-accent-soft); --accent-dark: var(--nav-accent); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); box-shadow: 14px 0 32px rgba(0, 0, 0, 0.28); } :root[data-nav="iconrail"][data-nav] details.sidebar-section.is-fly > .sidebar-section-body::before { content: attr(data-title); display: block; flex: none; padding: 0.2rem 0.6rem 0.5rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-text); } :root[data-nav="iconrail"] .sidebar-section-body > a { grid-template-columns: 1.5rem minmax(0, 1fr) auto; column-gap: 0.7rem; padding: 0.5rem 0.6rem; font-size: 0.92rem; font-weight: 600; border-radius: 8px; } :root[data-nav="iconrail"] .sidebar-section-body > a > :is(svg, .nav-messenger-ico) { grid-row: 1; width: 1.5rem; height: 1.5rem; padding: 0.2rem; background: transparent; border-radius: 0; box-shadow: none; } :root[data-nav="iconrail"] .sidebar-section-body > a > .nav-messenger-ico { padding: 0; } :root[data-nav="iconrail"] .sidebar-section-body > a:is(:hover, .active) > :is(svg, .nav-messenger-ico) { background: transparent; box-shadow: none; } :root[data-nav="iconrail"] .sidebar-section-body > a > .nav-desc { display: none; } :root[data-nav="iconrail"] .sidebar-section-body a:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; } /* Search, on top of the flyout. It is the rail's Search button again, drawn as a field: pressing it opens the same jump box. */ :root[data-nav="iconrail"].rail-fly .nav-fly-search { display: flex; align-items: center; gap: 0.5rem; position: fixed; top: 0.8rem; left: calc(var(--rail-w) + 0.7rem); width: calc(var(--panel-w) - 1.4rem); height: 2.5rem; box-sizing: border-box; z-index: 31; padding: 0 0.7rem; margin: 0; border: 1px solid var(--sidebar-border); border-radius: 10px; background: var(--sidebar-bg-hover); color: var(--sidebar-text); font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; text-align: left; cursor: text; } :root[data-nav="iconrail"].rail-fly .nav-fly-search:hover { border-color: var(--nav-accent); color: var(--sidebar-text-active); } :root[data-nav="iconrail"] .nav-fly-search .ui-ico { width: 1.05rem; height: 1.05rem; flex: none; } :root[data-nav="iconrail"] .nav-fly-search kbd { margin-left: auto; font: inherit; font-size: 0.7rem; opacity: 0.8; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { :root[data-nav="iconrail"][data-nav] details.sidebar-section.is-fly > .sidebar-section-body { animation: fc-rail-fly 0.14s ease-out; } @keyframes fc-rail-fly { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } } /* ---- you, at the foot of the rail ---------------------------- The face alone. The name, My App, Switch and Sign out open beside it on hover or focus, and the face is still a link to My App. "Viewing as" stays under the face: it is the one piece of state in here that must never be hidden. */ :root[data-nav="iconrail"] .sidebar-user { position: relative; align-items: center; padding: 0.5rem 0.4rem 0.7rem; } :root[data-nav="iconrail"] .nav-me { width: 2.8rem; margin: 0 auto; padding: 0.25rem 0; } :root[data-nav="iconrail"] .nav-me.is-viewing { width: 100%; } :root[data-nav="iconrail"] .nav-me-text { display: none; } :root[data-nav="iconrail"] .sidebar-user-acts { display: none; position: fixed; left: var(--rail-w); bottom: 0.5rem; z-index: 34; width: 12.5rem; box-sizing: border-box; padding: 0.4rem; flex-direction: column; align-items: stretch; gap: 0.1rem; background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); border-left: none; border-radius: 0 12px 12px 0; box-shadow: 14px 0 32px rgba(0, 0, 0, 0.28); } :root[data-nav="iconrail"] .sidebar-user:is(:hover, :focus-within) .sidebar-user-acts { display: flex; } :root[data-nav="iconrail"] .sidebar-user-acts :is(.sidebar-user-app, button) { display: block; width: 100%; box-sizing: border-box; min-height: 2.4rem; padding: 0.5rem 0.7rem; border: none; border-radius: 8px; background: transparent; color: var(--sidebar-text-active); font-size: 0.9rem; font-weight: 600; text-align: left; } :root[data-nav="iconrail"] .sidebar-user-acts :is(.sidebar-user-app, button):is(:hover, .is-active) { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); border: none; } :root[data-nav="iconrail"] .sidebar-user-acts :is(.sidebar-user-app, button):focus-visible { outline: 2px solid var(--nav-accent); outline-offset: -2px; } } /* THE RAIL SCALES TO THE WINDOW. Everything above is drawn for a tall window, and on a work laptop at 100% zoom the window is 600 to 750px tall: the signed-in block at the foot (face, name, role, My App, Switch, Log out) took about 260px and the squares were left a four-square slot to scroll in. So the sizes the rail is made of are variables, and these steps shrink them as the window gets shorter (the section squares, their icons, the foot) and the panel narrows as it gets narrower. Names stay at 0.6rem or more, and every square keeps its icon over its name; only the room around them is spent. The rail itself stays 76px: "Scorecard" does not fit in less. */ @media (min-width: 901px) and (max-height: 860px) { html { --rs-sq: 3rem; --rs-pad: 0.34rem; --rs-ico: 1.2rem; --rs-head: 0.5rem; --rs-av: 1.9rem; --rs-btn: 0.3rem; --rs-user: 0.4rem; } } @media (min-width: 901px) and (max-height: 740px) { html { --rs-sq: 2.6rem; --rs-pad: 0.24rem; --rs-ico: 1.1rem; --rs-fs: 0.6rem; --rs-head: 0.35rem; --rs-av: 1.65rem; --rs-btn: 0.22rem; --rs-user: 0.3rem; --rs-gap: 0.2rem; --rs-name: 0.64rem; } } @media (min-width: 901px) and (max-height: 640px) { html { --rs-sq: 2.35rem; --rs-pad: 0.18rem; --rs-ico: 1rem; --rs-head: 0.25rem; --rs-av: 1.45rem; --rs-btn: 0.16rem; --rs-user: 0.22rem; --rs-gap: 0.14rem; } html:not([data-nav="top"]) .nav-me-role { display: none; } } @media (min-width: 901px) and (max-width: 1400px) { :root { --panel-w: 216px; } } @media (min-width: 901px) and (max-width: 1180px) { :root { --panel-w: 200px; } } /* ---- Dropdown menus (details.menu-dropdown + .menu-panel) ------------ LIVED ON ONE PAGE AND WAS USED BY FOUR. The Repair Tickets page defined these, _sync_buttons.html and the VTO page used the same class names, and on a page that had not copied the CSS the panel laid out IN FLOW: it carries a min-width, so the disclosure grew to it and its summary row stretched across the page as a bar. Reported on VTO as "the settings icon bar gets stretched". The trigger used to be a real button element nested inside the summary - looked right, but a button inside a summary silently breaks the browser's native toggle (confirmed live: clicking it did nothing, the open flag never flipped). The summary row is already clickable, so it is styled directly with .btn instead. No element names in angle brackets in here: base.html's styles are inlined into every page, so the literal would land in the HTML of pages that have no such element - see tests/test_the_native_controls_are_ours.py. */ .menu-dropdown { position: relative; display: inline-block; } .menu-dropdown summary { list-style: none; cursor: pointer; display: inline-block; } .menu-dropdown summary::-webkit-details-marker { display: none; } .menu-dropdown summary::marker { content: ""; } .menu-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 220px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); padding: 0.4rem 0; } /* ANCHORED TO THE OTHER EDGE. .menu-panel hangs its left edge off the trigger, which is right for a button on the left of a row and wrong for one pushed to the right by margin-left:auto - there the panel's own width carries it off the side of the screen. Measured on the VTO gear: a 320px panel opening at x=1318 on a 1400px viewport, so 237px of it was past the edge and the setting looked like it did nothing. */ .menu-panel-right { left: auto; right: 0; } .menu-panel hr { border: none; border-top: 1px solid var(--border); margin: 0.3rem 0; } .menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 400; border-radius: 0; min-height: auto; cursor: pointer; } .menu-item:hover { background: var(--accent-light); color: var(--text); } label.menu-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } label.menu-item input { width: auto; margin: 0; } /* ---------------- App shell: fixed sidebar + main content ---------------- */ .app-shell { display: flex; min-height: 100vh; min-height: 100dvh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; /* Solid, not lit. The glow and the gradient wash read as slick; structure is what this needs instead - see the banded section headers below, which do the same job without the sheen. */ background: var(--sidebar-bg); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; border-radius: 0; border: none; border-right: 1px solid var(--sidebar-border); overflow-y: auto; overflow-x: hidden; z-index: 30; transition: transform 0.2s ease; /* Thin, subtle scrollbar so it doesn't sit as a chunky gray bar against the floating card's rounded corner (Firefox). */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } /* WebKit/Blink: a slim, rounded, translucent thumb over a transparent track - only really visible while hovering the sidebar. */ .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); background-clip: content-box; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); background-clip: content-box; } /* No gradient wash, no glowing gradient tile. A squared plate and a rule underneath - the header of a panel, not a logo lockup floating on a card. */ .sidebar-brand { color: var(--sidebar-text-active); font-family: var(--font-nav); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; /* Full width: the collapse button moved to the sidebar's edge, so there is no longer a column to reserve here and a longer DSP name gets the room back. */ padding: 0.85rem 0.9rem 0.75rem 0.9rem; letter-spacing: 0.06em; line-height: 1.05; display: flex; align-items: center; gap: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: none; background: transparent; } /* The name, so it can be truncated on its own rather than truncating the mark beside it. */ .sidebar-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* AN IDENTITY BLOCK, not a title bar: a brand row and, under it, where this person currently is. Column rather than row for that reason. THE RULE UNDERNEATH IS A HAIRLINE. It was --nav-accent, the most saturated colour in the whole nav, which made the divider the brightest thing in the header - a separator outshouting what it separates. Dense style had already quietly corrected this to --sidebar-border for itself; this is the same correction everywhere. */ .sidebar-head { display: flex; flex-direction: column; border-bottom: 1px solid var(--sidebar-border); padding-bottom: 0.1rem; } .sidebar-head-row { display: flex; align-items: center; } .sidebar-head .sidebar-brand { flex: 1 1 auto; min-width: 0; border-bottom: none; } /* A BARE GLYPH, NOT A BOXED BUTTON. It sat in a bordered 2rem square at the far end of a mostly empty row, which gave one chevron the same visual weight as the company's name. */ .sidebar-head .sidebar-collapse { flex: 0 0 auto; align-self: center; margin: 0 0.5rem 0 0.2rem; border: none; background: transparent; opacity: 0.55; } .sidebar-head .sidebar-collapse:hover { opacity: 1; background: transparent; border: none; } .sidebar-brand-icon { font-size: 1.05rem; width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; background: var(--nav-accent); color: var(--nav-on-accent); box-shadow: none; flex-shrink: 0; } /* The Fleet Cadence mark - no plate, just the artwork. */ .sidebar-brand-icon.brand-logo, .topbar-brand-logo { width: 1.85rem; height: 1.85rem; border-radius: 2px; object-fit: contain; background: transparent; box-shadow: none; } .topbar-brand-logo { width: 1.6rem; height: 1.6rem; vertical-align: middle; margin-right: 0.4rem; } /* A DSP's own logo is whatever shape they uploaded, not a square mark: keep its height and let it be wider, up to a limit, instead of shrinking a wide logo into a square it cannot fill. */ .sidebar-brand-icon.brand-logo-own { width: auto; max-width: 6rem; height: 1.85rem; object-fit: contain; background: transparent; box-shadow: none; border-radius: 2px; flex-shrink: 0; } .topbar-brand-logo[src^="/org-logo"] { width: auto; max-width: 5rem; height: 1.6rem; } /* A WIDE LOGO SHOWS ALONE (org_logo.WIDE_KEY): it is a wordmark, so the name beside it would say the company twice. It gets the room the name had; the name stays in the page for screen readers. */ .sidebar-brand-icon.brand-logo-own.brand-logo-wide { max-width: 11rem; background: #FFFFFF; padding: 0.2rem 0.4rem; border-radius: 6px; box-sizing: border-box; } .topbar-brand-logo.brand-logo-wide[src^="/org-logo"] { max-width: 9rem; margin-right: 0; } .brand-name-in-logo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; } /* WHICH CUT THE TOP BAR SHOWS. Aurora and Professional put the bar on white, Harbor puts it on #253956, and the mark is mostly white - so the ink cut is the default and the white one only appears on the dark theme. Exactly one is ever displayed. Dusk's bar is its card, #d8dee7, a light grey, so it keeps the ink cut like Light. */ .topbar-mark-white { display: none; } :root[data-theme="dark"] .topbar-mark-ink { display: none; } :root[data-theme="dark"] .topbar-mark-white { display: inline-block; } /* Install + Enable-notifications are icon-only buttons (tooltip carries the label) so they stay compact - a small row in the sidebar (desktop) and grouped on the right of the topbar (mobile). Each row collapses to nothing when both buttons are hidden. */ .sidebar-icon-actions { display: flex; gap: 0.4rem; margin: 0.6rem 0.75rem 0; } /* Station picker - see station_switch() above the sidebar. THE SECOND LINE OF THE IDENTITY BLOCK, so it reads as "where you are" - and now as something you can press. It was the select stripped to a line of small text with a caret, and "the station selector in the nav needs to be much more noticeable". A pill in the accent: the pin, the station's code in bold, a chevron. THE SELECT IS THE WHOLE PILL, see-through and laid on top, so a click or one tap anywhere on it opens the browser's own list. It is still a real select element (keyboard, no-JS and the mobile wheel all keep working); what you see under it is drawn beside it. ITS COLOURS ARE FIVE LOCAL TOKENS, because the pill stands on two grounds. On paper (the panel, the More sheet, the phone's bar) it takes the accent's tint and ink, the pair the panel's tinted Quick action uses; on the nav's own ground (the rail, the top bar) it takes the nav's tokens, which every theme sets for that ground - navy in Light, Dusk and Dark, grey in Professional. A place sets the five and these rules draw the pill once. */ .station-switch { margin: 0 0.9rem 0.55rem; display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .station-switch-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nav-muted, var(--text-muted)); margin: 0; white-space: nowrap; /* The word "Station" is what the line itself now says. Kept in the markup for the label/control pairing screen readers need. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .station-switch-pill { --stn-bg: var(--accent-light); --stn-ink: var(--accent-dark); --stn-ico: var(--accent-dark); --stn-rim: color-mix(in srgb, var(--accent) 40%, transparent); --stn-rim-on: var(--accent); position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; max-width: 100%; height: 1.95rem; box-sizing: border-box; padding: 0 0.65rem 0 0.55rem; border: 1px solid var(--stn-rim); border-radius: 999px; background: var(--stn-bg); color: var(--stn-ink); font-family: var(--font-nav); font-size: 0.9rem; line-height: 1.1; white-space: nowrap; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .station-switch-pill .ui-ico { flex: none; width: 1rem; height: 1rem; vertical-align: 0; color: var(--stn-ico); } .station-switch-pill .station-switch-caret { width: 0.85rem; height: 0.85rem; stroke-width: 2.5; } .station-switch-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .station-switch-now b { font-weight: 700; letter-spacing: 0.04em; } .station-switch-name { font-weight: 500; } .station-switch-pill select { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; opacity: 0; cursor: pointer; } .station-switch-pill:hover { border-color: var(--stn-rim-on); box-shadow: inset 0 0 0 1px var(--stn-rim-on); } .station-switch-pill:has(select:focus-visible) { outline: 2px solid var(--stn-rim-on); outline-offset: 2px; } /* One station, so nothing to switch - the same line, stated. */ .station-static { margin: 0 0.9rem 0.55rem; padding-left: 2.75rem; font-family: var(--font-nav); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-icon-actions:not(:has(> :not([hidden]))) { display: none; } .sidebar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; background: var(--sidebar-bg-hover); border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); color: var(--sidebar-text); cursor: pointer; box-shadow: none; min-height: auto; } .sidebar-icon-btn:hover { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-soft); } .topbar-actions { margin-left: auto; display: flex; gap: 0.4rem; } .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-light); color: var(--accent-dark); cursor: pointer; box-shadow: none; min-height: auto; } .topbar-icon-btn:hover { background: var(--accent-light); border-color: var(--accent-dark); } /* BACK, FOR AN INSTALLED APP. Hidden everywhere until the app runs with no browser chrome (display-mode: standalone, or the fc-standalone class static/js/app-back.js sets for iOS). 44px square, icon only, the text colour of the bar so every theme reads it; the bar's own safe-area padding keeps it out of a landscape notch. */ .app-back { display: none; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; margin: -0.3rem 0 -0.3rem -0.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 150ms ease, transform 150ms ease; } .app-back .ui-ico { width: 1.35rem; height: 1.35rem; } .app-back:hover { background: var(--accent-light); color: var(--accent-dark); } .app-back:active { transform: scale(0.92); } .app-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } html.fc-standalone .app-back { display: inline-flex; } @media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) { .app-back { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .app-back { transition: none; } .app-back:active { transform: none; } } .sidebar-nav { flex: 1; padding: 0.85rem 0.85rem 1rem; } /* A section header carries an icon FOR THE ICON RAIL, which has nothing else to show on a 76px square. Hidden by default so the sidebar and the top bar read exactly as they did before it existed. */ .sidebar-section-ico { display: none; } /* Each nav category is a disclosure so it's individually collapsible - state (open/closed) persists per-section in localStorage (see the wireSidebarSections script), matching this app's established localStorage-preference pattern (e.g. Scheduler's "Hide previous days"). Defaults open (unchanged from before this was collapsible) - collapsing is something the user opts into per section, not a new default that would hide nav items on first load. */ details.sidebar-section { margin: 0.5rem 0 0; border-top: none; } /* A hairline running out to the panel edge, the way a section breaks on a printed manifest - rather than the uppercase gold chip that every generated dashboard uses. */ /* A solid header band per category. Banded headers are how a parts list or a run sheet separates its sections: you see the groups before you read any of the items, which is the whole point of having them. */ /* ONE DEVICE, NOT THREE. This was a full-width band, plus a rule above it, plus a rule below it, plus a 3px accent bar down its left edge - four ways of saying "this is a heading", on four headings, which was most of why the nav ran past the fold. What says it now is the accent colour and the condensed caps, which nothing else in the nav uses. Dropping the left bar matters as much as dropping the band: every ROW carries a marker channel down its own left edge, and that channel means "you are here" - a heading wearing the same bar was the one piece of the nav's grammar that said two things at once. */ details.sidebar-section summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: var(--nav-accent); font-family: var(--font-nav); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; padding: 0.7rem 0.9rem 0.3rem 0.78rem; border-radius: 0; background: transparent; border: none; box-shadow: none; transition: color 0.15s ease; } details.sidebar-section summary::after { content: ""; flex: 1; } details.sidebar-section summary::-webkit-details-marker { display: none; } details.sidebar-section summary:hover { color: var(--nav-accent-text); background: transparent; } /* Rows sit inside the band's group, indented off it. */ .sidebar-section-body { padding: 0.1rem 0 0.25rem; } .sidebar-section-caret { font-size: 0.55rem; color: var(--sidebar-text); opacity: 0.6; transition: transform 0.15s ease; transform: rotate(90deg); order: 3; } details.sidebar-section:not([open]) .sidebar-section-caret { transform: rotate(0deg); } details.sidebar-section:not([open]) summary { padding-bottom: 0.42rem; } /* Rows on a board, not a stack of pills. Each one carries a 3px marker channel down its left edge: empty while idle, amber on the current page. Everything sits on one strict left grid, which is what makes a long nav scan like an operational list instead of a toy. */ /* TIGHTER THAN BANDED WAS, LOUDER THAN DENSE WAS. The row keeps the condensed face and the marker channel; what came off is the padding and about a tenth of the type size. Four sections and a dozen rows makes that the difference between a nav that fits a 900px window and one that does not - which is what the two styles were really disagreeing about. */ .sidebar-nav a { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--sidebar-text); padding: 0.36rem 0.85rem 0.36rem 0.75rem; border-radius: 2px; border-left: 3px solid transparent; font-family: var(--font-nav); font-size: 0.97rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; margin-bottom: 0.03rem; overflow: hidden; text-overflow: ellipsis; transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease; } /* A LOCKED NAV ENTRY IS STILL A NAV ENTRY. Dimmed, because it is not somewhere you can go yet; kept in place and clickable, because the point is to say the feature exists and what it costs. Hiding it outright is how a customer never learns they could buy it. */ .sidebar-nav a.nav-locked { opacity: 0.55; } .sidebar-nav a.nav-locked:hover { opacity: 0.8; } .nav-lock { margin-left: auto; font-size: 0.78rem; flex: none; } .nav-lock .nav-lock-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.15em; } /* WHAT A PAGE IS FOR, AND THE QUICK ACTIONS, are the side bar panel's alone (RICHER ROWS, above): hidden here for every other way the nav is drawn - the top bar's tabs, the phone's sheet and chips - and shown only by the panel's own rules. */ .nav-desc, .nav-quick, .nav-group-h { display: none; } .sidebar-nav a:hover { color: var(--sidebar-text-active); background: rgba(255, 255, 255, 0.05); border-left-color: color-mix(in srgb, var(--nav-accent) 45%, transparent); } .sidebar-nav a:hover .ui-ico { color: var(--nav-accent); opacity: 1; } /* Current page: the marker lights, the row takes an amber ground that falls away to the right, and the icon lights with it. The row is doing the work rather than a lone hairline - which is what made the first pass read as plain. */ .sidebar-nav a.active { color: var(--nav-accent-text); font-weight: 600; background: var(--nav-accent-soft); border-left-color: var(--nav-accent); box-shadow: none; transform: none; } .sidebar-nav a.active:hover { color: var(--nav-accent-text); } .sidebar-nav a.active .ui-ico { color: var(--nav-accent); opacity: 1; } /* Icons on a fixed column so every label starts at the same x, and held back a shade so the labels lead. */ .sidebar-nav a .ui-ico, .sidebar-nav a > svg { flex: 0 0 1.15rem; opacity: 0.62; transition: opacity 0.12s ease, color 0.12s ease; } /* Section-level hub links (Reports, Setup & Integrations) aren't collapsible groups, so give them the same hairline separator + top spacing the disclosure sections use - the sidebar's major entries then share one consistent rhythm instead of a lone pill between sections. */ .sidebar-nav a.sidebar-hub { margin-top: 0.55rem; padding-top: 0.85rem; border-top: 1px solid var(--sidebar-border); } .sidebar-user { padding: 0.9rem 1.1rem; border-top: 1px solid var(--sidebar-border); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* The plain-text fallback, drawn only if nav_me could not be built. A direct child, so it never reaches into the nav_me link's spans. */ .sidebar-user > span { color: var(--sidebar-text); font-family: var(--font-nav); font-size: 0.92rem; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase; } .sidebar-user form { margin: 0; } .sidebar-user-acts { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; } /* Styled like the Log out button beside it, because they are the same kind of thing: the two actions that belong to the person rather than to the fleet. */ .sidebar-user-app { background: transparent; border: 1px solid var(--sidebar-border); color: var(--sidebar-text); padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.78rem; text-decoration: none; white-space: nowrap; } .sidebar-user-app:hover, .sidebar-user-app.is-active { border-color: var(--nav-accent); color: var(--nav-accent); } .sidebar-user button { background: transparent; border: 1px solid var(--sidebar-border); color: var(--sidebar-text); padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.78rem; min-height: auto; } .sidebar-user button:hover { border-color: var(--nav-accent); color: var(--nav-accent); background: transparent; } /* WHO IS SIGNED IN (the nav_me_link macro, app/tools/nav_me.py). On the nav's own dark ground by default - the rail and the top bar - and restyled onto the card for the phone's More sheet further down. Nav tokens only, so it follows every theme's panel. */ .nav-me { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.3rem; border-radius: 10px; text-decoration: none; color: var(--sidebar-text-active); } .nav-me:hover, .nav-me.is-active { background: var(--sidebar-bg-hover); color: var(--sidebar-text-active); } .nav-me:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; } .nav-me-av { position: relative; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nav-accent); color: var(--nav-on-accent); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .nav-me-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* Viewing as somebody else: a ring round the face and an eye on it, on top of the words - the state is said three ways because forgetting you are in it is the failure. */ .nav-me.is-viewing .nav-me-av { box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--nav-accent); } .nav-me-eye { position: absolute; right: -0.35rem; bottom: -0.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sidebar-bg); color: var(--nav-accent); } .nav-me-eye .ui-ico { width: 0.75rem; height: 0.75rem; vertical-align: 0; } .nav-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .nav-me-name, .nav-me-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-me-name { font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; color: var(--sidebar-text-active); } .nav-me-role { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--sidebar-text); } .nav-me-as { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; min-width: 0; padding: 0.15rem 0.45rem; border-radius: 6px; background: var(--nav-accent-soft); color: var(--sidebar-text-active); box-shadow: inset 0 0 0 1px var(--nav-accent); font-family: var(--font-body); font-size: 0.7rem; line-height: 1.25; } .nav-me-as-k { color: var(--nav-accent-text); font-weight: 600; } .nav-me-as-v { font-weight: 700; overflow-wrap: anywhere; } /* The sheet's own copy says "My App" out loud; the rail and the bar have the My App button right beside it. */ .nav-me-go { display: none; } .sidebar-me-sheet { display: none; } /* The More sheet's Page tour and Help (base.html, THE PAGE'S TOUR AND HELP): a phone only, below. */ .sheet-acts { display: none; } /* MY APP AS A PANEL. On a computer, My App opens as a large dialog over the page you are on instead of taking you to a page of its own. The link keeps its real address, so a phone, a new tab and a browser with no script all still go to the page. The rows inside are the ones /app-settings draws, brought in with their own styles. */ .myapp-panel { padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--page-bg); color: var(--text); box-shadow: var(--shadow-lift); width: min(900px, calc(100vw - 2rem)); max-width: none; max-height: 90vh; overflow: hidden; } .myapp-panel[open] { display: flex; flex-direction: column; } .myapp-panel::backdrop { background: rgba(15, 23, 42, 0.55); } .myapp-panel-bar { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem 0.6rem 1.25rem; background: var(--card-bg); border-bottom: 1px solid var(--border); } .myapp-panel-bar h2 { margin: 0; font-size: 1.1rem; } .myapp-panel-status { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; font-weight: 700; color: var(--green); } .myapp-panel-status.myapp-panel-bad { color: var(--red); } .myapp-panel-x { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg-alt); color: var(--text); cursor: pointer; } .myapp-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.25rem 1.5rem; } .myapp-panel-body:focus { outline: none; } .myapp-panel-body .ap-wrap { max-width: none; } .myapp-panel-body .ap-wrap > h1 { display: none; } html:has(.myapp-panel[open]) { overflow: hidden; } /* Privacy/Terms pinned at the very bottom of the sidebar card, out of the page content flow so it never disrupts full-height pages (chat). */ .sidebar-footer { padding: 0.6rem 1.1rem 0.9rem; text-align: center; font-size: 0.75rem; color: var(--sidebar-text); opacity: 0.6; line-height: 1.4; } .sidebar-footer a { color: inherit; text-decoration: none; } /* SWITCH ACCOUNT (app/tools/account_switch.py): the menu, its two openers, and where the menu sits on each layout. The menu is a card over the page wherever it opens, so it wears card tokens, never the nav's - light, dark and overcast all repaint it. DISPLAY IS SPELLED OUT, NOT LEFT TO THE BROWSER. A browser without popovers would otherwise draw the menu inline under the nav, open for good; with these three rules it stays shut there until the fallback at the foot of this file adds .is-open. Three rules rather than one, because a selector a browser does not know drops the whole rule it is in. */ .acct-menu { display: none; } .acct-menu:popover-open { display: block; } .acct-menu.is-open { display: block; z-index: 2147483000; } .acct-menu { position: fixed; inset: auto; margin: 0; left: calc(var(--rail-w) + 0.5rem); bottom: 0.75rem; width: min(22rem, calc(100vw - 1.5rem)); max-height: min(36rem, calc(100vh - 1.5rem)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 0.45rem 0.55rem 0.55rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-lift); font-family: var(--font-body); text-align: left; } .acct-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0.1rem 0.4rem 0.6rem; } .acct-menu-title { margin: 0; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } .acct-menu button { font-family: var(--font-body); } .acct-menu-close, .acct-x button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); box-shadow: none; } .acct-menu-close:hover, .acct-menu-close:active { background: var(--gray-bg); color: var(--text); box-shadow: none; transform: none; } .acct-x button:hover, .acct-x button:active { background: var(--red-bg); color: var(--red); box-shadow: none; transform: none; } .acct-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 3.3rem; box-sizing: border-box; margin: 0; padding: 0.5rem 0.6rem; border: none; border-radius: 10px; background: transparent; color: var(--text); box-shadow: none; text-align: left; text-decoration: none; font-size: 0.93rem; font-weight: 400; } button.acct-row:hover, a.acct-row:hover, button.acct-row:active { background: var(--gray-bg); color: var(--text); box-shadow: none; transform: none; } .acct-row-me { background: var(--page-bg); margin-bottom: 0.3rem; } .acct-av { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-on); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } .acct-av img { display: block; width: 100%; height: 100%; object-fit: cover; } .acct-li .acct-av { background: var(--accent-light); color: var(--accent-dark); } .acct-av-plus { background: transparent; color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--border); } .acct-av .ui-ico { width: 1.15rem; height: 1.15rem; vertical-align: 0; } .acct-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } .acct-name, .acct-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-name { font-weight: 700; color: var(--text); } .acct-sub { font-size: 0.8rem; color: var(--text-muted); } .acct-here { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; font-weight: 700; color: var(--green); } .acct-here .ui-ico { width: 0.9rem; height: 0.9rem; vertical-align: 0; } .acct-list { list-style: none; margin: 0; padding: 0; } .acct-li { display: flex; align-items: center; gap: 0.15rem; margin: 0; } .acct-li form { margin: 0; } .acct-go { flex: 1; min-width: 0; } .acct-hint { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.1rem; font-size: 0.74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .acct-hint .ui-ico { width: 0.85rem; height: 0.85rem; vertical-align: 0; } .acct-full { margin: 0.35rem 0.6rem 0.2rem; font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); } .acct-foot { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border); } .acct-foot form { margin: 0; } .acct-out { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 2.6rem; margin: 0; padding: 0.45rem 0.6rem; border: none; border-radius: 8px; background: transparent; color: var(--text); box-shadow: none; font-size: 0.9rem; font-weight: 600; text-align: left; } .acct-out:hover, .acct-out:active { background: var(--gray-bg); color: var(--text); box-shadow: none; transform: none; } .acct-out .ui-ico { width: 1.05rem; height: 1.05rem; color: var(--text-muted); vertical-align: 0; } .acct-menu :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The phone's opener lives in the More sheet, which a computer never shows; the computer's is the Switch button beside My App. */ .acct-sheet-btn { display: none; } @media (max-width: 900px) { /* A sheet from the bottom of the screen, over the More sheet. */ .acct-menu { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 88vh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; padding: 0.35rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); } .acct-menu::backdrop { background: rgba(9, 14, 24, 0.45); } .acct-row { min-height: 3.6rem; } .acct-out { min-height: 3rem; font-size: 0.95rem; } .sidebar-user .sidebar-user-switch { display: none; } .acct-sheet-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; box-sizing: border-box; margin: 0.45rem 0 0; padding: 0.55rem 0.85rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); color: var(--text); box-shadow: none; font-size: 0.95rem; font-weight: 600; text-align: left; } .acct-sheet-btn:hover, .acct-sheet-btn:active { background: var(--gray-bg); color: var(--text); box-shadow: none; transform: none; } .acct-sheet-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .acct-sheet-ico { flex: none; width: 2.75rem; display: inline-flex; justify-content: center; color: var(--accent-dark); } .acct-sheet-ico .ui-ico { width: 1.3rem; height: 1.3rem; vertical-align: 0; } .acct-sheet-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } .acct-sheet-k { font-weight: 700; } .acct-sheet-v { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); } .acct-sheet-go { flex: none; display: inline-flex; color: var(--text-muted); } .acct-sheet-go .ui-ico { vertical-align: 0; } } .sidebar-footer a:hover { text-decoration: underline; opacity: 1; } .theme-toggle { display: block; width: 100%; text-align: left; margin: 0.5rem 0 0.1rem; background: transparent; border: 1px solid var(--sidebar-border); color: var(--sidebar-text); padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; cursor: pointer; min-height: auto; box-shadow: none; } .theme-toggle:hover { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-soft); } /* THE APPEARANCE PICKERS draw themselves: _appearance_controls.html carries its own styles (radio groups on the shared .seg track and theme circles), for My App and the setup walk alike. The sidebar swatch row and its light-card remap that stood here had nothing left to style. *//* Classic and Modern each have their own options: only the picked look's are shown, on My App and in the setup walk. */ :root:not([data-look~="modern"]) .look-modern-only, :root[data-look~="modern"] .look-classic-only { display: none !important; } /* CLASSIC'S TYPE IS SOURCE SANS 3, menu and page alike. "I really do not like the font the Classic version uses" - it was Barlow Condensed in the menu over the computer's own system font, so the look changed with the machine. Picked B on the font mockup. The face is self-hosted (vendor/fonts). Modern and Professional keep their own. */ :root:not([data-look~="modern"]):not([data-theme="professional"]) { --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: var(--font-body); --font-nav: var(--font-body); } .app-main { flex: 1; margin-left: calc(var(--sidebar-width) + var(--sidebar-gap) * 2); min-width: 0; display: flex; flex-direction: column; } .topbar { display: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow); } .topbar-brand { font-weight: 700; color: var(--text); font-size: 1rem; } /* A PAGE THAT COMES BACK TO AN ANCHOR LANDS BELOW THE STICKY BAR. The driver's Home forms and the photo in My App reload to #vto, #cycle0, #late or #photo, and the browser put that spot at the very top of the screen: under the phone's title bar, so the notice saying it worked was hidden or cut to its last word. The bar is about 3.5rem on a phone (3.4rem with a touch screen's bigger buttons); the side bar layout has nothing across the top, and the top bar layout has its own value in the desktop block. Each leaves a little air. */ html { scroll-padding-top: 1rem; } @media (max-width: 900px) { html { scroll-padding-top: 4.5rem; } } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 25; } /* THE FORCED SET A NEW PASSWORD SCREEN SHOWS ONLY ITSELF. Every row of the nav, the More sheet, the page and station chips and the My App and Search buttons on the top bar would only send somebody back to it, so on a gate screen they are not shown and the page takes the full width. The tab bar is not drawn there at all. */ html.gate-screen .sidebar, html.gate-screen .sidebar-overlay, html.gate-screen .topbar-actions, html.gate-screen .topbar-chips, html.gate-screen .station-chip { display: none !important; } html.gate-screen .app-main { margin-left: 0 !important; } /* THE PAGE ONLY SLIDES WHEN SOMEBODY ASKS IT TO. The fold arrow, a rail square and the Side/Top switch add .nav-animating for a moment (see zipsterNavAnimate in ). It was animating always, so anything that moved the margin on its own - the panel's width arriving a beat after the page was first drawn - turned into a slide across the screen, with the Messenger window on it. */ .app-main { transition: none; } html.nav-animating .app-main { transition: margin-left 0.2s ease; } /* THE FOLD ARROW FOLDS THE PANEL NOW, NOT THE NAV. It used to slide the whole sidebar off the screen and leave a floating button to bring it back; with the rail that is 76px of nav you would lose for nothing. html.nav-collapsed is still the one flag, set pre-paint and remembered, and the side bar's rules read it to hide the panel. The top bar has nothing to fold. */ .sidebar-collapse { margin-left: auto; font-size: 0.95rem; } .sidebar-collapse:hover { color: var(--nav-accent); border-color: var(--nav-accent); background: var(--nav-accent-soft); } main { max-width: 1560px; margin: 0 auto; padding: 2rem 1.75rem 4rem; width: 100%; } /* ---------------- Forms ---------------- */ label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text); margin: 1rem 0 0.3rem; } label:first-of-type { margin-top: 0; } /* A tick-box option is a label too, so the stacked-form 1rem top margin landed on every option after the first: in a row that pushed the second option a whole line below its neighbour (the misaligned sub-options on the Form Builder), and in a column it made the gaps uneven. The margin still separates the first option from whatever field sits above it - option-to-option spacing is the group's gap. */ label:is(:has(> input[type="checkbox"]), :has(> input[type="radio"])) + label:is(:has(> input[type="checkbox"]), :has(> input[type="radio"])) { margin-top: 0; } /* A horizontal or stacked group of tick-box options. Sizing the box explicitly is what lets a nested group indent to exactly the parent option's text (--opt-indent) instead of guessing at the browser's checkbox width. */ .opt-group { --opt-box: 1rem; --opt-gap: 0.5rem; --opt-indent: calc(var(--opt-box) + var(--opt-gap)); display: flex; flex-direction: column; gap: 0.45rem; } .opt-group.is-row { flex-direction: row; flex-wrap: wrap; gap: 0.45rem 1.4rem; } .opt-group > label { display: flex; align-items: center; gap: var(--opt-gap); margin: 0; font-weight: 400; } .opt-group > label > input[type="checkbox"], .opt-group > label > input[type="radio"] { flex: 0 0 auto; width: var(--opt-box); height: var(--opt-box); margin: 0; } .opt-group .opt-note { color: var(--text-muted); font-weight: 400; font-size: 0.82rem; } .opt-group .opt-sub { margin-left: var(--opt-indent); } input, select, textarea { display: block; width: 100%; padding: 0.6rem 0.75rem; box-sizing: border-box; font-family: inherit; font-size: 1rem; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); transition: var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); } /* Explicitly theme the dropdown option list too (belt-and-suspenders with color-scheme) so it's never light-on-white in dark mode. */ select option, select optgroup { background: var(--card-bg); color: var(--text); } /* ---------------- The native controls ---------------- THE LOUDEST SIGNAL THAT A PAGE IS OLD is a control the operating system drew. A file field renders as "Choose File | No file chosen" in the browser's own grey; a dropdown carries the OS triangle; a tick box comes out in whatever colour the browser feels like, which is nothing like this app's accent in any of the eight themes. There are 35 file fields, 143 dropdowns and 129 tick boxes across the templates. Styling them HERE lifts every one of them at once, including the pages nobody thought to go and look at, and keeps them in step with every theme - which a fix pasted per page cannot do and has repeatedly failed to do. */ /* One declaration, and every native tick box, radio, slider and progress bar in the app takes the theme's accent instead of the browser's idea of one. */ :root { accent-color: var(--accent); } /* A tick box is a tick box wherever it sits. The `input` rule above sets width:100%, which a tick box must never take, and only the ones inside a label element were being rescued from it - so a bare one stretched the width of its column and templates worked around that with style="width:auto" one at a time. Sized here, for all of them. (.opt-group's own rule is more specific and still wins, so the indent arithmetic that keys off --opt-box is untouched.) */ input[type="checkbox"], input[type="radio"], label input[type="checkbox"], label input[type="radio"] { display: inline-block; width: 1rem; height: 1rem; min-height: 0; margin: 0 0.4rem 0 0; vertical-align: middle; cursor: pointer; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.55; } input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])), label input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])) { -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; display: inline-grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--text-muted) 55%, var(--card-bg)); border-radius: 4px; background: var(--card-bg); box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 6%, transparent); transition: background-color 150ms ease, border-color 150ms ease; }input[type="radio"]:where(:not(.switch, [role="switch"])), label input[type="radio"]:where(:not(.switch, [role="switch"])) { border-radius: 50%; } input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"]))::before { content: ""; width: 62.5%; height: 62.5%; background: var(--accent-gradient-on); } input[type="checkbox"]:where(:not(.switch, [role="switch"]))::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: inset(0 100% 0 0); } input[type="checkbox"]:where(:not(.switch, [role="switch"])):indeterminate::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])):is(:checked, :where([type="checkbox"]):indeterminate) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%), var(--accent-gradient); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px color-mix(in srgb, var(--text) 8%, transparent); } input[type="checkbox"]:where(:not(.switch, [role="switch"])):is(:checked, :indeterminate)::before { clip-path: inset(0 0 0 0); transition: clip-path 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } input[type="radio"]:where(:not(.switch, [role="switch"]))::before { width: 37.5%; height: 37.5%; border-radius: 50%; opacity: 0; transform: scale(0.6); } input[type="radio"]:where(:not(.switch, [role="switch"])):checked::before { opacity: 1; transform: none; transition: opacity 150ms ease-out, transform 150ms ease-out; } input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])):disabled { background: var(--bg-subtle); box-shadow: none; } input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])):focus { outline: none; } input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"])), input:is([type="checkbox"], [type="radio"]):where(:not(.switch, [role="switch"]))::before { transition: none !important; } } /* THE FILE FIELD. The row is ours - border, radius, the theme's input background. The button inside it is drawn as a quiet secondary button so it matches every other "do a thing" control on the page rather than the OS. ::file-selector-button is the standard name; Chrome and Safari still answer to the -webkit- one, and a browser that knows neither keeps its own button inside a field that at least belongs to this app. */ input[type="file"] { padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.88rem; } /* A file box marked hidden stays hidden. The form rules give inputs a display, which beats the browser's own [hidden] rule, so My App's Profile photo showed a "Choose File / No file chosen" box over its title on a phone, beside the Change photo button that opens it. */ input[type="file"][hidden] { display: none !important; } input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { margin-right: 0.75rem; padding: 0.4rem 0.8rem; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent-dark); transition: var(--transition); } input[type="file"]:hover::file-selector-button, input[type="file"]:hover::-webkit-file-upload-button { background: var(--accent); border-color: var(--accent-dark); color: var(--accent-on, #fff); } /* THE DROPDOWN. appearance:none drops the OS triangle; the two gradients draw the replacement out of currentColor, which is the theme's own text colour - so it is right in all eight themes with no per-theme override and no SVG carrying a colour baked into it. The 45deg wedge sits left of the 135deg one, and together they read as a chevron. A multi-select or a sized list is a scrolling box and not a dropdown at all, so neither gets an arrow or the room for one. */ select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.1rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-position: right 1.15rem center, right 0.85rem center; background-repeat: no-repeat; } select:disabled { cursor: not-allowed; } /* THE DATE AND TIME PICKERS. The calendar glyph belongs to the browser and color-scheme (set by every theme) already keeps it legible. What it lacks is a target worth hitting and any sign that it is one. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 0.2rem; border-radius: 4px; opacity: 0.6; transition: var(--transition); } input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="time"]:hover::-webkit-calendar-picker-indicator, input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator, input[type="month"]:hover::-webkit-calendar-picker-indicator, input[type="week"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } /* "DATE PICKERS ON MOBILE STRETCH OUT THE SCREEN." Two iPhone habits, both about the date field and neither visible in a desktop browser. WIDER THAN ITS BOX. Safari on iPhone draws a date field in its own native style with a floor on its width, so the field ignores the width the page gives it and pushes the page sideways. Dropping the native look is what makes Safari honour the width, and min-width: 0 takes the floor away so a grid or flex column can shrink it like any other field. ZOOMED IN ON TAP. Safari zooms the whole page into any field whose text is under 16px and leaves it zoomed after the picker closes. Seven pages shrink their date fields below that, so on iPhone they are held at 16px. The @supports test matches Safari on iPhone and iPad only (and the other iPhone browsers, which are Safari underneath). A desktop and Android already fit, and nothing about them changes. */ @supports (-webkit-touch-callout: none) { input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; font-size: 16px !important; } /* Without the native look an empty field would collapse to a sliver, and Safari centres the date where every other field starts on the left. */ input::-webkit-date-and-time-value { min-height: 1.4em; margin: 0; text-align: left; } /* ZOOMED IN ON TAP, EVERY BOX AND NOT ONLY THE DATE ONES. The same Safari habit as above: any field whose text is under 16px zooms the page on tap and leaves it zoomed. Pages set their fields to 13 to 15px (the Loadout's 116 boxes at 0.88rem, the Rentals filters, Shift Types, Service Type Compliance, the Employees search ...), so a dispatcher on an iPhone pinched the page back out after every tap. Every text box, list and text area is held at 16px here. Ticks, radios, sliders, colours, files and buttons are not text boxes and keep their size. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea { font-size: 16px !important; } } /* A COLOUR is a swatch, not a text field with a colour sitting in it. */ input[type="color"] { width: 3.25rem; height: 2.35rem; padding: 0.2rem; cursor: pointer; } /* PROGRESS, so the next page that needs a bar does not write a third private track-and-fill in a