From 211dfa0eba5987a419eeb695126bd4282895fcee Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Wed, 3 Jun 2026 15:00:56 -0400 Subject: [PATCH] tts: explicit colors on queued/loading buttons for dark mode Default browser disabled-button styling washes out to near-invisible against dark backgrounds. Force --button-secondary background + white text + opacity 1 on .tts-queued and .tts-loading so the indicator stays legible in both themes. --- static/css/style.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 6d01ba1..1ae0e40 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1395,10 +1395,20 @@ a:hover { /* TTS play-button states: queued (waiting in line) → loading (fetching) → playing. Gives auto-play users a visible signal during the gap between message arrival - and audio start, so the wait doesn't feel like a hang. */ + and audio start, so the wait doesn't feel like a hang. Explicit colors keep + the disabled state legible in both light and dark themes (browser default + disabled greys out to near-invisible against dark backgrounds). */ +.tts-queued, +.tts-loading, +.tts-queued:disabled, +.tts-loading:disabled { + background-color: var(--button-secondary); + color: #ffffff; + border: 1px solid var(--button-secondary); + opacity: 1; +} .tts-queued { cursor: wait !important; - opacity: 0.85; } .tts-queued::after { content: "•";