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

Unify transport controls with themed SVG symbols and accessible playback states

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-09 15:54:22 +08:00
parent 0a5b113ebe
commit 9a37715da4
19 changed files with 180 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/styles.css
View File

@@ -1019,7 +1019,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
box-shadow: 0 0 26px -12px var(--accent-glow);
}
.card.playing::after {
content: "▶ NOW PLAYING";
content: "NOW PLAYING";
position: absolute; top: 9px; right: 44px;
font-family: var(--mono); font-size: 8px; font-weight: 700;
letter-spacing: 0.1em; color: var(--accent);
@@ -4356,3 +4356,25 @@ html[data-layout="bento-hub"] .media-shape-classic { display:none; }
html[data-layout="f7-swipe"] .media-shape-f7-swipe,
html[data-layout="glass-stage"] .media-shape-glass-stage,
html[data-layout="bento-hub"] .media-shape-bento-hub { display:inline; }
/* 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"] :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 { 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%; }