『ニコニコ動画にダークモードを適用する』で書いてた内容を独立させたページでっす。
ニコニコ動画のフルスクリーン時のUIについて
『コントローラーを常に表示』をオンにしている時のレイアウトが我慢ならない...!
下部両端に無駄なスペースが多すぎる!
(→sm41761826)
Stylus でカスタマイズする
Webページのデザインをカスタマイズできるブラウザのアドオンで、自分好みにしちゃいましょう！
「Stylus」Webページのデザインをカスタマイズして見やすくできる拡張機能 - 窓の杜 https://forest.watch.impress.co.jp/library/software/stylus/
ってことで、これがオススメ？（窓の杜からはなぜかβ版にもリンクされてるので注意）
Stylus - Chrome ウェブストア
こんな感じにしてみた!
ってことで、フルスクリーン時のレイアウトと、ついでに Twitter投稿時のテキストエリアの狭さが、どうしても我慢ならなかったので、ここだけカスタマイズしてみました。
Stylusで下記コードをコピペすればいいだけ!（ニコニコの動画ページを開いている状態で、アイコンをクリックしたら「nicovideo.jp」という文字があると思うので、それをクリックしたら「スタイルを追加」というコードが書けるページが出てくるはず）
ちなみに、フルＨＤのモニタ用にカスタマイズしたので、それ以外のサイズで視聴する人は適当に数値を変更してみたらよいと思います😉.oO(Stylusは修正した箇所がリアルタイムで反映されるので、サブモニタ等にフルスクリーン表示にしておくと編集しやすい)
コード
/* ========================================
niconico FullScreen UI Customize by Pumitom
======================================== */
/* 【Twitter Textarea】 */
.TwitterForm-textarea { color: #222; height: 300px; } /* フォント色と高さの設定 */
/* ---------------------------------------------------------------------------------------------------- */
/* 【フルスクリーン時のUI】
幅1920pxのモニタに合わせて数値を決めてるので、合わない場合はカスタマイズを!
1920以外のモニタの場合は、
・コメント入力部分の max-width。
・かんたんコメントボタンの max-width と margin-left
辺りを調整すると良いと思う。
*/
/* コントローラ部分の設定（再生時間表示回り） ---------------------------------------------------------------------------------------------------- */
/* 再生時間の表示位置（戻し/送りボタンも含む） */
body.is-fullscreen .ControllerContainer-area:nth-child(2) {
left: 180px;
position: absolute;
}
/* ボタン全体の位置調整 */
body.is-fullscreen .ControllerContainer-area {
padding-top: 5px;
}
/* クリック判定しなくなるので↑に上げておく処理 */
.ActionButton:enabled { z-index: 10; }
.ControllerContainer-area .VolumeBar { z-index: 10; }
/* コメント入力部分の設定 ---------------------------------------------------------------------------------------------------- */
/* 位置 */
.ControllerBoxCommentAreaContainer.is-fullscreen .ControllerBoxCommentAreaContainer-commentPostAndLikeArea {
max-width: 740px;
margin-top: -37px;
margin-left: 420px;
}
/* 文字色 */
.CommentInput-textarea {color:#FFF; }
.CommentCommandInput {color:#FFF; }
/* 背景色 */
.CommentPostContainer-commandInput { background: #222; }
.CommentPostContainer-commentInput { background: #222; }
/* 通常時（フルスクリーンではない時）のコメ入力周りの色 */
.ControllerBoxCommentAreaContainer { background: #111; }
.ControllerBoxCommentAreaContainer { border: 2px solid #000;}
.CommentPostContainer-commandInput { border: 2px solid #333; }
.CommentPostContainer-commentInput { border-top: 2px solid #333; border-bottom: 2px solid #333; }
/* かんたんコメントボタンの設定 ---------------------------------------------------------------------------------------------------- */
/* コメントボタンが要らないなら、下記コードを有効にすればヨシ！
.EasyCommentContainer.is-fullscreen .EasyCommentContainer-inner {
display:none;
} */
/* 『1クリックでコメントを投稿！動画を盛り上げよう！』という表示を消す */
.EasyCommentContainer.is-fullscreen .EasyCommentContainer-caption {
display:none;
}
/* 表示位置と幅の設定 */
.EasyCommentContainer.is-fullscreen {
max-width: 460px; /* 表示幅 */
margin-top: -28px;
margin-bottom: 0px;
margin-left: 1170px;
height: 24px;
}
.ControllerBoxCommentAreaContainer.is-fullscreen {
padding: 8px 0 0; /* 位置の微調整 */
}
/* ボタンの色 */
.EasyCommentButton { background-color: #111; border: 2px solid #333; color: #888; }
.EasyCommentButton:hover { color: #FFF; background-color: #1780fb; border: 2px solid #1780fb; }
.EasyCommentContainer { background-color: #111; } /* 通常時のボタン周りの色*/
/* ▶の色 */
.EasyCommentContainer-scrollButton:disabled svg { fill: #555; }
.EasyCommentContainer-scrollButton { background: #222; }
.EasyCommentContainer-prevButton { border-color:#555; }
.EasyCommentContainer-nextButton { border-color:#555; }
/* 「コントローラーを常に表示」のチェックボックスの設定 ---------------------------------------------------------------------------------------------------- */
/* 位置 */
.ControllerBoxCommentAreaContainer .ControllerBoxCommentAreaContainer-fixFullscreenCheckbox {
margin-top: -30px;
margin-right: 250px;
}
/* 背景色 */
.Checkbox .Checkbox-check:before {
background: #222;
border: 2px solid #555;
}
/* 説明文字部分を非表示にする */
.Checkbox .CheckboxLabel { display:none; }
/* いいね！ボタンの設定 ---------------------------------------------------------------------------------------------------- */
/* いいね！ボタンの色（フルスクリーンのときだけ色を変える） */
.LikeFieldContainer-button {
color: #888;
background: #222;
border: 2px solid #333;
}
.LikeFieldContainer-button:hover {
color: #FFF;
background: #1780fb;
border: 2px solid #1780fb;
}
/* こっちだと通常時も変わる
.LikeActionButton {}
.LikeActionButton:hover {}
*/
