diff --git a/CHANGELOG.md b/CHANGELOG.md
index e98b020..b5e7546 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
+- Pinned and read look the same wherever they are shown, in every theme: the button lights up
+ in the theme's accent colour when it is on. The read button used to show an envelope on a
+ read item, the opposite of how the pin beside it worked.
+- In Directory and Popular, Subscribe is a plus again, not the tick that marks a feed you have.
- A web page with some non-ASCII characters no longer hides the feed it links, or crashes looking for it.
- Pulling the item list down to check for new items shows a spinner for a couple of seconds, and
a second pull meanwhile does nothing, instead of no sign at all that the check started.
diff --git a/tests/contrast.js b/tests/contrast.js
index 72245e5..df56e58 100644
--- a/tests/contrast.js
+++ b/tests/contrast.js
@@ -27,6 +27,7 @@ const RULES = [
['dim', ['bg', 'panel', 'panel2'], 4.5], // metadata, labels
['faint', ['bg', 'panel', 'panel2'], 4.5], // hints, column headings, the status bar
['accent', ['bg', 'panel'], 4.5], // links, in the list and the reader
+ ['accent', ['panel2', 'raise'], 3], // a toggle that is on: pinned, read
['ink', ['accent'], 4.5], // a primary button's label
['ink', ['accent2'], 4.5], // the unread count on its badge
['accent2', ['bg', 'panel', 'raise'], 3], // the unread dot, the EQ bars, download bars
diff --git a/web/app.css b/web/app.css
index 2284605..6548aac 100644
--- a/web/app.css
+++ b/web/app.css
@@ -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,
diff --git a/web/src/dialogs.ts b/web/src/dialogs.ts
index e352384..46694e8 100644
--- a/web/src/dialogs.ts
+++ b/web/src/dialogs.ts
@@ -55,7 +55,7 @@ function listedFeed(p,cls){
`${p.subscribers} subscriber${p.subscribers===1?'':'s'}`+
// Green, as a downloaded file is: it is already yours. Plus, beside it, is the way to get one.
(p.subscribed?`${ICON.subbed}`
- :``);
+ :``);
// Yours already: the row opens it instead.
if(p.subscribed){ el.onclick=()=>{ closeModal(); selectFeed(p.id); }; return el; }
$('[data-a="sub"]',el).onclick=async()=>{
diff --git a/web/src/items.ts b/web/src/items.ts
index b7e6aed..d08589d 100644
--- a/web/src/items.ts
+++ b/web/src/items.ts
@@ -68,7 +68,7 @@ function epEl(e){
el.innerHTML=`
-
${esc(e.title||'(untitled)')}
@@ -220,8 +220,11 @@ const cur=()=>S.entries.find(x=>x.guid===S.sel);
function syncTools(e){
$('#tbPlay').disabled=!(e&&e.enclosures.some(isPlayable));
$('#tbRead').disabled=$('#tbFlag').disabled=!e;
- // The same icons as the item's own buttons beside its title, so the two never disagree.
- $('#tbRead').innerHTML=e&&e.read?ICON.unread:ICON.check;
+ // The same icons as the item's own buttons beside its title, so the two never disagree. Each
+ // shows what is, pressed when on, as the pin always did; read showed what a click would do,
+ // so the two side by side said opposite things (#74).
+ $('#tbRead').setAttribute('aria-pressed',String(!!(e&&e.read)));
+ $('#tbFlag').setAttribute('aria-pressed',String(!!(e&&e.flagged)));
$('#tbFlag').innerHTML=e&&e.flagged?ICON.pinOn:ICON.pin;
if(e){
$('#tbRead').title=`Mark ${e.read?'unread':'read'}`;
@@ -273,9 +276,9 @@ function detailHtml(e){
[f&&esc(f.title||f.id), num, dateOf(e.published), e.duration&&clock(e.duration)]
.filter(Boolean).map(s=>`${s}`).join('')}
+ aria-label="Mark ${e.read?'unread':'read'}" aria-pressed="${!!e.read}">${ICON.check}
+ aria-label="${e.flagged?'Unpin':'Pin'}" aria-pressed="${!!e.flagged}">${e.flagged?ICON.pinOn:ICON.pin}
${e.link?`${ICON.open}
`:''}
diff --git a/web/src/util.ts b/web/src/util.ts
index 2339449..b7d334c 100644
--- a/web/src/util.ts
+++ b/web/src/util.ts
@@ -32,7 +32,6 @@ const ICON={
directory:fa('0 0 448 512',''), // solid/table-list
popular:fa('0 0 576 512',''), // solid/star
all:fa('0 0 512 512',''), // solid/layer-group
- unread:fa('0 0 512 512',''), // solid/envelope: a closed letter, not a record button
audio:fa('0 0 448 512',''), // solid/headphones
video:fa('0 0 576 512',''), // solid/video
image:fa('0 0 448 512',''), // solid/image