WCAG 2.2 AAA compliance pass
This commit is contained in:
@@ -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%;}
|
||||
|
||||
Reference in New Issue
Block a user