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

Create karoke style lyrics using LRCLIB library with manual sync ability

Browse Source
This commit is contained in:
iamdoubz committed 2026-07-27 12:06:04 -05:00
1 parent 28d2ede47f
commit d2e7b7e97d
6 files changed
+149 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/radio.css
+18
View File
@@ -187,6 +187,24 @@ audio[controls] { width: 100%; outline: 0; }
}
.lyrics[hidden] { display: none; } /* [hidden] must beat position:absolute rule specificity */
.lyrics-line { padding: 4px 0; opacity: .55; transition: opacity .2s ease, color .2s ease; }
.lyrics-line.current { opacity: 1; font-weight: 700; }
.lyrics-sync {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: -52px -20px 10px; padding: 10px 20px;
background: rgba(0, 0, 0, 0.85);
font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.lyrics-sync button {
width: 26px; height: 26px; border-radius: 50%;
background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff; cursor: pointer;
}
.lyrics-sync button:hover, .lyrics-sync button:focus { background: rgba(255, 255, 255, 0.3); outline: 0; }
.lyrics-sync[hidden] { display: none; }
/* Hide the scrollbar but keep wheel / touch / drag scrolling. */
.no-scrollbar, .lyrics, .history {
scrollbar-width: none; /* Firefox */