engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tts: explicit colors on queued/loading buttons for dark mode

Browse source 
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.
This commit is contained in:
russell@unturf.com 2026-06-03 15:00:56 -04:00
parent adc4fd79d2
commit 211dfa0eba
No known key found for this signature in database
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
static/css/style.css
View file

@ -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: "•";