Greasy Fork is available in English.

Youtube chapter panel on top of video

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;
}
}