From 0f93d1bd0dd3ff459fcbb5d06b8570ad94a2db85 Mon Sep 17 00:00:00 2001 From: rays Date: Thu, 8 Oct 2026 13:51:05 +0000 Subject: [PATCH] Fill a pinned pin button with the accent (#148) The reader's pin, a feed page's pin and the toolbar's showed pinned only by turning the glyph solid, in the same grey as the button around it, and at a glance it read the same as not pinned. Pinned, they are now filled with the theme's accent and the pin drawn in the ink the theme pairs with it, the pair a pinned feed's disc and a pinned item's row already use, so no palette changes. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 1 + web/app.css | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 27b79d5..2a5fdf0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- A pinned item or feed's pin button is filled with the theme's accent, in the reader, on the feed's page and in the toolbar, so pinned no longer looks like not pinned. - A feed's page in the Directory says how many people here subscribe only when someone does, without "Nobody here subscribes yet". ### Fixed diff --git a/web/app.css b/web/app.css index 0b504f3..0401dff 100644 --- a/web/app.css +++ b/web/app.css @@ -913,6 +913,11 @@ body.adminpage #log{max-width:none} the row does not move when it changes. */ .ep .fl.on,.ep .fl.on:hover{color:var(--ink);background:radial-gradient(circle,var(--accent) 8.5px,transparent 9px)} .ep .fl.on .i{width:9px;height:9px} +/* The reader's and a feed's pin button, and the toolbar's, pinned: filled with the accent, as the + disc is. A solid pin on the button's own grey read the same as an outlined one (#148). */ +.btn.ico[data-a=pin][aria-pressed=true],.btn.ico[data-a=pin][aria-pressed=true]:hover, +.btn.ico[data-a=flag][aria-pressed=true],.btn.ico[data-a=flag][aria-pressed=true]:hover, +#tbFlag[aria-pressed=true],#tbFlag[aria-pressed=true]:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} /* 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}