/* ================================================================================== TT-LIVE Recorder - app.css The whole design system. There is no second stylesheet and there is no inline style attribute anywhere in the templates, because the Content-Security-Policy this app sends has no 'unsafe-inline': a style="" attribute simply does not paint. Order: tokens and themes, reset, layout shell, typography, components, the table, the responsive table-to-cards switch, state helpers, media queries. WHAT A THEME MAY AND MAY NOT CHANGE Every account picks a palette (spec 9). base.html puts the id on the root element as , `crimson` is the default, and an anonymous visitor on the login page has no data-theme at all - which is why :root below IS crimson and not some neutral base. A theme is one block of custom-property VALUES, nothing else: may change - the value of any token declared on :root, and color-scheme. may NOT - a selector, a rule, a class name, a length, a radius, a shadow geometry, or what a token MEANS. --surface-2 is still "one step away from the card" in all five, even though on `licht` that step goes down in lightness instead of up, because on a light page a nested surface gets darker, not lighter. So do not put a colour literal in a rule. A literal is a sixth theme that nobody can switch off, and it is exactly how a light theme ends up with an invisible zebra stripe or a blue glow under a crimson dot - both of which this file had until the tokens --zebra, --accent-glow, --overlay-soft, --row-archived, --row-weg, --field-border-hover, --saved-ring and --select-arrow were pulled out of the rules that hard-coded them. If a rule needs a colour, give it a token and set that token in every palette. Three literals are left on purpose, listed here so nobody "fixes" them by accident: - .player background #000 - the letterbox behind a portrait video. Black in every theme, because it is the absence of picture, not a surface; - @media print - paper is white and ink is black whatever the screen does; - `transparent` as the end state of the tt-saved pulse - an alpha, not a hue. CONTRAST IS MEASURED, NOT EYEBALLED (spec 9.3). Every text/background pair every theme can actually paint was computed against WCAG 2.1: 4.5:1 for body text, 3:1 for the focus ring, the form-control border and the accent where it is used as chrome. Weakest text pair and weakest non-text pair per theme: crimson --on-accent on --accent 5.40 | accent/surf-3 3.74 middernacht --on-danger on --danger-solid-hover 4.94 | field-border 3.02 grafiet --on-accent on --accent 4.68 | field-border 3.33 licht --placeholder on --surface-3 4.92 | field-border 3.35 systeem is crimson in the dark half and licht in the light half. In four of the five the weakest non-text pair is --field-border against the field it encloses. Crimson is the exception since it was repainted to oxblood: its --surface-3 is a lighter, saturated red now, so the tightest non-text pair there is the accent used as the inset underline under the current tab, at 3.74:1, with --field-border sitting behind it at 3.93:1. Both clear 3:1, but the pair to watch when touching crimson is the accent, not the field border. Both were recomputed a second time with prefers-contrast:more folded in, because that block comes last in the file and therefore wins; neither state fails. --border and --border-strong are hairlines between things that are already told apart by their fill, so they sit below 3:1 on purpose in all five, exactly as they did in the single-palette version. The line a user must be able to find is --field-border, which clears 3:1 against the fill it encloses. One known limit, unchanged from the single-palette version: .skip-link:focus draws its ring with outline-offset:-3px, so that one ring lands ON --accent instead of on the page, and no colour clears 3:1 against both a page and the accent sitting on it. It was 1.95:1 when the accent was blue; it is 2.48:1 in crimson - down from 2.85 because the oxblood repaint had to brighten the accent to keep it clear of the new ground - 2.83:1 in grafiet and 2.09:1 in licht. Fixing it properly means changing that rule, not the palette. ================================================================================== */ /* ================================================================================== 1. Tokens and themes ================================================================================== */ /* -- crimson: the default, and the fallback for a page with no data-theme ------ A deep OXBLOOD page, not a near-black with a hint of warmth in it. The whole surface ladder lives in one family - hue 350-355, the fills at saturation 40-68% and --field-border lower again at 38% because it has to stay legible - and steps only in lightness, so a card is a lighter oxblood panel sitting on a darker oxblood ground rather than a grey box with a red button on it. What makes that read as a red theme instead of a dark theme with red chrome is the EDGE, not the step. The step itself is small on purpose - --surface is 1.14:1 against --bg - so the work is done by --border and --border-strong. They are much LIGHTER than the fills on either side of them (26% and 33% against a card at 14.5%) while holding the same hue, which is what makes the card outline read as a red line rather than as a shadow: --border-strong is 1.84:1 on the card and 2.09:1 on the page. Lightness is the mechanism, not saturation - only --border-strong (67.9%) is in fact more saturated than the card it encloses (64.9%); --border sits at 62.1% and --field-border at 37.7%, both BELOW their own fills. Lift the fills apart instead of the edges and the ladder turns pink before it turns legible. That puts three reds on screen at once - the page, the primary button and the destructive button - so the separation this palette was built around matters more here, not less. The primary button is BRIGHT crimson with near-black ink; every destructive control is DARK rust with white ink. That is how "Verwijderen" stays distinguishable from "Opslaan" when the brand colour is itself a red, and three things separate them at once: lightness (2.02:1 between the two fills), hue (the accent is the cool end of red at ~355deg, everything destructive is the warm end at ~16deg), and which way round the ink runs. Any one of those alone would be too subtle; together they survive greyscale and the common forms of colour blindness. Both fills were re-derived against this ground rather than carried over, and it is worth being exact about which one moved, because the obvious guess is wrong. The destructive fill did NOT get darker. #8e2f1a was hsl(11, 69%, 33%), picked against a near-black page; against the accent it replaced it measured 1.99:1, and on an oxblood ground it also sits in the page's own hue. It is now hsl(16, 74%, 34%) - five degrees WARMER at the same lightness, which is what parts it from a page that is itself red: 2.30:1 against a card and 2.62:1 against the page. The lightness axis was bought back at the other end, by lifting the accent from 57% to 62%. Darkening the destructive fill instead would have restored the 2:1 and sunk the button into the card, which is the trade this ground makes easy to get backwards. */ :root, [data-theme="crimson"], [data-theme="systeem"] { color-scheme: dark; /* -- surfaces, darkest first ---------------------------------------------- */ --bg: #24070c; /* the page */ --surface: #3d0d13; /* cards, the top bar */ --surface-2: #4b141b; /* table head, nested panels */ --surface-3: #531d24; /* form fields, ghost buttons */ --surface-4: #602931; /* hover on surface-3 */ /* -- lines ----------------------------------------------------------------- Same hue as the fills they separate, but a good deal LIGHTER - that is what makes an edge read as a red line rather than as a shadow. (Not saturation: of these three only --border-strong is more saturated than the fill it encloses.) */ --border: #6b1926; /* hairline between rows; decorative only */ --border-strong: #8d1b2a; /* card and panel edges */ --field-border: #c17680; /* form controls: 3.93:1 against their own fill */ /* -- text ------------------------------------------------------------------ Lifted off the old values: a saturated ground this much lighter than a near-black eats contrast, and every one of these was remeasured, not nudged. */ --text: #f8edee; /* 16.51:1 on --bg, 11.69:1 on --surface-3 */ --muted: #d9bfc3; /* 10.98:1 on --bg, 7.77:1 on --surface-3 */ --placeholder: #cfb4b9; /* 6.94:1 on --surface-3 */ /* -- accent --------------------------------------------------------------- */ --accent: #e85461; /* fills and chrome */ --accent-text: #f98691; /* accent as TEXT: 6.99:1 on --surface */ --accent-hover: #f26e79; /* also a:hover, so it has to work as text too */ --on-accent: #1d070a; /* 5.40:1 on --accent */ /* -- semantic -------------------------------------------------------------- Every tint was lifted with the ground. On a near-black page these sat below the card and still read; on an oxblood one at that lightness they vanished into it - the old --danger-bg on this card measures 1.03:1. They now sit ABOVE the card (1.17:1 to 1.34:1) and each keeps a --*-line edge of 1.7:1 to 2.2:1 against its own fill. Green and amber are the pair to watch on a red page: they hold at 9.52:1 and 8.90:1 as ink on a card, and their fills stay 164deg and 48deg off the card's hue, so neither collapses into the family the page belongs to. */ --ok: #4ade80; --ok-bg: #153327; --ok-line: #27684a; --warn: #f0b429; --warn-bg: #3d2e0f; --warn-line: #785c1c; --danger: #ff9c82; --danger-bg: #462316; --danger-line: #96482c; --info: #7ab7ff; --info-bg: #182d49; --info-line: #305a91; --archive: #c9b8fd; --archive-bg: #2d254b; --archive-line: #534790; --neutral: #cdc0c6; --neutral-bg: #3f3133; --neutral-line: #744e54; --danger-solid: #973917; /* white on this is 7.21:1 */ --danger-solid-hover: #b1431b; --on-danger: #ffffff; /* Amber, not crimson: a focus ring the same colour as the primary button is a focus ring nobody can see on the primary button. It matters more on this ground than it did on the old one, where only the button was red. */ --focus: #ffd166; /* -- colours the rules used to hard-code ---------------------------------- */ --accent-glow: rgba(232, 84, 97, .20); /* halo under .brand-dot */ --field-border-hover: #d897a0; /* .input:hover, lighter here */ --overlay-soft: rgba(255, 255, 255, .08); /* .flash-close:hover */ --zebra: rgba(255, 255, 255, .028); /* a hair stronger: the same alpha lifts a lighter ground less */ --row-archived: rgba(201, 184, 253, .05); --row-weg: rgba(255, 156, 130, .06); --saved-ring: rgba(74, 222, 128, .55); /* The