diff --git a/CHANGELOG.md b/CHANGELOG.md index 206d2f0..d47cb14 100644 --- a/CHANGELOG.md +++ b/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". diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js index 306a8ba..ff57559 100644 --- a/tests/ui/app.spec.js +++ b/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')); }); }); diff --git a/web/app.css b/web/app.css index 1e87974..f700569 100644 --- a/web/app.css +++ b/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){