From 7627af5bc8272b6a67ec6f5f5061614835eb2a00 Mon Sep 17 00:00:00 2001 From: rays Date: Fri, 16 Oct 2026 20:11:25 +0000 Subject: [PATCH] Signals in the needle's orange, and a larger DeadAir tile in the play bar (#268) Each Signal's tile, icon or initials, is tinted --accent2 in place of --accent: the orange point of the Signals folder's own icon, so the folder and what is in it read as one. The player's DeadAir tile goes from 22px to 26px in its 30px button. Co-Authored-By: Claude Opus 5.5 --- docs/signals.md | 2 +- web/app.css | 2 +- web/src/signals.ts | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/signals.md b/docs/signals.md index 01a38df..2d4105b 100644 --- a/docs/signals.md +++ b/docs/signals.md @@ -20,7 +20,7 @@ their Signals that has not heard about the item yet. the set the page's own icons come from: 2,883 icons, solid, regular and brands, searched by name and Font Awesome's search terms ("ai" finds the robot). Without one, a Signal shows its initials. **Auto** asks Jev to choose (#263), and a Signal made without an icon gets Jev's pick by - itself, a moment after it is made. Every Signal's tile is in the accent tint the folder has. + itself, a moment after it is made. Every Signal's tile is in the needle's colour (`--accent2`), the orange point of the folder's icon. - **Each Signal's row** says "12 items ยท 3 unread", as a feed's row counts its own. - **The folder's page** lists the Signals, as an OPML's page lists its feeds, with the + for a new one. - **A Signal's page** is an ordinary item list: All, Unread, Downloaded and Pinned, search and sort. diff --git a/web/app.css b/web/app.css index 9cffc23..f427359 100644 --- a/web/app.css +++ b/web/app.css @@ -779,7 +779,7 @@ 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} +#pdead .tile{width:26px;height:26px;border-radius:6px} .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} diff --git a/web/src/signals.ts b/web/src/signals.ts index 600c947..0fdbf94 100644 --- a/web/src/signals.ts +++ b/web/src/signals.ts @@ -34,11 +34,12 @@ function feedRow(id: string, cls: string, html: string, open: ()=>void){ /// takes nothing else either). const ICON_ID=/^(solid|regular|brands)\/[a-z0-9-]{1,64}$/; const iconHTML=(icon: string)=>``; -/// Every Signal in the accent tint the folder has, icon or initials: tinted by a hash of its name, -/// as a feed without art is, one came out a colour of its own for no reason anyone could see (#262). +/// Every Signal in the needle's colour (--accent2), the point of the folder's icon, icon or +/// initials: tinted by a hash of its name, as a feed without art is, one came out a colour of its +/// own for no reason anyone could see (#262). function signalTile(sg: {name: string, icon: string|null}){ const inner=sg.icon&&ICON_ID.test(sg.icon) ? iconHTML(sg.icon) : esc(initials(sg.name)); - return `
${inner}
`; + return `
${inner}
`; } const badgeHTML=(n: number)=>`${n>999?'999+':n}`; function signalFolder(list: HTMLElement, q: string){