thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WOTD Listen button: always blue, no sticky hover or tap-highlight box on mobile

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 09:29:08 -04:00
parent 1150ae916b
commit eaeb8d3139
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/word/+page.svelte
+9 -4
View File
@@ -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;