ニコニコRestyle by minamitu

/* ==UserStyle==
@name           ニコニコRestyle
@namespace      https://userstyles.world/user/minamitu
@version        2.3.3
@description    動画ページと検索ページを変更
@author         minamitu
@license        CC-BY 4.0
@preprocessor	uso
/*uso stylus*\/
@advanced dropdown  preset"ー動画ー カラープリセット" {
	1 "custom*" <<<EOT  EOT;	
	2 "youtube" <<<EOT --Themecolor:#ff0000; EOT;
	3 "spotify" <<<EOT --Themecolor:#1db954; EOT;
	4 "discord" <<<EOT --Themecolor:#4752c4; EOT;
	5 "ニコニコ動画" <<<EOT --Themecolor:#007cff; EOT;
	6 "bilibili" <<<EOT --Themecolor:#00a1d6; EOT;
	7 "FC2動画" <<<EOT --Themecolor:#ef5763; EOT;
	8 "soundcloud" <<<EOT --Themecolor:#f50; EOT;
}
@advanced color themecolor "ー動画ー カスタムテーマカラー" #008080
@advanced text maxsize "ー動画ー ページ最大幅(px) *数字のみ入力 1024以上" 1754
@advanced dropdown videocontrolhide "ー動画ー 動画操作パネルを隠す" {
	1 "有効*" <<<EOT
			body:not(.is-fullscreen) .PlayerContainer {
				background-color: rgb(95, 95, 95);
				height: calc(9 * var(--Videowidth) / 16 + 4px);
				--top: 26px;
				--h: 36px;
				--control_h:calc(var(--h) + var(--top) - 36px);
				--control_h_hover:calc(var(--h) + var(--top));
				--control_o:0;
				--coverbottomspase:44px;
			}
			body:not(.is-fullscreen) .ControllerBoxContainer {
				background: transparent;
				pointer-events: none;
			}
			body:not(.is-fullscreen) .ControllerBoxContainer > * {
				pointer-events: auto;
			}

			body:not(.is-fullscreen) .MainContainer-player .SeekBarContainer {
				transition: all 0.3s;
			}
			body:not(.is-fullscreen) :is(.SeekBarContainer , .VideoAdSeekBarContainer) {
				padding: 0;
				top: calc(var(--h) + var(--top) - 36px);
			}
			body:not(.is-fullscreen) .SeekBar {
				background-color: rgba(79, 79, 79, .61);
			}
			body:not(.is-fullscreen) .ControllerBoxContainer {
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
				position: absolute;

				padding-top: 0;
				box-sizing: content-box !important;
				width: fit-content;
				margin: auto;
			}
			body:not(.is-fullscreen) .ControllerBoxContainer::after{
				content:"";
				display:block;
				position:absolute;
				height:6px;
				width:100%;
				bottom:-6px;
				z-index:100;
				pointer-events: auto;
			}
			@supports (backdrop-filter: blur()) {
				body:not(.is-fullscreen) .ControllerBoxContainer::before{
					backdrop-filter: blur(0px);
					content:"";
					disolay:block;
					position:absolute;
					width:100%;
					height: calc(100% - 26px);
					bottom:0;
				}
			}
			body:not(.is-fullscreen) .ControllerContainer-inner {
				top: calc(var(--h) + var(--top) - 36px);
			}
			body:not(.is-fullscreen) .ControllerContainer {
				position: relative;
				transition: opacity .2s , height .2s;
				height: calc(var(--h) + var(--top) - 36px);
				overflow: hidden;
				opacity: 0;
				background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.23) 65%, rgba(0, 0, 0, 0) 80%);
				width: var(--Videowidth);
			}
			
			body:not(.is-fullscreen) .InView.VideoContainer:hover ~ .ControllerBoxContainer .ControllerContainer,
			body:not(.is-fullscreen) :is(.SeekBarContainer , .VideoAdSeekBarContainer):hover ~ .ControllerContainer,
			body:not(.is-fullscreen) .ControllerContainer:hover {
				height: calc(var(--h) + var(--top)) ;
				opacity: 1 ;
			}
			body:not(.is-fullscreen) .VideoOverlayContainer {
				bottom: calc(var(--h) + var(--top)) !important;
			}

			.ControllerBoxContainer.is-videoAdVisible .ControllerContainer{
				pointer-events: none;
			}
			.ControllerBoxContainer.is-videoAdVisible .ControllerContainer > *{
				pointer-events: auto;
			}
			body:not(.is-fullscreen) .VideoAdContainer:not(.is-invisible){
				z-index:5;
			}
			body:not(.is-fullscreen) .VideoAdContainer:not(.is-invisible) ~ .VideoEndScreenContainer{
				z-index:-5;
			}

	EOT;
    2 "無効" <<<EOT  EOT;
}
@advanced dropdown video_click "ー動画ー 動画をクリックして再生停止" {
    1 "有効*" <<<EOT 
			.ControllerContainer{
				overflow: visible !important;		
			}
			.PlayerContainer{
				overflow-y:clip;
			}
			.ControllerBoxContainer:not(.is-videoAdVisible) .ControllerContainer-area > :is(.PlayerPlayButton , .PlayerPauseButton)::before{
				content:"";
				position:absolute;
				bottom:48px;
				left:0;
				height:calc(9 * var(--Videowidth) / 16);
				width:var(--Videowidth);
				background:#f000;
				opacity:1;
			}
			.ControllerContainer-area > .PlayerPlayButton::after,
			.ControllerContainer-area > .PlayerPauseButton::after{
				display:none;
			}
			.PlayerContainer:not(.is-mouseMoving) .ControllerBoxContainer.is-fullscreen .ControllerContainer-area > .PlayerPlayButton::before,
			.PlayerContainer:not(.is-mouseMoving) .ControllerBoxContainer.is-fullscreen .ControllerContainer-area > .PlayerPauseButton::before{
				display:none;
			}
			.VideoOverlayContainer{
				z-index:99999 !important;
			}
			.VideoContainer,
			.VideoContainer .VideoEndScreenContainer{
				z-index:auto;
			}
			.VideoEndScreenContainer::before{
				content:"";
				display:block;
				height:var(--Videoheight);
				width:var(--Videowidth);
				background:rgba(0,0,0,.8);
				position:absolute;
				z-index:8;
			}
			:is(.VideoEndScreenRelatedVideosContainer-pagerLeft, .VideoEndScreenRelatedVideosContainer-pagerRight).is-disabled{
				pointer-events: auto;
			}
			
			.VideoEndScreenContainer::before,
			.VideoEndScreenContainer-videoInfo{
				/*animation: fadeIn .3s both;*\/
			}
			.VideoEndScreenContainer{
				animation:none;
			}
			.VideoEndScreenContainer-content{
				z-index:10 !important;
			}
			@supports(backdrop-filter: blur()) {
				.VideoEndScreenContainer::before{
					backdrop-filter: blur(5px);
					background:rgba(0,0,0,.4);
				}
				.VideoEndScreenContainer{
					backdrop-filter:none;
				}
			}
			.ControllerBoxContainer{
				z-index:9 !important;
			}
	EOT;
	2 "無効" <<<EOT　 EOT;
}
@advanced dropdown cursor_hide "ー動画ー 動画上でカーソルを動かさないでいると非表示" {
	1 "無効*" <<<EOT  EOT;
	2 "有効" <<<EOT
			.PlayerContainer:not(.is-mouseMoving) .VideoContainer * {
			  cursor: none !important;
			}
			.PlayerContainer:not(.is-mouseMoving) .ControllerBoxContainer .ControllerContainer-area > .PlayerPauseButton::before{
				display:none;
			}

			
			body:not(.is-fullscreen) .PlayerContainer:not(.is-mouseMoving) .ControllerContainer{
				height: var(--control_h) !important;
				opacity: var(--control_o , 1) !important;
			}
			body:not(.is-fullscreen) .PlayerContainer:not(.is-mouseMoving) .SeekBarContainer:hover ~ .ControllerContainer,
			body:not(.is-fullscreen) .PlayerContainer:not(.is-mouseMoving) .ControllerContainer:hover{
				height: var(--control_h_hover , 36px) !important;
				opacity: 1 !important;
			}
	EOT;
}
@advanced dropdown commentanimation "ー動画ー コメント覧のスクロールアニメーション" {
	1 "システムの設定に従う*" <<<EOT
		@media(prefers-reduced-motion:no-preference){
			.DataGrid-Body {
				scroll-behavior: smooth;
			}
		}
	EOT;
	2 "無効*" <<<EOT  EOT;
	3 "有効" <<<EOT
		.DataGrid-Body {
    		scroll-behavior: smooth;
    	}
	EOT;
}
@advanced dropdown  commentopacity_enable"ー動画ー コメント透過" {
	1 "無効*" <<<EOT  EOT;	
	2 "有効" <<<EOT !important; EOT;
}
@var range commentopacity "ー動画ー コメント透過率" [0.8, 0, 1, 0.1, '']

@var range thumbsize "＋検索＋ サムネイルサイズ" [270, 160, 380, 1, 'px']
@advanced dropdown nicoad_position "＋検索＋ ニコニ広告の表示位置" {
	1 "末尾*" <<<EOT 
				order:1;
			EOT;
    2 "変更なし" <<<EOT  EOT;
	3 "先頭" <<<EOT order:-1; EOT;
	4 "非表示" <<<EOT display:none; EOT;
}
@advanced dropdown RelatedInformationHide "＋検索＋ 右の関連情報を非表示" {
	1 "無効*" <<<EOT  EOT;
    2 "有効" <<<EOT
		.column.sub{
			display:none !important;
		}
        .container.columns .column{
            display:unset;
        }
		div.column.main{
			max-width:100vw;
		}
		.videoList02,
		.videoList04{
			width: calc(100vw - 128px);
            min-width: 100%;
		}
	EOT;
}
@advanced dropdown adtagvideo_position "＋検索＋ 広告タグ動画の表示位置" {
	1 "下部*" <<<EOT 
				order:2;
			EOT;
    2 "変更なし" <<<EOT  EOT;
	3 "上部" <<<EOT order:-2; EOT;
	4 "非表示" <<<EOT display:none; EOT;
}
@advanced dropdown ranking_nicoad "ーランキングー　ニコニ広告を非表示" {
	1 "無効*" <<<EOT  EOT;
	2 "有効" <<<EOT 
		display:none !important;
	EOT;
}
@advanced dropdown mutedvideo_hidden "＋検索・ランキング＋　ミュート動画を非表示" {
	1 "無効*" <<<EOT  EOT;
	2 "有効" <<<EOT 
		display:none !important;
		visibility:hidden;		
	EOT;
}
@advanced dropdown ad_clean "ー全体ー プレミアム勧誘を非表示" {
	1 "有効*" <<<EOT display:none !important; EOT;
    2 "無効" <<<EOT  EOT;
}
@advanced dropdown niconews_hidden "＋top・ランキング・動画・大百科＋ニコニコニュースとブロマガの記事リンクを非表示" {
	1 "有効*" <<<EOT
		display:none !important;
	EOT;
	2 "無効" <<<EOT 	EOT;
}
@advanced dropdown font "・実験・ フォント変更" {
	1 "変更なし*" <<<EOT  EOT;
    2 "BIZ UDPゴシック" <<<EOT font-family:BIZ UDPゴシック,BIZ UDPGothic,Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif; EOT;
    3 "游ゴシック" <<<EOT font-family:游ゴシック,Yu Gothic,Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif; EOT;
    4 "UD デジタル 教科書体" <<<EOT font-family:UD デジタル 教科書体 NP-R,UD Digi Kyokasho NP-R,Avenir,Lato,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,メイリオ,sans-serif; EOT;
}
==/UserStyle== */

@-moz-document url-prefix("https://www.nicovideo.jp/") {
/*共通*/
	
/* -----------------------------
  アニメーション
------------------------------ */

	
	#CommonHeader > .nico-CommonHeaderRoot > div >div >div>div>div{
		clip-path: inset(0 -10px -10px -10px);
	}
	#CommonHeader > .nico-CommonHeaderRoot > div >div >div>div>div>div{
		animation: popdown 0.15s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
	}
	
	@keyframes popdown {
	  0% {
		transform: translateY(-40px);
		opacity: 0;
	  }
	  100% {
		transform: translateY(0);
	  }
	  50%, 100% {
		opacity: 1;
	  }
	}
	
	
/* -----------------------------
  要らない物を消す
------------------------------ */
	/*ヘッダーのプレミアム勧誘を消す*/

	.common-header-m5ds7e{
		/*[[ad_clean]]*/
	}
	
	
/*Topページ*/
	.TopPage .NicoNewsAreaContainer{
		/*[[niconews_hidden]]*/
	}
	
	
}
@-moz-document url-prefix("https://www.nicovideo.jp/watch/") {
/*動画ページ*/

    :root {
        --MainSideMargin: 25px;
        --videorightspase: 24px;
        --Ma...