moves the chapter panel (invisible) on top of the video (designed for theater mode). Shows up when hovering over it.
/* ==UserStyle==
@name Youtube chapter panel on top of video
@version 1.0.8
@description moves the chapter panel (invisible) on top of the video (designed for theater mode). Shows up when hovering over it.
@author toppits
@license idc
@namespace toppits
@advanced dropdown toggle_left "Toggle Panel side" {
0 "Right (default)" <<<EOT
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
left: inherit !important;
right: 0 !important;
} EOT;
1 "Left" <<<EOT
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
left: 0 !important;
max-width: 450px !important;
} EOT;
}
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com") {
ytd-watch-flexy {
--ytd-watch-flexy-panel-max-height: calc(var(--ytd-watch-flexy-height-ratio) / var(--ytd-watch-flexy-width-ratio) * (100vw - 100px)) !important;
}
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
position: absolute;
opacity: 0 !important;
top: 0 !important;
z-index: 9999999 !important;
height: var(--ytd-watch-flexy-panel-max-height) !important;
max-height: var(--ytd-watch-flexy-panel-max-height) !important;
margin: 0 !important;
}
/*[[toggle_left]]*/
#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy:hover {
opacity: 1 !important;
transition-duration: .5s !important;
}
/*current chapter*/
#sync-button.ytd-macro-markers-list-renderer {
border-radius: 4px !important;
}
}