/* Checkup Liquid Glass: base looks for [data-glass] surfaces. * Contract: relaunch/CONTRACTS.md ("Liquid glass"). Owner: glass agent. * * html.glass-on WebGL compositor running (glass.js). Shell surfaces are transparent; the shader * draws refraction, frost, rim, dispersion and shadow underneath them. * html.glass-pending glass.js has WebGL and is about to draw its first frame: same as glass-on, so * there is no frost flash and no heavy frame that switches backdrop-filter off. * html.glass-off Fallback (no WebGL, ?off, an error, or a lost context). CSS backdrop-filter * with a tint and a CSS rim over the backdrop drawn on a plain 2D canvas * (#glass-bd; #glass-gl is absent). * (no class) Before glass.js runs, and with JS disabled: same as the fallback. * * [data-glass-css] set by glass.js on surfaces that use the CSS look while glass-on (every * shell surface on touch, shader capacity overflow, the lens). * [data-glass-nested] set by glass.js (every mode) on glass inside glass. Its CSS look is a tint * with no backdrop-filter: the parent's filter makes the parent the backdrop * root, so a nested filter only re-blurs the parent's own paint. * [data-glass-floating] set by glass.js on floating glass: frost | inner | lens | canvas. * [data-glass-copy] the lens shows a magnified copy of a tile canvas (Safari / Firefox / iOS). * [data-glass-ov] the overlay canvas glass.js appends (last child) to floating glass: * light | canvas | copy. * #glass-bd the 2D backdrop canvas, on screen under glass-off and, under glass-on, * while no shell surface is in the shader (touch pages): #glass-gl is then * hidden and only renders overlays. * * The shell styles content and layout only. Radii come from the tokens through :where(), * so any shell rule overrides them without a specificity fight, and glass.js reads the result. * Safari ignores var() inside -webkit-backdrop-filter, so the prefixed values are hard-coded. */ /* ---------- compositor canvases ---------- */ #glass-gl, #glass-bd { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; } /* ---------- radius passthrough ---------- */ :where([data-glass]) { border-radius: var(--radius-panel, 24px); } :where([data-glass="tile"]) { border-radius: var(--radius-tile, 18px); } :where([data-glass="pill"]) { border-radius: var(--radius-pill, 9999px); } :where([data-glass="lens"]) { border-radius: 50%; } /* ---------- WebGL running (or about to): the shader is the material ---------- */ html.glass-on [data-glass], html.glass-pending [data-glass] { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- floating glass ---------- Floats sit above page content the canvas cannot see. CSS frosts whatever is beneath them (DOM included); their overlay canvas adds the shader's tint, rim and light. On Chromium glass.js replaces these backdrop-filters inline with a refracting SVG version. */ .glass-ov, [data-glass-ov] { position: absolute; z-index: -1; display: block; border-radius: inherit; pointer-events: none; box-shadow: 0 2px 6px rgba(11, 11, 12, 0.08), 0 18px 40px -18px rgba(11, 11, 12, 0.4); } [data-glass="pill"] > [data-glass-ov] { box-shadow: 0 1px 2px rgba(11, 11, 12, 0.1), 0 6px 14px -8px rgba(11, 11, 12, 0.35); } [data-glass-floating="inner"] > [data-glass-ov], [data-glass-ov="copy"] { box-shadow: none; } [data-glass-tint="dark"] > [data-glass-ov] { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 24px 50px -20px rgba(0, 0, 0, 0.6); } html:not(.glass-on) [data-glass-ov] { display: none; } html.glass-on [data-glass][data-glass-floating="frost"] { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.85)) saturate(1.4); } html.glass-on [data-glass][data-glass-floating="frost"][data-glass="pill"] { -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.45)) saturate(1.4); } html.glass-on [data-glass][data-glass-floating="frost"][data-glass-tint="dark"] { -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(0.6); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.85)) saturate(1.4) brightness(0.6); } /* Night inverts Smoke (--glass-tint-dark turns light), so the dark card's backdrop brightens instead. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]).glass-on [data-glass][data-glass-floating="frost"][data-glass-tint="dark"] { -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.25); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.85)) saturate(1.4) brightness(1.25); } } html[data-theme="dark"].glass-on [data-glass][data-glass-floating="frost"][data-glass-tint="dark"] { -webkit-backdrop-filter: blur(16px) saturate(1.4) brightness(1.25); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.85)) saturate(1.4) brightness(1.25); } /* ---------- fallback: CSS frost + tint + rim ---------- Also used, inside glass-on, by [data-glass-css] surfaces. The backdrop is contrast-compressed and the tint has a floor, because a CSS tint cannot thicken over dark objects the way the shader does. */ html:not(.glass-on):not(.glass-pending) [data-glass], html.glass-on [data-glass-css] { background-color: var(--glass-tint, rgba(255, 255, 255, 0.62)); background-color: rgb(from var(--glass-tint, rgba(255, 255, 255, 0.62)) r g b / max(alpha, 0.8)); -webkit-backdrop-filter: blur(18px) saturate(1.6) contrast(0.8) brightness(1.06); backdrop-filter: blur(var(--glass-blur, 18px)) saturate(1.6) contrast(0.8) brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(11, 11, 12, 0.05), inset 0 -10px 18px -14px rgba(11, 11, 12, 0.12), 0 1px 2px rgba(11, 11, 12, 0.05), 0 8px 24px -14px rgba(11, 11, 12, 0.22); } /* Nested glass: the parent is the backdrop root, so no backdrop-filter (see the header). The background goes here, before the tint rules, so dark / clear / accent still win. */ html:not(.glass-on):not(.glass-pending) [data-glass-nested], html.glass-on [data-glass-css][data-glass-nested] { background-color: rgba(255, 255, 255, 0.55); background-color: rgb(from var(--glass-tint, rgba(255, 255, 255, 0.5)) r g b / max(alpha, 0.55)); } html:not(.glass-on):not(.glass-pending) [data-glass="pill"], html.glass-on [data-glass-css][data-glass="pill"] { -webkit-backdrop-filter: blur(11px) saturate(1.6) contrast(0.8) brightness(1.06); backdrop-filter: blur(calc(var(--glass-blur, 18px) * 0.6)) saturate(1.6) contrast(0.8) brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(11, 11, 12, 0.06), 0 2px 6px -3px rgba(11, 11, 12, 0.2); } html:not(.glass-on):not(.glass-pending) [data-glass="lens"], html.glass-on [data-glass-css][data-glass="lens"] { background: radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 36%), radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.3) 100%), rgba(255, 255, 255, 0.04); /* no blur: DOM text under the lens stays crisp (Blink refracts it through SVG instead) */ -webkit-backdrop-filter: saturate(1.9) contrast(1.06); backdrop-filter: saturate(1.9) contrast(1.06); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 -6px 14px -6px rgba(11, 11, 12, 0.25), 0 3px 8px rgba(11, 11, 12, 0.12), 0 18px 34px -12px rgba(11, 11, 12, 0.42); } html:not(.glass-on):not(.glass-pending) [data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-tint="dark"] { background-color: var(--glass-tint-dark, rgba(13, 13, 13, 0.78)); -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(0.45); backdrop-filter: blur(var(--glass-blur, 18px)) saturate(1.4) brightness(0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12), 0 20px 44px -18px rgba(0, 0, 0, 0.55); } html:not(.glass-on):not(.glass-pending) [data-glass-tint="clear"], html.glass-on [data-glass-css][data-glass-tint="clear"] { background-color: rgba(255, 255, 255, 0.08); } html:not(.glass-on):not(.glass-pending) [data-glass-tint="accent"], html.glass-on [data-glass-css][data-glass-tint="accent"] { background-color: color-mix(in srgb, var(--accent, #b4a0ff) 86%, transparent); } /* Lavender, black text (the shader uses the same .86) */ /* nested: tint only (after the tint rules, so it beats their backdrop-filters) */ html:not(.glass-on):not(.glass-pending) [data-glass-nested], html.glass-on [data-glass-css][data-glass-nested] { -webkit-backdrop-filter: none; backdrop-filter: none; } html:not(.glass-on):not(.glass-pending) [data-glass-nested][data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-nested][data-glass-tint="dark"] { background-color: rgba(13, 13, 13, 0.86); background-color: rgb(from var(--glass-tint-dark, rgba(13, 13, 13, 0.8)) r g b / max(alpha, 0.86)); } /* Lens magnifier copy (Safari / Firefox / iOS over a tile canvas): the copy fills the overlay at z-index -1, so the lens highlight and rim move to ::after, above it. */ html.glass-on [data-glass-css][data-glass="lens"][data-glass-copy] { background: transparent; box-shadow: 0 3px 8px rgba(11, 11, 12, 0.12), 0 18px 34px -12px rgba(11, 11, 12, 0.42); } html.glass-on [data-glass-css][data-glass="lens"][data-glass-copy]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 36%), radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.3) 100%); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 -6px 14px -6px rgba(11, 11, 12, 0.25); } /* Keyboard focus on glass: an outline. The glass rules above clear box-shadow and border-color, so a shell focus ring drawn with either would vanish. */ html.glass-on [data-glass]:focus-visible, html.glass-pending [data-glass]:focus-visible, [data-glass]:focus-visible { outline: 2px solid var(--focus, #0d0d0d); outline-offset: 2px; } /* No backdrop-filter at all (old Firefox / some WebViews): solid enough to read. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html:not(.glass-on):not(.glass-pending) [data-glass], html.glass-on [data-glass-css] { background-color: rgba(255, 255, 255, 0.9); } html:not(.glass-on):not(.glass-pending) [data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-tint="dark"] { background-color: rgba(13, 13, 13, 0.94); } html:not(.glass-on):not(.glass-pending) [data-glass="lens"], html.glass-on [data-glass-css][data-glass="lens"] { background-color: rgba(255, 255, 255, 0.25); } } /* ---------- less transparency / more contrast ---------- Every surface turns solid (--panel) with a 1px ink edge. The shader raises its tint to .92 / .95 (glass.js reads the same media queries), so in glass-on only the edge is added here. */ @media (prefers-reduced-transparency: reduce) { html:not(.glass-on):not(.glass-pending) [data-glass], html.glass-on [data-glass-css] { background-color: var(--panel, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; } html:not(.glass-on):not(.glass-pending) [data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-tint="dark"], html:not(.glass-on):not(.glass-pending) [data-glass-nested][data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-nested][data-glass-tint="dark"] { background-color: rgba(13, 13, 13, 0.96); } html.glass-on [data-glass]:not([data-glass="lens"]) { box-shadow: inset 0 0 0 1px var(--ink, #0b0b0c); } } @media (prefers-contrast: more) { html:not(.glass-on):not(.glass-pending) [data-glass], html.glass-on [data-glass-css] { background-color: var(--panel, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ink, #0b0b0c); } html:not(.glass-on):not(.glass-pending) [data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-tint="dark"], html:not(.glass-on):not(.glass-pending) [data-glass-nested][data-glass-tint="dark"], html.glass-on [data-glass-css][data-glass-nested][data-glass-tint="dark"] { background-color: rgba(13, 13, 13, 0.96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); } html.glass-on [data-glass]:not([data-glass="lens"]) { box-shadow: inset 0 0 0 1px var(--ink, #0b0b0c); } html.glass-on [data-glass-tint="dark"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); } }