diff --git a/frontend/src/index.css b/frontend/src/index.css index 76f93eba..ec252b89 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1071,6 +1071,14 @@ html[data-theme="light"] { here escapes it — a higher level would claim an authority this layer neither has nor needs. */ z-index: var(--z-index-rail); } +/* …and it only fills the viewport while no ancestor has a filter: a `backdrop-filter` makes that + ancestor the fixed stage's containing block. The modal's card is a blurred `.glass` panel (E28 S3d1), + so while the stage is maximised the card drops its blur — the stage covers the card anyway. `html ` + outranks `html[data-theme="dark"] .glass`, which sets the blur again (lib/playerStage.contract.test.ts). */ +html .glass:has(> .player-stage--max) { + backdrop-filter: none; + -webkit-backdrop-filter: none; +} /* Thin, theme-aware scrollbars */ * { diff --git a/frontend/src/lib/playerStage.contract.test.ts b/frontend/src/lib/playerStage.contract.test.ts new file mode 100644 index 00000000..4d8002aa --- /dev/null +++ b/frontend/src/lib/playerStage.contract.test.ts @@ -0,0 +1,19 @@ +import { readFileSync } from "node:fs"; + +import { expect, it } from "vitest"; + +// The YouTube player's "full window" (F) is a `position: fixed; inset: 0` stage INSIDE the modal's card. +// A fixed element is sized by the viewport only while no ancestor has a filter: a `backdrop-filter` +// makes that ancestor its containing block. E28 S3d1 moved the card from `.glass-card` (no blur) to +// `.glass` (blurred), and the full window shrank to a 894×161 strip inside the card (E28 audit, seen +// live). jsdom does no layout, so what is pinned is the escape rule: while the stage is maximised, the +// card drops its blur, with a selector that outranks `html[data-theme="dark"] .glass` (0,2,1). +const css = readFileSync(new URL("../index.css", import.meta.url), "utf8"); + +it("a maximised player stage takes the blur off the glass card it sits in", () => { + const at = css.indexOf("html .glass:has(> .player-stage--max)"); + expect(at, "the escape rule").toBeGreaterThan(css.indexOf('html[data-theme="dark"] .glass')); + const body = css.slice(at, css.indexOf("}", at)); + expect(body).toMatch(/(^|[\s;{])backdrop-filter:\s*none/); + expect(body).toMatch(/-webkit-backdrop-filter:\s*none/); +});