/* The glass. One copy, for every site on this server. * * Read off the same disk by each server rather than fetched from one of them, so the * front door does not go down when the music library does. * * WHY THIS FILE EXISTS AT ALL. Two bugs this week had the same cause: a second copy of a * design. Ten CSS rules wrote the accent out by hand and stayed green when it became * pink, and the desktop app kept its own palette and stayed green for the same reason. * A shared look with two definitions is a shared look until the first time somebody * changes one of them. * * WHAT IS HERE. The material: the ground, the surfaces, the lines, the type colours, the * accent scaffolding, the three tiers of glass and the field that bends it, the radii, * the spacing, the shadows and the timings. * * WHAT IS NOT. Anything that is one app's furniture rather than the material it is made * of. JR!TER keeps --cut, --pane, its flattened --grad-* names, its fonts, --rail-w and * --player-h in its own tokens file, and loads this one first. * * The accent is only scaffolding here. Its default lives with whoever is showing it, * because each site decides what colour it is: JR!TER takes it from a setting and from * whatever is playing, and Foyer just uses the default. */ /* --accent is a colour, not a string. * * Custom properties are strings to the engine unless it is told otherwise, and strings do * not interpolate, so every accent change was a jump on every tinted surface at once. * Registered as a it interpolates, and the one transition on :root below carries * the whole app with it. * * The initial value has to be here as well as in :root: it is what the property falls * back to before the cascade runs and if anything ever sets an invalid value. */ @property --accent { syntax: ""; inherits: true; initial-value: #FAA8B8; } :root { --bg: #000000; --bg-deep: #000000; --surface: #0B0B0C; --surface-2: #121214; --elevated: #1A1A1D; --hover: rgba(255, 255, 255, 0.06); --pressed: rgba(255, 255, 255, 0.11); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16); --text: #F2F3F4; --text-2: #9EA1A6; --text-3: #6B6E74; --text-on-accent: #16080C; --text-on-color: #FFFFFF; --accent: #FAA8B8; --accent-hi: color-mix(in srgb, var(--accent) 86%, white); --accent-lo: color-mix(in srgb, var(--accent) 82%, black); --accent-rgb: 250, 168, 184; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 42%, transparent); --accent-ink: #16080C; --glass: rgba(17, 18, 21, 0.74); --glass-2: rgba(20, 21, 25, 0.96); --glass-line: rgba(255, 255, 255, 0.13); --glass-filter: blur(22px) saturate(180%) brightness(1.06); --glass-filter-thin: blur(14px) saturate(170%) brightness(1.05); --glass-filter-edge: blur(22px) saturate(180%) brightness(1.06); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.14); --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); --r-pill: 999px; --r-xl: 24px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px; --s8: 56px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.6); --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.75); --ease: cubic-bezier(0.22, 0.7, 0.3, 1); --fast: 130ms var(--ease); --med: 220ms var(--ease); --slow: 420ms var(--ease); /* The accent moves, it does not cut. * * On :root because --accent is inherited: transitioning it here carries every element * that reads it, with one declaration. Part of the material rather than of either site, * because "the accent glides" is a fact about this glass and not about who is showing it. * * It only works because of the @property above. Without the registration the engine * treats the value as text, and a transition on text is a jump. * * No easing of its own: --slow is a duration AND a curve, "420ms cubic-bezier(...)". * Adding one made two curves in one shorthand, which is invalid, so the declaration was * dropped and the accent went back to cutting. */ transition: --accent var(--slow); } /* ── the real glass ───────────────────────────────────────────────────────────── * * Distort, then blur, then lift. The order matters: displacing an image that has already * been blurred bends a smudge, which looks like nothing at all. A blur on its own reads as * frosted plastic, because blurring is what distance does and bending is what glass does, * and refraction is the thing the eye actually recognises. This is what the app looks * like; the values above are what is left when it cannot be drawn. * * The gate is the engine, and it cannot be anything else. WebKit parses an SVG filter * reference inside a backdrop-filter, reports it supported, and then never renders it, so * @supports on the thing itself says yes and the blur silently does not happen. There is * no probe for "and did it work". * * So it is written the safe way round: asked for only where it is known to render, rather * than refused only where it is known to fail. Both of these are Blink only, and either * is enough, so one of them being dropped from the engine costs the effect rather than the * legibility: * * background: paint(x) the CSS Paint API, which only Blink has ever shipped * -webkit-app-region Chrome and Electron's own window drag property * * Everything else, which today means WebKit and Gecko, keeps the readable tint above. * Gecko is in that group because I have no way to test it, and a surface you can read is * the safe end of a guess. */ @supports (background: paint(x)) or (-webkit-app-region: no-drag) { :root { --glass: rgba(255, 255, 255, 0.055); --glass-2: rgba(255, 255, 255, 0.085); /* No SVG filter reference in these any more. Blink draws an SVG filter inside a * backdrop-filter in raster tiles rather than in one pass, and the tile edges showed * as thin blurred lines that popped in and out in the same places whenever anything * near them repainted: a hover lift, a transition, a scroll. A screenshot re-renders * the page in one go, so the lines were never in one and could not be inspected, * which is why they lived for so long. Taking the reference out of the chains made * them go away, at the cost of the bend, so the bend went: a steady frosted panel * beats a refracting one that flickers. The filters themselves are still defined in * glass-defs.html, because JR!TER's chromatic dial asks for the -ca one on purpose when * somebody turns it up. */ --glass-filter: blur(22px) saturate(180%) brightness(1.06); --glass-filter-thin: blur(14px) saturate(170%) brightness(1.05); --glass-filter-edge: blur(22px) saturate(180%) brightness(1.06); } } /* ── glass for the engines that cannot bend light ────────────────────────────── * * WebKit and Gecko, which is every browser on an iPhone, Safari on a Mac, and Firefox * everywhere. They were being handed the flat tier, and the flat tier is dark and mostly * opaque for one reason: it has to survive a backdrop-filter that never arrives. * * That is the wrong reason to apply to these. Only url() is broken in WebKit's * backdrop-filter. blur(), saturate() and brightness() have worked for years, which is * why this tier is gated on the filter existing at all: below it, the flat tier stands. * * So blur for real, and then do the part the blur cannot. A displacement map is what is * missing and there is no way to fake one in CSS. There is no need to fake the whole * thing: what the eye reads as glass happens at the rim, and every bit of that is * reachable with inset shadows. * * All of it rides on --edge-top, which every glass surface already draws and already * composes with its own shadow, so this changes one token and no rules. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { @supports not ((background: paint(x)) or (-webkit-app-region: no-drag)) { :root { /* Lighter than the flat tier, because here the blur behind it is real. Still far from the five per cent film Blink gets: that one is riding a displacement map as well, and this is not. * * The floor under both numbers is legibility with the blur contributing nothing, * measured over white, which is the state the friend's iPhone was actually in. * --glass bottoms out at 0.61 and --glass-2 has room to spare, so: * * --glass 0.55 3.72:1 under AA, which is where this started * --glass 0.64 5.07:1 what it is * --glass-2 0.88 11.68:1 * * 0.55 was the first guess and the test next door threw it out. */ --glass: rgba(17, 18, 21, 0.64); --glass-2: rgba(20, 21, 25, 0.88); --glass-line: rgba(255, 255, 255, 0.16); /* More blur than Blink asks for, deliberately. Blink spends part of its effect budget on the bend; this has only the blur, so the blur does more of the work. */ --glass-filter: blur(30px) saturate(190%) brightness(1.08); --glass-filter-thin: blur(20px) saturate(180%) brightness(1.06); --glass-filter-edge: blur(30px) saturate(190%) brightness(1.08); /* The lens, in six lines. * * Read top to bottom: the lit edge, then the rim gathering light and letting it * fall inward, then the two sides coming apart in colour the way a real edge * splits it, then the bounce off whatever is underneath. The third and fourth are * what url(#glass-ca) was for; the second is the one a flat panel can never have, * because a panel is lit and a lens collects. */ --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 18px 24px -20px rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(150, 200, 255, 0.11), inset -1px 0 0 rgba(255, 205, 165, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 0 -16px 20px -20px rgba(120, 180, 255, 0.10); /* A little deeper, so the pane sits off the page rather than on it. Glass has thickness and the shadow is the only place left to say so. */ --glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.58); } } } @media (prefers-reduced-motion: reduce) { :root { --fast: 1ms linear; --med: 1ms linear; --slow: 1ms linear; } * { animation-duration: 1ms !important; scroll-behavior: auto !important; } } /* The filter definitions carry no picture of their own. */ .glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }