c0a8eca955
- Fix all text colors to meet WCAG 2.2 AAA 7:1 contrast ratios against dark backgrounds (--textMuted, --textDim, hover states across playlist, player, panels, tooltips) - Fix speed menu rendering behind seek bar by correcting z-index stacking context (.controls z-index:10, .miniCtl z-index:3, .seek z-index:2) - Replace default Tauri icons with custom TutorialVault icon across all required sizes (32-512px PNGs, ICO, ICNS, Windows Square logos) - Update README: Fraunces → Bricolage Grotesque font reference - Add collapsible dock pane persistence and keyboard-adjustable dividers
304 lines
13 KiB
CSS
304 lines
13 KiB
CSS
.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;
|
|
color:#fff;
|
|
font-family:var(--sans);
|
|
font-size:1.1em;
|
|
font-weight:600;
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000,
|
|
-2px 0 0 #000,
|
|
2px 0 0 #000,
|
|
0 -2px 0 #000,
|
|
0 2px 0 #000;
|
|
}
|
|
|
|
.videoOverlay{
|
|
position:absolute;
|
|
inset:0;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
pointer-events:none;
|
|
z-index:5;
|
|
}
|
|
.overlayIcon{
|
|
position:relative;
|
|
width:100px;
|
|
height:100px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
opacity:0;
|
|
transition:opacity 0.8s var(--ease-spring), transform .3s var(--ease-bounce);
|
|
border-radius:50%;
|
|
background:rgba(15,17,23,.55);
|
|
border:none;
|
|
}
|
|
.overlayIcon.show{
|
|
opacity:1;
|
|
}
|
|
.overlayIcon.pulse{
|
|
animation:overlayPulse 0.4s var(--ease-bounce);
|
|
}
|
|
@keyframes overlayPulse{
|
|
0%{transform:scale(1);}
|
|
50%{transform:scale(1.18);}
|
|
100%{transform:scale(1);}
|
|
}
|
|
.overlayIcon::before{display:none;}
|
|
.overlayIcon.show:hover{
|
|
background:rgba(15,17,23,.65);
|
|
transform:scale(1.08);
|
|
}
|
|
.overlayIcon i{
|
|
font-size:36px;
|
|
color:rgba(255,255,255,.92)!important;
|
|
filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
|
|
position:relative;
|
|
z-index:2;
|
|
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.15);
|
|
color:rgba(255,255,255,1)!important;
|
|
}
|
|
|
|
.controls{display:flex; flex-direction:column; gap:10px; padding:12px; border-top:1px solid rgba(140,160,210,.04); flex:0 0 auto; position:relative; z-index:10;}
|
|
.controlsStrip{
|
|
display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
|
|
padding:5px 6px;
|
|
border:none;
|
|
background:transparent;
|
|
}
|
|
.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{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: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 var(--ease-bounce);
|
|
}
|
|
.iconBtn:hover{
|
|
background:var(--surface-3);
|
|
transform:translateY(-2px);
|
|
}
|
|
.iconBtn:active{
|
|
transform:scale(.9) translateY(0);
|
|
transition-duration:.08s;
|
|
}
|
|
.iconBtn.primary{
|
|
background:rgba(136,164,196,.10);
|
|
}
|
|
.iconBtn.primary:hover{
|
|
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 var(--ease-bounce), opacity .15s ease;}
|
|
.iconBtn:hover .fa{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{
|
|
position:absolute;
|
|
left:0; right:0; top:50%;
|
|
height:10px;
|
|
transform:translateY(-50%);
|
|
border-radius:999px;
|
|
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:rgba(136,164,196,.50);
|
|
border-radius:999px 0 0 999px;
|
|
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: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: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:8px; padding:6px 9px; border-radius:var(--r2); border:none; background:var(--surface-2); box-shadow:var(--shadow3); position:relative; z-index:3; 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{
|
|
position:absolute;
|
|
left:0; right:0; top:50%;
|
|
height:6px;
|
|
transform:translateY(-50%);
|
|
border-radius:999px;
|
|
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:rgba(136,164,196,.40);
|
|
border-radius:999px 0 0 999px;
|
|
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(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(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;
|
|
bottom:calc(100% + 12px);
|
|
left:0;
|
|
padding:8px 12px;
|
|
border-radius:var(--r2);
|
|
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:400;
|
|
letter-spacing:.02em;
|
|
white-space:nowrap;
|
|
pointer-events:none;
|
|
opacity:0;
|
|
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{display:none;}
|
|
.volTooltip::after{
|
|
content:"";
|
|
position:absolute;
|
|
top:100%;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
border:6px solid transparent;
|
|
border-top-color:rgba(18,21,30,.95);
|
|
}
|
|
.volTooltip.show{
|
|
opacity:1;
|
|
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: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: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:var(--textMuted);}
|
|
.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);}
|
|
|
|
/* Mute button */
|
|
.volMuteBtn{border:none; background:transparent; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 auto;}
|
|
.volMuteBtn .fa{font-size:14px; color:var(--iconStrong)!important; opacity:.95; transition:transform .2s var(--ease-bounce), opacity .15s ease;}
|
|
.volMuteBtn:hover .fa{transform:scale(1.15); opacity:1;}
|
|
.volMuteBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px; border-radius:3px;}
|
|
.miniCtl.muted{opacity:.5;}
|
|
.miniCtl.muted .volFill{opacity:.3;}
|
|
|
|
/* Seek feedback overlay */
|
|
.seekFeedback{
|
|
position:absolute;
|
|
top:50%; left:50%;
|
|
transform:translate(-50%,-50%);
|
|
font-family:var(--mono);
|
|
font-size:28px;
|
|
font-weight:700;
|
|
color:#fff;
|
|
text-shadow:0 2px 8px rgba(0,0,0,.7);
|
|
opacity:0;
|
|
transition:opacity .15s ease;
|
|
pointer-events:none;
|
|
z-index:6;
|
|
}
|
|
.seekFeedback.show{opacity:1;}
|
|
|
|
/* Error overlay */
|
|
.errorOverlay{
|
|
position:absolute;
|
|
inset:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:16px;
|
|
background:rgba(15,17,23,.88);
|
|
z-index:10;
|
|
}
|
|
.errorOverlay>.fa{font-size:42px; color:rgba(255,180,100,.85);}
|
|
.errorMsg{font-size:14px; color:rgba(218,225,240,.85); text-align:center; line-height:1.5; max-width:320px;}
|
|
.errorNextBtn{
|
|
border:none;
|
|
background:var(--surface-3);
|
|
color:var(--text);
|
|
padding:10px 20px;
|
|
border-radius:var(--r2);
|
|
font-size:13px;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
min-width:44px;
|
|
min-height:44px;
|
|
transition:background .2s ease;
|
|
}
|
|
.errorNextBtn:hover{background:var(--surface-4);}
|
|
.errorNextBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:2px;}
|