feat: add 15 UI enhancements
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.
This commit is contained in:
@@ -169,3 +169,24 @@ dl.kv dt,dl.kv dd{margin:0; padding:0;}
|
||||
}
|
||||
.dockDivider:hover::after{opacity:.50; height:60px;}
|
||||
.dockDivider:active::after{opacity:.65;}
|
||||
|
||||
/* Timestamp button */
|
||||
.timestampBtn{border:none; background:transparent; padding:0; margin:0 0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r3); transition:all .2s var(--ease-bounce);}
|
||||
.timestampBtn:hover{background:var(--surface-3); transform:scale(1.1);}
|
||||
.timestampBtn:active{transform:scale(.9); transition-duration:.08s;}
|
||||
.timestampBtn .fa{font-size:12px; color:var(--iconStrong)!important; opacity:.75; transition:opacity .15s ease;}
|
||||
.timestampBtn:hover .fa{opacity:1;}
|
||||
.timestampBtn:focus-visible{outline:2px solid rgba(136,164,196,.45); outline-offset:1px;}
|
||||
|
||||
/* Dock chevron */
|
||||
.dockChevron{font-size:10px; color:var(--textDim); transition:transform .25s var(--ease-bounce), color .2s ease; margin-left:4px; flex:0 0 auto;}
|
||||
.dockHeader:hover .dockChevron{color:var(--textMuted);}
|
||||
|
||||
/* Collapsible dock pane */
|
||||
.dockPane.collapsed{flex:0 0 auto !important;}
|
||||
.dockPane.collapsed .notesArea,
|
||||
.dockPane.collapsed .infoGrid{display:none;}
|
||||
|
||||
/* Reset confirm state */
|
||||
.toolbarBtn.confirming{background:rgba(255,70,70,.14);}
|
||||
.toolbarBtn.confirming .fa{color:rgba(255,160,100,.9)!important;}
|
||||
|
||||
Reference in New Issue
Block a user