Youtube Subtitle Caption Stylish (Not Maintained)

This is to replace the subtitle / caption style using in Youtube

当前为 2023-01-13 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

/* ==UserStyle==
@name:en            Youtube Subtitle Caption Stylish (Not Maintained)
@name:ja            Youtube Subtitle Caption Stylish (Not Maintained)
@name:zh-TW         Youtube Subtitle Caption Stylish (Not Maintained)
@name               Youtube Subtitle Caption Stylish (Not Maintained)
@namespace          http://userstyles.org
@version            1.6.5
@author             CY Fung
@match              https://www.youtube.com/*
@exclude            https://www.youtube.com/live_chat*
@description        This is to replace the subtitle / caption style using in Youtube
@description:en     This is to replace the subtitle / caption style using in Youtube
@description:ja     Youtubeで使用している 字幕(キャプション)のスタイル を置き換えるためのものです。
@description:zh-TW  這是為了替換 Youtube 中使用的字幕樣式
@license            MIT
@run-at             document-start
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com") {

  ytd-watch-flexy .ytp-caption-segment{
      --font-size: 18px;
  }
  
  ytd-watch-flexy[theater] .ytp-caption-segment{
      --font-size: 2vw;
  }
  
  ytd-watch-flexy[fullscreen] .ytp-big-mode .ytp-caption-segment{
      --font-size: 2.6vw;
  }
  
  #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;
  }
  
  #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{
  
      --scale: 2.15;
      --base-font-size:13.6233px;  
      
      --text-color:rgba(244, 244, 244, 1);
      
      
      --text-shadow-h-shadow: 0px;
      --text-shadow-v-shadow: 0px;
      --text-shadow-blur-radius: 1.7px;
      --text-shadow-color:rgb(0, 120, 255);
      --text-outline-color:rgb(0, 120, 255);
      
      --text-shadow: var(--text-shadow-color) var(--text-shadow-h-shadow) var(--text-shadow-v-shadow) var(--text-shadow-blur-radius);
      
      --text-font: "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;
      --font-weight:400;
      --letter-spacing: 0px;
      
      
      --text-shadow-black-outline: rgb(0, 120, 255);
      
      margin:2px 0 !important;
      display: inline-block !important;
      white-space: nowrap !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;
  }


}