josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a lyrics-only service mode view with the sung line centred and auto-sized, and a free local faster-whisper script to transcribe saved songs

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-19 08:33:00 +08:00
parent b82f17cd46
commit 71fc51fb50
8 changed files with 457 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/styles.css
View File

@@ -3715,3 +3715,66 @@ body.remote-open { overflow: hidden; }
.rv-add-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-add-item small { color: var(--text-dim); font-size: 11px; }
.rv-add-item.added { border-color: #7ee0a8; }
/* ============================================================================
* Service mode — lyrics only (Notes.renderService in app.js)
* ========================================================================== */
.service-mode.lyrics-on .service-meta,
.service-mode.lyrics-on .service-upnext { display: none; }
.service-mode.lyrics-on .service-center {
max-width: none;
padding: 8px 0;
min-height: 0;
justify-content: stretch;
}
.service-lyrics {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 40vh;
}
.sl-list {
position: absolute;
inset: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
font-family: var(--display);
/* Soft fade at the top and bottom edges so lines drift in and out. */
-webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.sl-list::-webkit-scrollbar { display: none; }
.sl-line {
box-sizing: border-box;
margin: 0 auto;
padding: 0.16em 4%;
width: 100%;
text-align: center;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
/* --fit = the size at which THIS line fills one row; others are fractions. */
font-size: calc(var(--fit, 40px) * 0.48);
color: var(--text-2);
opacity: 0.42;
overflow-wrap: anywhere;
cursor: pointer;
border-radius: 18px;
transition: font-size 0.35s var(--ease), opacity 0.35s var(--ease), color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.sl-line.near { font-size: calc(var(--fit, 40px) * 0.6); opacity: 0.7; }
.sl-line.past { opacity: 0.28; }
.sl-line.active {
font-size: var(--fit, 40px);
opacity: 1;
color: var(--text);
background-color: color-mix(in srgb, var(--accent) 18%, transparent);
text-shadow: 0 0 32px var(--accent-glow);
}
.sl-line.untimed { cursor: default; }
.sl-empty {
display: flex; flex-direction: column; gap: 10px; align-items: center;
font-size: clamp(22px, 4vw, 40px); font-weight: 700; color: var(--text-2);
}
.sl-empty small { font-family: var(--ui); font-size: 16px; font-weight: 500; color: var(--text-dim); }