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

Phone: the bottom totals are text alone, set in from the sides (#424)

Browse Source 
#status kept its own background and top rule to the bottom edge on a
narrow screen, where the rounded corners of the phone cut the band off
and the text sat against the curve; the glass theme's tinted, blurred
band made it plainest. Transparent, no rule, 24px in from each side.
Checked in the simulator against the built page in the glass theme.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-11-08 14:25:27 -05:00
parent 8d4c70a571
commit ca54e83f9c
2 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/app.css
View File

@@ -1671,6 +1671,15 @@ body:has(#player.on) #status{padding-bottom:3px}
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}
}
@media (max-width:820px){
/* The totals along the bottom keep neither their band nor their rule on a phone: both run to the
bottom edge, where the screen's rounded corners cut them off, and the text sat against the
curve (#424). Text alone, set in from the sides. Longhand, as #topbar's padding is. */
#status,:root[data-theme="glass"] #status{
background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-top-color:transparent;
padding-left:calc(24px + var(--safe-l));padding-right:calc(24px + var(--safe-r));
}
}
/* Someone who has asked the system for less transparency, or more contrast, gets solid panels. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
:root[data-theme="glass"] body{background:var(--bg)}