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

Add a scrubbable timed lyric editor to the admin page, LRCLIB regeneration tooling with lyrics skills, and keep the five playback buttons on one row on phones

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-20 17:55:49 +08:00
parent b983c6ca3c
commit 2987f46037
8 changed files with 919 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/styles.css
View File

@@ -1530,6 +1530,20 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
@media (max-width: 860px) {
.app { grid-template-columns: 1fr; }
/* Keep the five playback buttons on one line at the top of the control
deck; everything else (📍, A-B, volume, transition, EQ, PiP, speed…)
flows into a tool row underneath. A control with no explicit order
defaults to 0 and would otherwise jump ahead of the transport group. */
.btn-row { justify-content: center; }
.btn-row::before { content: ""; width: 100%; order: 6; height: 0; }
#shuffleBtn { order: 1; }
#prevBtn { order: 2; }
#playBtn { order: 3; }
#nextBtn { order: 4; }
#repeatBtn { order: 5; }
.btn-row > *:not(#shuffleBtn):not(#prevBtn):not(#playBtn):not(#nextBtn):not(#repeatBtn) { order: 7; }
.btn-row .spacer { display: none; }
.sidebar-toggle { display: inline-flex; }
.sidebar {
@@ -2051,6 +2065,19 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
gap: 7px;
}
/* The five playback buttons stay together on the first line: every OTHER
control is pushed into the tool row below. Without an explicit order a
button defaults to 0 and jumps ahead of the transport group. */
.btn-row::before { content: ""; width: 100%; order: 6; height: 0; }
#shuffleBtn { order: 1; }
#prevBtn { order: 2; }
#playBtn { order: 3; }
#nextBtn { order: 4; }
#repeatBtn { order: 5; }
.btn-row > *:not(#shuffleBtn):not(#prevBtn):not(#playBtn):not(#nextBtn):not(#repeatBtn) { order: 7; }
.btn-row { justify-content: center; }
.btn-row .spacer { display: none; }
/* Now-playing meta: stack vertically */
.now-meta {
flex-direction: column;
@@ -2264,7 +2291,8 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
/* Row B — secondary tools, uniform 44px targets (sizes only: colors and
.active/.sleep-active states keep their class-based styling) */
#abABtn, #abBBtn, #abClearBtn, #muteBtn, #loopBtn, #sleepTimerBtn, #fsBtn {
#abABtn, #abBBtn, #abClearBtn, #muteBtn, #loopBtn, #sleepTimerBtn, #fsBtn,
#rememberPosBtn, #transitionBtn, #eqBtn, #pipBtn {
order: 7;
min-width: 44px;
height: 44px;