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

Style the A-B group, Fullscreen and More buttons like the mockup

Browse Source
This commit is contained in:
Claude
2026-10-01 21:54:17 +00:00
parent 8c463f3834
commit fecb824c9a
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -211,7 +211,7 @@
<button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button> <button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
<button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button> <button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
</div> </div>
<button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog" title="More controls" aria-label="More controls"><span><em class="mc-dots">⋯</em><i class="mc-label"> More<i class="mc-rest"> controls</i></i></span><small>Speed · Quality · A-B · Sleep · EQ</small></button> <button id="ctlMoreBtn" class="dk-more" type="button" aria-haspopup="dialog" title="More controls" aria-label="More controls"><span><svg class="mc-tune" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9M17 7h3M4 17h3M11 17h9M13 4v6M7 14v6"/></svg><em class="mc-dots">⋯</em><i class="mc-label"> More<i class="mc-rest"> controls</i></i></span><small>Speed · Quality · A-B · Sleep · EQ</small></button>
</div> </div>
<div id="deckChips" class="deck-chips" aria-label="Quick settings"></div> <div id="deckChips" class="deck-chips" aria-label="Quick settings"></div>
<div id="dkMoreHost" hidden> <div id="dkMoreHost" hidden>

27
frontend/theme-glass.css
View File

@@ -337,9 +337,26 @@ html[data-layout="glass-stage"] #controls #fsBtn { order: 2; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn { order: 3; } html[data-layout="glass-stage"] #controls #ctlMoreBtn { order: 3; }
html[data-layout="glass-stage"] #controls .ab-group .ctrl { padding: 0 7px !important; font-size: 10px !important; } html[data-layout="glass-stage"] #controls .ab-group .ctrl { padding: 0 7px !important; font-size: 10px !important; }
html[data-layout="glass-stage"] #controls .ab-group #abClearBtn { padding: 0 7px !important; font-size: 13px !important; } html[data-layout="glass-stage"] #controls .ab-group #abClearBtn { padding: 0 7px !important; font-size: 13px !important; }
@media (max-width: 440px) {
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn .fs-label { display: none !important; } /* ===== A-B · Fullscreen · More — styled like the mockup ===== */
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn { padding: 0 10px !important; } .mc-tune { display: none; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #ctlMoreBtn .mc-label { display: none !important; } html[data-layout="glass-stage"] #controls .dk-quick { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #ctlMoreBtn { padding: 0 10px !important; } html[data-layout="glass-stage"] #controls .ab-group { padding: 2px; border-radius: 12px; gap: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); }
html[data-layout="glass-stage"] #controls .ab-group .ctrl { height: 26px !important; padding: 0 10px !important; border-radius: 8px !important; font: 500 10px var(--mono) !important; color: var(--text-dim); }
html[data-layout="glass-stage"] #controls .ab-group .ctrl.active { background: rgba(255, 255, 255, 0.1) !important; color: var(--accent-bright); font-weight: 700 !important; }
html[data-layout="glass-stage"] #controls .ab-group #abClearBtn { padding: 0 6px !important; font-size: 11px !important; }
html[data-layout="glass-stage"] #controls .ab-group #abClearBtn:hover { color: #ffb4ab; }
html[data-layout="glass-stage"] #controls #fsBtn,
html[data-layout="glass-stage"] #controls #ctlMoreBtn {
height: 30px !important; padding: 0 12px !important; border-radius: 12px; gap: 6px;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--text); font-weight: 500;
} }
html[data-layout="glass-stage"] #controls #ctlMoreBtn { color: var(--text-dim); }
html[data-layout="glass-stage"] #controls #fsBtn:hover, html[data-layout="glass-stage"] #controls #ctlMoreBtn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
html[data-layout="glass-stage"] #controls #fsBtn svg { width: 15px; height: 15px; }
html[data-layout="glass-stage"] #controls #fsBtn .fs-label, html[data-layout="glass-stage"] #controls #ctlMoreBtn span { font: 500 11px var(--ui); }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-tune { display: inline-block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; margin-right: 4px; vertical-align: -3px; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-dots { display: none; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-label { display: inline !important; }
html[data-layout="glass-stage"] #controls #ctlMoreBtn .mc-rest { display: none !important; }
html[data-layout="glass-stage"] #controls .dk-quick.ab-on #fsBtn .fs-label { display: inline !important; }