From eaeb8d3139ff5b8d0e3b0be9bbbe293bb60b00c7 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 09:29:08 -0400 Subject: [PATCH] WOTD Listen button: always blue, no sticky hover or tap-highlight box on mobile - Filled blue by default (a little colour on a calm page) instead of outline-fills- on-hover, which on touch "stuck" lit until you tapped elsewhere. - Hover gated to (hover: hover) so it only darkens on real pointers (no sticky mobile hover); :active gives a press shade everywhere. - -webkit-tap-highlight-color: transparent + user-select: none kill the selection/ highlight box mobile drew on tap. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/word/+page.svelte | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/routes/word/+page.svelte b/frontend/src/routes/word/+page.svelte index 5cdfdb2..5e9dabc 100644 --- a/frontend/src/routes/word/+page.svelte +++ b/frontend/src/routes/word/+page.svelte @@ -125,13 +125,18 @@ } .pron-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; } .pron { font-family: 'Newsreader', Georgia, serif; font-size: 23px; color: #8a8478; } + /* Always filled blue — a little warmth of colour on a laid-back page. Hover is gated to + true pointer devices so it can't "stick" lit after a tap on a phone, and the tap + highlight box is suppressed (that grey/blue flash mobile draws on tap). */ .listen { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; - font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #3E6E97; - background: transparent; border: 1px solid #3E6E97; border-radius: 999px; padding: 7px 15px; - transition: background 0.15s ease, color 0.15s ease; + font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #fdf7ec; + background: #3E6E97; border: 1px solid #3E6E97; border-radius: 999px; padding: 7px 15px; + transition: background 0.15s ease; + -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } - .listen:hover { background: #3E6E97; color: #fdf7ec; } + @media (hover: hover) { .listen:hover { background: #34608a; border-color: #34608a; } } + .listen:active { background: #2c557d; border-color: #2c557d; } .definition { position: relative; font-family: 'Newsreader', Georgia, serif; font-weight: 400;