Abema.tvをキャプチャしやすくする by tontoroRR-9239

/* ==UserStyle==
@name           Abema.tvをキャプチャーしやすくする
@namespace      github.com/tontoroRR/css-for-stylus
@homepageURL    https://github.com/tontoroRR
@version        2024.12.30.1300
@description    動画にかぶさるコントロールバーやスキップ、次の動画などを非表示にしたり、画面の外に移動した。あといろいろ微調整。
@author         tontoroRR
@license        MIT
@preprocessor   stylus

@var   range    thumnail-opacity "サムネの透明度(0:透明、1:不透明)"   [0, 0, 1, 1]  
==/UserStyle== */
@-moz-document url-prefix("https://abema.tv/video/episode") {
    /* 動画中央に表示される一時停止/再生のアイコンを非表示 */
    div.com-vod-VODScreen-player-feedback {
        opacity: 0 !important;
    }
    /* コントロールバー関連 */
    div {
        /* 1. コントロールバーの影を削除 */
        div.com-vod-VODScreen__video-control-bg {
            display: none !important;
        }
        /* 2. コントロールバーを一番上に持ってくる */
        div.com-vod-VideoControlBar {
            position: fixed;
            top: 0px;
            left: auto;
            width: calc(100vw - 140px);
            right: auto;
        }
        /* 3. コントロールバーを常に表示 */
        div.com-vod-VideoControlBar__seekbar {
            visibility: visible !important;
            display: block;
            opacity: 1;
        }
        /* 4. コントロールバーのフェードアウトを抑止*/
        div.com-vod-VideoControlBar--fade-out {
            opacity: 1 !important;
        }
        /* 5. シーク時のサムネを消去 */
        div.com-playback-SeekBar__popover {
            opacity: thumnail-opacity !important;
        }
        /* 5. シーク時のサムネをバーに重ねて表示 */
        div.com-playback-SeekBar__popover {
            top: -20px;
        }
        /* 6. シーク時間をサムネ上に表示 */
        img.com-playback-SeekBar__image {
            margin-bottom: -18px;
        }
        /* 7. ボリュームスライダーを下に、そして常に表示 */
        div.com-vod-VideoControlBar {
            div.com-playback-Volume__slider-container {
                top: 44px;
                visibility: visible !important;
                opacity: 1 !important;
            }
        }
    }
    /* タイトルを狭く */
    div.com-video-EpisodePlayerSection__header-details {
        width: 550px !important;
    }
    /* SNS連携ボタンの削除 */
    div.com-video-EpisodePlayerSection__header-action-buttons {
        display: none !important;
    }
    /* OPスキップボタンを非表示 */
    div.com-vod-VODOpeningSkip {
        display: none !Important;
        width: 0px;
        height: 0px;
    }
    /* 次動画ナビ関連 */
    div {
        /* 1. 動画の下にずらす */
        div.com-vod-VODPlayerNextContentRecommendBase {
            margin-bottom: -192px !important;
        }
        div.com-vod-VODPlayerNextContentRecommendBase__inner {
            margin-right: 12px !important;
            opacity: 1 !important;
            width: 420px;
            transform: translateX(0) !important;
        }
        /* 2. 次動画ナビを狭く */
        div.com-vod-VODPlayerNextContentRecommendBase {
            width: 420px;
        }
        /* 3. ボタン領域を小さく */
        div.com-vod-VODPlayerNextContentRecommendBase__button-wrapper {
            width: 240px;
            justify-content: flex-end;
        }
        /* 4. キャンセルボタンを小さく */
        button.com-vod-VODPlayerNextContentRecommendBase__cancel-button {
            width: 80px;
            margin-right: 8px;
            margin-top: -1px;
            height: 36px;
            font-size: 85%;
        }
        button.com-vod-VODPlayerNextContentRecommendBase__cancel-button:after {
            width: 80px;
            right: 112px;
            height: 36px;
        }
        /* 5. 次へボタンを小さく */
        div.com-vod-VODPlayerNextContentRecommendBase__next {
            width: 80px;
            height: 36px;
        }
        a.com-a-Button {
            margin-top: 0px;
            height: 36px;
        }
        /* 6. 次動画のサムネを小さく */
        div.com-vod-VODPlayerNextContentRecommendBase {
            div.com-vod-VODPlayerNextContentRecommendBase__thumbnail {
                width: 144px;
                height: 81px;
            }
            div.com-m-Thumbnail {
                width: 144px;
                height: 81px;
            }
        }
    }
    /* 詳細の下の不要な隙間を狭く */
    .com-video-EpisodePlayerSection__header {
        row-gap: 4px !important;
        column-gap: 24px !important;
    }
    /* タイトルなどの文字をやや小さく */
    div {
        /* 1. 視聴中のタイトル */
        span.com-video-EpisodeTitle__series-info {
            font-size: 55%;
        }
        span.com-video-EpisodeTitle__episode-title {
            font-size: 65%;
            margin-top: 0.25em;
        }
        p.com-video-EpisodeTitleBlock__supplement {
            font-size: 100%;
            margin-top: 0.5em;
        }
        /* 次動画ナビのタイトル */
        div.com-vod-VODPlayerNextContentRecommendBase__subtitle {
            font-size: 80%;
        }
        div.com-vod-VODPlayerNextContentRecommendBase__title {
            font-size: 95%;
        }
    }
    /* 右サイドのおすすめ動画を非表示 */
    div.com-vod-VODRecommendedContentsContainerView__player-aside-recommended {
        display: none;
    }
    /* トップメニューを非表示 */
    div.c-common-HeaderContainer-header {
        display: none;
    }
}

/* 
  Release note:
  2024.12.30.1300 ボリュームスライダーを常に表示
  2024.12.30.1253 次動画サムネだけ縮小
  2024.12.28.1134 インデント修正
  2024.12.28.1134 サムネを常に非表示から、透明度を変更できるようにした。
*/