YouTube 一時停止で映像だけ表示 by hori68

/* ==UserStyle==
@name           YouTube 一時停止で映像だけ表示
@namespace      userstyles.world/user/hori68
@version        1.0
@description    動画再生を一時停止した時にプレイヤーの上部や下部に表示される様々なもの(シークバーや時刻や動画タイトルなど)を非表示にします。スクリーンショット用？需要があるのかわかりません。
@author         hori68
@license        CC-BY-4.0
@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("youtube.com") {
    i = !important //
    div.html5-video-player.paused-mode{
        button.ytp-cards-button{ /* 右上card(i) */
            display:none i;
        }
        button.ytp-large-play-button{ /* 真ん中のPlayアイコン あまり見ないかも */
            display:none i;
        }
        div.caption-window{ /* 字幕 */
            display:none i;
        }
        div.iv-branding{ /* 右下ブランドロゴ */
            display:none i;
        }
        div.ytp-ce-element{ /* 終了画面 */
            display:none i;
        }
        .ytp-gradient-bottom{ /* 下段のグラデーションある影 */
            display:none i;
        }
        div.ytp-chrome-bottom{ /* 下段の各種アイコンの並ぶエリア */
            &:not(:hover){ /* マウスオーバー時のみ表示とする */
                opacity:0 i;
            }
            &:after{ /* 新設の影 */
                content:'';
                display:block;
                width:110%;
                height:110%;
                margin-top:-40px;
                margin-left:-12px;
                background-color:rgba(0,0,0,0.4);
            }
        }
    }
    /* 以下、フルスクリーン固有処理 */
    div.html5-video-player.paused-mode.ytp-big-mode{
        .ytp-gradient-top{ /* 上段のグラデーションある影 */
            display:none i;
        }
        div.ytp-chrome-top{ /* 上段のタイトルやアイコンの並ぶエリア */
            &:not(:hover){ /* マウスオーバー時のみ表示とする */
                opacity:0 i;
            }
            &:hover{ /* 新設の影 */
                background-color:rgba(0,0,0,0.4) i;
            }
            /* 細かい整形レベル */
            left:0px i;
            right:0px i;
            padding-left:20px i;
            padding-right:20px i;
        }
        div.ytp-chrome-bottom:after{ /* 下段、新設の影 */
            content:'';
            display:block;
            width:110%;
            height:100%;
            margin-top:-54px;
            margin-left:-24px;
            background-color:rgba(0,0,0,0.4);
        }
    }
}