Youtube Subtitle Caption Stylish

This is to replace the subtitle / caption style using in Youtube
当前为 2023-01-13 提交的版本，查看最新版本。
换行
/* ==UserStyle==
@name:en            Youtube Subtitle Caption Stylish
@name:ja            Youtube Subtitle Caption Stylish
@name:zh-TW         Youtube Subtitle Caption Stylish
@name               Youtube Subtitle Caption Stylish
@namespace          http://userstyles.org
@version            2.0.5
@author             CY Fung
@description:en     This is to replace the subtitle / caption style using in Youtube
@description:ja     Youtubeで使用している　字幕（キャプション）のスタイル　を置き換えるためのものです。
@description:zh-TW  這是為了替換 Youtube 中使用的字幕樣式
@description        This is to replace the subtitle / caption style using in Youtube
@license            MIT
@preprocessor       stylus
@var color          caption-shadow-color            "Caption Shadow Color"            hsl(212, 100%, 50%)
@var color          caption-text-color              "Caption Text Color"              #f4f4f4
@var range          normal-caption-size-px          "Normal Caption Size"             [18, 10, 26, 2, 'px']
@var range          theater-caption-size-t          "Theater Caption Size"            [2, 1.2, 3.2, 0.2]
@var range          fullscreen-caption-size-t       "Fullscreen Caption Size"         [2.6, 1.6, 4.2, 0.2]
@var checkbox       import-noto-sans-all            "Import Noto Sans (Multi-lang)"   1
@var range          caption-font-weight             "Caption Font Weight"             [400, 300, 500, 100]
@var number         max-line-width-for-text-wrap    "Max Line Width for Text Wrap"    [96, 72, 100, 4, '%']
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {

    dummy() {
        // dummy
        border: 0;
    }

    theter-caption-size-vw = theater-caption-size-t * 1vw //
    fullscreen-caption-size-vw = fullscreen-caption-size-t * 1vw //
    importNotoSans(mDisplay, args...) {
        for $j in 0..length(args) - 2 {
            args[$j] = join('', 'family=', args[$j], ':wght@', caption-font-weight)
        }
        join('', 'https://fonts.googleapis.com/css2?', join('&', args), '&display=', mDisplay)
    }

    if import-noto-sans-all {

        @import importNotoSans(
            'block',
            'Noto+Sans',
            'Noto+Sans+HK',
            'Noto+Sans+TC',
            'Noto+Sans+SC',
            'Noto+Sans+JP',
            'Noto+Sans+KR'
        )
    }


    ytd-watch-flexy .ytp-caption-segment {
        --font-size: normal-caption-size-px;
    }

    ytd-watch-flexy[theater] .ytp-caption-segment {
        --font-size: theter-caption-size-vw;
    }

    ytd-watch-flexy[fullscreen] .ytp-big-mode .ytp-caption-segment {
        big-caption-size-vw = fullscreen-caption-size-vw * 1.3 //
        --font-size: big-caption-size-vw;
    }

    #ytp-caption-window-container .caption-window.ytp-caption-window-bottom[style*="text-align:"][style*="center"][style*="bottom:"][style*="margin-left:"][style*="left:"] {
        width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        bottom: calc(40px + 2%) !important;
        touch-action: none !important;
        pointer-events: none !important;
        cursor: default !important;
        transition: initial !important;
        contain: layout style;
    }

    #ytp-caption-window-container .caption-window.ytp-caption-window-bottom[style*="text-align:"][style*="center"][style*="bottom:"][style*="margin-left:"][style*="left:"] .captions-text .caption-visual-line .ytp-caption-segment {

        --text-color: caption-text-color;


        --text-shadow-h-shadow: 0px;
        --text-shadow-v-shadow: 0px;
        --text-shadow-blur-radius: 1.7px;
        --text-shadow-color: caption-shadow-color;
        --text-outline-color: caption-shadow-color;

        --text-shadow: var(--text-shadow-color) var(--text-shadow-h-shadow) var(--text-shadow-v-shadow) var(--text-shadow-blur-radius);

        
        if import-noto-sans-all {
            --text-font: "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans", "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;
        } else {
            --text-font: "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;
        }
            
        --font-weight: caption-font-weight;
        --letter-spacing: 0px;


        --text-shadow-black-outline: caption-shadow-color;

        margin: 2px 0 !important;
        display: inline-block !important;
        white-space: pre-wrap !important;
        background: transparent !important;

        font-size: var(--font-size) !important;
        transform: none !important;

        text-shadow: var( --text-outline-color) -1px -1px 0,
        var( --text-outline-color) -1px 1px 0,
        var( --text-outline-color) 1px -1px 0,
        var( --text-outline-color) 1px 1px 0,
        var( --text-shadow-color) 0 0 1.5px,
        var( --text-shadow-color) 0 0 2px,
        var( --text-shadow-color) 0 0 2.5px,
        var( --text-shadow-color) 0 0 3px,
        var( --text-shadow-color) 0 0 3.5px,
        var( --text-shadow-color) 0 0 4px,
        var( --text-shadow-black-outline) -2px -2px 2px,
        var( --text-shadow-black-outline) 2px 2px 2px,
        var( --text-shadow-black-outline) 2px -2px 2px,
        var( --text-shadow-black-outline) -2px 2px 2px !important;

        color: var(--text-color) !important;
        fill: var(--text-color) !important;
        font-family: var(--text-font) !important;
        font-weight: var(--font-weight) !important;
        letter-spacing: var(--letter-spacing) !important;
        touch-action: none !important;
        pointer-events: none !important;
        cursor: default !important;
        transition: initial !important;
        max-width: max-line-width-for-text-wrap;
        box-sizing: border-box;
        contain: layout style paint;
        
    }
}
欢迎访问Greasy Fork镜像
