Label the fullscreen button, add a mini fullscreen icon and show A-B markers beside it

This commit is contained in:
Claude
2026-10-01 21:09:00 +00:00
parent 25e7a28b6a
commit b3a43c66db
3 changed files with 34 additions and 4 deletions

View File

@@ -486,3 +486,29 @@
#controls .dk-quick #fsBtn { display: grid; }
#controls .deck-main #modeBtn { order: 1; }
#controls .deck-main #muteBtn { order: 5; }
/* Fullscreen: labelled in the quick row, icon-only once A-B markers appear */
#controls .dk-quick .ctrl { display: none; }
#controls .dk-quick #fsBtn { display: flex; flex: 0 0 auto; width: auto; padding: 0 16px; gap: 8px; align-items: center; justify-content: center; }
#controls .dk-quick #fsBtn svg { width: 22px; height: 22px; }
#controls .dk-quick .fs-label { font: 700 13px var(--ui); }
#controls .dk-quick.ab-on #fsBtn { width: 56px; padding: 0; }
#controls .dk-quick.ab-on .fs-label { display: none; }
#controls .dk-quick.ab-on #abABtn,
#controls .dk-quick.ab-on #abBBtn { display: grid; flex: 0 0 56px; width: 56px; font: 800 18px var(--ui); }
#controls .dk-quick.ab-on #abClearBtn:not(.hidden) { display: grid; flex: 0 0 56px; width: 56px; }
#controls .dk-quick.ab-on .dk-more small { display: none; }
#controls .fs-mini {
flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
border-radius: 9px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
}
#controls .fs-mini:hover { color: var(--accent-bright); background: var(--bg-3); }
#controls .fs-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 380px) { #controls .dk-quick.ab-on .dk-more span { font-size: 12px; } }
#controls .dk-quick .fs-label { text-transform: none; letter-spacing: 0; }
#controls .dk-more i { font-style: normal; }
#controls .dk-quick.ab-on .mc-rest { display: none; }
#controls .dk-quick.ab-on .dk-more { padding: 6px 10px; align-items: center; text-align: center; }
#controls .dk-quick.ab-on .dk-more span { white-space: nowrap; }
#controls .dk-quick.ab-on #abABtn, #controls .dk-quick.ab-on #abBBtn,
#controls .dk-quick.ab-on #abClearBtn:not(.hidden), #controls .dk-quick.ab-on #fsBtn { flex-basis: 52px; width: 52px; height: 52px; }