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

App-icon tiles for Signals and DeadAir, drawn as the logo is (#268)

Browse Source 
web/signals.svg and web/deadair-{on,off}.svg, each with a -dark twin,
follow logo.svg's rules: square and opaque, the logo's gradient ground,
flat layers in its scale blues, the needle's orange, nothing thin
enough to vanish at 32px. Signals is the page's own glyph, waves going
out from a point, the point in orange. DeadAir on is the waveform
closed up with the needle at the cut; off has the silence still in its
middle, an orange flat line, and its bars muted, so the state is in
the shape as the old glyphs had it.

The Signals folder row and its page header show the Signals tile in
place of the glyph on an accent tint; the player's DeadAir switch shows
the on or off tile. tile() puts both variants on the page, and the mode
rule that picked the logo's now picks any .onlight/.ondark. The three
glyphs nothing uses any more are gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-16 20:07:18 +00:00
parent e882904c11
commit fbe7629420
11 changed files with 115 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app.css
View File

@@ -501,9 +501,9 @@ a{color:var(--accent)}
}
#applogo{display:flex;flex:none}
#applogo img{width:28px;height:28px;border-radius:7px}
/* The logo in the mode's own variant. Dark unless the page says light, as the palette is: with
/* The logo, and the app-icon tiles, in the mode's own variant. Dark unless the page says light, as the palette is: with
Auto, data-mode arrives with the script, and until then the page is drawn dark. */
:root[data-mode="light"] .logo.ondark,:root:not([data-mode="light"]) .logo.onlight{display:none}
:root[data-mode="light"] .ondark,:root:not([data-mode="light"]) .onlight{display:none}
/* Classic is the 2004 app, so it wears the 2004 app's icon. */
.logo.classic,:root[data-theme="classic"] .logo:not(.classic){display:none}
:root[data-theme="classic"] .logo.classic{display:block}
@@ -590,8 +590,6 @@ input:focus,select:focus{outline:0;border-color:var(--accent)}
.feed.lastpin{margin-bottom:9px}
.feed.lastpin::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;border-bottom:1px solid var(--line)}
.feed.child .art{width:28px;height:28px;font-size:11px}
/* A Signal's tile is its icon, as a place's is: there is no artwork of its own. */
.art.sig .i{width:45%;height:45%}
/* A Signal's own icon (#261): Font Awesome's file as a mask, so it is drawn in the text's colour
and follows the theme as the page's own icons do. */
.ficon{
@@ -780,6 +778,8 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
}
/* Initials, tinted by a hash of the name so two "TS" in a row can be told apart. Mixed into the
page ground, not --raise: that is also the selected row, and a selected tile vanished into it. */
.art>.tile{width:100%;height:100%;display:block}
#pdead .tile{width:22px;height:22px;border-radius:5px}
.art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
/* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */
.art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}