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

Add a service mode shortcut to the now-playing bar and a video panel toggle

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-08 16:59:43 +08:00
parent 3e1b56610f
commit a3089dde74
3 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/styles.css
View File

@@ -1469,6 +1469,9 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
color: var(--text-dim);
}
.mini-close:hover { color: var(--text); border-color: var(--text-dim); }
/* Set-list view straight from the now-playing bar. */
.mini-service { font-size: 15px; }
.mini-service:hover { border-color: var(--accent); }
.mini-info {
min-width: 0; flex: 1;
display: flex; flex-direction: column;
@@ -2647,6 +2650,50 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
}
.service-topbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* Toggle reads as pressed when the video panel is on. */
.service-video-btn.on {
border-color: var(--accent);
color: var(--text);
}
/* Placeholder the real .player-stage is pinned over. It reserves the space and
defines the geometry; it never contains the video itself. */
.service-video-slot { display: none; }
body.service-video .service-video-slot {
display: block;
width: 100%;
max-width: 720px;
aspect-ratio: 16 / 9;
margin: 0 auto 18px;
border-radius: var(--radius);
background: #000;
}
/* Lift the pinned stage above the overlay (320) while it is on loan. */
body.service-open.service-video .player-stage {
z-index: 330;
}
/* With the picture carrying the song, the type steps back so both fit. */
body.service-video .service-title {
font-size: clamp(20px, 4.2vw, 32px);
margin-bottom: 6px;
}
body.service-video .service-channel {
font-size: clamp(14px, 2.2vw, 18px);
margin-bottom: 6px;
}
body.service-video .service-upnext {
margin-top: 12px;
}
.service-exit-btn {
background: var(--bg-3);
border: 1px solid var(--line);
@@ -2856,6 +2903,9 @@ body.service-open .sidebar-backdrop {
max-width: none;
padding: 12px 14px;
}
body.service-video .service-video-slot { margin-bottom: 12px; }
body.service-video .service-title { font-size: clamp(19px, 5.2vw, 26px); }
body.service-video .service-note { display: none; }
.service-time {
font-size: clamp(16px, 4.6vw, 22px);
}