dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Aero: nested tiles in the real-blur chrome drop the baked backdrop

Browse source 
Chrome cannot anchor a background-attachment: fixed layer inside a
backdrop-filter ancestor, so the composer's attach button baked the blurred
wallpaper against its own box and read as a solid, mismatched tile (often a
dark crop of grass) next to the pale field. Inside .glass-panel /
.study-chrome / .glass / .tabbar the nesting chrome (surface tokens,
white/xx fills, chips, cards) now drops the bake and keeps its flat token
fill - the panel's own blur is the glass - mirroring the existing
.glass-sheet carve-out. The composer's textarea keeps its brighter field
recipe (exempted via :not()), and .aero .btn-ghost gains the same carve-out
so the study pager's arrows sit flat in the pill.

Probe: the attach tile samples the band glass (115,137,118) instead of a
dark mis-crop (73,102,77). All 15 suites green, contrast scan clean.

Version 0.6.6, SW v88.
This commit is contained in:
Martin Dvořák 2026-10-15 16:00:37 +00:00
commit b5c4f237cd
4 changed files with 80 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

64
app/globals.css
View file

@ -753,6 +753,17 @@
border: 1px solid rgb(255 255 255 / 0.6);
color: var(--text);
}
/* Inside the real-blur chrome (study pager), the ghost buttons drop the bake
too — same anchoring bug as every other nested tile, and the pill's own
blur is the glass they should match. */
.aero .glass-panel .btn-ghost,
.aero .glass .btn-ghost,
.aero .study-chrome .btn-ghost,
.aero .tabbar .btn-ghost {
background-image: none;
border-color: var(--glass-border);
background-color: rgb(255 255 255 / 0.23);
}
/* Page headings that sit straight on the wallpaper. */
.aero .page-heading {
@ -797,6 +808,59 @@
background-image: none;
}
/* The same principle extends to the floating chrome that carries a real
backdrop blur — the chat header, the composer band, the desktop pickers,
the study pill and the phone tab bar (the `.glass` header bar too).
Chrome cannot anchor a `background-attachment: fixed` layer inside a
backdrop-filter ancestor: the bake is laid out against the element itself,
so a small tile samples a tiny random detail of the wallpaper and reads as
a solid, mismatched button — the composer's attach button rendered as a
dark patch of grass next to the pale glass field. The panel's own blur is
the glass here, exactly like inside sheets, so nested chrome drops the
bake and keeps its flat token fill. The composer's field is deliberately
exempt (`:not()` on the bake selectors): its brighter glass tile is its
own thin recipe, and it is the wide element that still anchors correctly. */
.aero .glass-panel .card,
.aero .glass-panel .glass-solid,
.aero .glass-panel .sidebar-surface,
.aero .glass-panel .gate-card,
.aero .glass-panel .list-group,
.aero .glass-panel .nav-action,
.aero .glass-panel .nav-row[aria-current="page"],
.aero .glass-panel .nav-row[aria-pressed="true"],
.aero .glass-panel .nav-row[data-active="true"],
.aero .glass-panel .glass-chip,
.aero .glass-panel .glass-pill,
.aero .glass-panel .btn-secondary,
.aero .glass-panel .chat-empty,
.aero .glass-panel .segmented,
.aero .glass-panel [class*="bg-white/35"],
.aero .glass-panel [class*="bg-white/40"],
.aero .glass-panel [class*="bg-white/45"],
.aero .glass-panel [class*="bg-white/50"],
.aero .glass-panel [class*="bg-white/55"],
.aero .glass-panel [class*="bg-white/60"],
.aero .glass-panel [class*="bg-white/70"],
.aero .glass-panel [class*="bg-[var(--surface)]"],
.aero .glass-panel [class*="bg-[var(--surface-strong)]"]:not(textarea):not(input[type="search"]),
.aero .glass-panel [class*="bg-[var(--surface-sunken)]"],
.aero .glass-panel [class*="bg-frost-50"] {
background-image: none;
}
.aero .study-chrome [class*="bg-white/35"],
.aero .study-chrome [class*="bg-white/40"],
.aero .study-chrome [class*="bg-white/45"],
.aero .study-chrome [class*="bg-white/50"],
.aero .study-chrome [class*="bg-white/55"],
.aero .study-chrome [class*="bg-white/60"],
.aero .study-chrome [class*="bg-white/70"],
.aero .study-chrome [class*="bg-[var(--surface)]"],
.aero .study-chrome [class*="bg-[var(--surface-strong)]"],
.aero .study-chrome [class*="bg-[var(--surface-sunken)]"],
.aero .study-chrome [class*="bg-frost-50"] {
background-image: none;
}
html,
body {
height: 100%;