*, *::before, *::after { box-sizing: border-box; } /* * The `hidden` attribute has to win. * * The user-agent rule for it is `[hidden] { display: none }`, which ANY author * `display:` declaration outranks - so a panel styled `display: flex` or * `display: grid` stayed on screen while the JS that set `node.hidden = true` * looked broken. Two tools shipped with exactly that bug. One rule here means a * tool cannot reintroduce it by choosing a layout mode. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* Digits are read as data everywhere in this panel - amounts, dates, counts - so they line up by default rather than tool by tool. */ :where(input, td, th, .num, time, code) { font-variant-numeric: tabular-nums; } ::selection { background: var(--accent-soft); } /* The chrome a browser paints itself - a checkbox tick, a radio dot, a range fill, a progress bar - follows the brand instead of the browser's blue. accent-color inherits, so declaring it once here covers every native control in the panel. ui-kit.css sets it on .checkbox input as well; that rule is now redundant rather than wrong, and the case it never covered was the length slider in tools/password, which rendered blue under the old palette too. */ :root { accent-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---- scrollbars ---------------------------------------------------------- Thin and neutral. This used to argue for a warm thumb so a scrolling column would not paint a cold grey gutter into a warm page; the page is neutral now, so a neutral gutter is the one that disappears. Firefox takes the standard properties; the -webkit- rules are what Chrome and Safari read. */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.24) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.24); border: 3px solid transparent; background-clip: content-box; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.38); background-clip: content-box; } /* ---- motion -------------------------------------------------------------- Two switches, one rule. The media query is the operating system's setting; the class is the panel's own `ui.reduce_motion`, which index.php stamps onto server-side so the very first paint already obeys it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } .is-reduced-motion *, .is-reduced-motion *::before, .is-reduced-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }