rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Make Glass's top bar solid on a phone, so the strip above it matches (#147)

Browse Source 
In a home-screen app iOS paints the strip behind the status bar and the Dynamic Island itself, in
one flat colour, from theme-color. Glass's bar is see-through, so theme-color fell back to Glass's
page background, #0b0d14 (#eef1f7 light), above a bar that showed #191e34 on average, bluer at the
left and purple at the right: a near-black band, or a white one in light mode.

No flat strip can match a see-through bar, so on a phone the bar is solid, in what it showed on
average (--glass-bar, measured in Chromium off the bar's top edge), and theme-color carries the
same colour. Everywhere else Glass is as it was. The browser test checks the bar is solid and
theme-color equals it in both modes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-09 01:10:14 +00:00
parent a12aa59970
commit c7eef3e516
3 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app.css
View File

@@ -426,6 +426,7 @@
--glass-hi:rgba(255,255,255,.26);
--glass-lo:rgba(255,255,255,.10);
--glass-sheen:rgba(255,255,255,.07);
--glass-bar:#191e34; /* the top bar on a phone: what the glass one showed, on average */
--wash1:rgba(64,120,255,.30);
--wash2:rgba(175,82,222,.24);
--wash3:rgba(48,176,199,.20);
@@ -450,6 +451,7 @@
--glass-hi:rgba(255,255,255,.9);
--glass-lo:rgba(255,255,255,.45);
--glass-sheen:rgba(255,255,255,.5);
--glass-bar:#f6f7ff;
--wash1:rgba(64,120,255,.22);
--wash2:rgba(175,82,222,.16);
--wash3:rgba(48,176,199,.18);
@@ -1398,6 +1400,10 @@ body:has(#player.on) #status{padding-bottom:3px}
:root[data-theme="glass"]{--glass-rim:inset 0 1px 0 var(--glass-lo)}
:root[data-theme="glass"] #topbar,
:root[data-theme="glass"] #status{box-shadow:none}
/* Solid, in the colour the glass showed on average. iOS paints the strip above it, behind the
status bar and the Dynamic Island, in one flat colour, and over a see-through bar that met it
at a seam: near-black above a blue bar (#147). */
:root[data-theme="glass"] #topbar{background:var(--glass-bar);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Someone who has asked the system for less transparency, or more contrast, gets solid panels. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){