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

Use theme-aware SVGs for download and offline actions

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-09 14:28:23 +08:00
parent 66bbda51c7
commit 2001e77cee
13 changed files with 122 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/styles.css
View File

@@ -752,7 +752,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
}
.np-btn:hover { color: var(--text); border-color: var(--accent); background: var(--bg-2); transform: translateY(-1px); }
.np-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.np-btn.done { color: #7ee0a8; border-color: rgba(126,224,168,0.35); }
.np-btn.done { color: var(--accent-bright); border-color: var(--accent); }
.np-title {
font-family: var(--display);
font-weight: 700;
@@ -1097,19 +1097,20 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
display: none;
align-items: center; justify-content: center;
width: 18px; height: 18px;
color: #7ee0a8;
color: var(--accent-bright);
font-size: 12px; font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.card.cached .saved-badge { display: flex; }
.card.downloading .saved-badge {
display: flex;
color: #ffc850;
animation: pulse 1s ease-in-out infinite;
color: var(--accent-bright);
}
.card.downloading .saved-badge::before { content: "⏳"; }
.card.downloading .saved-badge { font-size: 0; }
.card.downloading .saved-badge::before { font-size: 12px; }
/* State changes reveal SVGs without rewriting badges or their handlers. */
.saved-badge .badge-progress { display:none; }
.card.downloading .saved-badge .badge-offline { display:none; }
.card.downloading .saved-badge .badge-progress { display:block; }
.saved-badge .media-icon { width:16px; height:16px; filter:drop-shadow(0 1px 2px #000); }
/* Download progress bar on card thumb */
.dl-progress {
@@ -4331,3 +4332,27 @@ html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }
.lyric-primary { white-space: pre-line; }
.lyric-secondary { display: block; white-space: pre-line; font-size: .62em; font-weight: 450; line-height: 1.2; opacity: .68; margin-top: .15em; }
/* Media icons share definitions and follow the active layout's stroke family. */
.media-icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.media-nav-icon { width:20px; height:20px; }
.empty-icon .media-icon { width:48px; height:48px; }
:is(.pl-offline-badge,.home-pl-offline) .media-icon { width:14px; height:14px; }
html[data-layout="classic"] .media-icon { stroke-width:1.8; }
html[data-layout="f7-swipe"] .media-icon { stroke-width:2; }
html[data-layout="glass-stage"] .media-icon { stroke-width:1.9; }
html[data-layout="bento-hub"] .media-icon { stroke-width:1.8; }
.np-btn .i-progress { display:none; }
.np-btn.saving :is(.i-save,.i-done) { display:none; }
.np-btn.saving .i-progress { display:inline; }
:is([data-media-icon="progress"], .np-btn.saving .media-icon) { animation:mediaSpin 1s linear infinite; transform-origin:center; }
@keyframes mediaSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { :is([data-media-icon="progress"], .np-btn.saving .media-icon) { animation:none; } }
.media-shape { display:none; }
.media-shape-classic { display:inline; }
html[data-layout="f7-swipe"] .media-shape-classic,
html[data-layout="glass-stage"] .media-shape-classic,
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; }