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

Toggles show their state the same way everywhere (#74, #75)

Browse Source 
A sweep of all 24 theme palettes, measuring each icon's drawn colour,
found pinned in three colours: accent in the feed list, the text colour
on an item's row, and uncoloured on the toolbar, beside the title and on
the feed page. The read button showed the action (an envelope on a read
item) beside a pin showing the state. Now each toggle shows what is, with
aria-pressed, and a pressed one is the accent colour; Classic needs its
own rule, as its buttons set their colour at higher specificity. The
contrast test checks the accent on the button grounds, where it now draws.

Directory's Subscribe button carried the Subscribed tick; it is a plus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-09-28 23:36:23 +00:00
parent 2004da3459
commit 4ed2d59311
6 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/app.css
View File

@@ -817,7 +817,10 @@ body.adminpage #log{max-width:none}
icon, so it spilled 3px right of centre and off line with its heading. */
.ep .st,.ep .fl{width:22px;height:22px;padding:0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)}
.ep .fl{color:var(--faint);font-size:13px}
.ep .fl.on{color:var(--fg)}
.ep .fl.on{color:var(--accent)}
/* A toggle that is on, the same everywhere: pinned or read, in the toolbar, beside an item's
title and on a feed's page, as the feed list's pin mark already was (#74). */
.btn.ico[aria-pressed="true"],.tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)}
/* The icon's EQ bars mark what is playing: standing still, and moving only while it plays. A
paused animation was tried first; the frames it held were a pixel apart and read as dots. */
.eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:12px;flex:none}
@@ -1150,6 +1153,8 @@ body:has(#player.on) #status{padding-bottom:3px}
:root[data-theme="classic"] .tgroup a,
:root[data-theme="classic"] .btn,
:root[data-theme="classic"] .tabs{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a}
:root[data-theme="classic"] .btn.ico[aria-pressed="true"],
:root[data-theme="classic"] .tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)}
:root[data-theme="classic"] .tabs{border:1px solid #8e8e8e;border-radius:6px}
:root[data-theme="classic"] .tgroup button:hover:not(:disabled),
:root[data-theme="classic"] .tgroup a:hover,