e0059fd3d5
1. Mute toggle (M key + volume icon click) 2. Fullscreen shortcut (F key) 3. Seek feedback overlay (±5s flash with accumulation) 4. Playlist search/filter with clear button 5. Scroll-to-current button (IntersectionObserver) 6. Picture-in-Picture button 7. Timestamp insertion in notes 8. Keyboard shortcut help panel (? key) 9. Playback speed shortcuts ([ and ] keys) 10. Reset progress two-click confirmation 11. Video load error state overlay 12. Double-click video to fullscreen 13. Playlist stats in header (count + done) 14. Mini progress bars per playlist item 15. Collapsible dock panes with chevron icons All enhancements are WCAG 2.2 AAA compliant with proper aria-labels, aria-live regions, focus-visible states, keyboard accessibility, and 44x44 touch targets.
225 lines
6.9 KiB
CSS
225 lines
6.9 KiB
CSS
/* 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 .35s var(--ease-bounce);
|
|
}
|
|
#toast.show{
|
|
opacity:1;
|
|
transform:translateY(0) scale(var(--zoom));
|
|
}
|
|
.toastInner{
|
|
pointer-events:none;
|
|
display:flex; align-items:center; gap:12px;
|
|
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(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:13px;
|
|
font-weight:600;
|
|
letter-spacing:0;
|
|
color:var(--text);
|
|
}
|
|
|
|
/* Toolbar icon buttons — borderless */
|
|
.toolbarIcon{
|
|
width:36px; height:36px;
|
|
border-radius:var(--r2);
|
|
background:var(--surface-2);
|
|
border:none;
|
|
color:rgba(218,225,240,.85);
|
|
font-size:14px;
|
|
transition:all .2s var(--ease-bounce);
|
|
}
|
|
.toolbarIcon:hover{
|
|
background:var(--surface-3);
|
|
color:rgba(235,240,252,.95);
|
|
transform:translateY(-1px);
|
|
}
|
|
.toolbarIcon:active{
|
|
transform:scale(.9) translateY(0);
|
|
transition-duration:.08s;
|
|
}
|
|
|
|
/* Tooltip */
|
|
.tooltip{
|
|
position:fixed;
|
|
pointer-events:none;
|
|
z-index:99999;
|
|
border-radius:var(--r);
|
|
padding:14px 16px;
|
|
opacity:0;
|
|
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);
|
|
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{display:none;}
|
|
.tooltip::after{display:none;}
|
|
.tooltip-title{
|
|
font-family:var(--brand);
|
|
font-weight:700;
|
|
font-size:14px;
|
|
margin-bottom:6px;
|
|
letter-spacing:-.01em;
|
|
color:rgba(235,240,252,.95);
|
|
}
|
|
.tooltip-desc{
|
|
font-family:var(--sans);
|
|
font-size:12px;
|
|
font-weight:500;
|
|
color:rgba(170,182,210,.82);
|
|
line-height:1.55;
|
|
letter-spacing:0;
|
|
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%) scale(.95);
|
|
min-width:220px; padding:8px;
|
|
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; 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: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;
|
|
transform:scale(.95) translateY(4px);
|
|
transition:opacity .15s ease, transform .2s var(--ease-bounce);
|
|
}
|
|
.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;}
|
|
|
|
/* Keyboard shortcut help dialog */
|
|
.shortcutHelp{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:999999;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
.shortcutHelpBackdrop{
|
|
position:absolute;
|
|
inset:0;
|
|
background:rgba(0,0,0,.55);
|
|
}
|
|
.shortcutHelpPanel{
|
|
position:relative;
|
|
z-index:1;
|
|
padding:28px 32px;
|
|
border-radius:var(--r);
|
|
background:rgba(18,21,30,.97);
|
|
border:1px solid rgba(140,160,210,.12);
|
|
box-shadow:var(--shadow);
|
|
max-width:420px;
|
|
width:90%;
|
|
}
|
|
.shortcutHelpTitle{
|
|
font-family:var(--brand);
|
|
font-weight:700;
|
|
font-size:16px;
|
|
margin:0 0 20px;
|
|
color:rgba(235,240,252,.95);
|
|
letter-spacing:-.01em;
|
|
}
|
|
.shortcutGrid{
|
|
display:grid;
|
|
grid-template-columns:auto 1fr;
|
|
gap:10px 20px;
|
|
align-items:baseline;
|
|
}
|
|
.shortcutKey{
|
|
text-align:right;
|
|
white-space:nowrap;
|
|
}
|
|
.shortcutKey kbd{
|
|
display:inline-block;
|
|
padding:3px 8px;
|
|
border-radius:4px;
|
|
background:rgba(140,165,220,.08);
|
|
border:1px solid rgba(140,165,220,.12);
|
|
font-family:var(--mono);
|
|
font-size:12px;
|
|
color:rgba(200,212,238,.88);
|
|
line-height:1;
|
|
}
|
|
.shortcutDesc{
|
|
font-size:13px;
|
|
color:rgba(200,212,238,.78);
|
|
}
|
|
.shortcutHelpClose{
|
|
margin-top:20px;
|
|
text-align:center;
|
|
font-size:11px;
|
|
color:var(--textDim);
|
|
}
|
|
.shortcutHelpClose kbd{
|
|
display:inline-block;
|
|
padding:2px 6px;
|
|
border-radius:3px;
|
|
background:rgba(140,165,220,.06);
|
|
border:1px solid rgba(140,165,220,.10);
|
|
font-family:var(--mono);
|
|
font-size:11px;
|
|
color:rgba(170,182,210,.70);
|
|
}
|