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

Keep the five transport buttons grouped on one line at every screen width

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-21 10:33:06 +08:00
parent 1ce3cb8949
commit 808306ffce
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/styles.css
View File

@@ -603,6 +603,18 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.seek { flex: 1; } .seek { flex: 1; }
.btn-row { display: flex; align-items: center; gap: 9px; margin-top: 15px; flex-wrap: wrap; } .btn-row { display: flex; align-items: center; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
/* The five transport buttons stay together, in transport order, at EVERY width.
They are scattered through the markup (shuffle/loop/repeat sit after the tool
buttons), so without this they only group where a media query said so — which
left shuffle and repeat stranded among the tools on anything wider than a
phone. Tools take order 7; the mobile blocks add a forced line break at 6. */
#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; }
.ctrl { .ctrl {
background: var(--bg-3); background: var(--bg-3);
border: 1px solid var(--line); border: 1px solid var(--line);