diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte index e1f220adf..a8224b685 100644 --- a/src/lib/components/immersive/ImmersiveHeader.svelte +++ b/src/lib/components/immersive/ImmersiveHeader.svelte @@ -1,5 +1,5 @@ @@ -40,6 +48,9 @@ {#if album}

{album}

{/if} +
+ +
@@ -158,6 +169,10 @@ font-style: italic; } + .quality-badge-wrapper { + margin-top: 12px; + } + /* Responsive */ @media (max-width: 768px) { .coverflow-panel { diff --git a/src/lib/components/immersive/panels/LyricsPanel.svelte b/src/lib/components/immersive/panels/LyricsPanel.svelte index 9034c1a65..fca4927f9 100644 --- a/src/lib/components/immersive/panels/LyricsPanel.svelte +++ b/src/lib/components/immersive/panels/LyricsPanel.svelte @@ -68,7 +68,8 @@ .lyrics-container { flex: 1; min-height: 0; - overflow: hidden; + overflow-y: auto; + overflow-x: hidden; mask-image: linear-gradient( to bottom, transparent 0%, @@ -85,6 +86,40 @@ ); } + /* Hide scrollbar by default, show on hover */ + .lyrics-container::-webkit-scrollbar { + width: 6px; + opacity: 0; + } + + .lyrics-container::-webkit-scrollbar-track { + background: transparent; + } + + .lyrics-container::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 3px; + transition: background 200ms ease; + } + + .lyrics-container:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } + + .lyrics-container:hover::-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)); diff --git a/static/lotus.svg b/static/lotus.svg new file mode 100644 index 000000000..1d8dac664 --- /dev/null +++ b/static/lotus.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file