feat: queue, channel view, downloads/saved pages, repeat/loop, accessibility, perf, multithreading
This commit is contained in:
Jonathan Sykes
@@ -1160,3 +1160,196 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
.body { flex-direction: column; }
|
||||
.list-pane { width: auto; border-left: none; border-top: 1px solid var(--line-soft); }
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* Loop / repeat active state
|
||||
* ========================================================================== */
|
||||
.ctrl.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
|
||||
border-color: transparent;
|
||||
box-shadow: 0 6px 16px -8px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* Sidebar nav badges (queue / downloads counts)
|
||||
* ========================================================================== */
|
||||
.nav-badge {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
min-width: 18px; height: 18px;
|
||||
padding: 0 5px;
|
||||
margin-left: 4px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px; font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
border-radius: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* Clickable channel links
|
||||
* ========================================================================== */
|
||||
.card-channel.link { cursor: pointer; }
|
||||
.card-channel.link:hover { color: var(--accent); text-decoration: underline; }
|
||||
.np-channel { cursor: pointer; }
|
||||
.np-channel:hover { color: var(--text-2); }
|
||||
|
||||
/* ============================================================================
|
||||
* Per-card delete button (playlist / queue / saved)
|
||||
* ========================================================================== */
|
||||
.card-del {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text-dim);
|
||||
width: 30px; height: 30px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: all 0.16s var(--ease);
|
||||
}
|
||||
.card:hover .card-del { opacity: 1; }
|
||||
.card-del:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
|
||||
.saved-card .card-del { opacity: 0.85; }
|
||||
|
||||
/* ============================================================================
|
||||
* Modal divider label
|
||||
* ========================================================================== */
|
||||
.modal-divider {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px; font-weight: 700;
|
||||
letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
padding: 12px 2px 2px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* Saved / Downloads summary header
|
||||
* ========================================================================== */
|
||||
.saved-summary {
|
||||
display: flex; align-items: baseline; gap: 10px;
|
||||
padding: 8px 9px 14px;
|
||||
}
|
||||
.saved-total {
|
||||
font-family: var(--display);
|
||||
font-weight: 800;
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
.saved-sub { color: var(--text-dim); font-size: 13px; }
|
||||
.saved-size { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
|
||||
|
||||
/* ============================================================================
|
||||
* THEMES
|
||||
* ========================================================================== */
|
||||
:root[data-theme="light"] {
|
||||
--bg: #f4f2ee;
|
||||
--bg-1: #ffffff;
|
||||
--bg-2: #efece6;
|
||||
--bg-3: #e5e0d8;
|
||||
--line: #d8d2c8;
|
||||
--line-soft: #e6e1d9;
|
||||
--text: #1b1a18;
|
||||
--text-2: #4a4843;
|
||||
--text-dim: #7c776e;
|
||||
--shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
:root[data-theme="light"] body::after { opacity: 0.02; }
|
||||
:root[data-theme="light"] .hero-title {
|
||||
background: linear-gradient(180deg, #1b1a18, #514d46);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
:root[data-theme="light"] #video,
|
||||
:root[data-theme="light"] .player-stage { background: #000; }
|
||||
|
||||
:root[data-theme="contrast"] {
|
||||
--bg: #000000;
|
||||
--bg-1: #000000;
|
||||
--bg-2: #0a0a0a;
|
||||
--bg-3: #161616;
|
||||
--line: #ffffff;
|
||||
--line-soft: #9a9a9a;
|
||||
--text: #ffffff;
|
||||
--text-2: #ffffff;
|
||||
--text-dim: #d8d8d8;
|
||||
--accent: #ff5a3c;
|
||||
--accent-bright: #ff8a6c;
|
||||
--accent-deep: #ff5a3c;
|
||||
--accent-glow: rgba(255, 90, 60, 0.85);
|
||||
}
|
||||
:root[data-theme="contrast"] body::after { display: none; }
|
||||
:root[data-theme="contrast"] body::before { display: none; }
|
||||
:root[data-theme="contrast"] .hero-title {
|
||||
background: none;
|
||||
-webkit-text-fill-color: var(--text);
|
||||
color: var(--text);
|
||||
}
|
||||
:root[data-theme="contrast"] .card { border-color: var(--line-soft); }
|
||||
:root[data-theme="contrast"] .card-channel,
|
||||
:root[data-theme="contrast"] .card-title { color: var(--text); }
|
||||
|
||||
/* ============================================================================
|
||||
* FONT SIZE — scales the whole UI (zoom is supported by WebView2 + WKWebView)
|
||||
* ========================================================================== */
|
||||
:root[data-font="small"] { zoom: 0.9; }
|
||||
:root[data-font="normal"] { zoom: 1; }
|
||||
:root[data-font="large"] { zoom: 1.12; }
|
||||
:root[data-font="xl"] { zoom: 1.26; }
|
||||
|
||||
/* ============================================================================
|
||||
* LAYOUT DENSITY — compact tightens spacing
|
||||
* ========================================================================== */
|
||||
:root[data-density="compact"] .player-pane { padding: 14px 16px 18px; }
|
||||
:root[data-density="compact"] .cards { gap: 2px; padding: 4px 10px 20px; }
|
||||
:root[data-density="compact"] .card { padding: 6px; gap: 9px; }
|
||||
:root[data-density="compact"] .thumb { width: 104px; }
|
||||
:root[data-density="compact"] .card-title { font-size: 12.5px; -webkit-line-clamp: 1; }
|
||||
:root[data-density="compact"] .card-channel { margin-top: 2px; }
|
||||
:root[data-density="compact"] .nav-item { padding: 8px 12px; }
|
||||
:root[data-density="compact"] .playlist-item { padding: 7px 12px; }
|
||||
:root[data-density="compact"] .controls { padding: 12px 14px; margin-top: 12px; }
|
||||
:root[data-density="compact"] .btn-row { margin-top: 11px; gap: 7px; }
|
||||
:root[data-density="compact"] .list-header { padding: 16px 16px 10px; }
|
||||
:root[data-density="compact"] .topbar { padding: 11px 18px; }
|
||||
|
||||
/* ============================================================================
|
||||
* PERFORMANCE MODE — drop expensive paints (grain, blur, big glows)
|
||||
* ========================================================================== */
|
||||
:root[data-perf="on"] body::before,
|
||||
:root[data-perf="on"] body::after { display: none; }
|
||||
:root[data-perf="on"] .topbar { backdrop-filter: none; }
|
||||
:root[data-perf="on"] .modal-backdrop,
|
||||
:root[data-perf="on"] .shortcut-overlay,
|
||||
:root[data-perf="on"] .mini-bar-inner { backdrop-filter: none; }
|
||||
:root[data-perf="on"] .player-pane:not(.empty) .player-stage {
|
||||
box-shadow: 0 0 0 1px var(--line) inset;
|
||||
}
|
||||
:root[data-perf="on"] .ph-logo,
|
||||
:root[data-perf="on"] .skeleton-shimmer::after { animation: none; }
|
||||
:root[data-perf="on"] .card { animation: none; }
|
||||
|
||||
/* ============================================================================
|
||||
* REDUCE MOTION — honor explicit toggle and OS preference
|
||||
* ========================================================================== */
|
||||
:root[data-motion="reduced"] *,
|
||||
:root[data-motion="reduced"] *::before,
|
||||
:root[data-motion="reduced"] *::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user