mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
fix(artists): add hover effect to alphabet filter buttons
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:
+1
-11
@@ -179,17 +179,7 @@ export default function Artists() {
|
|||||||
<button
|
<button
|
||||||
key={l}
|
key={l}
|
||||||
onClick={() => setLetterFilter(l)}
|
onClick={() => setLetterFilter(l)}
|
||||||
style={{
|
className={`artists-alpha-btn${letterFilter === l ? ' artists-alpha-btn--active' : ''}`}
|
||||||
padding: '0.25rem 0.5rem',
|
|
||||||
borderRadius: 'var(--radius-sm)',
|
|
||||||
background: letterFilter === l ? 'var(--accent)' : 'var(--bg-card)',
|
|
||||||
color: letterFilter === l ? 'var(--ctp-crust)' : 'var(--text-secondary)',
|
|
||||||
border: '1px solid var(--border-subtle)',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: 600,
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.2s'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{l === ALL_SENTINEL ? t('artists.all') : l}
|
{l === ALL_SENTINEL ? t('artists.all') : l}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -6007,6 +6007,28 @@ html.no-compositing .fs-lyrics-rail {
|
|||||||
}
|
}
|
||||||
.alphabet-filter-btn:hover { background: var(--bg-hover); }
|
.alphabet-filter-btn:hover { background: var(--bg-hover); }
|
||||||
.alphabet-filter-btn.active { background: var(--accent); color: var(--ctp-crust); }
|
.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; }
|
.alphabet-filter-btn.empty { opacity: 0.28; pointer-events: none; }
|
||||||
|
|
||||||
/* ─ Radio favorite star ─ */
|
/* ─ Radio favorite star ─ */
|
||||||
|
|||||||
Reference in New Issue
Block a user