/* ---- palette ---- * * One variable per shade the dark theme already used, so dark is unchanged to * the byte and light is the same ramp inverted. Naming is by role and depth * rather than by colour: --surface-4 is "a bit above the card", not "#282828". * * Three states, in this order, and the order is what makes them work: * :root dark, the default * @media light + :not(.dark) follow the system, unless the reader pinned dark * html.light the reader pinned light, beats the media query * * style.css is on the server and cannot be edited, so the handful of colours it * sets are overridden at the bottom of this block rather than at their source. */ :root { --bg: #121212; --bg-alt: #181818; --surface: #1e1e1e; --line-faint: #1c1c1c; --surface-2: #232323; --surface-3: #262626; --surface-4: #282828; --surface-5: #2a2a2a; --border: #2b2b2b; --line: #2c2c2c; --surface-6: #333; --text-6: #3d3d3d; --scroll: #4a4a4a; --text-5: #4e4e4e; --text-4: #5f5f5f; --text-3: #6a6a6a; --text-3b: #858585; --text-2b: #8a8a8a; --text-2: #9a9a9a; --text-1c: #b8b8b8; --text-1b: #d0d0d0; --text-1d: #d2d2d2; --text: #E0E0E0; --text-0b: #e6e6e6; --text-0: #f0f0f0; --text-max: #fff; --accent: #3f9fff; --on-accent: #00121f; --shadow-text: rgba(0, 0, 0, .75); --scrim: rgba(0, 0, 0, .55); --shadow: rgba(0, 0, 0, .45); --flag-op: .45; } @media (prefers-color-scheme: light) { html:not(.dark) { --bg: #ffffff; --bg-alt: #f3f4f6; --surface: #f4f5f7; --line-faint: #ebedf0; --surface-2: #eceef1; --surface-3: #e8eaee; --surface-4: #e2e5e9; --surface-5: #dde0e5; --border: #d5d9df; --line: #e0e3e7; --surface-6: #ced3da; --text-6: #b4bac2; --scroll: #c0c6cd; --text-5: #a3aab3; --text-4: #949ba5; --text-3: #868e99; --text-3b: #78808b; --text-2b: #727a85; --text-2: #646c77; --text-1c: #4a515b; --text-1b: #373e48; --text-1d: #353c46; --text: #22282f; --text-0b: #1b212a; --text-0: #141a22; --text-max: #0a0f16; --accent: #0b63d6; --on-accent: #ffffff; --shadow-text: rgba(255, 255, 255, .85); --scrim: rgba(15, 20, 28, .38); --shadow: rgba(15, 20, 28, .16); --flag-op: .72; } } html.light { --bg: #ffffff; --bg-alt: #f3f4f6; --surface: #f4f5f7; --line-faint: #ebedf0; --surface-2: #eceef1; --surface-3: #e8eaee; --surface-4: #e2e5e9; --surface-5: #dde0e5; --border: #d5d9df; --line: #e0e3e7; --surface-6: #ced3da; --text-6: #b4bac2; --scroll: #c0c6cd; --text-5: #a3aab3; --text-4: #949ba5; --text-3: #868e99; --text-3b: #78808b; --text-2b: #727a85; --text-2: #646c77; --text-1c: #4a515b; --text-1b: #373e48; --text-1d: #353c46; --text: #22282f; --text-0b: #1b212a; --text-0: #141a22; --text-max: #0a0f16; --accent: #0b63d6; --on-accent: #ffffff; --shadow-text: rgba(255, 255, 255, .85); --scrim: rgba(15, 20, 28, .38); --shadow: rgba(15, 20, 28, .16); --flag-op: .72; } /* style.css hardcodes these and loads first. */ html, body { background-color: var(--bg); color: var(--text); } a { color: var(--accent); } hr { background-color: var(--line); } .left-col { background-color: var(--surface); } ::-webkit-scrollbar-track { background: var(--surface-2); } ::-webkit-scrollbar-thumb { background: var(--scroll); } /* Navigation rail, year cards, and the problem list. * * The only stylesheet we control: style.css lives on the server, predates this * repo and cannot be edited, so anything of its that has to change is * overridden from here. That is why some selectors below are heavier than they * would otherwise need to be, and why nav.css must stay after style.css in the * . * * There is no top bar: the rail is the only chrome. It is pinned open above * 1200px and becomes a drawer over a dimmed page below that. * * Driven by a hidden checkbox, so no JavaScript is involved. The collapse * control lives inside the rail; a floating control appears over the content * when the rail is away. Both are