Fix radio card, suggestions height, and lyrics auto-scroll
- Radio card: Remove queue buttons (radio replaces entire queue) - Suggestions panel: Add max-height 80vh like other panels - Lyrics: Revert overflow change that broke auto-scroll - Lyrics: Apply scrollbar-on-hover to internal LyricsLines component
This commit is contained in:
1 parent
ed5e7d13cf
commit
8cdb63912c
2 files changed
+10
-27
No files matched your search
@@ -68,8 +68,7 @@
|
||||
.lyrics-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
@@ -86,40 +85,29 @@
|
||||
);
|
||||
}
|
||||
|
||||
/* Hide scrollbar by default, show on hover */
|
||||
.lyrics-container::-webkit-scrollbar {
|
||||
/* Scrollbar styles for internal LyricsLines component - show on hover */
|
||||
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar) {
|
||||
width: 6px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.lyrics-container::-webkit-scrollbar-track {
|
||||
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar-track) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.lyrics-container::-webkit-scrollbar-thumb {
|
||||
.lyrics-container :global(.lyrics-lines::-webkit-scrollbar-thumb) {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.lyrics-container:hover::-webkit-scrollbar-thumb {
|
||||
.lyrics-container:hover :global(.lyrics-lines::-webkit-scrollbar-thumb) {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.lyrics-container:hover::-webkit-scrollbar-thumb:hover {
|
||||
.lyrics-container:hover :global(.lyrics-lines::-webkit-scrollbar-thumb:hover) {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.lyrics-container {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
|
||||
.lyrics-container:hover {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
}
|
||||
|
||||
.lyrics-container :global(.lyrics-lines) {
|
||||
--text-primary: var(--alpha-95, rgba(255, 255, 255, 0.95));
|
||||
--text-secondary: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||
|
||||
@@ -276,17 +276,11 @@
|
||||
<div class="card-glyph">
|
||||
<Radio size={26} />
|
||||
</div>
|
||||
<!-- Hover overlay with actions -->
|
||||
<!-- Hover overlay with play button only (radio replaces queue) -->
|
||||
<div class="card-overlay">
|
||||
<button class="overlay-btn secondary" onclick={() => onAddToQueue?.('radio', trackId)} title="Add to queue">
|
||||
<ListPlus size={16} />
|
||||
</button>
|
||||
<button class="overlay-btn primary" onclick={startSongRadio} disabled={loadingRadio} title="Play">
|
||||
<button class="overlay-btn primary" onclick={startSongRadio} disabled={loadingRadio} title="Play Radio">
|
||||
<Play size={20} fill="currentColor" />
|
||||
</button>
|
||||
<button class="overlay-btn secondary" onclick={() => onPlayNext?.('radio', trackId)} title="Play next">
|
||||
<ListEnd size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
@@ -339,6 +333,7 @@
|
||||
.suggestions-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in new issue
Block a user