470 lines
71 KiB
CSS
470 lines
71 KiB
CSS
:root {
|
|
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
color: #172033;
|
|
background: #f4f6fa;
|
|
font-synthesis: none;
|
|
--bg: #f4f6fa;
|
|
--surface: #ffffff;
|
|
--surface-2: #eef2f7;
|
|
--surface-3: #e7edf5;
|
|
--text: #172033;
|
|
--text-2: #4e5a70;
|
|
--muted: #68758b;
|
|
--line: #dfe5ed;
|
|
--line-strong: #cbd4e1;
|
|
--brand: #2b6df6;
|
|
--brand-strong: #1853ce;
|
|
--brand-soft: #eaf1ff;
|
|
--success: #108762;
|
|
--success-soft: #e6f6ef;
|
|
--warning: #a55b08;
|
|
--warning-soft: #fff2df;
|
|
--danger: #c83d4a;
|
|
--danger-soft: #ffebee;
|
|
--topbar: 64px;
|
|
--sidebar: 224px;
|
|
--shadow-1: 0 7px 22px rgba(24, 39, 75, .07);
|
|
--shadow-2: 0 22px 64px rgba(16, 29, 52, .17);
|
|
--ease: cubic-bezier(.22, 1, .36, 1);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
color: #edf2f8;
|
|
background: #0b0f16;
|
|
--bg: #0b0f16;
|
|
--surface: #131923;
|
|
--surface-2: #1a2230;
|
|
--surface-3: #222d3d;
|
|
--text: #edf2f8;
|
|
--text-2: #bdc8d8;
|
|
--muted: #9aa8bd;
|
|
--line: #273243;
|
|
--line-strong: #374459;
|
|
--brand: #6d9fff;
|
|
--brand-strong: #8bb3ff;
|
|
--brand-soft: #172b50;
|
|
--success: #66d2aa;
|
|
--success-soft: #12372b;
|
|
--warning: #f1b762;
|
|
--warning-soft: #3a2b17;
|
|
--danger: #ff8e98;
|
|
--danger-soft: #3c1d24;
|
|
--shadow-1: 0 8px 24px rgba(0, 0, 0, .22);
|
|
--shadow-2: 0 24px 72px rgba(0, 0, 0, .46);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
|
|
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); }
|
|
body.sheet-open { overflow: hidden; }
|
|
button, input, select { font: inherit; }
|
|
button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
|
|
button { border: 0; color: inherit; cursor: pointer; transition: scale .14s cubic-bezier(.2,.8,.2,1), filter .14s ease-out; }
|
|
button:not(.player-tap-surface):not(.player-panel-scrim):active { scale: .96; filter: brightness(.94); }
|
|
button.tap-animate:not(.player-tap-surface):not(.player-panel-scrim) { animation: button-pop .16s cubic-bezier(.16,1,.3,1); }
|
|
.video-card:active, .result-row:active, .drop-zone:active { scale: .985; }
|
|
@keyframes button-pop { from { scale: .96; } to { scale: 1; } }
|
|
button:focus, input:focus, select:focus, summary:focus { outline: 0; }
|
|
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); }
|
|
html[data-input="keyboard"] button:focus-visible, html[data-input="keyboard"] input:focus-visible, html[data-input="keyboard"] select:focus-visible, html[data-input="keyboard"] summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 48%, transparent); outline-offset: 2px; }
|
|
button:disabled { cursor: not-allowed; opacity: .5; }
|
|
svg { width: 20px; height: 20px; stroke-width: 1.9; }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
|
|
.app-shell { min-height: 100vh; }
|
|
.topbar {
|
|
position: fixed; z-index: 60; inset: 0 0 auto 0; height: var(--topbar);
|
|
display: grid; grid-template-columns: var(--sidebar) minmax(280px, 640px) 1fr; align-items: center; gap: 24px;
|
|
padding: 0 22px 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
|
|
background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px);
|
|
}
|
|
.brand { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0; background: transparent; text-align: left; }
|
|
.brand-mark { width: 36px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: var(--brand); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 24%, transparent); }
|
|
.brand-mark svg { width: 20px; }
|
|
.brand strong { font-size: 18px; letter-spacing: -.02em; }
|
|
.brand small { padding: 3px 6px; color: var(--muted); border-radius: 6px; background: var(--surface-2); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
|
|
.top-search { min-width: 0; height: 42px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 0 12px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); text-align: left; }
|
|
.top-search:hover { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
|
|
kbd { padding: 3px 6px; color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-family: inherit; font-size: 11px; }
|
|
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
|
|
.icon-button { width: 40px; height: 40px; min-width: 40px; display: inline-grid; place-items: center; padding: 0; border-radius: 11px; background: transparent; }
|
|
.icon-button:hover, .icon-button.active { color: var(--brand); background: var(--brand-soft); }
|
|
.icon-button:active { scale: .94; }
|
|
.avatar { width: 36px; height: 36px; display: grid; place-items: center; margin-left: 6px; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #2b6df6, #6f94f7); font-weight: 800; }
|
|
|
|
.sidebar {
|
|
position: fixed; z-index: 50; top: var(--topbar); bottom: 0; left: 0; width: var(--sidebar);
|
|
display: flex; flex-direction: column; padding: 14px 12px 18px; overflow-y: auto;
|
|
border-right: 1px solid var(--line); background: var(--surface);
|
|
}
|
|
.sidebar nav { padding-bottom: 10px; }
|
|
.sidebar nav p { margin: 10px 12px 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
|
|
.sidebar nav button, .sidebar footer>button { position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: var(--text-2); border-radius: 11px; background: transparent; font-size: 13px; font-weight: 650; text-align: left; }
|
|
.sidebar nav button:hover, .sidebar footer>button:hover { color: var(--text); background: var(--surface-2); }
|
|
.sidebar nav button.active, .sidebar footer>button.active { color: var(--brand-strong); background: var(--brand-soft); }
|
|
.sidebar nav button b { min-width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; color: #fff; border-radius: 10px; background: var(--brand); font-size: 10px; }
|
|
.sidebar footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
|
|
.sidebar footer>div { display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--muted); font-size: 12px; }
|
|
.sidebar footer>div i, .online i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent); }
|
|
|
|
.app-content { min-height: 100vh; margin-left: var(--sidebar); padding-top: var(--topbar); }
|
|
.page { width: min(1440px, 100%); margin: 0 auto; padding: 28px 32px 64px; animation: page-in .22s var(--ease); }
|
|
@keyframes page-in { from { opacity: .75; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
|
.page-title { min-height: 64px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
|
|
.page-title>div:not(.page-title-action) { min-width: 0; }
|
|
.page-title h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
|
|
.page-title p { max-width: 68ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
|
|
.page-title-action { margin-left: auto; }
|
|
.page-back { display: none; }
|
|
|
|
.primary, .secondary, .text-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 11px; font-size: 13px; font-weight: 720; }
|
|
.primary { color: #fff; background: var(--brand); box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 20%, transparent); }
|
|
.primary:hover { background: var(--brand-strong); }
|
|
.secondary { color: var(--text-2); border: 1px solid var(--line); background: var(--surface); }
|
|
.secondary:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
|
|
.text-button { min-height: 36px; padding-inline: 8px; color: var(--brand-strong); background: transparent; }
|
|
.text-button svg { width: 17px; }
|
|
|
|
.home-search { min-height: 84px; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 560px); align-items: center; gap: 28px; margin-bottom: 24px; padding: 16px 18px; border-radius: 16px; background: #17223a; color: #fff; box-shadow: 0 16px 36px rgba(20, 33, 61, .14); }
|
|
.home-search>div { display: flex; align-items: center; gap: 13px; }
|
|
.home-search>div>svg { width: 26px; height: 26px; color: #8eb2ff; }
|
|
.home-search strong, .home-search small { display: block; }
|
|
.home-search strong { margin-bottom: 4px; font-size: 16px; }
|
|
.home-search small { color: #b8c4d8; font-size: 12px; }
|
|
.home-search>button { height: 48px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 0 12px 0 15px; color: #5d6a80; border-radius: 12px; background: #fff; text-align: left; }
|
|
.home-search>button kbd { justify-self: end; background: #f1f4f8; }
|
|
html[data-theme="dark"] .home-search { background: #151e2d; border: 1px solid #26334a; }
|
|
|
|
.content-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
|
|
.filter-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
|
|
.filter-chips button { min-height: 36px; flex: none; padding: 0 13px; color: var(--text-2); border-radius: 10px; background: var(--surface-2); font-size: 12px; font-weight: 700; }
|
|
.filter-chips button.active { color: var(--brand-strong); background: var(--brand-soft); }
|
|
.layout-toggle { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
|
|
.layout-toggle .icon-button { width: 34px; min-width: 34px; height: 34px; border-radius: 9px; }
|
|
.layout-toggle svg { width: 17px; }
|
|
.media-section>header, .search-results>header, .collection-video-list>header, .library-browser>header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
|
|
.media-section>header h1, .media-section>header h2, .search-results>header h1, .library-browser h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
|
|
.media-section>header p, .search-results>header p, .library-browser header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
|
|
.video-grid { display: grid; gap: 22px 16px; }
|
|
.video-grid.columns-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.video-grid.columns-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
|
|
.video-card { min-width: 0; display: block; padding: 0; background: transparent; text-align: left; }
|
|
.video-cover { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 14px; background: #182033; box-shadow: var(--shadow-1); }
|
|
.video-card:hover .scene { transform: scale(1.025); }
|
|
html[data-input="keyboard"] .video-card:focus-visible .video-cover { outline: 3px solid var(--brand); outline-offset: 3px; }
|
|
.video-copy { display: block; padding: 10px 2px 0; }
|
|
.video-copy strong { display: block; overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
|
|
.video-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
|
|
.duration, .quality { position: absolute; z-index: 4; display: inline-flex; align-items: center; height: 22px; padding: 0 6px; color: #fff; border-radius: 6px; background: rgba(5, 10, 20, .76); font-size: 10px; font-weight: 750; backdrop-filter: blur(7px); }
|
|
.duration { right: 7px; bottom: 7px; }.quality { top: 7px; left: 7px; }
|
|
.cover-play { position: absolute; z-index: 4; top: 50%; left: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: #172033; border-radius: 50%; background: rgba(255,255,255,.92); opacity: 0; transform: translate(-50%,-42%); transition: .18s var(--ease); box-shadow: 0 9px 25px rgba(0,0,0,.28); }
|
|
.video-card:hover .cover-play, .video-card:focus-visible .cover-play { opacity: 1; transform: translate(-50%,-50%); }
|
|
.cover-play svg { width: 18px; }
|
|
.watch-progress { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; height: 4px; background: rgba(255,255,255,.34); }
|
|
.watch-progress b { height: 100%; display: block; background: var(--brand); }
|
|
|
|
.scene { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; background: #1b2741; transition: transform .35s var(--ease), filter .2s; }
|
|
.scene b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
|
.scene::before, .scene::after, .scene-light, .scene-depth { content: ""; position: absolute; display: block; pointer-events: none; }
|
|
.scene::after { inset: auto 0 0; height: 38%; background: linear-gradient(transparent, rgba(5,9,18,.54)); }
|
|
.scene-coast { background: linear-gradient(160deg,#7aa9c5 0 42%,#f1a365 43% 57%,#33445d 58%); }
|
|
.scene-coast::before { width: 84px; height: 84px; right: 12%; top: 15%; border-radius: 50%; background:#ffd58b; box-shadow:0 0 36px #ffd58b99; }
|
|
.scene-coast .scene-depth { left:-5%;right:-5%;bottom:-15%;height:46%;transform:skewY(-7deg);background:#1d3148; }
|
|
.scene-city { background: linear-gradient(150deg,#7895b2,#d3b7a0 56%,#29364e); }
|
|
.scene-city::before { inset: 30% 8% 0; background: linear-gradient(90deg,#26344b 0 14%,transparent 14% 20%,#34455f 20% 42%,transparent 42% 47%,#1e2b40 47% 74%,transparent 74% 80%,#33455e 80%); clip-path: polygon(0 22%,14% 22%,14% 0,30% 0,30% 32%,42% 32%,42% 14%,66% 14%,66% 38%,78% 38%,78% 6%,100% 6%,100% 100%,0 100%); }
|
|
.scene-valley { background:linear-gradient(160deg,#8eb9bc 0 46%,#557b67 47% 63%,#243b34 64%); }.scene-valley::before{left:-8%;right:35%;bottom:15%;height:48%;background:#446757;clip-path:polygon(0 100%,40% 30%,55% 50%,72% 5%,100% 100%)}.scene-valley .scene-depth{left:30%;right:-8%;bottom:7%;height:55%;background:#2b5142;clip-path:polygon(0 100%,45% 18%,100% 100%)}
|
|
.scene-cafe { background:linear-gradient(130deg,#564134,#bc8d61 52%,#d7b788); }.scene-cafe::before{width:38%;height:70%;left:10%;top:0;background:#cfe4e8;box-shadow:inset 0 0 0 10px #5d4739;}.scene-cafe .scene-depth{width:30%;height:30%;right:13%;bottom:17%;border-radius:50% 50% 44% 44%;background:#342b28;box-shadow:0 16px 0 #1b1717}
|
|
.scene-snow { background:linear-gradient(160deg,#aabed0 0 47%,#e8eef2 48% 72%,#8796a8 73%); }.scene-snow::before{left:0;right:36%;bottom:24%;height:42%;background:#f8fbfc;clip-path:polygon(0 100%,52% 5%,100% 100%)}.scene-snow .scene-depth{left:35%;right:-4%;bottom:14%;height:50%;background:#dbe6ed;clip-path:polygon(0 100%,48% 0,100% 100%)}
|
|
.scene-island { background:linear-gradient(160deg,#71b6cf 0 52%,#1f8fa0 53% 66%,#e7c17a 67% 73%,#355f4b 74%); }.scene-island::before{width:44%;height:20%;left:28%;bottom:25%;border-radius:50% 55% 36% 45%;background:#3f7858;box-shadow:0 -10px 0 #5f8c62}
|
|
.scene-kitchen { background:linear-gradient(125deg,#9fb1aa,#d5b897 52%,#605244); }.scene-kitchen::before{left:12%;right:12%;bottom:16%;height:18%;background:#463d37;box-shadow:0 -60px 0 -34px #dbd1bd}.scene-kitchen .scene-depth{width:70px;height:70px;left:45%;bottom:20%;border-radius:50%;border:10px solid #d8c5a5}
|
|
.scene-train { background:linear-gradient(155deg,#15233a 0 42%,#754f4c 43% 56%,#0c1424 57%); }.scene-train::before{left:8%;right:8%;top:12%;height:56%;border:9px solid #202837;background:linear-gradient(110deg,#384d68,#d59771);}.scene-train .scene-depth{width:26%;height:12%;right:9%;bottom:18%;background:#f4d27c;filter:blur(12px)}
|
|
.scene-blue { background:linear-gradient(145deg,#4a81b8,#79bad6 52%,#c8dfdf); }.scene-blue::before{left:10%;right:10%;top:10%;bottom:12%;background:linear-gradient(90deg,transparent 0 33%,rgba(255,255,255,.65) 34% 36%,transparent 37% 66%,rgba(255,255,255,.56) 67% 69%,transparent 70%),linear-gradient(rgba(255,255,255,.25),rgba(20,72,112,.3));clip-path:polygon(0 5%,85% 0,100% 100%,8% 92%)}
|
|
.scene-film { background:linear-gradient(145deg,#948570,#c9b28a 54%,#5d5144);filter:saturate(.82);}.scene-film::before{width:42%;height:60%;left:28%;top:15%;border:11px solid #2e2b29;border-radius:10px;background:radial-gradient(circle,#7f9ba4 0 25%,#28343b 26% 40%,#1b1c1d 41%);box-shadow:0 16px 24px #2d261f66}
|
|
.scene-forest { background:linear-gradient(155deg,#86a997 0 35%,#34594b 36% 63%,#182f29 64%); }.scene-forest::before{inset:5% 0 0;background:linear-gradient(100deg,transparent 0 12%,#284238 13% 18%,transparent 19% 36%,#1f3c32 37% 43%,transparent 44% 64%,#345448 65% 72%,transparent 73%)}
|
|
.scene-night { background:linear-gradient(155deg,#111a2c,#263b55 56%,#0b111c);}.scene-night::before{left:8%;right:8%;bottom:14%;height:55%;background:linear-gradient(90deg,#182335 0 25%,transparent 25% 32%,#1b293c 32% 68%,transparent 68% 74%,#131e30 74%);clip-path:polygon(0 18%,30% 18%,30% 0,68% 0,68% 26%,100% 26%,100% 100%,0 100%)}.scene-night .scene-depth{width:8px;height:8px;left:62%;top:38%;border-radius:50%;background:#f5c76a;box-shadow:35px 18px 0 #f5c76a,-80px 34px 0 #e08a68,18px 70px 0 #8fb3e8}
|
|
.scene-portrait1,.scene-portrait2,.scene-portrait3,.scene-portrait4 { background:linear-gradient(145deg,#99b7d8,#d6c5b4);}.scene-portrait2{background:linear-gradient(145deg,#8ea58d,#d1b39f)}.scene-portrait3{background:linear-gradient(145deg,#b79fb8,#d5c4b2)}.scene-portrait4{background:linear-gradient(145deg,#97a8b4,#ceb49e)}.scene-portrait1::before,.scene-portrait2::before,.scene-portrait3::before,.scene-portrait4::before{width:32%;aspect-ratio:1;left:34%;top:18%;border-radius:50%;background:#d4a27f;box-shadow:0 70px 0 26px #34435b}.scene-portrait2::before{box-shadow:0 70px 0 26px #465a46}.scene-portrait3::before{box-shadow:0 70px 0 26px #5c4a60}.scene-portrait4::before{box-shadow:0 70px 0 26px #4a5960}
|
|
.covers-masked .video-cover .scene, .covers-masked .result-cover .scene { filter: blur(18px) saturate(.7); transform: scale(1.12); }
|
|
|
|
.state-layout { min-height: 520px; padding-top: 8px; }
|
|
.skeleton { overflow: hidden; border-radius: 14px; background: var(--surface-2); }
|
|
.skeleton::after { content:""; width:35%;height:100%;display:block;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:shimmer 1.3s infinite; }
|
|
@keyframes shimmer { from{transform:translateX(-110%)}to{transform:translateX(320%)} }
|
|
.hero-skeleton { height: 86px; margin-bottom: 24px; }.skeleton-line{width:34%;height:14px;margin:10px 0}.skeleton-line.wide{width:55%;height:22px}.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}.tile-skeleton{aspect-ratio:16/9}
|
|
.empty-state { min-height: 420px; display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center; }
|
|
.empty-state>span { width:62px;height:62px;display:grid;place-items:center;margin-bottom:18px;color:var(--brand);border-radius:20px;background:var(--brand-soft); }.empty-state>span svg{width:28px;height:28px}.empty-state h2{margin:0 0 8px;font-size:19px}.empty-state p{max-width:48ch;margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.65}.error-state>span{color:var(--danger);background:var(--danger-soft)}
|
|
|
|
.search-page { max-width: 1260px; }
|
|
.search-command { height: 54px; display: grid; grid-template-columns: 22px 1fr auto auto; align-items:center;gap:10px;margin-bottom:18px;padding:0 7px 0 16px;border:1px solid var(--line-strong);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-1) }
|
|
.search-command:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}.search-command input{min-width:0;height:100%;padding:0;border:0;outline:0;color:var(--text);background:transparent;font-size:15px}.image-search{height:40px;display:flex;align-items:center;gap:7px;padding:0 12px;color:var(--text-2);border-radius:10px;background:var(--surface-2);font-size:12px;font-weight:700}.search-command .primary{height:40px;min-height:40px}
|
|
.search-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.mode-tabs{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--surface-2)}.mode-tabs button{min-height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;color:var(--text-2);border-radius:10px;background:transparent;font-size:12px;font-weight:700}.mode-tabs button svg{width:17px}.mode-tabs button.active{color:var(--brand-strong);background:var(--surface);box-shadow:var(--shadow-1)}.filter-trigger{position:relative}.filter-trigger span{min-width:18px;height:18px;display:grid;place-items:center;color:#fff;border-radius:9px;background:var(--brand);font-size:9px}.applied-filters{display:flex;align-items:center;gap:7px;margin-bottom:28px;overflow-x:auto}.applied-filters span{flex:none;padding:6px 9px;color:var(--text-2);border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:11px}.applied-filters button{flex:none;color:var(--brand-strong);background:transparent;font-size:11px;font-weight:700}
|
|
.search-results{max-width:1000px}.result-row{width:100%;display:grid;grid-template-columns:260px minmax(0,1fr) 20px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);background:transparent;text-align:left}.result-row:hover .scene{transform:scale(1.025)}.result-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:13px}.result-cover>b{position:absolute;right:7px;bottom:7px;padding:3px 6px;color:#fff;border-radius:6px;background:rgba(4,8,15,.72);font-size:10px}.result-cover>i{position:absolute;top:50%;left:50%;width:42px;height:42px;display:grid;place-items:center;color:#172033;border-radius:50%;background:rgba(255,255,255,.9);opacity:0;transform:translate(-50%,-40%);transition:.18s}.result-row:hover .result-cover>i,.result-row:focus-visible .result-cover>i{opacity:1;transform:translate(-50%,-50%)}.result-copy{min-width:0}.result-copy>strong{display:block;margin:7px 0 5px;font-size:16px}.result-copy p{margin:0 0 7px;color:var(--text-2);font-size:13px;line-height:1.55}.result-copy small{color:var(--muted);font-size:11px}.match-type{display:flex;align-items:center;gap:6px;color:var(--brand-strong);font-size:11px;font-weight:750}.match-type svg{width:15px}.match-type b{margin-left:3px;padding:3px 6px;border-radius:6px;background:var(--brand-soft);font-size:10px}
|
|
|
|
.overlay { position:fixed;z-index:200;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,13,24,.52);animation:fade-in .16s ease; }
|
|
@keyframes fade-in{from{opacity:0}}
|
|
.sheet{width:min(520px,100%);max-height:min(88vh,760px);padding:20px;overflow-y:auto;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-2);animation:sheet-in .22s var(--ease)}
|
|
@keyframes sheet-in{from{opacity:.7;transform:translateY(12px) scale(.985)}}
|
|
.sheet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.sheet>header h2{margin:0 0 5px;font-size:20px}.sheet>header p{margin:0;color:var(--muted);font-size:12px}.filter-block{margin:18px 0}.filter-block>strong{display:block;margin-bottom:10px;font-size:13px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice-grid button{min-height:44px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-size:12px;text-align:left}.choice-grid button.selected{color:var(--brand-strong);border-color:color-mix(in srgb,var(--brand) 50%,var(--line));background:var(--brand-soft)}.choice-grid svg{width:16px}.filter-block label,.upload-options label,.prototype-panel label,.setting-group>label{display:grid;gap:6px;margin:10px 0;color:var(--text-2);font-size:12px;font-weight:700}.filter-block select,.upload-options select,.upload-options input,.prototype-panel select,.setting-group input,.theme-row select{width:100%;height:44px;padding:0 11px;color:var(--text);border:1px solid var(--line);border-radius:10px;outline:0;background:var(--surface)}.sheet>footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
|
|
|
|
.source-list{display:grid;gap:9px}.source-row{min-height:78px;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto 40px;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.source-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px}.source-icon.blue{color:var(--brand-strong);background:var(--brand-soft)}.source-icon.cyan{color:#087b88;background:#e0f6f7}.source-icon.violet{color:#7851bd;background:#f0eaff}.source-row strong{font-size:14px}.source-row p{margin:4px 0 0;color:var(--muted);font-size:12px}.online{display:flex;align-items:center;gap:8px;color:var(--success);font-size:11px;font-weight:700}.library-browser{margin-top:36px}.folder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.folder-grid button{min-height:110px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left}.folder-grid button:hover{border-color:var(--brand);box-shadow:var(--shadow-1)}.folder-grid span{width:36px;height:36px;display:grid;place-items:center;margin-bottom:13px;color:var(--brand);border-radius:11px;background:var(--brand-soft)}.folder-grid strong,.folder-grid small{display:block}.folder-grid strong{font-size:13px}.folder-grid small{margin-top:4px;color:var(--muted);font-size:11px}
|
|
|
|
.collections-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;align-items:start}.collection-rail{display:grid;gap:5px;padding:7px;border-radius:15px;background:var(--surface)}.collection-rail button{min-width:0;display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;padding:7px;border-radius:11px;background:transparent;text-align:left}.collection-rail button.active{background:var(--brand-soft)}.collection-rail .scene{aspect-ratio:16/10;border-radius:9px}.collection-rail strong,.collection-rail small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-rail strong{font-size:12px}.collection-rail small{margin-top:5px;color:var(--muted);font-size:10px}.collection-detail{min-width:0}.collection-hero{display:grid;grid-template-columns:minmax(240px,40%) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:22px;padding:18px;border-radius:16px;background:var(--surface)}.collection-hero>.scene{aspect-ratio:16/10;border-radius:13px}.collection-hero h2{margin:10px 0 7px;font-size:23px}.collection-hero p{margin:0 0 8px;color:var(--text-2);font-size:13px;line-height:1.6}.collection-hero small{color:var(--muted);font-size:11px}.collection-hero>div>div{display:flex;gap:8px;margin-top:17px}.privacy-pill{display:inline-flex;align-items:center;gap:5px;color:var(--brand-strong);font-size:10px;font-weight:750}.privacy-pill svg{width:14px}.chapter-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px}.chapter-layout>aside{padding:13px;border-radius:14px;background:var(--surface)}.chapter-layout>aside h3{margin:0 0 9px;padding:4px 7px;font-size:13px}.chapter-layout>aside button{width:100%;min-height:42px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:5px;padding:0 7px;border-radius:9px;background:transparent;text-align:left;font-size:11px}.chapter-layout>aside button.active{color:var(--brand-strong);background:var(--brand-soft)}.chapter-layout>aside button span{color:var(--muted);font-size:9px}.chapter-layout>aside button small{color:var(--muted);font-size:9px}.collection-video-list{min-width:0}.collection-video-list h3{margin:0;font-size:16px}.collection-video-list header p{margin:4px 0 0;color:var(--muted);font-size:11px}.collection-video-list>button{width:100%;min-width:0;display:grid;grid-template-columns:24px 112px minmax(0,1fr) 20px;gap:11px;align-items:center;padding:9px;border-bottom:1px solid var(--line);background:transparent;text-align:left}.collection-video-list>button .scene{aspect-ratio:16/9;border-radius:9px}.collection-video-list>button strong,.collection-video-list>button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-video-list>button strong{font-size:12px}.collection-video-list>button small{margin-top:4px;color:var(--muted);font-size:10px}.order{color:var(--muted);font-size:10px;text-align:center}
|
|
|
|
.upload-summary{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:12px 14px;border-radius:15px;background:var(--brand-soft)}.upload-summary>div{display:flex;align-items:center;gap:11px}.summary-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--brand-strong);border-radius:13px;background:var(--surface)}.upload-summary p{margin:0}.upload-summary strong,.upload-summary small{display:block}.upload-summary strong{font-size:13px}.upload-summary small{margin-top:4px;color:var(--muted);font-size:11px}.upload-summary>span{color:var(--brand-strong);font-size:12px;font-weight:750}.segmented{display:flex;gap:4px;margin-bottom:18px;padding:4px;border-radius:13px;background:var(--surface-2)}.segmented button{position:relative;min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;color:var(--text-2);border-radius:10px;background:transparent;font-size:12px;font-weight:700}.segmented button.active{color:var(--brand-strong);background:var(--surface);box-shadow:var(--shadow-1)}.segmented button b{min-width:18px;height:18px;display:grid;place-items:center;color:#fff;border-radius:9px;background:var(--danger);font-size:9px}.transfer-list{display:grid;gap:9px}.transfer-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:15px;border-radius:15px;background:var(--surface)}.transfer-state{width:40px;height:40px;display:grid;place-items:center;color:var(--brand-strong);border-radius:12px;background:var(--brand-soft)}.transfer-item.done .transfer-state{color:var(--success);background:var(--success-soft)}.transfer-item.failed .transfer-state{color:var(--danger);background:var(--danger-soft)}.transfer-copy>header{display:flex;justify-content:space-between;gap:12px}.transfer-copy>header strong{font-size:13px}.transfer-copy>header span,.transfer-copy>p{color:var(--muted);font-size:11px}.transfer-copy>p{margin:5px 0 13px}.stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px}.stage-row span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.stage-row i{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-style:normal;font-size:9px}.stage-row span.done{color:var(--success)}.stage-row span.done i{color:#fff;border-color:var(--success);background:var(--success)}.progress{height:6px;overflow:hidden;border-radius:4px;background:var(--surface-3)}.progress i{height:100%;display:block;border-radius:inherit;background:var(--brand)}.transfer-item.failed .progress i{background:var(--danger)}.transfer-copy>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}.transfer-copy>footer>span strong,.transfer-copy>footer>span small{display:block}.transfer-copy>footer>span strong{font-size:11px}.transfer-copy>footer>span small{margin-top:4px;color:var(--muted);font-size:10px}.transfer-copy>footer>div{display:flex;align-items:center;gap:5px}
|
|
|
|
.tag-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.tag-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tag-groups article{padding:14px;border-radius:15px;background:var(--surface)}.tag-groups article>header{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}.tag-groups h2{margin:0;font-size:15px}.tag-groups p{margin:4px 0 0;color:var(--muted);font-size:10px}.tag-groups article>div>button{width:100%;min-height:44px;display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:8px;border-top:1px solid var(--line);background:transparent;text-align:left;font-size:12px}.tag-groups article>div small{color:var(--muted);font-size:10px}.tag-groups article>div svg{width:16px}.suggestion-panel{position:sticky;top:calc(var(--topbar) + 20px);padding:22px;border-radius:16px;background:#17223a;color:#fff}.suggestion-panel>span{width:42px;height:42px;display:grid;place-items:center;margin-bottom:20px;color:#9bb8ff;border-radius:14px;background:#293653}.suggestion-panel h2{margin:0 0 9px;font-size:17px}.suggestion-panel p{margin:0 0 19px;color:#bcc8da;font-size:12px;line-height:1.65}
|
|
.people-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.search-small{height:42px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.search-small input{width:220px;border:0;outline:0;color:var(--text);background:transparent}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.people-grid button{min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:9px;border-radius:14px;background:var(--surface);text-align:left}.people-grid button:hover{box-shadow:var(--shadow-1)}.people-grid .scene{aspect-ratio:1;border-radius:12px}.people-grid strong,.people-grid small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-grid strong{font-size:13px}.people-grid small{margin-top:5px;color:var(--muted);font-size:10px}
|
|
|
|
.profile-identity{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:16px;border-radius:16px;background:var(--surface)}.avatar-large{width:62px;height:62px;display:grid;place-items:center;color:#fff;border-radius:50%;background:linear-gradient(145deg,#2b6df6,#7796e6);font-size:20px;font-weight:800}.profile-identity h2{margin:0 0 5px;font-size:20px}.profile-identity p{margin:0;color:var(--muted);font-size:11px}.profile-identity button{margin-left:auto}.profile-tabs{max-width:620px}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 30px}.profile-stats article{display:flex;align-items:center;gap:12px;padding:15px;border-radius:14px;background:var(--surface)}.profile-stats article>svg{color:var(--brand)}.profile-stats strong,.profile-stats small{display:block}.profile-stats strong{font-size:20px}.profile-stats small{margin-top:2px;color:var(--muted);font-size:11px}.continue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.settings-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.setting-group{padding:17px;border-radius:15px;background:var(--surface)}.setting-group>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.setting-group h2,.setting-group h3{margin:0 0 5px;font-size:16px}.setting-group header p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.preference{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 0;border-top:1px solid var(--line);background:transparent;text-align:left}.preference strong,.preference small{display:block}.preference strong{font-size:12px}.preference small{margin-top:4px;color:var(--muted);font-size:10px}.preference>i{width:42px;height:24px;flex:none;padding:3px;border-radius:12px;background:var(--surface-3);transition:.18s}.preference>i b{width:18px;height:18px;display:block;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.22);transition:.18s}.preference>i.on{background:var(--brand)}.preference>i.on b{transform:translateX(18px)}.theme-row{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line)}.theme-row strong,.theme-row small{display:block}.theme-row strong{font-size:12px}.theme-row small{margin-top:4px;color:var(--muted);font-size:10px}.theme-row select{width:130px}
|
|
|
|
.settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:start}.settings-layout>nav{display:grid;gap:4px;padding:7px;border-radius:14px;background:var(--surface)}.settings-layout>nav button{min-height:44px;display:grid;grid-template-columns:22px 1fr 18px;gap:7px;align-items:center;padding:0 9px;color:var(--text-2);border-radius:10px;background:transparent;text-align:left;font-size:11px}.settings-layout>nav button span{color:var(--muted);font-size:9px}.settings-layout>nav button svg{width:15px}.settings-layout>nav button.active{color:var(--brand-strong);background:var(--brand-soft);font-weight:750}.settings-content>header{margin-bottom:17px}.settings-content>header h2{margin:0;font-size:20px}.settings-content>header p{margin:6px 0 0;color:var(--muted);font-size:12px}.model-group{margin-bottom:12px}.ready-status{display:flex;align-items:center;gap:6px;color:var(--success);font-size:10px;font-weight:700}.ready-status svg{width:15px}.model-row{min-height:64px;display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:10px;align-items:center;border-top:1px solid var(--line)}.model-row>span{width:36px;height:36px;display:grid;place-items:center;color:var(--brand);border-radius:11px;background:var(--brand-soft)}.model-row strong,.model-row small{display:block}.model-row strong{font-size:12px}.model-row small{margin-top:4px;color:var(--muted);font-size:10px}.model-row>b{display:flex;align-items:center;gap:5px;color:var(--success);font-size:10px}.model-row>b svg{width:14px}.device-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center}.device-card>span:first-child{width:40px;height:40px;display:grid;place-items:center;color:var(--brand);border-radius:12px;background:var(--brand-soft)}.device-card strong,.device-card small{display:block}.device-card strong{font-size:12px}.device-card small{margin-top:4px;color:var(--muted);font-size:10px}.advanced{margin-top:12px;padding:14px;border-radius:14px;background:var(--surface)}.advanced summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:750}.advanced summary svg{width:16px}.advanced p{margin:12px 0 0;color:var(--muted);font-size:11px}.storage-overview{padding:18px;border-radius:15px;background:var(--surface)}.storage-overview span,.storage-overview strong,.storage-overview small{display:block}.storage-overview span{font-size:11px}.storage-overview strong{margin:6px 0 2px;font-size:28px}.storage-overview small{color:var(--muted);font-size:10px}.storage-overview>i{height:8px;display:block;margin-top:16px;overflow:hidden;border-radius:5px;background:var(--surface-3)}.storage-overview>i b{height:100%;display:block;background:var(--brand)}.storage-list{margin-top:12px;padding:8px 16px;border-radius:15px;background:var(--surface)}.storage-list>div{min-height:50px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px}.storage-list>div:last-child{border:0}
|
|
|
|
.player-page{min-height:100vh;margin-left:calc(-1 * var(--sidebar));padding-top:0;background:var(--bg)}.page-player .topbar,.page-player .sidebar{display:none}.page-player .app-content{margin-left:0;padding-top:0}.player-stage{position:relative;width:100%;height:min(72vh,820px);min-height:520px;overflow:hidden;color:#fff;background:#06080c;user-select:none}.player-stage>.scene{position:absolute;inset:0}.player-stage .scene::after{display:none}.player-shade{position:absolute;inset:0;background:linear-gradient(rgba(2,4,8,.5),transparent 25%,transparent 55%,rgba(2,4,8,.76));pointer-events:none}.player-stage>header{position:absolute;z-index:6;top:0;right:0;left:0;display:flex;align-items:center;gap:10px;padding:18px 22px;opacity:1;transition:.2s}.player-stage>header>span{flex:1}.player-stage>header .icon-button{color:#fff}.player-stage>header .icon-button:hover,.player-stage>header .icon-button.active{background:rgba(255,255,255,.15)}.player-center{position:absolute;z-index:5;top:50%;left:50%;display:flex;align-items:center;gap:24px;transform:translate(-50%,-50%);transition:.2s}.player-center>button{width:54px;height:54px;display:grid;place-items:center;color:#fff;border-radius:50%;background:rgba(12,17,26,.58);backdrop-filter:blur(9px)}.player-center .main-play{width:70px;height:70px;color:#111b2b;background:rgba(255,255,255,.94)}.player-center .main-play svg{width:28px;height:28px}.buffering{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.buffering svg{width:32px;height:32px;animation:spin 1s linear infinite}.buffering strong{font-size:14px}.buffering small{color:#c8d1df;font-size:11px}@keyframes spin{to{transform:rotate(360deg)}}.player-stage>footer{position:absolute;z-index:6;right:22px;bottom:16px;left:22px;opacity:1;transition:.2s}.timeline{position:relative;height:18px}.timeline>.buffered,.timeline>.played{position:absolute;top:7px;left:0;height:4px;border-radius:3px;pointer-events:none}.timeline>.buffered{background:rgba(255,255,255,.45)}.timeline>.played{background:var(--brand)}.timeline input{position:absolute;z-index:2;inset:0;width:100%;height:18px;margin:0;opacity:.001;cursor:pointer}.timeline>button{position:absolute;z-index:3;top:3px;width:11px;height:11px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--brand);transform:translateX(-50%)}.player-controls-row{display:flex;align-items:center;gap:6px}.player-controls-row>span{font-size:11px}.player-controls-row .spacer{flex:1}.player-controls-row>button:not(.icon-button){height:38px;display:flex;align-items:center;gap:6px;padding:0 10px;color:#fff;border-radius:9px;background:transparent;font-size:11px}.player-controls-row>button:hover,.player-controls-row>button.active{background:rgba(255,255,255,.15)}.player-controls-row svg{width:18px}.controls-hidden>header,.controls-hidden>footer,.controls-hidden .player-center{opacity:0;pointer-events:none}.player-drawer{position:absolute;z-index:8;top:64px;right:18px;width:min(380px,calc(100% - 36px));max-height:calc(100% - 132px);padding:14px;overflow:auto;color:var(--text);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-2);animation:drawer-in .2s var(--ease)}@keyframes drawer-in{from{opacity:.5;transform:translateX(12px)}}.player-drawer>header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px}.player-drawer h2{margin:0;font-size:16px}.player-drawer header p{margin:4px 0 0;color:var(--muted);font-size:10px}.player-drawer>button{width:100%;min-height:48px;display:grid;grid-template-columns:50px 1fr 18px;align-items:center;gap:8px;border-top:1px solid var(--line);background:transparent;text-align:left}.player-drawer>button span{color:var(--brand-strong);font-size:10px}.player-drawer>button strong{font-size:11px}.player-drawer>.add-marker{display:flex;justify-content:center;color:#fff;border:0;border-radius:10px;background:var(--brand);font-size:11px;font-weight:750}.player-drawer.directory>button{grid-template-columns:24px 68px minmax(0,1fr) auto}.player-drawer.directory .scene{aspect-ratio:16/9;border-radius:7px}.player-drawer.directory>button small{color:var(--muted);font-size:9px}.player-details{width:min(1180px,100%);margin:0 auto;padding:22px 26px 60px}.player-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid var(--line)}.player-title-row h1{margin:0 0 6px;font-size:22px}.player-title-row p{margin:0;color:var(--muted);font-size:11px}.player-title-row>div:last-child{display:flex;gap:5px}.player-title-row>div:last-child button{min-height:42px;display:flex;align-items:center;gap:6px;padding:0 11px;border-radius:10px;background:var(--surface-2);font-size:11px}.player-title-row svg{width:17px}.video-info{padding:16px 0}.video-info p{max-width:75ch;margin:0 0 12px;color:var(--text-2);font-size:13px;line-height:1.65}.video-info div{display:flex;gap:6px}.video-info span{padding:5px 8px;border-radius:7px;background:var(--surface-2);font-size:10px}.in-video-search{display:grid;grid-template-columns:minmax(250px,1fr) minmax(320px,520px);gap:24px;align-items:center;padding:17px;border-radius:15px;background:var(--surface)}.in-video-search>header{display:flex;align-items:center;gap:11px}.in-video-search>header>span{width:40px;height:40px;display:grid;place-items:center;color:var(--brand);border-radius:12px;background:var(--brand-soft)}.in-video-search h2{margin:0 0 4px;font-size:14px}.in-video-search p{margin:0;color:var(--muted);font-size:10px}.in-video-search>div{height:44px;display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:0 5px 0 12px;border:1px solid var(--line);border-radius:11px}.in-video-search input{min-width:0;border:0;outline:0;color:var(--text);background:transparent}
|
|
|
|
.upload-sheet{width:min(560px,100%)}.drop-zone{width:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--surface-2)}.drop-zone:hover{border-color:var(--brand);background:var(--brand-soft)}.drop-zone>span{width:48px;height:48px;display:grid;place-items:center;margin-bottom:13px;color:var(--brand);border-radius:15px;background:var(--surface)}.drop-zone strong{font-size:14px}.drop-zone small{margin-top:6px;color:var(--muted);font-size:11px}.upload-options{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin-top:14px}.upload-options label:first-child{grid-column:1/-1}.selected-upload{display:grid;grid-template-columns:46px 1fr 22px;gap:11px;align-items:center;padding:13px;border-radius:13px;background:var(--surface-2)}.selected-upload>span{width:44px;height:44px;display:grid;place-items:center;color:var(--brand);border-radius:12px;background:var(--surface)}.selected-upload strong,.selected-upload small{display:block}.selected-upload strong{font-size:12px}.selected-upload small{margin-top:5px;color:var(--muted);font-size:10px}.selected-upload>svg{color:var(--success)}.progress.large{height:8px;margin-top:18px}.uploading-copy{margin:9px 0;color:var(--muted);font-size:11px}
|
|
|
|
.mobile-only,.bottom-nav{display:none}.more-sheet{align-self:flex-end;width:100%;max-width:none;border-radius:20px 20px 0 0}.more-sheet .handle{width:38px;height:4px;display:block;margin:-8px auto 12px;border-radius:3px;background:var(--line-strong)}.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.more-grid button{position:relative;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:13px;background:transparent}.more-grid button:hover{background:var(--surface-2)}.more-grid button>span{width:40px;height:40px;display:grid;place-items:center;color:var(--brand-strong);border-radius:13px;background:var(--brand-soft)}.more-grid strong{font-size:11px}.more-grid b{position:absolute;top:8px;right:25%;min-width:18px;height:18px;display:grid;place-items:center;color:#fff;border-radius:9px;background:var(--danger);font-size:9px}.logout{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;color:var(--danger);border-top:1px solid var(--line);background:transparent;font-size:11px;font-weight:700}
|
|
|
|
.prototype-panel{position:fixed;z-index:170;right:16px;bottom:16px}.prototype-toggle{height:38px;display:flex;align-items:center;gap:7px;padding:0 11px;color:#fff;border-radius:11px;background:#17223a;box-shadow:var(--shadow-2);font-size:11px;font-weight:750}.prototype-toggle svg{width:16px}.prototype-panel>div{position:absolute;right:0;bottom:46px;width:250px;padding:14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-2)}.prototype-panel>div>header{margin-bottom:11px}.prototype-panel>div>header strong,.prototype-panel>div>header small{display:block}.prototype-panel>div>header strong{font-size:13px}.prototype-panel>div>header small{margin-top:4px;color:var(--muted);font-size:9px}.prototype-panel label{margin:9px 0}.prototype-panel select{height:38px}.toast{position:fixed;z-index:260;right:18px;top:78px;min-height:44px;display:flex;align-items:center;gap:8px;padding:9px 13px;color:#fff;border-radius:11px;background:#17223a;box-shadow:var(--shadow-2);font-size:12px;font-weight:700;animation:toast-in .22s var(--ease)}.toast svg{width:17px;color:#78ddb6}@keyframes toast-in{from{opacity:0;transform:translateY(-9px)}}
|
|
|
|
@media (max-width: 1100px) {
|
|
:root{--sidebar:196px}.topbar{grid-template-columns:var(--sidebar) minmax(240px,520px) 1fr;gap:15px}.video-grid.columns-2{grid-template-columns:repeat(3,1fr)}.collections-layout{grid-template-columns:230px minmax(0,1fr)}.collection-rail button{grid-template-columns:62px minmax(0,1fr)}.tag-layout{grid-template-columns:1fr}.suggestion-panel{position:static}.people-grid{grid-template-columns:repeat(2,1fr)}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
:root{--sidebar:78px}.brand strong,.brand small,.sidebar nav p,.sidebar nav button span,.sidebar footer span{display:none}.topbar{grid-template-columns:var(--sidebar) minmax(220px,1fr) auto}.sidebar nav button,.sidebar footer>button{justify-content:center;padding:0}.sidebar nav button b{position:absolute;top:4px;right:5px}.video-grid.columns-2{grid-template-columns:repeat(2,1fr)}.folder-grid{grid-template-columns:repeat(2,1fr)}.collections-layout{grid-template-columns:1fr}.collection-rail{display:flex;overflow-x:auto}.collection-rail button{min-width:210px}.profile-stats{grid-template-columns:repeat(2,1fr)}.settings-columns{grid-template-columns:1fr}.player-title-row{flex-direction:column}.in-video-search{grid-template-columns:1fr}.search-command{grid-template-columns:22px 1fr auto}.image-search{font-size:0}.image-search svg{width:20px}.search-command>.primary{display:none}
|
|
.image-search { gap: 0; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
:root{--topbar:58px}.topbar{grid-template-columns:1fr auto;height:58px;padding:0 14px;border-bottom:0}.brand-mark{width:32px;height:27px}.brand strong{display:block;font-size:16px}.brand small,.top-search{display:none}.top-actions .icon-button:first-child{display:none}.sidebar{display:none}.app-content{margin-left:0;padding-top:var(--topbar);padding-bottom:calc(72px + env(safe-area-inset-bottom))}.secondary-page .topbar,.page-search .topbar,.page-profile .topbar{display:none}.secondary-page .app-content,.page-search .app-content,.page-profile .app-content{padding-top:0}.page{padding:15px 14px 30px}.page-title{position:sticky;z-index:35;top:0;min-height:58px;align-items:center;margin:0 -14px 16px;padding:7px 10px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px)}.page-title h1{font-size:18px}.page-title p{display:none}.page-back{display:grid}.page-title-action{margin-left:auto}.page-title-action .primary{width:44px;min-width:44px;height:44px;padding:0;font-size:0}.page-title-action .primary svg{margin:0}.home-page{padding-top:14px}.home-search{grid-template-columns:1fr;gap:12px;min-height:0;margin-bottom:14px;padding:14px}.home-search>div>svg{width:22px}.home-search strong{font-size:14px}.home-search>button{height:44px}.home-search>button kbd{display:none}.content-toolbar{margin-bottom:10px}.filter-chips{margin-right:auto}.layout-toggle .icon-button{width:36px;min-width:36px;height:36px}.media-section>header{align-items:center}.media-section>header h1,.media-section>header h2{font-size:18px}.video-grid{gap:18px 10px}.video-grid.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.video-grid.columns-1{grid-template-columns:1fr}.video-copy{padding-top:8px}.video-copy strong{font-size:13px}.video-copy small{font-size:11px}.video-cover{border-radius:11px}.cover-play{display:none}.bottom-nav{position:fixed;z-index:120;right:0;bottom:0;left:0;height:calc(64px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);padding:4px 6px max(4px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px)}.bottom-nav>button{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);background:transparent;font-size:9px;font-weight:700}.bottom-nav>button svg{width:21px}.bottom-nav>button.active{color:var(--brand-strong)}.bottom-nav .upload-fab{position:relative;color:var(--text)}.upload-fab>span{position:absolute;bottom:23px;width:48px;height:48px;display:grid;place-items:center;color:#fff;border:5px solid var(--surface);border-radius:17px;background:var(--brand);box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 30%,transparent)}.upload-fab>b{position:absolute;bottom:1px;font-size:9px}.mobile-only{display:flex}.overlay.mobile-only{padding:0}.prototype-panel{right:10px;bottom:calc(75px + env(safe-area-inset-bottom))}.prototype-toggle{width:38px;padding:0;justify-content:center;font-size:0}.prototype-panel.open .prototype-toggle{width:auto;padding:0 11px;font-size:11px}.toast{top:10px;right:10px;left:10px;justify-content:center}.search-page{padding-top:0}.search-command{position:relative;height:48px;grid-template-columns:20px 1fr 42px;margin:0 0 12px;padding-right:4px;border-radius:12px}.search-command>.primary{display:none}.image-search{width:40px;padding:0;justify-content:center}.search-toolbar{align-items:flex-start}.mode-tabs{min-width:0;overflow-x:auto}.mode-tabs button{min-width:max-content;min-height:40px;padding:0 11px}.filter-trigger{width:44px;min-width:44px;padding:0;font-size:0}.filter-trigger span{position:absolute;top:-4px;right:-4px}.applied-filters{margin-bottom:20px}.result-row{grid-template-columns:42% minmax(0,1fr);gap:11px;padding:11px 0}.result-row>svg{display:none}.result-copy>strong{margin:5px 0 3px;font-size:13px}.result-copy p{display:-webkit-box;margin-bottom:4px;overflow:hidden;font-size:11px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.result-copy small{font-size:9px}.match-type{font-size:9px}.result-cover>i{display:none}.sheet{align-self:flex-end;width:100%;max-height:88dvh;border-radius:20px 20px 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom))}.sheet>header .icon-button{width:44px;height:44px}.choice-grid button{min-height:48px}.source-row{grid-template-columns:44px minmax(0,1fr) auto;padding:11px 4px}.source-row>.online{display:none}.source-row>.secondary{width:44px;min-width:44px;padding:0;font-size:0}.source-row>.icon-button{display:none}.folder-grid{grid-template-columns:repeat(2,1fr);gap:8px}.folder-grid button{min-height:100px}.collection-rail{margin-right:-14px;margin-left:-14px;padding-right:14px;padding-left:14px;border-radius:0}.collection-rail button{min-width:195px}.collection-hero{grid-template-columns:1fr;padding:12px}.collection-hero>.scene{aspect-ratio:16/9}.collection-hero h2{font-size:20px}.chapter-layout{grid-template-columns:1fr}.chapter-layout>aside{display:flex;overflow-x:auto}.chapter-layout>aside h3{display:none}.chapter-layout>aside button{min-width:150px}.collection-video-list>button{grid-template-columns:20px 90px minmax(0,1fr)}.collection-video-list>button>svg{display:none}.upload-summary{align-items:flex-start}.upload-summary>span{display:none}.segmented{overflow-x:auto}.segmented button{min-width:max-content;min-height:44px;flex:1}.transfer-item{grid-template-columns:38px minmax(0,1fr);padding:12px 10px}.transfer-state{width:36px;height:36px}.transfer-copy>header{display:block}.transfer-copy>header span{display:block;margin-top:3px}.stage-row{grid-template-columns:1fr;gap:5px}.transfer-copy>footer{align-items:flex-end}.transfer-copy>footer>div .secondary{min-width:44px;padding:0 10px}.tag-layout{grid-template-columns:1fr}.tag-groups{grid-template-columns:1fr}.suggestion-panel{padding:18px}.people-toolbar .search-small{flex:1}.search-small input{width:100%}.people-toolbar>.secondary{width:44px;padding:0;font-size:0}.people-grid{grid-template-columns:1fr}.people-grid button{min-height:84px;grid-template-columns:66px minmax(0,1fr) 20px}.profile-identity{padding:12px}.avatar-large{width:52px;height:52px}.profile-identity button{width:44px;padding:0;font-size:0}.profile-tabs{margin-right:-14px;margin-left:-14px;padding-right:14px;padding-left:14px;overflow-x:auto;border-radius:0}.profile-tabs button{min-width:max-content;min-height:44px}.profile-stats{gap:7px}.profile-stats article{padding:11px;gap:8px}.profile-stats strong{font-size:17px}.continue-grid{grid-template-columns:repeat(2,1fr);gap:10px}.settings-layout{grid-template-columns:1fr}.settings-layout>nav{display:flex;margin-right:-14px;margin-left:-14px;padding-right:14px;padding-left:14px;overflow-x:auto;border-radius:0}.settings-layout>nav button{min-width:max-content;grid-template-columns:auto auto;min-height:44px}.settings-layout>nav button svg{display:none}.settings-content>header{display:none}.model-row{grid-template-columns:38px minmax(0,1fr) auto}.model-row>b{display:none}.model-row>.secondary{width:44px;padding:0;font-size:0}.device-card{grid-template-columns:42px 1fr}.device-card>.online{grid-column:2}.player-page{margin-left:0}.page-player .app-content{padding-bottom:0}.player-stage{height:auto;min-height:0;aspect-ratio:16/9}.player-stage>header{padding:8px}.player-stage>header strong{max-width:58%;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.player-stage>header .icon-button{width:42px;height:42px}.player-center{gap:12px}.player-center>button{width:44px;height:44px}.player-center .main-play{width:56px;height:56px}.player-stage>footer{right:8px;bottom:6px;left:8px}.player-controls-row>span{font-size:9px}.player-controls-row>button:not(.icon-button){width:40px;padding:0;justify-content:center;font-size:0}.player-controls-row .icon-button{width:36px;min-width:36px;height:36px}.player-controls-row .player-spacer{flex:1}.player-controls-row>button:nth-last-child(2){display:none}.player-drawer{position:fixed;z-index:210;top:auto;right:0;bottom:0;left:0;width:100%;max-height:58dvh;padding:14px 14px max(18px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0}.player-drawer>button{min-height:52px}.player-details{padding:16px 14px 34px}.player-title-row{gap:13px}.player-title-row h1{font-size:18px}.player-title-row>div:last-child{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.player-title-row>div:last-child button{min-width:0;min-height:52px;flex-direction:column;justify-content:center;gap:3px;padding:0;font-size:9px}.player-title-row>div:last-child svg{width:19px}.video-info{padding:14px 0}.in-video-search{gap:12px;padding:13px}.in-video-search>div{grid-template-columns:18px 1fr 62px}.upload-options{grid-template-columns:1fr}.upload-options label:first-child{grid-column:auto}.upload-sheet footer .secondary,.upload-sheet footer .primary{min-height:44px;flex:1}.more-sheet{max-height:min(78dvh,680px)}.more-sheet>header{align-items:center}.more-sheet>header h2{margin:0}.more-grid button{min-height:88px}.prototype-panel>div{position:fixed;right:10px;bottom:calc(124px + env(safe-area-inset-bottom));left:10px;width:auto}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.page-title-action .primary,
|
|
.filter-trigger,
|
|
.source-row > .secondary,
|
|
.people-toolbar > .secondary,
|
|
.profile-identity > .secondary,
|
|
.model-row > .secondary,
|
|
.prototype-toggle,
|
|
.player-controls-row > button:not(.icon-button) {
|
|
gap: 0;
|
|
}
|
|
|
|
.prototype-panel.open .prototype-toggle {
|
|
gap: 7px;
|
|
}
|
|
|
|
.filter-chips button,
|
|
.mode-tabs button,
|
|
.applied-filters button,
|
|
.text-button,
|
|
.image-search,
|
|
.player-controls-row>button:not(.icon-button) {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.layout-toggle .icon-button,
|
|
.player-controls-row .icon-button,
|
|
.player-stage>header .icon-button {
|
|
width: 44px;
|
|
min-width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.upload-fab>b {
|
|
right: 50%;
|
|
bottom: 1px;
|
|
width: 44px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
transform: translateX(50%);
|
|
}
|
|
|
|
.model-row>.secondary {
|
|
width: 44px;
|
|
min-width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
color: var(--text-2);
|
|
border-color: var(--line);
|
|
background: transparent;
|
|
font-size: 0;
|
|
}
|
|
|
|
.model-row>.secondary::before {
|
|
content: "•••";
|
|
font-size: 12px;
|
|
letter-spacing: 2px;
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
.timeline {
|
|
height: 44px;
|
|
margin-bottom: -8px;
|
|
}
|
|
|
|
.timeline>.buffered,
|
|
.timeline>.played {
|
|
top: 20px;
|
|
}
|
|
|
|
.timeline input {
|
|
height: 44px;
|
|
}
|
|
|
|
.timeline>button {
|
|
top: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.timeline>button::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
width: 11px;
|
|
height: 11px;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
background: var(--brand);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.home-search>div small{font-size:11px}.filter-chips button{padding:0 11px}.video-copy strong{font-size:12px}.video-copy small{font-size:10px}.result-row{grid-template-columns:44% minmax(0,1fr)}.result-copy small{display:none}.profile-stats article>svg{width:18px}.profile-stats small{font-size:9px}.more-grid{gap:3px}.more-grid button{min-height:82px}.player-controls-row>.icon-button:nth-of-type(2){display:none}
|
|
}
|
|
|
|
/* Player v2: one media surface, context-specific controls. */
|
|
body.player-panel-open { overflow: hidden; }
|
|
.player-page { min-height: 100vh; margin-left: 0; overflow: hidden; background: var(--bg); }
|
|
.player-layout { width: min(1360px, 100%); margin: 0 auto; padding: 20px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; gap: 16px; }
|
|
.player-stage.player-stage-v2 { position: relative; isolation: isolate; grid-column: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 14px; background: #05080e; }
|
|
.player-stage-v2 video { width: 100%; height: 100%; object-fit: contain; background: #05080e; }
|
|
.player-stage-v2>.scene { position: absolute; z-index: 1; inset: 0; }
|
|
.player-stage-v2 .player-shade { z-index: 2; background: linear-gradient(rgba(3,7,14,.62), transparent 24%, transparent 54%, rgba(3,7,14,.88)); }
|
|
.player-tap-surface { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0; background: transparent; cursor: default; }
|
|
.player-topbar { position: absolute; z-index: 6; top: 0; right: 0; left: 0; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px 22px; opacity: 1; transform: translateY(0); transition: opacity .18s var(--ease), transform .22s var(--ease); }
|
|
.player-topbar>div { min-width: 0; flex: 0 1 360px; }
|
|
.player-topbar strong, .player-topbar small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.player-topbar strong { max-width: 52vw; color: #fff; font-size: 14px; }
|
|
.player-topbar small { margin-top: 4px; color: #d2dbea; font-size: 10px; }
|
|
.player-topbar>span { flex: 1; }
|
|
.player-stage-v2 .player-topbar .icon-button { width: 44px; min-width: 44px; height: 44px; color: #fff; border-radius: 12px; background: rgba(7,12,22,.32); }
|
|
.player-stage-v2 .player-topbar .icon-button:hover, .player-stage-v2 .player-topbar .icon-button.active { background: rgba(255,255,255,.16); }
|
|
.player-stage-v2 .player-center { z-index: 5; gap: 20px; }
|
|
.player-stage-v2 .player-center>button { width: 56px; height: 56px; background: rgba(7,12,22,.58); transition: background .16s var(--ease), transform .16s var(--ease); }
|
|
.player-stage-v2 .player-center>button:hover { background: rgba(7,12,22,.78); transform: scale(1.04); }
|
|
.player-stage-v2 .player-center .main-play { width: 72px; height: 72px; background: rgba(255,255,255,.96); }
|
|
.player-stage-v2 .buffering { min-width: 170px; padding: 18px 22px; border-radius: 16px; background: rgba(7,12,22,.64); backdrop-filter: blur(10px); }
|
|
.player-bottombar { position: absolute; z-index: 6; right: 22px; bottom: 14px; left: 22px; opacity: 1; transform: translateY(0); transition: opacity .18s var(--ease), transform .22s var(--ease); }
|
|
.player-stage-v2 .timeline { position: relative; height: 32px; margin-bottom: 2px; }
|
|
.player-stage-v2 .timeline>i { position: absolute; top: 14px; left: 0; height: 4px; border-radius: 4px; pointer-events: none; }
|
|
.player-stage-v2 .timeline>.track { width: 100%; background: rgba(255,255,255,.22); }
|
|
.player-stage-v2 .timeline>.buffered { background: rgba(255,255,255,.48); }
|
|
.player-stage-v2 .timeline>.played { background: var(--brand); }
|
|
.player-stage-v2 .timeline input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 32px; margin: 0; opacity: .001; cursor: pointer; }
|
|
.player-stage-v2 .timeline>button { position: absolute; z-index: 3; top: 0; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); }
|
|
.player-stage-v2 .timeline>button::after { content: ""; position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 3px 8px rgba(0,0,0,.28); }
|
|
.player-stage-v2 .player-controls-row { min-height: 44px; gap: 4px; }
|
|
.player-stage-v2 .player-controls-row .icon-button { width: 44px; min-width: 44px; height: 44px; color: #fff; }
|
|
.player-stage-v2 .player-controls-row>button:not(.icon-button) { width: auto; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: #fff; border-radius: 11px; background: transparent; font-size: 12px; font-weight: 700; }
|
|
.player-stage-v2 .player-controls-row>button:hover, .player-stage-v2 .player-controls-row>button.active { background: rgba(255,255,255,.15); }
|
|
.player-stage-v2 .player-controls-row svg { width: 19px; height: 19px; }
|
|
.player-time { color: #fff; font-variant-numeric: tabular-nums; }
|
|
.player-time i { margin: 0 3px; color: #aeb9c9; font-style: normal; }
|
|
.player-stage-v2.controls-hidden .player-topbar { opacity: 0; pointer-events: none; transform: translateY(-8px); }
|
|
.player-stage-v2.controls-hidden .player-bottombar { opacity: 0; pointer-events: none; transform: translateY(8px); }
|
|
.player-stage-v2.controls-hidden .player-center { opacity: 0; pointer-events: none; }
|
|
.player-panel-scrim { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(2,5,10,.3); }
|
|
.player-stage-v2 .player-drawer { z-index: 8; top: 76px; right: 18px; width: min(390px, calc(100% - 36px)); max-height: calc(100% - 154px); outline: 0; box-shadow: 0 18px 50px rgba(0,0,0,.34); }
|
|
.panel-handle { display: none; }
|
|
.player-drawer.directory>button.active { background: var(--brand-soft); }
|
|
.player-topbar .directory-toggle { display: none; }
|
|
.player-side-panel { grid-column: 2; grid-row: 1 / span 2; min-height: 100%; height: auto; align-self: stretch; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
|
|
.player-side-panel>header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
|
|
.player-side-panel h2 { margin: 0 0 4px; font-size: 15px; }
|
|
.player-side-panel header p { margin: 0; color: var(--muted); font-size: 10px; }
|
|
.player-side-panel header>span { flex: none; color: var(--brand-strong); font-size: 10px; font-weight: 700; }
|
|
.player-queue { flex: none; padding: 7px; }
|
|
.player-queue>button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px; border-radius: 10px; background: transparent; text-align: left; }
|
|
.player-queue>button:hover { background: var(--surface-2); }
|
|
.player-queue>button.active { color: var(--brand-strong); background: var(--brand-soft); }
|
|
.player-queue>button>span { color: var(--muted); font-size: 10px; text-align: center; }
|
|
.player-queue .scene { aspect-ratio: 16 / 9; border-radius: 7px; }
|
|
.player-queue strong, .player-queue small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.player-queue strong { font-size: 11px; }
|
|
.player-queue small { margin-top: 5px; color: var(--muted); font-size: 9px; }
|
|
.player-recommendations { padding: 4px 7px 9px; border-top: 1px solid var(--line); }
|
|
.player-recommendations-title { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 7px; }
|
|
.player-recommendations-title h3 { margin: 0; font-size: 13px; }
|
|
.player-recommendations-title span { color: var(--muted); font-size: 9px; }
|
|
.player-recommendations-list>button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px; border-radius: 10px; background: transparent; text-align: left; }
|
|
.player-recommendations-list>button:hover { background: var(--surface-2); }
|
|
.player-recommendations-list .scene { aspect-ratio: 16 / 9; border-radius: 7px; }
|
|
.player-recommendations-list strong, .player-recommendations-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.player-recommendations-list strong { font-size: 11px; }
|
|
.player-recommendations-list small { margin-top: 5px; color: var(--muted); font-size: 9px; }
|
|
.player-details { position: relative; grid-column: 1; width: 100%; margin: 0; padding: 0 0 64px; background: var(--bg); }
|
|
.player-title-row>div:last-child button.active { color: var(--brand-strong); background: var(--brand-soft); }
|
|
.player-title-row>div:last-child button:active { transform: scale(.97); }
|
|
.player-stage-v2:fullscreen, .player-stage-v2:-webkit-full-screen { width: 100vw; max-width: none; height: 100vh; aspect-ratio: auto; }
|
|
|
|
@media (max-width: 1180px) {
|
|
.player-layout { grid-template-columns: minmax(0, 1fr); padding: 16px 20px 56px; }
|
|
.player-side-panel { display: none; }
|
|
.player-topbar .directory-toggle { display: inline-grid; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.player-page { background: var(--bg); }
|
|
.player-layout { display: block; width: 100%; padding: 0; }
|
|
.player-stage.player-stage-v2 { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
|
|
.player-stage.player-stage-v2.panel-open { z-index: 210; }
|
|
.player-stage-v2 .player-shade { background: linear-gradient(rgba(3,7,14,.68), transparent 28%, transparent 45%, rgba(3,7,14,.94)); }
|
|
.player-topbar { min-height: 52px; gap: 6px; padding: max(4px, env(safe-area-inset-top)) 8px 0; }
|
|
.player-topbar>div { flex: 0 1 190px; }
|
|
.player-topbar strong { max-width: 50vw; font-size: 12px; }
|
|
.player-topbar small { display: none; }
|
|
.player-stage-v2 .player-topbar .icon-button { width: 44px; min-width: 44px; height: 44px; background: transparent; }
|
|
.player-stage-v2 .player-center { gap: 12px; }
|
|
.player-stage-v2 .player-center>button { width: 46px; height: 46px; }
|
|
.player-stage-v2 .player-center .main-play { width: 58px; height: 58px; }
|
|
.player-stage-v2 .buffering { min-width: 150px; padding: 12px 16px; }
|
|
.player-bottombar { right: 8px; bottom: 4px; left: 8px; }
|
|
.player-stage-v2 .timeline { height: 44px; margin: 0 2px -8px; }
|
|
.player-stage-v2 .timeline>i { top: 20px; }
|
|
.player-stage-v2 .timeline input { height: 44px; }
|
|
.player-stage-v2 .timeline>button { top: 0; width: 44px; height: 44px; }
|
|
.player-stage-v2 .timeline>button::after { top: 16px; left: 16px; }
|
|
.player-stage-v2 .player-controls-row { gap: 1px; }
|
|
.player-stage-v2 .player-controls-row .icon-button { width: 44px; min-width: 44px; height: 44px; }
|
|
.player-stage-v2 .player-controls-row>button:not(.icon-button) { width: auto; min-width: 44px; height: 44px; padding: 0 8px; font-size: 11px; }
|
|
.player-time { font-size: 10px; }
|
|
.marker-control span { display: none; }
|
|
.player-panel-scrim { position: fixed; z-index: 220; background: rgba(3,7,14,.48); }
|
|
.player-stage-v2 .player-drawer { position: fixed; z-index: 230; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: min(62dvh, 560px); padding: 8px 14px max(18px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; animation: player-sheet-in .22s var(--ease); }
|
|
.panel-handle { width: 38px; height: 4px; display: block; margin: 2px auto 12px; border-radius: 3px; background: var(--line-strong); }
|
|
.player-stage-v2 .player-drawer>header { align-items: center; }
|
|
.player-stage-v2 .player-drawer>button { min-height: 56px; }
|
|
.player-details { padding: 18px 14px max(38px, env(safe-area-inset-bottom)); box-shadow: none; clip-path: none; }
|
|
.player-title-row { gap: 14px; }
|
|
.player-title-row>div:last-child { gap: 6px; }
|
|
.player-title-row>div:last-child button { min-height: 56px; border-radius: 12px; }
|
|
.in-video-search { border-radius: 14px; }
|
|
@keyframes player-sheet-in { from { opacity: .7; transform: translateY(18px); } }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.player-stage-v2 .volume-control, .player-stage-v2 .buffer-control { display: none; }
|
|
.player-stage-v2 .player-time i { display: none; }
|
|
.player-stage-v2 .player-time { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
|
|
}
|