feat: implement library.rs, types.ts, api.ts, and extract CSS
- library.rs: full video library management (1948 lines, 10 tests) folder scanning, progress tracking, playlists, subtitle integration, background duration scanning - types.ts: all TypeScript interfaces for Tauri command responses - api.ts: typed wrappers for all 26 Tauri invoke commands - 6 CSS files extracted from Python HTML into src/styles/
This commit is contained in:
Your Name
182
src/styles/components.css
Normal file
182
src/styles/components.css
Normal file
@@ -0,0 +1,182 @@
|
||||
/* Notification toast */
|
||||
#toast{
|
||||
position:fixed;
|
||||
left:28px;
|
||||
bottom:28px;
|
||||
z-index:999999;
|
||||
transform:translateY(20px) scale(var(--zoom));
|
||||
transform-origin:bottom left;
|
||||
pointer-events:none;
|
||||
opacity:0;
|
||||
transition:opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
#toast.show{
|
||||
opacity:1;
|
||||
transform:translateY(0) scale(var(--zoom));
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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;}
|
||||
.toastMsg{
|
||||
font-size:12.8px;
|
||||
font-weight:760;
|
||||
letter-spacing:.12px;
|
||||
color:rgba(246,248,255,.92);
|
||||
}
|
||||
|
||||
/* Toolbar icon buttons */
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.toolbarIcon:hover::before{opacity:1;}
|
||||
.toolbarIcon:active{
|
||||
transform:translateY(0);
|
||||
box-shadow:0 2px 6px rgba(0,0,0,.18);
|
||||
}
|
||||
|
||||
/* Fancy tooltip */
|
||||
.tooltip{
|
||||
position:fixed;
|
||||
pointer-events:none;
|
||||
z-index:99999;
|
||||
border-radius:var(--r);
|
||||
padding:16px 20px;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
.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-title{
|
||||
font-family:var(--brand);
|
||||
font-weight:800;
|
||||
font-size:14px;
|
||||
margin-bottom:8px;
|
||||
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;
|
||||
}
|
||||
.tooltip-desc{
|
||||
font-family:var(--sans);
|
||||
font-size:12px;
|
||||
font-weight:500;
|
||||
color:rgba(190,200,225,.88);
|
||||
line-height:1.55;
|
||||
letter-spacing:.01em;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
.tooltip-desc:empty{display:none;}
|
||||
.tooltip-desc:empty ~ .tooltip-title{margin-bottom:0;}
|
||||
|
||||
.subsBox{position:relative;}
|
||||
.subsMenu{
|
||||
position:absolute; left:50%; bottom:calc(100% + 10px);
|
||||
transform:translateX(-50%);
|
||||
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);
|
||||
display:none; z-index:30;
|
||||
}
|
||||
.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;}
|
||||
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
.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);}
|
||||
Reference in New Issue
Block a user