Clip the close button's hover glow at the frame edge; add a hover probe
Hovering the win7 X painted a red mark on the window border's far edge. Diagnosed programmatically, per request, with a new scripts/hover-probe.ts: Firefox headless has no pointer, so the probe copies the built stylesheet with every `:hover` rewritten to a `.simhover` class, renders the app's exact frame markup (w7-frame + direct-child title-bar + aria-label'd controls) with the X force-hovered, and pixel-scans four regions for red-dominant pixels, printing a verdict table and exiting non-zero on artifacts. Verdict from the first run: the right border and the region beside it were CLEAN — the reported mark is the glow escaping over the TOP edge. 7.css's hover ::before carries box-shadow 0 0 7px 3px #e68e75, a child's box-shadow is not clipped by the parent's border or radius, and the caption buttons sit flush against the window's top edge (border-top: 0) — so 100 red pixels landed above the frame: a tint across the top border and a halo floating on the desktop past it. Fix: clip-path inset(0 0 -1rem 0) on `.w7-frame > .title-bar` in skinfix. The glow now dies at the frame border — where the real Win7 DWM stopped it — and the bottom stays open so the authentic bleed toward the caption survives. clip-path clips hit-testing too, but only outside the region; the drag area is the title-bar's own box, entirely inside. Scoped to w7-frame so harness and demo windows keep stock 7.css behaviour. Verified: probe verdict now clean (escape regions 0, the intended in-frame glow still measures 30 px — the effect survived, only the escape is gone); the resting-state harness diffs exactly zero, so nothing but hover pixels changed; tsc + build clean. The probe stays in scripts/ as the regression test; gotchas.md records both the clipping rule and the :hover -> class technique. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -602,6 +602,24 @@ html.win7 body {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Hovering the close button paints 7.css's red glow ::before
|
||||
(box-shadow: 0 0 7px 3px #e68e75), and box-shadows of CHILDREN are not
|
||||
clipped by the parent's border or radius — the caption buttons sit flush
|
||||
against the window's top edge (border-top: 0), so the glow spilled ABOVE
|
||||
the frame: a red tint across the top border and a red halo floating on the
|
||||
desktop past it (scripts/hover-probe.ts renders the forced-hover state and
|
||||
pixel-scans for exactly this; it caught 100 red pixels above the edge).
|
||||
Clip the title bar's children to its own box on top/left/right — the glow
|
||||
now dies at the frame border, which is where the real Win7 DWM stopped it
|
||||
too — while the bottom stays open (-1rem) so the glow's bleed toward the
|
||||
caption below survives; that part is authentic.
|
||||
clip-path also clips HIT-TESTING, but only for content outside the region:
|
||||
the title-bar's own box (the drag region) is entirely inside it.
|
||||
Scoped to w7-frame: demo/harness windows keep stock 7.css behaviour. */
|
||||
.win7 .window.w7-frame > .title-bar {
|
||||
clip-path: inset(0 0 -1rem 0);
|
||||
}
|
||||
|
||||
/* 7.css's glass layer is `backdrop-filter: blur(4px)` on .window::after —
|
||||
but CSS cannot sample the DESKTOP behind a transparent native window
|
||||
(there is no backdrop to read), and WebKitGTK paints the unsampleable
|
||||
|
||||
Reference in New Issue
Block a user