iamdoubz/radio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move lyrics location into artwork

Browse Source
This commit is contained in:
iamdoubz committed 2026-07-27 09:44:22 -05:00
1 parent 25b9382635
commit 1a88adeabc
3 files changed
+31 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/radio.css
+21 -7
View File
@@ -50,6 +50,8 @@ a:hover, a:focus { color: var(--text); text-decoration: underline; }
}
/* ----------------------------------------------------------- album art */
.art-wrap { position: relative; width: 100%; }
.album-art {
width: 100%;
max-width: 600px;
@@ -160,18 +162,30 @@ audio[controls] { width: 100%; outline: 0; }
}
/* --------------------------------------------------------------- lyrics */
.lyrics-toggle {
position: absolute; top: 10px; right: 10px; z-index: 2;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.55); color: #fff;
font-variant: small-caps; font-size: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
cursor: pointer; backdrop-filter: blur(4px);
transition: background .15s ease;
}
.lyrics-toggle:hover, .lyrics-toggle:focus { background: rgba(0, 0, 0, 0.8); outline: 0; }
.lyrics-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.lyrics {
width: 100%; max-width: 460px;
max-height: 42vh;
position: absolute; inset: 0; z-index: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
overscroll-behavior: contain;
text-align: left; white-space: pre-line; line-height: 1.5;
padding: 12px 14px;
background: rgba(0, 0, 0, 0.25);
text-align: left; white-space: pre-line; line-height: 1.6;
padding: 52px 20px 20px;
background: rgba(0, 0, 0, 0.8);
border-radius: var(--radius);
color: var(--text);
color: #fff;
}
.lyrics[hidden] { display: none; } /* [hidden] must beat position:absolute rule specificity */
/* Hide the scrollbar but keep wheel / touch / drag scrolling. */
.no-scrollbar, .lyrics, .history {
@@ -222,7 +236,7 @@ audio[controls] { width: 100%; outline: 0; }
@media (max-width: 575px) {
body { background: var(--bg-mobile); }
.player-card { padding: 16px; }
.album-art { width: 88%; }
.art-wrap, .album-art { width: 88%; }
.history { width: min(96vw, 420px); }
}
assets/js/player.js
+2 -2
View File
@@ -384,7 +384,7 @@
function loadLyrics(track) {
if (!CFG.lyricsEnabled || !el.lyricsToggle) return;
el.lyricsToggle.hidden = true;
el.lyricsToggle.textContent = 'Show lyrics';
el.lyricsToggle.setAttribute('aria-pressed', 'false');
if (el.lyrics) { el.lyrics.hidden = true; el.lyrics.textContent = ''; }
var body = new URLSearchParams();
@@ -405,7 +405,7 @@
if (!el.lyrics) return;
var show = el.lyrics.hidden;
el.lyrics.hidden = !show;
el.lyricsToggle.textContent = show ? 'Hide lyrics' : 'Show lyrics';
el.lyricsToggle.setAttribute('aria-pressed', show ? 'true' : 'false');
});
}