From b5fbe571bab0cdd01de647062e3875767e87cd63 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Thu, 4 Dec 2025 09:13:46 -0500 Subject: [PATCH] Improve filter pill design in light mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Transparent background instead of gray - Rounded pill shape (border-radius: 20px) - Subtler text color - Light red tint on hover 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/red_letter.html | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/kjvstudy_org/templates/red_letter.html b/kjvstudy_org/templates/red_letter.html index d550a99..6985a68 100644 --- a/kjvstudy_org/templates/red_letter.html +++ b/kjvstudy_org/templates/red_letter.html @@ -62,18 +62,19 @@ .book-filter { display: inline-block; padding: 0.4rem 0.75rem; - background: var(--code-bg); + background: transparent; border: 1px solid var(--border-color); - border-radius: 4px; + border-radius: 20px; text-decoration: none; - color: var(--text-color); - font-size: 0.9rem; + color: var(--text-secondary); + font-size: 0.85rem; transition: all 0.15s; } .book-filter:hover { border-color: #b22222; color: #b22222; + background: rgba(178, 34, 34, 0.05); } .book-filter.active { @@ -83,8 +84,8 @@ } .book-filter .count { - font-size: 0.8rem; - opacity: 0.7; + font-size: 0.75rem; + opacity: 0.6; margin-left: 0.25rem; } @@ -220,10 +221,14 @@ } [data-theme="dark"] .book-filter { - background: #2a2a2a; + background: transparent; border-color: #444; } +[data-theme="dark"] .book-filter:hover { + background: rgba(178, 34, 34, 0.15); +} + [data-theme="dark"] .page-link { background: #2a2a2a; border-color: #444;