Signals in the theme's accent tint again (#268)

Neither orange tile nor orange icon on the tint worked, so each
Signal's tile is back in the theme's accent tint, as it was before
#268. The Signals folder icon and the larger DeadAir tile stay. The
tile rules go above the initials' comment, which they had split from
its rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-16 20:24:18 +00:00
parent dc3ee016db
commit ae58e4653a
3 changed files with 6 additions and 12 deletions

View File

@@ -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 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. 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 **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 had, its icon or initials in the orange of the folder icon's point. itself, a moment after it is made. Every Signal's tile is in the accent tint the folder has.
- **Each Signal's row** says "12 items · 3 unread", as a feed's row counts its own. - **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. - **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. - **A Signal's page** is an ordinary item list: All, Unread, Downloaded and Pinned, search and sort.

View File

@@ -776,16 +776,11 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
border-radius:7px;object-fit:cover;background:var(--raise);flex:none; border-radius:7px;object-fit:cover;background:var(--raise);flex:none;
display:grid;place-items:center;color:var(--faint);font-weight:600;overflow:hidden; display:grid;place-items:center;color:var(--faint);font-weight:600;overflow:hidden;
} }
/* 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} .art>.tile{width:100%;height:100%;display:block}
#pdead .tile{width:26px;height:26px;border-radius:6px} #pdead .tile{width:26px;height:26px;border-radius:6px}
/* 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.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)} .art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
/* A Signal: the folder's accent tint, its icon or initials in the orange of the Signals icon's
point (signals-dark.svg). In light, the light palette's needle (--accent2 there): signals.svg's
#FF5500 on the tint is about 2:1, too faint for initials. */
.art.ini.sig{background:color-mix(in srgb,var(--accent) 24%,var(--bg));color:#ff6a1a}
:root[data-mode="light"] .art.ini.sig{color:#c43e00}
/* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */ /* 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} .art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}
.art.mosaic img{width:100%;height:100%;min-height:0;object-fit:cover;display:block} .art.mosaic img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}

View File

@@ -34,12 +34,11 @@ function feedRow(id: string, cls: string, html: string, open: ()=>void){
/// takes nothing else either). /// takes nothing else either).
const ICON_ID=/^(solid|regular|brands)\/[a-z0-9-]{1,64}$/; const ICON_ID=/^(solid|regular|brands)\/[a-z0-9-]{1,64}$/;
const iconHTML=(icon: string)=>`<span class="ficon" style="--icon:url('/icons/${icon}.svg')"></span>`; const iconHTML=(icon: string)=>`<span class="ficon" style="--icon:url('/icons/${icon}.svg')"></span>`;
/// Every Signal in the folder's accent tint, its icon or initials in the orange of the folder icon's /// Every Signal in the accent tint the folder has, icon or initials: tinted by a hash of its name,
/// point (.art.sig): tinted by a hash of its name, as a feed without art is, one came out a colour /// as a feed without art is, one came out a colour of its own for no reason anyone could see (#262).
/// of its own for no reason anyone could see (#262).
function signalTile(sg: {name: string, icon: string|null}){ function signalTile(sg: {name: string, icon: string|null}){
const inner=sg.icon&&ICON_ID.test(sg.icon) ? iconHTML(sg.icon) : esc(initials(sg.name)); const inner=sg.icon&&ICON_ID.test(sg.icon) ? iconHTML(sg.icon) : esc(initials(sg.name));
return `<div class="art ini sig">${inner}</div>`; return `<div class="art ini sig" style="--tint:var(--accent)">${inner}</div>`;
} }
const badgeHTML=(n: number)=>`<span class="badge${n?'':' zero'}" title="${n} unread">${n>999?'999+':n}</span>`; const badgeHTML=(n: number)=>`<span class="badge${n?'':' zero'}" title="${n} unread">${n>999?'999+':n}</span>`;
function signalFolder(list: HTMLElement, q: string){ function signalFolder(list: HTMLElement, q: string){