a11y: bring UI to WCAG 2.2 AAA compliance
Semantic HTML: lang attr, landmarks (header/main/region/complementary), heading hierarchy (h1-h3), dl/dt/dd for info panel. ARIA: labels on all icon buttons, aria-hidden on decorative icons, progressbar role with dynamic aria-valuenow, aria-haspopup/expanded on all menu triggers, role=listbox/option on playlist, aria-selected, computed aria-labels on playlist rows. Contrast: raised --textMuted/--textDim/--icon to AAA 7:1 ratios. Focus: global :focus-visible outline, slider thumb glow, menu item highlight, switch focus-within, row focus styles. Target sizes: 44x44 hit areas on zoom/window/remove buttons via ::before pseudo-elements. Keyboard: playlist arrow nav + Enter/Space activate + Alt+Arrow reorder with live region announcements + move buttons. Speed menu, subtitles menu, and recent menu all keyboard-navigable with Arrow/Enter/Space/Escape. Dividers resizable via Arrow keys. Dynamic document.title updates on video/folder load.
This commit is contained in:
Your Name
@@ -8,7 +8,7 @@
|
||||
transform-origin:bottom left;
|
||||
pointer-events:none;
|
||||
opacity:0;
|
||||
transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
|
||||
transition:opacity .25s ease, transform .35s var(--ease-bounce);
|
||||
}
|
||||
#toast.show{
|
||||
opacity:1;
|
||||
@@ -17,127 +17,84 @@
|
||||
.toastInner{
|
||||
pointer-events:none;
|
||||
display:flex; align-items:center; gap:12px;
|
||||
padding:12px 14px;
|
||||
border-radius:7px;
|
||||
border:1px solid rgba(255,255,255,.14);
|
||||
background:rgba(18,20,26,.92);
|
||||
box-shadow:0 26px 70px rgba(0,0,0,.70);
|
||||
backdrop-filter:blur(16px);
|
||||
padding:10px 14px;
|
||||
border-radius:var(--r);
|
||||
border:1px solid rgba(140,160,210,.10);
|
||||
background:rgba(18,21,30,.95);
|
||||
box-shadow:var(--shadow2);
|
||||
}
|
||||
.toastIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center;}
|
||||
.toastIcon .fa{font-size:14px; color:rgba(230,236,252,.82)!important; opacity:.95;}
|
||||
.toastIcon .fa{font-size:14px; color:rgba(200,212,238,.78)!important; opacity:.95; transition:transform .3s var(--ease-bounce);}
|
||||
#toast.show .toastIcon .fa{animation:toastIconIn .4s var(--ease-bounce);}
|
||||
@keyframes toastIconIn{
|
||||
0%{transform:scale(0) rotate(-90deg);}
|
||||
60%{transform:scale(1.2) rotate(5deg);}
|
||||
100%{transform:scale(1) rotate(0);}
|
||||
}
|
||||
.toastMsg{
|
||||
font-size:12.8px;
|
||||
font-weight:760;
|
||||
letter-spacing:.12px;
|
||||
color:rgba(246,248,255,.92);
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
letter-spacing:0;
|
||||
color:var(--text);
|
||||
}
|
||||
|
||||
/* Toolbar icon buttons */
|
||||
/* Toolbar icon buttons — borderless */
|
||||
.toolbarIcon{
|
||||
width:36px; height:36px;
|
||||
border-radius:var(--r2);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
|
||||
border:1px solid rgba(255,255,255,.1);
|
||||
color:rgba(246,248,255,.88);
|
||||
background:var(--surface-2);
|
||||
border:none;
|
||||
color:rgba(218,225,240,.85);
|
||||
font-size:14px;
|
||||
transition:all .2s cubic-bezier(.4,0,.2,1);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,.12),
|
||||
0 4px 12px rgba(0,0,0,.15),
|
||||
inset 0 1px 0 rgba(255,255,255,.08);
|
||||
}
|
||||
.toolbarIcon::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 50%);
|
||||
opacity:0;
|
||||
transition:opacity .2s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
}
|
||||
.toolbarIcon:hover{
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
|
||||
border-color:rgba(255,255,255,.18);
|
||||
color:rgba(255,255,255,.98);
|
||||
transform:translateY(-2px);
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0,0,0,.15),
|
||||
0 8px 20px rgba(0,0,0,.2),
|
||||
inset 0 1px 0 rgba(255,255,255,.12);
|
||||
background:var(--surface-3);
|
||||
color:rgba(235,240,252,.95);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
.toolbarIcon:hover::before{opacity:1;}
|
||||
.toolbarIcon:active{
|
||||
transform:translateY(0);
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.18);
|
||||
transform:scale(.9) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
|
||||
/* Fancy tooltip */
|
||||
/* Tooltip */
|
||||
.tooltip{
|
||||
position:fixed;
|
||||
pointer-events:none;
|
||||
z-index:99999;
|
||||
border-radius:var(--r);
|
||||
padding:16px 20px;
|
||||
padding:14px 16px;
|
||||
opacity:0;
|
||||
transform:translateY(8px) scale(.97);
|
||||
transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), left .12s ease, top .12s ease;
|
||||
transform:translateY(6px) scale(.96);
|
||||
transition:opacity .2s ease, transform .25s var(--ease-bounce), left .12s ease, top .12s ease;
|
||||
max-width:320px;
|
||||
font-family:var(--sans);
|
||||
overflow:hidden;
|
||||
background:rgba(20,24,32,.5);
|
||||
backdrop-filter:blur(8px) saturate(1.3);
|
||||
-webkit-backdrop-filter:blur(8px) saturate(1.3);
|
||||
border:1px solid rgba(255,255,255,.12);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,.3),
|
||||
0 4px 8px rgba(0,0,0,.15),
|
||||
0 12px 24px rgba(0,0,0,.25),
|
||||
0 24px 48px rgba(0,0,0,.2);
|
||||
background:rgba(18,21,30,.95);
|
||||
border:1px solid rgba(140,160,210,.10);
|
||||
box-shadow:var(--shadow2);
|
||||
}
|
||||
.tooltip.visible{
|
||||
opacity:1;
|
||||
transform:translateY(0) scale(1);
|
||||
}
|
||||
.tooltip::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0; left:0; right:0;
|
||||
height:1px;
|
||||
background:linear-gradient(90deg, transparent 5%, rgba(95,175,255,.5) 30%, rgba(75,200,130,.4) 70%, transparent 95%);
|
||||
border-radius:var(--r) var(--r) 0 0;
|
||||
}
|
||||
.tooltip::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:1px; left:1px; right:1px;
|
||||
height:40%;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
|
||||
border-radius:var(--r) var(--r) 0 0;
|
||||
pointer-events:none;
|
||||
}
|
||||
.tooltip::before{display:none;}
|
||||
.tooltip::after{display:none;}
|
||||
.tooltip-title{
|
||||
font-family:var(--brand);
|
||||
font-weight:800;
|
||||
font-weight:700;
|
||||
font-size:14px;
|
||||
margin-bottom:8px;
|
||||
margin-bottom:6px;
|
||||
letter-spacing:-.01em;
|
||||
background:linear-gradient(135deg, #fff 0%, rgba(180,210,255,1) 50%, rgba(150,230,200,1) 100%);
|
||||
-webkit-background-clip:text;
|
||||
background-clip:text;
|
||||
color:transparent;
|
||||
text-shadow:none;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
color:rgba(235,240,252,.95);
|
||||
}
|
||||
.tooltip-desc{
|
||||
font-family:var(--sans);
|
||||
font-size:12px;
|
||||
font-weight:500;
|
||||
color:rgba(190,200,225,.88);
|
||||
color:rgba(170,182,210,.82);
|
||||
line-height:1.55;
|
||||
letter-spacing:.01em;
|
||||
letter-spacing:0;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
@@ -147,36 +104,46 @@
|
||||
.subsBox{position:relative;}
|
||||
.subsMenu{
|
||||
position:absolute; left:50%; bottom:calc(100% + 10px);
|
||||
transform:translateX(-50%);
|
||||
transform:translateX(-50%) scale(.95);
|
||||
min-width:220px; padding:8px;
|
||||
border-radius:7px; border:1px solid rgba(255,255,255,.12);
|
||||
background:rgba(18,20,26,.94);
|
||||
box-shadow:0 26px 70px rgba(0,0,0,.70);
|
||||
backdrop-filter:blur(16px);
|
||||
border-radius:var(--r); border:1px solid rgba(140,160,210,.10);
|
||||
background:rgba(18,21,30,.95);
|
||||
box-shadow:var(--shadow);
|
||||
display:none; z-index:30;
|
||||
opacity:0;
|
||||
transition:opacity .15s ease, transform .2s var(--ease-bounce);
|
||||
}
|
||||
.subsMenu.show{display:block;}
|
||||
.subsMenuHeader{padding:6px 12px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(150,160,190,.6);}
|
||||
.subsMenuItem{padding:10px 12px; border-radius:5px; cursor:pointer; user-select:none; font-size:12px; font-weight:600; color:rgba(246,248,255,.92); letter-spacing:.08px; display:flex; align-items:center; gap:10px; transition:background .12s ease;}
|
||||
.subsMenuItem:hover{background:rgba(255,255,255,.06);}
|
||||
.subsMenuItem .fa{font-size:13px; color:var(--iconStrong)!important; opacity:.85; width:18px; text-align:center;}
|
||||
.subsMenuItem.embedded{color:rgba(180,220,255,.95);}
|
||||
.subsDivider{height:1px; background:rgba(255,255,255,.08); margin:6px 4px;}
|
||||
.subsEmpty{padding:10px 12px; color:rgba(165,172,196,.7); font-size:11.5px; text-align:center;}
|
||||
.subsMenu.show{display:block; opacity:1; transform:translateX(-50%) scale(1);}
|
||||
.subsMenuHeader{padding:6px 12px 4px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--textDim); transition:color .2s ease;}
|
||||
.subsMenuItem{padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; font-size:12px; font-weight:600; color:var(--text); letter-spacing:0; display:flex; align-items:center; gap:10px; transition:all .2s var(--ease-bounce);}
|
||||
.subsMenuItem:hover{background:var(--surfaceHover); padding-left:16px;}
|
||||
.subsMenuItem:active{transform:scale(.97); transition-duration:.08s;}
|
||||
.subsMenuItem .fa{font-size:13px; color:var(--iconStrong)!important; opacity:.85; width:18px; text-align:center; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
|
||||
.subsMenuItem:hover .fa{transform:scale(1.15) rotate(-5deg); opacity:1;}
|
||||
.subsMenuItem.embedded{color:rgba(150,185,230,.92);}
|
||||
.subsDivider{height:1px; background:rgba(140,160,210,.06); margin:6px 4px;}
|
||||
.subsEmpty{padding:10px 12px; color:var(--textDim); font-size:11px; text-align:center;}
|
||||
|
||||
.speedMenu{
|
||||
position:absolute; right:0; bottom:calc(100% + 10px);
|
||||
min-width:180px; padding:8px;
|
||||
border-radius:7px; border:1px solid rgba(255,255,255,.12);
|
||||
background:rgba(18,20,26,.94);
|
||||
box-shadow:0 26px 70px rgba(0,0,0,.70);
|
||||
backdrop-filter:blur(16px);
|
||||
border-radius:var(--r); border:1px solid rgba(140,160,210,.10);
|
||||
background:rgba(18,21,30,.95);
|
||||
box-shadow:var(--shadow);
|
||||
display:none; z-index:30;
|
||||
transform:translateY(8px) scale(.96); opacity:0;
|
||||
transition:transform .18s cubic-bezier(.175,.885,.32,1.275), opacity .15s ease;
|
||||
opacity:0;
|
||||
transform:scale(.95) translateY(4px);
|
||||
transition:opacity .15s ease, transform .2s var(--ease-bounce);
|
||||
}
|
||||
.speedMenu.show{display:block; transform:translateY(0) scale(1); opacity:1;}
|
||||
.speedItem{padding:10px 10px; border-radius:6px; cursor:pointer; user-select:none; font-family:var(--mono); font-size:14px; color:rgba(246,248,255,.92); letter-spacing:.10px; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:all .12s ease;}
|
||||
.speedItem:hover{background:rgba(255,255,255,.06); transform:translateX(3px);}
|
||||
.speedItem .dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); flex:0 0 auto; transition:all .15s ease;}
|
||||
.speedItem.active .dot{background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(100,180,255,.55)); box-shadow:0 0 0 3px rgba(100,180,255,.10); border-color:rgba(100,180,255,.24);}
|
||||
.speedMenu.show{display:block; opacity:1; transform:scale(1) translateY(0);}
|
||||
.speedItem{padding:10px 10px; border-radius:var(--r3); cursor:pointer; user-select:none; font-family:var(--mono); font-size:14px; color:var(--text); letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:all .2s var(--ease-bounce);}
|
||||
.speedItem:hover{background:var(--surfaceHover); padding-left:14px;}
|
||||
.speedItem:active{transform:scale(.97); transition-duration:.08s;}
|
||||
.speedItem .dot{width:8px; height:8px; border-radius:999px; background:rgba(140,165,220,.06); border:none; flex:0 0 auto; transition:all .2s var(--ease-bounce);}
|
||||
.speedItem:hover .dot{transform:scale(1.3);}
|
||||
.speedItem.active .dot{background:rgba(136,164,196,.65);}
|
||||
.speedItem.active:hover .dot{background:rgba(136,164,196,.80); box-shadow:0 0 6px rgba(136,164,196,.25);}
|
||||
|
||||
.subsMenuItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}
|
||||
.speedItem:focus-visible{background:var(--surfaceHover); padding-left:14px; outline:none;}
|
||||
.dropItem:focus-visible{background:var(--surfaceHover); padding-left:16px; outline:none;}
|
||||
|
||||
@@ -1,54 +1,74 @@
|
||||
:root{
|
||||
--zoom:1;
|
||||
/* Base backgrounds */
|
||||
--bg0:#060709; --bg1:#0a0c10;
|
||||
/* Strokes - consistent opacity scale */
|
||||
--stroke:rgba(255,255,255,.07);
|
||||
--strokeLight:rgba(255,255,255,.04);
|
||||
--strokeMed:rgba(255,255,255,.10);
|
||||
/* Text - consistent hierarchy */
|
||||
--text:rgba(240,244,255,.91);
|
||||
--textMuted:rgba(155,165,190,.68);
|
||||
--textDim:rgba(120,132,165,.50);
|
||||
/* Surfaces */
|
||||
--surface:rgba(255,255,255,.025);
|
||||
--surfaceHover:rgba(255,255,255,.045);
|
||||
--surfaceActive:rgba(255,255,255,.06);
|
||||
/* Shadows */
|
||||
--shadow:0 16px 48px rgba(0,0,0,.50);
|
||||
--shadow2:0 8px 24px rgba(0,0,0,.32);
|
||||
/* Radii */
|
||||
--r:6px; --r2:5px;
|
||||
/* Base backgrounds — cool dark slate, lighter */
|
||||
--bg0:#0f1117; --bg1:#151821;
|
||||
/* Strokes — cool, very subtle */
|
||||
--stroke:rgba(140,160,210,.07);
|
||||
--strokeLight:rgba(140,160,210,.04);
|
||||
--strokeMed:rgba(140,160,210,.09);
|
||||
--strokeStrong:rgba(140,160,210,.14);
|
||||
/* Text — cool white hierarchy */
|
||||
--text:rgba(218,225,240,.90);
|
||||
--textMuted:rgba(160,174,204,.72);
|
||||
--textDim:rgba(158,174,208,.68);
|
||||
/* Surfaces — cool-tinted, subtle fills */
|
||||
--surface-0:rgba(140,165,220,.02);
|
||||
--surface:rgba(140,165,220,.03);
|
||||
--surface-2:rgba(140,165,220,.045);
|
||||
--surface-3:rgba(140,165,220,.065);
|
||||
--surface-4:rgba(140,165,220,.085);
|
||||
--surfaceHover:rgba(140,165,220,.055);
|
||||
--surfaceActive:rgba(140,165,220,.07);
|
||||
/* Shadows — minimal */
|
||||
--shadow:0 8px 24px rgba(0,0,0,.25);
|
||||
--shadow2:0 4px 12px rgba(0,0,0,.15);
|
||||
--shadow3:none;
|
||||
--shadowFloat:0 6px 20px rgba(0,0,0,.20);
|
||||
--shadowInset:inset 0 1px 3px rgba(0,0,0,.12);
|
||||
/* Radii — architectural */
|
||||
--r:6px; --r2:4px; --r3:3px;
|
||||
/* Easing — refined, springy */
|
||||
--ease-spring:cubic-bezier(.25,.46,.45,.94);
|
||||
--ease-bounce:cubic-bezier(.34,1.56,.64,1);
|
||||
--ease-out-back:cubic-bezier(.34,1.3,.64,1);
|
||||
/* Fonts */
|
||||
--mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--sans:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
||||
--brand:"Sora","Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
||||
/* Icons */
|
||||
--icon:rgba(175,185,210,.65);
|
||||
--iconStrong:rgba(220,228,248,.85);
|
||||
/* Accent - consistent blue */
|
||||
--accent:rgb(95,175,255);
|
||||
--accentGlow:rgba(95,175,255,.12);
|
||||
--accentBorder:rgba(95,175,255,.22);
|
||||
--accentBg:rgba(95,175,255,.07);
|
||||
/* Success - consistent green */
|
||||
--success:rgb(75,200,130);
|
||||
--successBg:rgba(75,200,130,.07);
|
||||
--successBorder:rgba(75,200,130,.20);
|
||||
/* Tree */
|
||||
--tree:rgba(195,205,230,.10);
|
||||
--treeNode:rgba(200,212,238,.52);
|
||||
--mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
--sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
||||
--brand:"Fraunces", Georgia, "Times New Roman", serif;
|
||||
/* Icons — cool */
|
||||
--icon:rgba(160,175,210,.62);
|
||||
--iconStrong:rgba(200,212,238,.75);
|
||||
/* Accent — steel blue */
|
||||
--accent:#88A4C4;
|
||||
--accentGlow:rgba(136,164,196,.08);
|
||||
--accentBorder:rgba(136,164,196,.18);
|
||||
--accentBg:rgba(136,164,196,.06);
|
||||
/* Success — muted sage */
|
||||
--success:rgb(130,170,130);
|
||||
--successBg:rgba(130,170,130,.06);
|
||||
--successBorder:rgba(130,170,130,.15);
|
||||
/* Tree — cool */
|
||||
--tree:rgba(140,165,220,.07);
|
||||
--treeNode:rgba(200,212,238,.40);
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
html,body{height:100%;}
|
||||
body{
|
||||
margin:0; padding:0; font-family:var(--sans); color:var(--text); overflow:hidden;
|
||||
width:100vw; height:100vh;
|
||||
font-weight:400;
|
||||
line-height:1.4;
|
||||
background:
|
||||
radial-gradient(800px 500px at 10% 5%, rgba(95,175,255,.08), transparent 60%),
|
||||
radial-gradient(700px 500px at 90% 8%, rgba(75,200,130,.05), transparent 65%),
|
||||
radial-gradient(900px 600px at 8% 3%, rgba(100,140,210,.04), transparent 55%),
|
||||
radial-gradient(600px 400px at 92% 97%, rgba(90,120,180,.03), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg1), var(--bg0));
|
||||
letter-spacing:.04px;
|
||||
letter-spacing:0;
|
||||
}
|
||||
*:focus{outline:none;}
|
||||
*:focus-visible{
|
||||
outline:2px solid rgba(136,164,196,.65);
|
||||
outline-offset:2px;
|
||||
border-radius:inherit;
|
||||
}
|
||||
#zoomRoot{
|
||||
transform:scale(var(--zoom));
|
||||
@@ -62,14 +82,12 @@ body{
|
||||
.fa, i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin{color:var(--icon)!important;}
|
||||
|
||||
.topbar{
|
||||
display:flex; align-items:center; gap:14px;
|
||||
padding:12px 14px;
|
||||
height:72px;
|
||||
flex:0 0 72px;
|
||||
display:flex; align-items:center; gap:12px;
|
||||
padding:10px 12px;
|
||||
height:62px;
|
||||
flex:0 0 62px;
|
||||
border-bottom:1px solid var(--stroke);
|
||||
background:
|
||||
linear-gradient(135deg, transparent 0%, transparent 48%, rgba(255,255,255,.015) 50%, transparent 52%, transparent 100%) 0 0 / 8px 8px,
|
||||
linear-gradient(180deg, rgba(22,26,38,1), rgba(18,22,32,1));
|
||||
background:#181d2a;
|
||||
min-width:0; z-index:5; position:relative;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
@@ -78,29 +96,22 @@ body{
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:
|
||||
radial-gradient(circle, rgba(180,210,255,.096) 2px, transparent 2.5px) 0 0 / 12px 12px,
|
||||
radial-gradient(circle, rgba(220,230,255,.08) 2px, transparent 2.5px) 6px 6px / 12px 12px;
|
||||
radial-gradient(circle, rgba(140,170,220,.08) 2px, transparent 2.5px) 0 0 / 12px 12px,
|
||||
radial-gradient(circle, rgba(160,185,230,.05) 2px, transparent 2.5px) 6px 6px / 12px 12px;
|
||||
pointer-events:none;
|
||||
z-index:1;
|
||||
-webkit-mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
|
||||
mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,.5) 20%, transparent 40%);
|
||||
}
|
||||
.topbar::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
|
||||
pointer-events:none;
|
||||
z-index:0;
|
||||
}
|
||||
.topbar::after{display:none;}
|
||||
|
||||
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; position:relative; z-index:1;}
|
||||
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; position:relative; z-index:1; user-select:none; cursor:default;}
|
||||
.appIcon{
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
flex:0 0 auto;
|
||||
filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
|
||||
overflow:visible;
|
||||
transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
|
||||
transition: transform .4s var(--ease-spring), filter .3s ease;
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
}
|
||||
@@ -117,7 +128,7 @@ body{
|
||||
position:absolute;
|
||||
inset:0;
|
||||
border-radius:50%;
|
||||
background:radial-gradient(circle, rgba(100,180,255,.25), rgba(130,230,180,.15), transparent 70%);
|
||||
background:radial-gradient(circle, rgba(100,160,240,.25), rgba(130,210,200,.15), transparent 70%);
|
||||
transform:scale(.5);
|
||||
transition:transform .4s ease;
|
||||
}
|
||||
@@ -126,7 +137,7 @@ body{
|
||||
position:absolute;
|
||||
inset:0;
|
||||
border-radius:50%;
|
||||
background:conic-gradient(from 0deg, rgba(100,180,255,.5), rgba(130,230,180,.5), rgba(210,160,255,.5), rgba(100,180,255,.5));
|
||||
background:conic-gradient(from 0deg, rgba(100,160,240,.5), rgba(130,210,200,.5), rgba(170,150,230,.5), rgba(100,160,240,.5));
|
||||
mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
|
||||
-webkit-mask:radial-gradient(circle, transparent 45%, black 47%, black 53%, transparent 55%);
|
||||
animation:none;
|
||||
@@ -149,7 +160,7 @@ body{
|
||||
}
|
||||
.appIcon:hover{
|
||||
animation:logoWiggle .8s ease-out;
|
||||
filter: drop-shadow(0 0 20px rgba(100,180,255,.5)) drop-shadow(0 0 40px rgba(130,230,180,.3)) drop-shadow(0 12px 24px rgba(0,0,0,.4));
|
||||
filter: drop-shadow(0 0 20px rgba(100,160,240,.5)) drop-shadow(0 0 40px rgba(130,210,200,.3)) drop-shadow(0 12px 24px rgba(0,0,0,.4));
|
||||
}
|
||||
.appIcon:hover .appIconGlow{
|
||||
opacity:1;
|
||||
@@ -160,10 +171,14 @@ body{
|
||||
.appIcon:hover .appIconGlow::after{
|
||||
animation:logoSpin 3s linear infinite;
|
||||
}
|
||||
.appIcon:active{
|
||||
transform:scale(.92);
|
||||
transition-duration:.1s;
|
||||
}
|
||||
.appIcon i{
|
||||
font-size:36px;
|
||||
line-height:1;
|
||||
background:linear-gradient(135deg, rgba(100,180,255,.98), rgba(130,230,180,.92), rgba(210,160,255,.82));
|
||||
background:linear-gradient(135deg, rgba(120,170,240,.95), rgba(140,210,200,.88), rgba(170,150,230,.82));
|
||||
-webkit-background-clip:text;
|
||||
background-clip:text;
|
||||
color:transparent!important;
|
||||
@@ -174,35 +189,35 @@ body{
|
||||
z-index:2;
|
||||
}
|
||||
.appIcon:hover i{
|
||||
background:linear-gradient(135deg, rgba(130,210,255,1), rgba(160,250,200,1), rgba(230,180,255,1));
|
||||
background:linear-gradient(135deg, rgba(140,190,255,1), rgba(160,230,215,1), rgba(190,170,245,1));
|
||||
-webkit-background-clip:text;
|
||||
background-clip:text;
|
||||
}
|
||||
.brandText{min-width:0; position:relative; z-index:1;}
|
||||
.appName{
|
||||
font-family:var(--brand);
|
||||
font-weight:900;
|
||||
font-weight:800;
|
||||
font-size:18px;
|
||||
line-height:1.02;
|
||||
letter-spacing:.35px;
|
||||
letter-spacing:-.02em;
|
||||
margin:0; padding:0;
|
||||
transition:text-shadow .3s ease;
|
||||
transition:text-shadow .3s var(--ease-spring), color .2s ease;
|
||||
}
|
||||
.brand:hover .appName{
|
||||
text-shadow:0 0 20px rgba(100,180,255,.4), 0 0 40px rgba(130,230,180,.2);
|
||||
text-shadow:0 0 20px rgba(100,160,240,.4), 0 0 40px rgba(130,210,200,.2);
|
||||
}
|
||||
.tagline{
|
||||
margin-top:5px;
|
||||
font-size:11.5px;
|
||||
font-size:11px;
|
||||
line-height:1.2;
|
||||
color:rgba(180,188,210,.76);
|
||||
letter-spacing:.18px;
|
||||
color:var(--textMuted);
|
||||
letter-spacing:.02em;
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
max-width:52vw;
|
||||
transition:color .3s ease;
|
||||
transition:color .3s var(--ease-spring);
|
||||
}
|
||||
.brand:hover .tagline{
|
||||
color:rgba(200,210,230,.9);
|
||||
color:rgba(180,192,218,.82);
|
||||
}
|
||||
|
||||
.actions{
|
||||
@@ -215,270 +230,253 @@ body{
|
||||
}
|
||||
.actionDivider{
|
||||
width:1px; height:28px;
|
||||
background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent);
|
||||
background:rgba(140,160,210,.08);
|
||||
margin:0 4px;
|
||||
transition:background .3s ease;
|
||||
}
|
||||
|
||||
/* Zoom control */
|
||||
/* Zoom control — borderless */
|
||||
.zoomControl{
|
||||
display:flex; align-items:center; gap:0;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
border-radius:8px;
|
||||
background:var(--surface-2);
|
||||
border:none;
|
||||
border-radius:var(--r2);
|
||||
padding:2px;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.05);
|
||||
transition:background .2s ease;
|
||||
}
|
||||
.zoomControl:hover{
|
||||
background:var(--surface-3);
|
||||
}
|
||||
.zoomBtn{
|
||||
width:28px; height:28px;
|
||||
border:none; background:transparent;
|
||||
border-radius:6px;
|
||||
border:none; background:transparent; position:relative;
|
||||
border-radius:var(--r3);
|
||||
color:var(--text);
|
||||
cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
transition:all .15s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
}
|
||||
.zoomBtn:hover{
|
||||
background:rgba(255,255,255,.08);
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
.zoomBtn:active{
|
||||
background:rgba(255,255,255,.12);
|
||||
transform:scale(.95);
|
||||
background:var(--surface-4);
|
||||
transform:scale(.9) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.zoomBtn .fa{font-size:10px; opacity:.8;}
|
||||
.zoomBtn::before{content:""; position:absolute; inset:-8px; border-radius:var(--r2);}
|
||||
.zoomBtn .fa{font-size:10px; opacity:.8; transition:opacity .15s ease, transform .15s ease;}
|
||||
.zoomBtn:hover .fa{opacity:1; transform:scale(1.1);}
|
||||
.zoomValue{
|
||||
min-width:48px;
|
||||
text-align:center;
|
||||
font-family:var(--mono);
|
||||
font-size:11px;
|
||||
font-weight:600;
|
||||
font-weight:400;
|
||||
color:var(--text);
|
||||
opacity:.9;
|
||||
cursor:pointer;
|
||||
padding:4px 6px;
|
||||
border-radius:4px;
|
||||
transition:background .15s ease;
|
||||
border-radius:var(--r3);
|
||||
transition:background .15s ease, opacity .15s ease, transform .15s ease;
|
||||
}
|
||||
.zoomValue:hover{
|
||||
background:rgba(255,255,255,.06);
|
||||
background:var(--surface-3);
|
||||
opacity:1;
|
||||
}
|
||||
.zoomValue:active{
|
||||
transform:scale(.95);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
|
||||
/* Toolbar buttons */
|
||||
/* Toolbar buttons — borderless */
|
||||
.toolbarBtn{
|
||||
width:34px; height:34px;
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
border-radius:8px;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
|
||||
border:none;
|
||||
border-radius:var(--r2);
|
||||
background:var(--surface-2);
|
||||
color:var(--text);
|
||||
cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
transition:all .2s cubic-bezier(.4,0,.2,1);
|
||||
transition:all .2s var(--ease-bounce);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
|
||||
}
|
||||
.toolbarBtn::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 70%);
|
||||
opacity:0;
|
||||
transition:opacity .2s ease;
|
||||
}
|
||||
.toolbarBtn:hover{
|
||||
border-color:rgba(255,255,255,.15);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-1px);
|
||||
box-shadow:0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
.toolbarBtn:hover::before{opacity:1;}
|
||||
.toolbarBtn:active{
|
||||
transform:translateY(0);
|
||||
box-shadow:0 1px 4px rgba(0,0,0,.15);
|
||||
transform:scale(.92) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.toolbarBtn .fa{font-size:13px; opacity:.85; transition:transform .2s ease;}
|
||||
.toolbarBtn:hover .fa{transform:scale(1.1);}
|
||||
.toolbarBtn .fa{font-size:13px; opacity:.85; transition:opacity .15s ease, transform .2s var(--ease-bounce);}
|
||||
.toolbarBtn:hover .fa{opacity:1; transform:scale(1.1);}
|
||||
|
||||
/* Primary split button styling */
|
||||
/* Window control buttons */
|
||||
.winBtn{
|
||||
width:30px; height:30px;
|
||||
border-radius:var(--r2);
|
||||
flex:0 0 auto;
|
||||
position:relative;
|
||||
}
|
||||
.winBtn::before{content:""; position:absolute; inset:-7px; border-radius:var(--r2);}
|
||||
.winBtn .fa{font-size:11px!important; transition:transform .15s var(--ease-bounce)!important;}
|
||||
.winBtn:hover .fa{transform:scale(1.15)!important;}
|
||||
.winClose:hover{
|
||||
background:rgba(255,70,70,.14)!important;
|
||||
}
|
||||
.winClose:hover .fa{color:rgba(255,120,120,.95)!important;}
|
||||
.winClose:active{
|
||||
background:rgba(255,70,70,.22)!important;
|
||||
}
|
||||
.windowControls{gap:4px; margin-left:2px;}
|
||||
|
||||
/* Primary split button — borderless */
|
||||
.splitBtn.primary{
|
||||
border-color:rgba(95,175,255,.25);
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.12), rgba(95,175,255,.04));
|
||||
box-shadow:0 2px 8px rgba(0,0,0,.15), 0 4px 20px rgba(95,175,255,.1), inset 0 1px 0 rgba(255,255,255,.1);
|
||||
background:rgba(136,164,196,.10);
|
||||
}
|
||||
.splitBtn.primary:hover{
|
||||
border-color:rgba(95,175,255,.4);
|
||||
box-shadow:0 4px 12px rgba(0,0,0,.2), 0 8px 32px rgba(95,175,255,.15), inset 0 1px 0 rgba(255,255,255,.15);
|
||||
background:rgba(136,164,196,.15);
|
||||
}
|
||||
.splitBtn.primary .drop{
|
||||
border-left-color:rgba(95,175,255,.2);
|
||||
border-left-color:rgba(140,160,210,.08);
|
||||
}
|
||||
.btn{
|
||||
display:inline-flex; align-items:center; justify-content:center; gap:8px;
|
||||
padding:9px 14px;
|
||||
border-radius:var(--r2);
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
|
||||
border:none;
|
||||
background:var(--surface-2);
|
||||
color:var(--text);
|
||||
cursor:pointer; user-select:none;
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,.2),
|
||||
0 8px 24px rgba(0,0,0,.25),
|
||||
inset 0 1px 0 rgba(255,255,255,.08),
|
||||
inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
transition:all .2s cubic-bezier(.4,0,.2,1);
|
||||
font-size:12.5px; font-weight:700; letter-spacing:.02em;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.btn::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 50%);
|
||||
opacity:0;
|
||||
transition:opacity .2s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
font-size:13px; font-weight:600; letter-spacing:0;
|
||||
}
|
||||
.btn:hover{
|
||||
border-color:rgba(255,255,255,.15);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
|
||||
transform:translateY(-2px);
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0,0,0,.2),
|
||||
0 12px 32px rgba(0,0,0,.3),
|
||||
inset 0 1px 0 rgba(255,255,255,.12),
|
||||
inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
.btn:hover::before{opacity:1;}
|
||||
.btn:active{
|
||||
transform:translateY(0);
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0,0,0,.2),
|
||||
0 4px 12px rgba(0,0,0,.2),
|
||||
inset 0 1px 0 rgba(255,255,255,.06);
|
||||
transform:scale(.96) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.btn.primary{
|
||||
border-color:rgba(95,175,255,.3);
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.2), rgba(95,175,255,.08));
|
||||
background:rgba(136,164,196,.12);
|
||||
color:#fff;
|
||||
text-shadow:0 1px 2px rgba(0,0,0,.3);
|
||||
}
|
||||
.btn.primary::before{
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.15), transparent 60%);
|
||||
}
|
||||
.btn.primary:hover{
|
||||
border-color:rgba(95,175,255,.45);
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.28), rgba(95,175,255,.12));
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0,0,0,.2),
|
||||
0 12px 32px rgba(95,175,255,.2),
|
||||
0 0 0 1px rgba(95,175,255,.1),
|
||||
inset 0 1px 0 rgba(255,255,255,.15);
|
||||
background:rgba(136,164,196,.18);
|
||||
transform:translateY(-1px);
|
||||
box-shadow:0 4px 12px rgba(136,164,196,.12);
|
||||
}
|
||||
.btn .fa{font-size:14px; opacity:.95; color:var(--iconStrong)!important; transition:transform .2s ease; position:relative; z-index:1;}
|
||||
.btn .fa{font-size:14px; opacity:.95; color:var(--iconStrong)!important; transition:transform .2s var(--ease-bounce);}
|
||||
.btn:hover .fa{transform:scale(1.08);}
|
||||
.btn.primary .fa{color:#fff!important;}
|
||||
.btn:hover .fa{transform:scale(1.1);}
|
||||
|
||||
.splitBtn{
|
||||
display:inline-flex;
|
||||
border-radius:var(--r2);
|
||||
overflow:hidden;
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
box-shadow:
|
||||
0 2px 4px rgba(0,0,0,.2),
|
||||
0 8px 24px rgba(0,0,0,.25),
|
||||
inset 0 1px 0 rgba(255,255,255,.06);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
|
||||
border:none;
|
||||
background:var(--surface-2);
|
||||
position:relative; z-index:8;
|
||||
transition:all .2s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
}
|
||||
.splitBtn:hover{
|
||||
border-color:rgba(255,255,255,.14);
|
||||
box-shadow:
|
||||
0 4px 8px rgba(0,0,0,.2),
|
||||
0 12px 32px rgba(0,0,0,.3),
|
||||
inset 0 1px 0 rgba(255,255,255,.08);
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
.splitBtn:active{
|
||||
transform:scale(.98) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.splitBtn .btn{border:none; box-shadow:none; border-radius:0; background:transparent; padding:9px 12px; transform:none;}
|
||||
.splitBtn .btn::before{display:none;}
|
||||
.splitBtn .btn:hover{background:rgba(255,255,255,.06); transform:none; box-shadow:none;}
|
||||
.splitBtn .btn:hover{background:var(--surface-3); transform:none; box-shadow:none;}
|
||||
.splitBtn .drop{
|
||||
width:40px; padding:8px 0;
|
||||
border-left:1px solid rgba(255,255,255,.08);
|
||||
border-left:1px solid rgba(140,160,210,.06);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
transition:background .15s ease;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
|
||||
background:transparent;
|
||||
}
|
||||
.splitBtn .drop:hover{background:rgba(255,255,255,.06);}
|
||||
.splitBtn .drop .fa{font-size:16px; opacity:.88; color:var(--iconStrong)!important; transition:transform .2s ease;}
|
||||
.splitBtn .drop:hover .fa{transform:translateY(2px);}
|
||||
.splitBtn .drop:hover{background:var(--surface-3);}
|
||||
.splitBtn .drop .fa{font-size:16px; opacity:.88; color:var(--iconStrong)!important; transition:transform .25s var(--ease-bounce);}
|
||||
.splitBtn .drop:hover .fa{transform:translateY(3px) scale(1.1);}
|
||||
|
||||
.dropdownPortal{
|
||||
position:fixed; z-index:99999;
|
||||
min-width:320px; max-width:560px; max-height:360px;
|
||||
overflow:auto;
|
||||
border-radius:7px;
|
||||
border:1px solid rgba(255,255,255,.12);
|
||||
background:rgba(18,20,26,.94);
|
||||
box-shadow:0 26px 70px rgba(0,0,0,.70);
|
||||
backdrop-filter:blur(16px);
|
||||
border-radius:var(--r);
|
||||
border:1px solid rgba(140,160,210,.10);
|
||||
background:rgba(18,21,30,.95);
|
||||
box-shadow:var(--shadow);
|
||||
padding:6px;
|
||||
display:none;
|
||||
transform:scale(var(--zoom));
|
||||
transform-origin:top left;
|
||||
scrollbar-width:thin;
|
||||
scrollbar-color:rgba(255,255,255,.14) rgba(255,255,255,.02);
|
||||
scrollbar-color:rgba(140,160,210,.12) rgba(140,160,210,.02);
|
||||
}
|
||||
.dropdownPortal::-webkit-scrollbar{width:4px; height:4px;}
|
||||
.dropdownPortal::-webkit-scrollbar-track{background:rgba(255,255,255,.015);}
|
||||
.dropdownPortal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.11); border-radius:999px;}
|
||||
.dropdownPortal::-webkit-scrollbar-track{background:rgba(140,160,210,.02);}
|
||||
.dropdownPortal::-webkit-scrollbar-thumb{background:rgba(140,160,210,.10); border-radius:999px;}
|
||||
.dropdownPortal::-webkit-scrollbar-button{width:0; height:0; display:none;}
|
||||
|
||||
.dropItem{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:6px; cursor:pointer; user-select:none; color:rgba(246,248,255,.92); font-weight:760; font-size:12.7px; letter-spacing:.12px; line-height:1.25; transition:all .15s ease; position:relative;}
|
||||
.dropItem:hover{background:rgba(255,255,255,.06); padding-right:36px;}
|
||||
.dropItem:active{transform:none;}
|
||||
.dropIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.9; transition:transform .2s ease;}
|
||||
.dropItem:hover .dropIcon{transform:scale(1.1);}
|
||||
.dropItem{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r3); cursor:pointer; user-select:none; color:var(--text); font-weight:600; font-size:13px; letter-spacing:0; line-height:1.25; transition:all .2s var(--ease-bounce); position:relative;}
|
||||
.dropItem:hover{background:var(--surfaceHover); padding-left:16px; padding-right:36px;}
|
||||
.dropItem:active{transform:scale(.98); transition-duration:.08s;}
|
||||
.dropIcon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.9; transition:transform .25s var(--ease-bounce), opacity .15s ease;}
|
||||
.dropItem:hover .dropIcon{transform:scale(1.15) rotate(-8deg); opacity:1;}
|
||||
.dropIcon .fa{font-size:14px; color:var(--iconStrong)!important;}
|
||||
.dropName{white-space:nowrap; flex:1 1 auto; min-width:0; transition:mask-image .15s ease, -webkit-mask-image .15s ease;}
|
||||
.dropItem:hover .dropName{overflow:hidden; mask-image:linear-gradient(90deg, #000 80%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent 100%);}
|
||||
.dropRemove{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:8px; background:rgba(255,100,100,.15); border:1px solid rgba(255,100,100,.25); color:rgba(255,180,180,.9); display:none; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .15s ease;}
|
||||
.dropItem:hover .dropRemove{display:flex;}
|
||||
.dropRemove:hover{background:rgba(255,100,100,.25); border-color:rgba(255,100,100,.4); color:rgba(255,220,220,1);}
|
||||
.dropEmpty{padding:10px 10px; color:rgba(165,172,196,.78); font-size:12.5px;}
|
||||
.dropName{white-space:nowrap; flex:1 1 auto; min-width:0; transition:mask-image .15s ease, -webkit-mask-image .15s ease, color .15s ease;}
|
||||
.dropItem:hover .dropName{overflow:hidden; mask-image:linear-gradient(90deg, #000 80%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, #000 80%, transparent 100%); color:rgba(235,240,252,.96);}
|
||||
.dropRemove{position:absolute; right:8px; top:50%; transform:translateY(-50%) scale(.85); width:24px; height:24px; border-radius:var(--r3); background:rgba(255,100,100,.12); border:1px solid rgba(255,100,100,.20); color:rgba(255,180,180,.9); display:none; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .2s var(--ease-bounce);}
|
||||
.dropItem:hover .dropRemove{display:flex; transform:translateY(-50%) scale(1);}
|
||||
.dropRemove:hover{background:rgba(255,100,100,.22); border-color:rgba(255,100,100,.35); color:rgba(255,220,220,1); transform:translateY(-50%) scale(1.1);}
|
||||
.dropRemove:active{transform:translateY(-50%) scale(.9); transition-duration:.08s;}
|
||||
.dropRemove::before{content:""; position:absolute; inset:-10px; border-radius:var(--r3);}
|
||||
.dropEmpty{padding:10px 10px; color:var(--textMuted); font-size:13px;}
|
||||
|
||||
.seg{display:inline-flex; border:1px solid rgba(255,255,255,.09); border-radius:var(--r2); overflow:hidden; background:rgba(255,255,255,.02); box-shadow:var(--shadow2); transition:border-color .15s ease;}
|
||||
.seg:hover{border-color:rgba(255,255,255,.14);}
|
||||
.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:820; transform:none;}
|
||||
.seg .btn:hover{background:rgba(255,255,255,.06); transform:none; box-shadow:none;}
|
||||
.seg .btn:active{background:rgba(255,255,255,.08);}
|
||||
.seg .mid{border-left:1px solid rgba(255,255,255,.10); border-right:1px solid rgba(255,255,255,.10); min-width:62px; font-variant-numeric:tabular-nums;}
|
||||
.seg{display:inline-flex; border:none; border-radius:var(--r2); overflow:hidden; background:var(--surface-2); transition:background .15s ease;}
|
||||
.seg:hover{background:var(--surface-3);}
|
||||
.seg .btn{border:none; box-shadow:none; border-radius:0; padding:8px 9px; background:transparent; font-weight:800; transform:none;}
|
||||
.seg .btn:hover{background:var(--surface-3); transform:none; box-shadow:none;}
|
||||
.seg .btn:active{background:var(--surface-4); transform:scale(.95);}
|
||||
.seg .mid{border-left:1px solid rgba(140,160,210,.06); border-right:1px solid rgba(140,160,210,.06); min-width:62px; font-variant-numeric:tabular-nums;}
|
||||
|
||||
.switch{
|
||||
display:inline-flex; align-items:center; justify-content:center; gap:8px;
|
||||
padding:6px 10px;
|
||||
border-radius:8px;
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
|
||||
border-radius:var(--r2);
|
||||
border:none;
|
||||
background:var(--surface-2);
|
||||
cursor:pointer; user-select:none;
|
||||
font-size:11.5px; font-weight:650; letter-spacing:.01em;
|
||||
font-size:11px; font-weight:600; letter-spacing:0;
|
||||
color:var(--text);
|
||||
line-height:1;
|
||||
transition:all .2s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
}
|
||||
.switch:hover{
|
||||
border-color:rgba(255,255,255,.14);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
|
||||
box-shadow:0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
.switch:active{
|
||||
transform:scale(.97) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.switch:focus-within{outline:2px solid rgba(136,164,196,.65); outline-offset:2px;}
|
||||
.switch input{display:none;}
|
||||
.track{
|
||||
width:32px; height:18px;
|
||||
border-radius:999px;
|
||||
background:rgba(255,255,255,.06);
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
background:rgba(140,165,220,.06);
|
||||
border:1px solid rgba(140,165,220,.10);
|
||||
position:relative;
|
||||
transition:all .25s cubic-bezier(.4,0,.2,1);
|
||||
transition:all .3s var(--ease-bounce);
|
||||
flex:0 0 auto;
|
||||
display:flex; align-items:center;
|
||||
}
|
||||
@@ -486,25 +484,32 @@ body{
|
||||
margin-left:2px;
|
||||
width:14px; height:14px;
|
||||
border-radius:999px;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.25);
|
||||
transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s ease, box-shadow .2s ease;
|
||||
background:rgba(200,210,230,.25);
|
||||
box-shadow:0 1px 3px rgba(0,0,0,.20);
|
||||
transition:transform .3s var(--ease-out-back), background .2s ease, box-shadow .2s ease, width .15s ease;
|
||||
}
|
||||
.switch:hover .knob{
|
||||
width:16px;
|
||||
}
|
||||
.switch input:checked + .track{
|
||||
background:linear-gradient(90deg, rgba(95,175,255,.25), rgba(130,200,255,.2));
|
||||
border-color:rgba(95,175,255,.3);
|
||||
box-shadow:0 0 12px rgba(95,175,255,.15);
|
||||
background:rgba(136,164,196,.20);
|
||||
border-color:rgba(136,164,196,.28);
|
||||
}
|
||||
.switch input:checked + .track .knob{
|
||||
transform:translateX(14px);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(200,230,255,.8));
|
||||
box-shadow:0 2px 8px rgba(95,175,255,.3), 0 0 0 2px rgba(95,175,255,.15);
|
||||
background:rgba(220,228,240,.85);
|
||||
box-shadow:0 1px 4px rgba(136,164,196,.25);
|
||||
width:14px;
|
||||
}
|
||||
.switch:hover input:checked + .track .knob{
|
||||
width:16px;
|
||||
transform:translateX(12px);
|
||||
}
|
||||
|
||||
.content{flex:1 1 auto; min-height:0; padding:12px; display:grid; grid-template-columns:calc(62% - 7px) 14px calc(38% - 7px); gap:0; overflow:hidden;}
|
||||
.content{flex:1 1 auto; min-height:0; padding:10px; display:grid; grid-template-columns:calc(62% - 5px) 10px calc(38% - 5px); gap:0; overflow:hidden;}
|
||||
|
||||
@media (max-width:1100px){
|
||||
.content{grid-template-columns:1fr; gap:12px; padding:12px;}
|
||||
.content{grid-template-columns:1fr; gap:10px; padding:10px;}
|
||||
.dividerWrap{display:none;}
|
||||
.actions{flex-wrap:wrap;}
|
||||
.seg{width:100%;}
|
||||
|
||||
@@ -1,60 +1,77 @@
|
||||
.panel{border:1px solid var(--stroke); border-radius:var(--r); background:linear-gradient(180deg, var(--surface), rgba(255,255,255,.015)); box-shadow:0 8px 32px rgba(0,0,0,.35); overflow:hidden; min-height:0; display:flex; flex-direction:column; backdrop-filter:blur(12px);}
|
||||
.panelHeader{padding:12px 12px 10px; border-bottom:1px solid var(--stroke); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex:0 0 auto; min-width:0;}
|
||||
.nowTitle{font-weight:860; font-size:13.4px; letter-spacing:.14px; max-width:60ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
|
||||
.nowSub{margin-top:4px; color:var(--textMuted); font-size:11.6px; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80ch;}
|
||||
.panel{border:1px solid var(--stroke); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow3); overflow:hidden; min-height:0; display:flex; flex-direction:column; transition:border-color .3s ease;}
|
||||
.panel:hover{border-color:rgba(140,160,210,.10);}
|
||||
.panel::after{display:none;}
|
||||
.panelHeader{padding:10px 12px 8px; border-bottom:1px solid rgba(140,160,210,.04); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex:0 0 auto; min-width:0; background:rgba(140,165,220,.015); transition:background .3s ease;}
|
||||
.panelHeader:hover{background:rgba(140,165,220,.025);}
|
||||
.panelHeader::after{display:none;}
|
||||
.nowTitle{font-family:var(--brand); font-weight:700; font-size:14px; letter-spacing:-.01em; max-width:60ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease;}
|
||||
.nowTitle:hover{color:rgba(235,240,252,.98);}
|
||||
.nowSub{margin-top:4px; color:var(--textMuted); font-size:11px; font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80ch; transition:color .2s ease;}
|
||||
|
||||
.dividerWrap{display:flex; align-items:stretch; justify-content:center;}
|
||||
.divider{width:14px; cursor:col-resize; position:relative; background:transparent; border:none;}
|
||||
.divider{width:10px; cursor:col-resize; position:relative; background:transparent; border:none;}
|
||||
.divider::after{
|
||||
content:""; position:absolute; top:50%; left:50%;
|
||||
width:4px; height:54px; transform:translate(-50%,-50%);
|
||||
border-radius:999px;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 0/4px 12px,
|
||||
radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 6px/4px 12px;
|
||||
opacity:.20; pointer-events:none; transition:opacity .15s ease;
|
||||
radial-gradient(circle, rgba(140,165,220,.10) 35%, transparent 40%) 0 0/4px 12px,
|
||||
radial-gradient(circle, rgba(140,165,220,.10) 35%, transparent 40%) 0 6px/4px 12px;
|
||||
opacity:.20; pointer-events:none; transition:opacity .3s var(--ease-spring), height .3s var(--ease-spring);
|
||||
}
|
||||
.divider:hover::after{opacity:.52;}
|
||||
.divider:hover::after{opacity:.55; height:72px;}
|
||||
.divider:active::after{opacity:.70;}
|
||||
|
||||
.dock{flex:1 1 auto; min-height:0; border-top:1px solid rgba(255,255,255,.09); display:grid; grid-template-columns:62% 14px 38%; background:radial-gradient(900px 240px at 20% 0%, rgba(100,180,255,.06), transparent 60%), rgba(0,0,0,.10); overflow:hidden;}
|
||||
.dock{flex:1 1 auto; min-height:0; border-top:1px solid rgba(140,160,210,.04); display:grid; grid-template-columns:62% 10px 38%; background:rgba(0,0,0,.06); overflow:hidden;}
|
||||
.dockPane{min-height:0; display:flex; flex-direction:column; overflow:hidden;}
|
||||
.dockInner{padding:12px; min-height:0; display:flex; flex-direction:column; gap:10px; height:100%;}
|
||||
.dockHeader{padding:12px 14px 11px; border:1px solid rgba(255,255,255,.08); border-radius:7px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); flex:0 0 auto; box-shadow:0 14px 36px rgba(0,0,0,.25);}
|
||||
.dockInner{padding:10px; min-height:0; display:flex; flex-direction:column; gap:8px; height:100%;}
|
||||
.dockHeader{padding:10px 12px 9px; border:none; border-radius:var(--r2); display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface-2); flex:0 0 auto; transition:background .2s ease;}
|
||||
.dockHeader:hover{background:var(--surface-3);}
|
||||
#notesHeader{border-bottom-right-radius:7px;}
|
||||
#infoHeader{border-bottom-left-radius:7px; margin-right:12px;}
|
||||
.dockTitle{font-family:var(--brand); font-weight:800; letter-spacing:.02px; font-size:13.5px; color:rgba(246,248,255,.95); display:flex; align-items:center; gap:10px;}
|
||||
.dockTitle .fa{color:var(--iconStrong)!important; opacity:.88; font-size:14px;}
|
||||
.dockTitle{font-family:var(--brand); font-weight:700; letter-spacing:0; font-size:13px; color:rgba(218,225,240,.92); display:flex; align-items:center; gap:10px; transition:color .2s ease;}
|
||||
.dockHeader:hover .dockTitle{color:rgba(235,240,252,.98);}
|
||||
.dockTitle .fa{color:var(--iconStrong)!important; opacity:.88; font-size:14px; transition:transform .3s var(--ease-bounce), opacity .2s ease;}
|
||||
.dockHeader:hover .dockTitle .fa{transform:scale(1.12) rotate(-5deg); opacity:1;}
|
||||
|
||||
.notesArea{flex:1 1 auto; min-height:0; overflow:hidden; position:relative;}
|
||||
.notesSaved{
|
||||
position:absolute;
|
||||
bottom:12px; right:12px;
|
||||
padding:6px 10px;
|
||||
border-radius:6px;
|
||||
background:linear-gradient(135deg, rgba(100,200,130,.2), rgba(80,180,120,.15));
|
||||
border:1px solid rgba(100,200,130,.25);
|
||||
color:rgba(150,230,170,.95);
|
||||
border-radius:var(--r2);
|
||||
background:rgba(130,170,130,.12);
|
||||
border:none;
|
||||
color:rgba(160,195,160,.88);
|
||||
font-size:11px;
|
||||
font-weight:600;
|
||||
font-weight:700;
|
||||
letter-spacing:.02em;
|
||||
display:flex; align-items:center; gap:6px;
|
||||
opacity:0;
|
||||
transform:translateY(4px);
|
||||
transition:opacity .4s ease, transform .4s ease;
|
||||
transform:translateY(4px) scale(.95);
|
||||
transition:opacity .4s ease, transform .4s var(--ease-bounce);
|
||||
pointer-events:none;
|
||||
box-shadow:0 4px 12px rgba(0,0,0,.2);
|
||||
}
|
||||
.notesSaved.show{
|
||||
opacity:1;
|
||||
transform:translateY(0);
|
||||
transform:translateY(0) scale(1);
|
||||
}
|
||||
.notesSaved .fa{font-size:10px; color:rgba(130,220,160,.95)!important;}
|
||||
.notes{width:100%; height:100%; resize:none; border-radius:6px; border:1px solid rgba(255,255,255,.10); background:radial-gradient(900px 280px at 18% 0%, rgba(100,180,255,.09), transparent 62%), rgba(255,255,255,.02); color:rgba(246,248,255,.92); padding:12px 12px; outline:none; font-family:var(--sans); font-size:12.9px; line-height:1.45; letter-spacing:.08px; box-shadow:0 18px 45px rgba(0,0,0,.40); overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;}
|
||||
.notesSaved .fa{font-size:10px; color:rgba(150,190,150,.88)!important; transition:transform .3s var(--ease-bounce);}
|
||||
.notesSaved.show .fa{animation:checkBounce .5s var(--ease-bounce);}
|
||||
@keyframes checkBounce{
|
||||
0%{transform:scale(0) rotate(-45deg);}
|
||||
60%{transform:scale(1.3) rotate(5deg);}
|
||||
100%{transform:scale(1) rotate(0);}
|
||||
}
|
||||
.notes{width:100%; height:100%; resize:none; border-radius:var(--r3); border:1px solid transparent; background:var(--surface-0); color:rgba(218,225,240,.90); padding:10px 12px; outline:none; font-family:var(--sans); font-size:13px; line-height:1.45; letter-spacing:0; box-shadow:var(--shadowInset); overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(140,160,210,.10) transparent; transition:border-color .25s ease, box-shadow .25s ease, background .2s ease;}
|
||||
.notes:hover{background:rgba(140,165,220,.03);}
|
||||
.notes:focus{border-color:rgba(136,164,196,.25); box-shadow:var(--shadowInset), 0 0 0 2px rgba(136,164,196,.12);}
|
||||
.notes::-webkit-scrollbar{width:2px; height:2px;}
|
||||
.notes::-webkit-scrollbar-track{background:transparent;}
|
||||
.notes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:0;}
|
||||
.notes::-webkit-scrollbar-thumb{background:rgba(140,160,210,.10); border-radius:0;}
|
||||
.notes::-webkit-scrollbar-button{width:0; height:0; display:none;}
|
||||
.notes::placeholder{color:rgba(165,172,196,.55);}
|
||||
.notes::placeholder{color:rgba(155,170,200,.65); transition:color .2s ease;}
|
||||
.notes:focus::placeholder{color:rgba(148,162,192,.25);}
|
||||
|
||||
.infoGrid{
|
||||
flex:1 1 auto;
|
||||
@@ -84,61 +101,71 @@
|
||||
.infoGrid.at-bottom{--fade-bottom:0px;}
|
||||
.infoGrid::-webkit-scrollbar{width:0; height:0;}
|
||||
|
||||
dl.kv{margin:0;}
|
||||
dl.kv dt,dl.kv dd{margin:0; padding:0;}
|
||||
.kv{
|
||||
display:grid;
|
||||
grid-template-columns:78px 1fr;
|
||||
gap:4px 14px;
|
||||
gap:3px 12px;
|
||||
align-items:baseline;
|
||||
padding:12px 14px;
|
||||
border-radius:var(--r2);
|
||||
border:1px solid var(--strokeLight);
|
||||
background:linear-gradient(170deg, rgba(20,25,35,.65), rgba(14,18,26,.75));
|
||||
box-shadow:var(--shadow2), inset 0 1px 0 rgba(255,255,255,.02);
|
||||
margin-bottom:8px;
|
||||
padding:10px 12px;
|
||||
border-radius:var(--r3);
|
||||
border:none;
|
||||
background:rgba(10,13,20,.45);
|
||||
margin-bottom:6px;
|
||||
transition:background .2s ease;
|
||||
}
|
||||
.kv:hover{background:rgba(10,13,20,.55);}
|
||||
.k{
|
||||
font-family:var(--sans);
|
||||
font-size:9px;
|
||||
font-weight:800;
|
||||
font-size:10px;
|
||||
font-weight:700;
|
||||
text-transform:uppercase;
|
||||
letter-spacing:.12em;
|
||||
letter-spacing:.08em;
|
||||
color:var(--textDim);
|
||||
padding-top:3px;
|
||||
white-space:nowrap;
|
||||
transition:color .2s ease;
|
||||
}
|
||||
.kv:hover .k{color:rgba(148,162,192,.50);}
|
||||
.v{
|
||||
font-family:var(--brand);
|
||||
font-size:12.5px;
|
||||
font-weight:650;
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
color:var(--text);
|
||||
letter-spacing:-.01em;
|
||||
word-break:break-word;
|
||||
overflow-wrap:anywhere;
|
||||
line-height:1.35;
|
||||
padding-left:6px;
|
||||
transition:color .2s ease;
|
||||
}
|
||||
.kv:hover .v{color:rgba(230,235,248,.95);}
|
||||
.v.mono{
|
||||
font-family:var(--mono);
|
||||
font-size:11px;
|
||||
font-weight:500;
|
||||
font-weight:400;
|
||||
color:var(--textMuted);
|
||||
letter-spacing:.01em;
|
||||
letter-spacing:.02em;
|
||||
font-variant-numeric:tabular-nums;
|
||||
background:linear-gradient(90deg, var(--accentBg), transparent 80%);
|
||||
background:var(--accentBg);
|
||||
padding:2px 6px;
|
||||
border-radius:3px;
|
||||
margin:-2px 0;
|
||||
transition:background .2s ease, color .2s ease;
|
||||
}
|
||||
.kv:hover .v.mono{background:rgba(136,164,196,.09); color:rgba(170,185,215,.70);}
|
||||
|
||||
.dockDividerWrap{display:flex; align-items:stretch; justify-content:center;}
|
||||
.dockDivider{width:14px; cursor:col-resize; position:relative; background:transparent; border:none;}
|
||||
.dockDivider{width:10px; cursor:col-resize; position:relative; background:transparent; border:none;}
|
||||
.dockDivider::after{
|
||||
content:""; position:absolute; top:50%; left:50%;
|
||||
width:4px; height:44px; transform:translate(-50%,-50%);
|
||||
border-radius:999px;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 0/4px 12px,
|
||||
radial-gradient(circle, rgba(255,255,255,.10) 35%, transparent 40%) 0 6px/4px 12px;
|
||||
opacity:.18; pointer-events:none; transition:opacity .15s ease;
|
||||
radial-gradient(circle, rgba(140,165,220,.10) 35%, transparent 40%) 0 0/4px 12px,
|
||||
radial-gradient(circle, rgba(140,165,220,.10) 35%, transparent 40%) 0 6px/4px 12px;
|
||||
opacity:.18; pointer-events:none; transition:opacity .3s var(--ease-spring), height .3s var(--ease-spring);
|
||||
}
|
||||
.dockDivider:hover::after{opacity:.44;}
|
||||
.dockDivider:hover::after{opacity:.50; height:60px;}
|
||||
.dockDivider:active::after{opacity:.65;}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.videoWrap{position:relative; background:#000; flex:0 0 auto;}
|
||||
.videoWrap{position:relative; background:#000; flex:0 0 auto; overflow:hidden;}
|
||||
video{width:100%; height:auto; display:block; background:#000; aspect-ratio:16/9; outline:none; cursor:pointer;}
|
||||
video::cue{
|
||||
background:transparent;
|
||||
@@ -34,43 +34,26 @@ video::cue{
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
opacity:0;
|
||||
transition:opacity 0.8s ease;
|
||||
transition:opacity 0.8s var(--ease-spring), transform .3s var(--ease-bounce);
|
||||
border-radius:50%;
|
||||
background:rgba(20,25,35,.5);
|
||||
backdrop-filter:blur(8px) saturate(1.3);
|
||||
-webkit-backdrop-filter:blur(8px) saturate(1.3);
|
||||
border:1.5px solid rgba(255,255,255,.15);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0,0,0,.5),
|
||||
0 0 0 1px rgba(0,0,0,.3);
|
||||
background:rgba(15,17,23,.55);
|
||||
border:none;
|
||||
}
|
||||
.overlayIcon.show{
|
||||
opacity:1;
|
||||
}
|
||||
.overlayIcon.pulse{
|
||||
animation:overlayPulse 0.4s ease-out;
|
||||
animation:overlayPulse 0.4s var(--ease-bounce);
|
||||
}
|
||||
@keyframes overlayPulse{
|
||||
0%{transform:scale(1);}
|
||||
50%{transform:scale(1.15);}
|
||||
50%{transform:scale(1.18);}
|
||||
100%{transform:scale(1);}
|
||||
}
|
||||
.overlayIcon::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
border-radius:50%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 30%, rgba(255,255,255,.1), transparent 50%),
|
||||
radial-gradient(circle at 70% 70%, rgba(95,175,255,.08), transparent 50%);
|
||||
pointer-events:none;
|
||||
}
|
||||
.overlayIcon::before{display:none;}
|
||||
.overlayIcon.show:hover{
|
||||
border-color:rgba(255,255,255,.22);
|
||||
box-shadow:
|
||||
0 12px 40px rgba(0,0,0,.6),
|
||||
0 0 0 1px rgba(0,0,0,.4),
|
||||
0 0 40px rgba(95,175,255,.1);
|
||||
background:rgba(15,17,23,.65);
|
||||
transform:scale(1.08);
|
||||
}
|
||||
.overlayIcon i{
|
||||
font-size:36px;
|
||||
@@ -78,81 +61,67 @@ video::cue{
|
||||
filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
|
||||
position:relative;
|
||||
z-index:2;
|
||||
transition:transform 0.3s ease, color 0.3s ease;
|
||||
margin-left:4px; /* center play icon visually */
|
||||
transition:transform 0.3s var(--ease-bounce), color 0.3s ease;
|
||||
margin-left:4px;
|
||||
}
|
||||
.overlayIcon.pause i{
|
||||
margin-left:0;
|
||||
}
|
||||
.overlayIcon.show:hover i{
|
||||
transform:scale(1.1);
|
||||
transform:scale(1.15);
|
||||
color:rgba(255,255,255,1)!important;
|
||||
}
|
||||
|
||||
.controls{display:flex; flex-direction:column; gap:10px; padding:12px; border-top:1px solid var(--stroke); flex:0 0 auto; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.0));}
|
||||
.controlsRow{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
|
||||
.group{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
|
||||
.controls{display:flex; flex-direction:column; gap:10px; padding:12px; border-top:1px solid rgba(140,160,210,.04); flex:0 0 auto;}
|
||||
.controlsStrip{
|
||||
display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
|
||||
padding:5px 6px;
|
||||
border-radius:var(--r);
|
||||
border:none;
|
||||
background:var(--surface);
|
||||
transition:background .2s ease;
|
||||
}
|
||||
.controlsStrip:hover{background:rgba(140,165,220,.04);}
|
||||
.controlsStrip::after{display:none;}
|
||||
.stripDivider{width:1px; height:22px; background:rgba(140,160,210,.06); flex:0 0 auto; transition:background .2s ease, height .2s ease;}
|
||||
.controlsStrip:hover .stripDivider{background:rgba(140,160,210,.09); height:24px;}
|
||||
.group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
|
||||
.controlsStrip .iconBtn{box-shadow:none;}
|
||||
.controlsStrip .miniCtl{box-shadow:none;}
|
||||
.controlsStrip .timeChip{box-shadow:none;}
|
||||
|
||||
.iconBtn{
|
||||
width:40px; height:36px;
|
||||
border-radius:8px;
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0,0,0,.12),
|
||||
inset 0 1px 0 rgba(255,255,255,.06);
|
||||
border-radius:var(--r2);
|
||||
border:none;
|
||||
background:var(--surface-2);
|
||||
box-shadow:var(--shadow3);
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
cursor:pointer; user-select:none;
|
||||
transition:all .2s cubic-bezier(.4,0,.2,1);
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.iconBtn::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 70%);
|
||||
opacity:0;
|
||||
transition:opacity .2s ease;
|
||||
transition:all .2s var(--ease-bounce);
|
||||
}
|
||||
.iconBtn:hover{
|
||||
border-color:rgba(255,255,255,.15);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
|
||||
transform:translateY(-1px);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0,0,0,.2),
|
||||
inset 0 1px 0 rgba(255,255,255,.1);
|
||||
background:var(--surface-3);
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
.iconBtn:hover::before{opacity:1;}
|
||||
.iconBtn:active{
|
||||
transform:translateY(0);
|
||||
box-shadow:0 1px 4px rgba(0,0,0,.15);
|
||||
transform:scale(.9) translateY(0);
|
||||
transition-duration:.08s;
|
||||
}
|
||||
.iconBtn.primary{
|
||||
border-color:rgba(95,175,255,.25);
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.15), rgba(95,175,255,.05));
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0,0,0,.15),
|
||||
0 4px 16px rgba(95,175,255,.08),
|
||||
inset 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
.iconBtn.primary::before{
|
||||
background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.2), transparent 70%);
|
||||
background:rgba(136,164,196,.10);
|
||||
}
|
||||
.iconBtn.primary:hover{
|
||||
border-color:rgba(95,175,255,.4);
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.22), rgba(95,175,255,.08));
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0,0,0,.2),
|
||||
0 8px 24px rgba(95,175,255,.12),
|
||||
inset 0 1px 0 rgba(255,255,255,.15);
|
||||
background:rgba(136,164,196,.16);
|
||||
box-shadow:0 0 12px rgba(136,164,196,.10);
|
||||
}
|
||||
.iconBtn .fa{font-size:15px; color:var(--iconStrong)!important; opacity:.9; transition:transform .2s ease; position:relative; z-index:1;}
|
||||
.iconBtn:hover .fa{transform:scale(1.1);}
|
||||
.iconBtn .fa{font-size:15px; color:var(--iconStrong)!important; opacity:.9; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
|
||||
.iconBtn:hover .fa{transform:scale(1.15); opacity:1;}
|
||||
|
||||
.timeChip{display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:var(--surface); box-shadow:var(--shadow2); font-family:var(--mono); font-size:12px; color:var(--text); letter-spacing:.15px; font-variant-numeric:tabular-nums; transition:border-color .15s ease;}
|
||||
.timeDot{width:8px; height:8px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.90), rgba(130,230,180,.55)); box-shadow:0 0 0 3px rgba(130,230,180,.10); opacity:.95; transition:transform .3s ease; animation:pulse 2s ease-in-out infinite;}
|
||||
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95;} 50%{transform:scale(1.15);opacity:1;}}
|
||||
.timeChip{display:inline-flex; align-items:center; gap:8px; padding:6px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); font-family:var(--mono); font-size:12px; color:var(--text); letter-spacing:.02em; font-variant-numeric:tabular-nums; transition:background .2s ease;}
|
||||
.timeChip:hover{background:var(--surface-3);}
|
||||
.timeDot{width:8px; height:8px; border-radius:999px; background:rgba(136,164,196,.60); opacity:.95; transition:transform .3s ease, background .3s ease; animation:pulse 2s ease-in-out infinite;}
|
||||
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95;} 50%{transform:scale(1.2);opacity:1;}}
|
||||
|
||||
.seekWrap{display:flex; align-items:center; gap:10px; width:100%; position:relative;}
|
||||
.seekTrack{
|
||||
@@ -161,31 +130,35 @@ video::cue{
|
||||
height:10px;
|
||||
transform:translateY(-50%);
|
||||
border-radius:999px;
|
||||
background:rgba(255,255,255,.06);
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
box-shadow:0 8px 18px rgba(0,0,0,.28);
|
||||
background:rgba(140,165,220,.04);
|
||||
border:1px solid rgba(140,165,220,.06);
|
||||
box-shadow:var(--shadowInset);
|
||||
overflow:hidden;
|
||||
pointer-events:none;
|
||||
transition:height .2s var(--ease-bounce), border-color .2s ease;
|
||||
}
|
||||
.seekWrap:hover .seekTrack{height:12px; border-color:rgba(140,165,220,.09);}
|
||||
.seekFill{
|
||||
height:100%;
|
||||
width:0%;
|
||||
background:linear-gradient(90deg, rgba(95,175,255,.7), rgba(130,200,255,.5) 60%, rgba(180,230,200,.4));
|
||||
background:rgba(136,164,196,.50);
|
||||
border-radius:999px 0 0 999px;
|
||||
box-shadow:0 0 12px rgba(95,175,255,.3);
|
||||
transition:width .1s linear;
|
||||
transition:width .1s linear, background .2s ease;
|
||||
}
|
||||
.seekWrap:hover .seekFill{background:rgba(136,164,196,.62);}
|
||||
.seek{-webkit-appearance:none; appearance:none; width:100%; height:18px; border-radius:999px; background:transparent; border:none; box-shadow:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
|
||||
.seek::-webkit-slider-runnable-track{background:transparent; height:18px;}
|
||||
.seek::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 0 4px rgba(95,175,255,.15); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; margin-top:0;}
|
||||
.seek:hover::-webkit-slider-thumb{transform:scale(1.15); box-shadow:0 6px 16px rgba(0,0,0,.5), 0 0 0 6px rgba(95,175,255,.2);}
|
||||
.seek:active::-webkit-slider-thumb{transform:scale(1.05); box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 8px rgba(95,175,255,.25);}
|
||||
.seek::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 2px 6px rgba(0,0,0,.30); cursor:pointer; transition:transform .2s var(--ease-bounce), box-shadow .2s ease, border-color .2s ease; margin-top:0;}
|
||||
.seek:hover::-webkit-slider-thumb{transform:scale(1.2); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 10px rgba(136,164,196,.15); border-color:rgba(200,210,230,.40);}
|
||||
.seek:active::-webkit-slider-thumb{transform:scale(1.05); transition-duration:.08s;}
|
||||
.seek::-moz-range-track{background:transparent; height:18px;}
|
||||
.seek::-moz-range-thumb{width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:pointer;}
|
||||
.seek::-moz-range-thumb{width:16px; height:16px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 2px 6px rgba(0,0,0,.30); cursor:pointer;}
|
||||
|
||||
.miniCtl{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:var(--surface); box-shadow:var(--shadow2); position:relative; transition:border-color .15s ease;}
|
||||
.miniCtl:hover{border-color:rgba(255,255,255,.16);}
|
||||
.miniCtl .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; flex:0 0 auto;}
|
||||
.miniCtl{display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); position:relative; transition:all .2s var(--ease-bounce);}
|
||||
.miniCtl:hover{background:var(--surface-3); transform:translateY(-1px);}
|
||||
.miniCtl:active{transform:scale(.97) translateY(0); transition-duration:.08s;}
|
||||
.miniCtl .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; flex:0 0 auto; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
|
||||
.miniCtl:hover .fa{transform:scale(1.1); opacity:1;}
|
||||
|
||||
.volWrap{position:relative; width:120px; height:14px; display:flex; align-items:center;}
|
||||
.volTrack{
|
||||
@@ -194,25 +167,27 @@ video::cue{
|
||||
height:6px;
|
||||
transform:translateY(-50%);
|
||||
border-radius:999px;
|
||||
background:rgba(255,255,255,.06);
|
||||
border:1px solid rgba(255,255,255,.10);
|
||||
background:rgba(140,165,220,.04);
|
||||
border:1px solid rgba(140,165,220,.06);
|
||||
overflow:hidden;
|
||||
pointer-events:none;
|
||||
transition:height .2s var(--ease-bounce), border-color .2s ease;
|
||||
}
|
||||
.volWrap:hover .volTrack{height:8px; border-color:rgba(140,165,220,.09);}
|
||||
.volFill{
|
||||
height:100%;
|
||||
width:100%;
|
||||
background:linear-gradient(90deg, rgba(95,175,255,.6), rgba(130,200,255,.4));
|
||||
background:rgba(136,164,196,.40);
|
||||
border-radius:999px 0 0 999px;
|
||||
box-shadow:0 0 8px rgba(95,175,255,.2);
|
||||
transition:width .05s linear;
|
||||
transition:width .05s linear, background .2s ease;
|
||||
}
|
||||
.volWrap:hover .volFill{background:rgba(136,164,196,.55);}
|
||||
.vol{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px; background:transparent; border:none; outline:none; position:relative; z-index:2; cursor:pointer; margin:0;}
|
||||
.vol::-webkit-slider-runnable-track{background:transparent; height:14px;}
|
||||
.vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(95,175,255,.12); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
|
||||
.vol:hover::-webkit-slider-thumb{transform:scale(1.15); box-shadow:0 3px 10px rgba(0,0,0,.4), 0 0 0 4px rgba(95,175,255,.18);}
|
||||
.vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; transition:transform .2s var(--ease-bounce), box-shadow .2s ease;}
|
||||
.vol:hover::-webkit-slider-thumb{transform:scale(1.25); box-shadow:0 1px 6px rgba(0,0,0,.30), 0 0 8px rgba(136,164,196,.12);}
|
||||
.vol::-moz-range-track{background:transparent; height:14px;}
|
||||
.vol::-moz-range-thumb{width:14px; height:14px; border-radius:999px; border:2px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(200,220,255,.8)); box-shadow:0 2px 8px rgba(0,0,0,.35); cursor:pointer;}
|
||||
.vol::-moz-range-thumb{width:14px; height:14px; border-radius:999px; border:2px solid rgba(200,210,230,.28); background:rgba(220,228,240,.88); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer;}
|
||||
|
||||
.volTooltip{
|
||||
position:absolute;
|
||||
@@ -220,36 +195,22 @@ video::cue{
|
||||
left:0;
|
||||
padding:8px 12px;
|
||||
border-radius:var(--r2);
|
||||
background:
|
||||
radial-gradient(ellipse 120% 100% at 20% 0%, rgba(95,175,255,.12), transparent 50%),
|
||||
linear-gradient(175deg, rgba(28,34,48,.97), rgba(16,20,30,.98));
|
||||
border:1px solid rgba(255,255,255,.12);
|
||||
background:rgba(18,21,30,.95);
|
||||
border:1px solid rgba(140,160,210,.10);
|
||||
color:#fff;
|
||||
font-family:var(--mono);
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
letter-spacing:.03em;
|
||||
font-weight:400;
|
||||
letter-spacing:.02em;
|
||||
white-space:nowrap;
|
||||
pointer-events:none;
|
||||
opacity:0;
|
||||
transform:translateX(-50%) translateY(4px);
|
||||
transition:opacity .15s ease, transform .15s ease, left .05s linear;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,.3),
|
||||
0 4px 8px rgba(0,0,0,.2),
|
||||
0 12px 24px rgba(0,0,0,.25),
|
||||
inset 0 1px 0 rgba(255,255,255,.08);
|
||||
backdrop-filter:blur(16px);
|
||||
transform:translateX(-50%) translateY(4px) scale(.95);
|
||||
transition:opacity .2s ease, transform .25s var(--ease-bounce), left .05s linear;
|
||||
box-shadow:var(--shadow2);
|
||||
z-index:100;
|
||||
}
|
||||
.volTooltip::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0; left:0; right:0;
|
||||
height:1px;
|
||||
background:linear-gradient(90deg, transparent, rgba(95,175,255,.4) 50%, transparent);
|
||||
border-radius:var(--r2) var(--r2) 0 0;
|
||||
}
|
||||
.volTooltip::before{display:none;}
|
||||
.volTooltip::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
@@ -257,22 +218,34 @@ video::cue{
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
border:6px solid transparent;
|
||||
border-top-color:rgba(20,26,36,.95);
|
||||
border-top-color:rgba(18,21,30,.95);
|
||||
}
|
||||
.volTooltip.show{
|
||||
opacity:1;
|
||||
transform:translateX(-50%) translateY(0);
|
||||
transform:translateX(-50%) translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.speedBox{display:flex; align-items:center; gap:10px; position:relative;}
|
||||
.speedBtn{border:none; outline:none; background:transparent; color:rgba(246,248,255,.92); font-family:var(--mono); font-size:12px; letter-spacing:.10px; padding:0 2px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:8px; transition:color .15s ease;}
|
||||
.speedBtn span:first-child{min-width:3.5ch; text-align:right;}
|
||||
.speedBtn:hover{color:rgba(255,255,255,1);}
|
||||
.speedCaret .fa{font-size:12px; opacity:.85; color:var(--icon)!important; transition:transform .2s ease;}
|
||||
.speedBtn:hover .speedCaret .fa{transform:translateY(2px);}
|
||||
.speedBtn{border:none; outline:none; background:transparent; color:var(--text); font-family:var(--mono); font-size:12px; letter-spacing:0; padding:0 2px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; gap:8px; transition:color .15s ease, transform .15s ease;}
|
||||
.speedBtn span:first-child{min-width:3.5ch; text-align:right; transition:transform .15s var(--ease-bounce);}
|
||||
.speedBtn:hover{color:rgba(235,240,250,1);}
|
||||
.speedBtn:hover span:first-child{transform:scale(1.05);}
|
||||
.speedBtn:active{transform:scale(.95); transition-duration:.08s;}
|
||||
.speedCaret .fa{font-size:12px; opacity:.85; color:var(--icon)!important; transition:transform .25s var(--ease-bounce);}
|
||||
.speedBtn:hover .speedCaret .fa{transform:translateY(3px) rotate(180deg);}
|
||||
|
||||
.progressPill{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--strokeMed); background:radial-gradient(400px 100px at 20% 0%, var(--accentGlow), transparent 60%), var(--surface); box-shadow:var(--shadow2); min-width:220px;}
|
||||
.progressLabel{font-size:11.2px; font-weight:820; letter-spacing:.12px; text-transform:uppercase; color:rgba(190,198,220,.78); margin-right:2px;}
|
||||
.progressBar{width:120px; height:8px; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.05); overflow:hidden;}
|
||||
.progressBar>div{height:100%; width:0%; background:linear-gradient(90deg, rgba(100,180,255,.95), rgba(130,230,180,.88));}
|
||||
.progressPct{font-family:var(--mono); font-size:11.6px; color:rgba(230,235,255,.92); font-variant-numeric:tabular-nums; letter-spacing:.10px; min-width:58px; text-align:right;}
|
||||
.progressPill{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); min-width:220px; transition:background .2s ease;}
|
||||
.progressPill:hover{background:var(--surface-3);}
|
||||
.progressLabel{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--textMuted); margin-right:2px; transition:color .2s ease;}
|
||||
.progressPill:hover .progressLabel{color:rgba(170,185,215,.70);}
|
||||
.progressBar{width:120px; height:8px; border-radius:999px; border:none; background:rgba(140,165,220,.04); overflow:hidden; transition:height .2s var(--ease-bounce);}
|
||||
.progressPill:hover .progressBar{height:10px;}
|
||||
.progressBar>div{height:100%; width:0%; background:rgba(136,164,196,.75); transition:width .4s var(--ease-spring);}
|
||||
.progressPct{font-family:var(--mono); font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.02em; min-width:58px; text-align:right; transition:color .2s ease;}
|
||||
.progressPill:hover .progressPct{color:rgba(235,240,252,.98);}
|
||||
|
||||
.timeSep{color:rgba(175,185,210,.78);}
|
||||
.seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 2px 6px rgba(0,0,0,.30);}
|
||||
.vol:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}
|
||||
.seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 2px 6px rgba(0,0,0,.30);}
|
||||
.vol:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(136,164,196,.45), 0 1px 4px rgba(0,0,0,.25);}
|
||||
|
||||
@@ -31,70 +31,89 @@
|
||||
border-radius:2px;
|
||||
pointer-events:none;
|
||||
opacity:0;
|
||||
transition:opacity .4s ease;
|
||||
transition:opacity .4s ease, width .2s var(--ease-bounce);
|
||||
z-index:10;
|
||||
}
|
||||
.listWrap:hover .listScrollbar, .listScrollbar.active{opacity:1;}
|
||||
.listWrap:hover .listScrollbar{width:5px;}
|
||||
.listScrollbarThumb{
|
||||
position:absolute;
|
||||
top:0; left:0; right:0;
|
||||
min-height:24px;
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.3), rgba(95,175,255,.15));
|
||||
border:1px solid rgba(95,175,255,.2);
|
||||
background:rgba(136,164,196,.15);
|
||||
border:none;
|
||||
border-radius:2px;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,.2);
|
||||
transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
|
||||
transition:background .2s ease;
|
||||
cursor:grab;
|
||||
}
|
||||
.listScrollbarThumb:hover{
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.45), rgba(95,175,255,.25));
|
||||
border-color:rgba(95,175,255,.35);
|
||||
background:rgba(136,164,196,.30);
|
||||
}
|
||||
.listScrollbarThumb:active{
|
||||
cursor:grabbing;
|
||||
background:rgba(136,164,196,.35);
|
||||
}
|
||||
.listScrollbar.active .listScrollbarThumb{
|
||||
background:linear-gradient(180deg, rgba(95,175,255,.5), rgba(95,175,255,.3));
|
||||
border-color:rgba(95,175,255,.4);
|
||||
box-shadow:0 2px 12px rgba(95,175,255,.15);
|
||||
background:rgba(136,164,196,.30);
|
||||
}
|
||||
|
||||
.row{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 12px; border-bottom:1px solid var(--strokeLight); cursor:pointer; user-select:none; transition:background .2s ease, box-shadow .2s ease; box-shadow:inset 3px 0 0 transparent;}
|
||||
.row:hover{background:var(--surfaceHover); box-shadow:inset 3px 0 0 rgba(95,175,255,.45);}
|
||||
.row:active{transform:none;}
|
||||
.row.active{background:linear-gradient(90deg, var(--accentBg), transparent); box-shadow:inset 3px 0 0 rgba(95,175,255,.7), 0 0 0 1px var(--accentGlow) inset;}
|
||||
/* Row — no transform/padding changes (preserves drag-and-drop) */
|
||||
.row{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid var(--strokeLight); cursor:pointer; user-select:none; transition:background .2s ease, box-shadow .2s ease; box-shadow:inset 3px 0 0 transparent;}
|
||||
.row:hover{background:var(--surfaceHover); box-shadow:inset 3px 0 0 rgba(136,164,196,.40);}
|
||||
.row:active{background:var(--surfaceActive);}
|
||||
.row.active{background:var(--accentBg); box-shadow:inset 3px 0 0 rgba(136,164,196,.65);}
|
||||
.row:focus-visible{outline-offset:-2px; background:var(--surfaceHover); box-shadow:inset 3px 0 0 rgba(136,164,196,.40);}
|
||||
.row.dragging{opacity:.55;}
|
||||
|
||||
.left{min-width:0; display:flex; align-items:flex-start; gap:10px; flex:1 1 auto;}
|
||||
.numBadge{flex:0 0 auto; min-width:38px; height:22px; padding:0 8px; border-radius:999px; border:1px solid var(--strokeMed); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 55%), var(--surface); box-shadow:var(--shadow2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11.8px; letter-spacing:.08px; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; transition:all .2s ease; transform:translateX(0);}
|
||||
.row:hover .numBadge{border-color:var(--accentBorder); background:radial-gradient(200px 60px at 20% 0%, var(--accentGlow), transparent 50%), var(--surfaceHover); transform:translateX(4px);}
|
||||
.left{min-width:0; display:flex; align-items:flex-start; gap:8px; flex:1 1 auto;}
|
||||
.numBadge{flex:0 0 auto; min-width:38px; height:22px; padding:0 8px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--text); font-variant-numeric:tabular-nums; margin-top:1px; transition:all .2s var(--ease-bounce);}
|
||||
.row:hover .numBadge{background:var(--surface-3); transform:scale(1.06);}
|
||||
|
||||
/* Tree connectors — fully static, opaque, dark lines */
|
||||
.treeSvg{flex:0 0 auto; margin-top:1px; overflow:visible;}
|
||||
.treeSvg line{stroke:rgb(65,75,95); stroke-width:1.5;}
|
||||
.treeSvg circle{fill:rgba(230,240,255,.70); stroke:rgba(100,180,255,.22); stroke-width:1; transition:all .15s ease;}
|
||||
.row:hover .treeSvg circle{fill:rgba(240,250,255,.85); stroke:rgba(100,180,255,.35);}
|
||||
.treeSvg line{stroke:rgb(40,46,60); stroke-width:1.5;}
|
||||
.treeSvg circle{fill:rgba(200,212,238,.60); stroke:rgba(136,164,196,.18); stroke-width:1;}
|
||||
|
||||
.textWrap{min-width:0; flex:1 1 auto; transition:transform .2s ease; transform:translateX(0);}
|
||||
.row:hover .textWrap{transform:translateX(4px);}
|
||||
.name{font-size:12.9px; font-weight:820; letter-spacing:.12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
|
||||
.row:hover .name{color:rgba(255,255,255,.98);}
|
||||
.small{margin-top:4px; font-size:11.4px; color:var(--textMuted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s ease;}
|
||||
.row:hover .small{color:rgba(175,185,210,.85);}
|
||||
.textWrap{min-width:0; flex:1 1 auto;}
|
||||
.name{font-size:13px; font-weight:700; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s var(--ease-spring), text-shadow .2s ease, transform .2s var(--ease-bounce); transform:translateX(0);}
|
||||
.row:hover .name{color:rgba(235,240,252,.96); text-shadow:0 0 20px rgba(136,164,196,.08); transform:translateX(4px);}
|
||||
.small{margin-top:4px; font-size:11px; color:var(--textMuted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease;}
|
||||
.row:hover .small{color:rgba(170,182,210,.75);}
|
||||
|
||||
.tag{flex:0 0 auto; display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; border:1px solid var(--stroke); background:var(--surface); color:var(--textMuted); font-size:11px; font-weight:820; letter-spacing:.12px; text-transform:uppercase; margin-top:2px; transition:all .15s ease;}
|
||||
.tag.now{border-color:var(--accentBorder); color:rgba(215,240,255,.90); background:var(--accentBg);}
|
||||
.tag.done{border-color:var(--successBorder); color:rgba(210,255,230,.88); background:var(--successBg);}
|
||||
.tag{flex:0 0 auto; display:inline-flex; align-items:center; padding:5px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); color:var(--textMuted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; transition:all .2s var(--ease-bounce);}
|
||||
.row:hover .tag{transform:scale(1.05);}
|
||||
.tag.now{color:rgba(170,195,230,.88); background:var(--accentBg); animation:tagGlow 3s ease-in-out infinite;}
|
||||
@keyframes tagGlow{
|
||||
0%,100%{box-shadow:0 0 0 0 rgba(136,164,196,0);}
|
||||
50%{box-shadow:0 0 8px 0 rgba(136,164,196,.12);}
|
||||
}
|
||||
.tag.done{color:rgba(160,195,160,.78); background:var(--successBg);}
|
||||
.row:hover .tag.done{color:rgba(175,210,175,.88);}
|
||||
.tag.hidden{display:none;}
|
||||
.row:hover .tag{transform:scale(1.02);}
|
||||
|
||||
.row.drop-before::before,.row.drop-after::after{
|
||||
content:""; position:absolute; left:10px; right:10px; border-top:2px solid var(--accent);
|
||||
pointer-events:none; filter:drop-shadow(0 0 10px var(--accentGlow));
|
||||
pointer-events:none;
|
||||
animation:dropLineFlash .6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dropLineFlash{
|
||||
0%,100%{opacity:.6;}
|
||||
50%{opacity:1;}
|
||||
}
|
||||
.row.drop-before::before{top:-1px;}
|
||||
.row.drop-after::after{bottom:-1px;}
|
||||
|
||||
.empty{padding:14px 12px; color:var(--textMuted); font-size:12.5px; line-height:1.4;}
|
||||
.empty{padding:10px 12px; color:var(--textMuted); font-size:13px; line-height:1.4;}
|
||||
|
||||
.playlistHeader{font-weight:900; letter-spacing:.16px; font-size:13.8px; cursor:help; display:flex; align-items:center; gap:10px;}
|
||||
.playlistHeader .fa{color:var(--iconStrong)!important; opacity:.92;}
|
||||
.playlistHeader{font-family:var(--brand); font-weight:800; letter-spacing:-.01em; font-size:14px; cursor:help; display:flex; align-items:center; gap:10px; transition:color .2s ease;}
|
||||
.playlistHeader:hover{color:rgba(235,240,252,.98);}
|
||||
.playlistHeader .fa{color:var(--iconStrong)!important; opacity:.92; transition:transform .3s var(--ease-bounce), opacity .2s ease;}
|
||||
.playlistHeader:hover .fa{transform:rotate(-8deg) scale(1.12); opacity:1;}
|
||||
|
||||
.moveWrap{display:flex; flex-direction:column; gap:2px; flex:0 0 auto; opacity:0; transition:opacity .2s ease;}
|
||||
.row:hover .moveWrap, .row:focus-within .moveWrap{opacity:1;}
|
||||
.moveBtn{width:22px; height:18px; border:none; background:var(--surface-2); border-radius:var(--r3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s var(--ease-bounce); padding:0;}
|
||||
.moveBtn:hover{background:var(--surface-3); transform:scale(1.1);}
|
||||
.moveBtn:active{transform:scale(.9); transition-duration:.08s;}
|
||||
.moveBtn .fa{font-size:9px; color:var(--iconStrong)!important; opacity:.7;}
|
||||
.moveBtn:hover .fa{opacity:1;}
|
||||
|
||||
Reference in New Issue
Block a user