Reconcile transport drawing variants, admin controls and theme cascades

This commit is contained in:
Jonathan Sykes
2026-10-09 16:10:02 +08:00
parent 9a37715da4
commit 1e83951972
8 changed files with 63 additions and 54 deletions

View File

@@ -9,3 +9,30 @@ html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action { bo
html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action:hover { border-color:var(--glass-line); background:var(--tile-hi); color:var(--text); }
html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action.danger { color:var(--accent-bright); }
html[data-layout="glass-stage"] :is(.dl-row,.download-job) .download-action:focus-visible { outline-color:var(--accent-bright); }
/* Transport drawings and touch targets survive layout/state changes. */
.transport-icon { display:inline-block; flex:none; width:24px; height:24px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.transport-shape { display:none; }
.transport-shape-classic { display:inline; }
html:is([data-layout="f7-swipe"],[data-layout="glass-stage"],[data-layout="bento-hub"]) .transport-shape-classic { display:none; }
html[data-layout="f7-swipe"] .transport-shape-f7-swipe,
html[data-layout="glass-stage"] .transport-shape-glass-stage,
html[data-layout="bento-hub"] .transport-shape-bento-hub { display:inline; }
html[data-layout="f7-swipe"] .transport-shape-f7-swipe { fill:currentColor; stroke-width:.7; }
html[data-layout="f7-swipe"] .transport-icon:is([data-transport-icon="play"],[data-transport-icon="pause"],[data-transport-icon="previous"],[data-transport-icon="next"],[data-transport-icon="forward"]),
html[data-layout="f7-swipe"] #controls .transport-icon:is([data-transport-icon="play"],[data-transport-icon="pause"],[data-transport-icon="previous"],[data-transport-icon="next"],[data-transport-icon="forward"]) { fill:currentColor; stroke-width:.7; }
html[data-layout="f7-swipe"] :is([data-transport-icon="back10"],[data-transport-icon="forward10"],[data-transport-icon="back15"]) .transport-shape { fill:none; stroke-width:2; }
html[data-layout="glass-stage"] .transport-icon,
html[data-layout="glass-stage"] #controls .transport-icon { stroke-width:1.5; }
html[data-layout="bento-hub"] .transport-icon { stroke-width:2; stroke-linejoin:round; }
button:has(> .transport-icon), a.np-btn:has(> .transport-icon) { min-width:44px; min-height:44px; }
button:has(> .transport-icon) { align-items:center; justify-content:center; }
html[data-layout="f7-swipe"] :is(#playBtn,#stgPlay,.service-btn-play,.rv-play) { border-radius:50%; }
html[data-layout="f7-swipe"] #playBtn { width:64px; height:64px; }
html[data-layout="glass-stage"] :is(#playBtn,.mini-btn,.rv-tbtn):has(> .transport-icon) { background:var(--tile,rgba(255,255,255,.08)); border:1px solid var(--line); backdrop-filter:blur(12px); }
html[data-layout="bento-hub"] :is(#playBtn,.mini-btn,.service-btn,.rv-tbtn):has(> .transport-icon) { border-radius:16px; }
.car-controls .transport-icon { width:36px; height:36px; margin-right:12px; }
.gh-seek .transport-icon, .empty-icon .transport-icon { width:48px; height:48px; }
.ph-logo .transport-icon { width:60%; height:60%; }
.home-pl-play:has(> .transport-icon) { min-width:44px; min-height:44px; }