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

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>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Glass's top bar is solid on a phone, in the colour its glass showed, so the strip above it on an iPhone can match it.
 - A pinned item or feed's pin button is filled with the theme's accent, in the reader, on the feed's page and in the toolbar, so pinned no longer looks like not pinned.
 - A feed's page in the Directory says how many people here subscribe only when someone does, without "Nobody here subscribes yet".
 

tests/ui/app.spec.js

@@ -1673,5 +1673,13 @@ test.describe('on a narrow phone', () => {
     expect(bar.slice(0, 2)).toEqual(['sticky', 0]);
     expect(bar[2]).toBe(await page.evaluate(() => getComputedStyle(document.body).backgroundColor));
     expect(await page.evaluate(() => document.querySelector('meta[name=theme-color]').content)).toBe(bar[2]);
+    // Glass's bar is see-through on a desktop, which no flat strip can match: solid on a phone.
+    for (const mode of ['dark', 'light']) {
+      const [c, tc] = await page.evaluate(m => { setTheme('glass', m);
+        return [getComputedStyle(document.querySelector('#topbar')).backgroundColor, document.querySelector('meta[name=theme-color]').content]; }, mode);
+      expect(c).toMatch(/^rgb\(/);
+      expect(tc).toBe(c);
+    }
+    await page.evaluate(() => setTheme('modern', 'dark'));
   });
 });

web/app.css

@@ -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){