itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(artists): add hover effect to alphabet filter buttons

Browse Source 
Buttons were built with inline styles — no :hover possible. Replaced with
.artists-alpha-btn CSS class: accent-colored hover with subtle glow ring,
active state unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-12 11:52:31 +02:00
parent 8f45f7230e
commit 6a8422ad1f
2 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+22
View File
@@ -6007,6 +6007,28 @@ html.no-compositing .fs-lyrics-rail {
}
.alphabet-filter-btn:hover { background: var(--bg-hover); }
.alphabet-filter-btn.active { background: var(--accent); color: var(--ctp-crust); }
/* ─ Artists page alphabet bar ─ */
.artists-alpha-btn {
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border-subtle);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.artists-alpha-btn:not(.artists-alpha-btn--active):hover {
background: var(--accent);
color: var(--ctp-crust);
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.artists-alpha-btn--active {
background: var(--accent);
color: var(--ctp-crust);
border-color: var(--accent);
}
.alphabet-filter-btn.empty { opacity: 0.28; pointer-events: none; }
/* ─ Radio favorite star ─ */