Youtube Netflix-Like Subtitles by Ryah

/* ==UserStyle==
@name         Youtube Netflix-Like Subtitles
@version      20250403.02.18
@namespace    github.com/Ryah/Custom-YouTube-Subtitles
@description  Netflix-Like Subtitles for YouTube
@author       Ryah
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com") {
@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff2) format(\'woff2\'), 
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff) format(\'woff\');
 font-weight: 100;
}

@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff2) format(\'woff2\'), 
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff) format(\'woff\');
 font-weight: 300;
}

@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff2) format(\'woff2\'), 
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff) format(\'woff\');
 font-weight: 400;
}

@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff2) format(\'woff2\'), 
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff) format(\'woff\');
 font-weight: 700;
}

@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff2) format(\'woff2\'), 
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff) format(\'woff\');
 font-weight:800;
}

@font-face {
    font-family: \'Netflix Sans\';
 src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff2) format(\'woff2\'),
 url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff) format(\'woff\');
 font-weight: 900;
}

.ytp-caption-segment {
    --lt-color-gray-100: #f8f9fc;
    --lt-color-gray-200: #f1f3f9;
    --lt-color-gray-300: #dee3ed;
    --lt-color-gray-400: #c2c9d6;
    --lt-color-gray-500: #8f96a3;
    --lt-color-gray-600: #5e636e;
    --lt-color-gray-700: #2f3237;
    --lt-color-gray-800: #1d1e20;
    --lt-color-gray-900: #111213;
    --lt-shadowDefault: 0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
    --lt-shadowActive: 0 0 8px -2px rgba(0, 0, 0, 0.1), 0 6px 20px -3px rgba(0, 0, 0, 0.2);
    --lt-color-white: #fff !important;
    --lt-color-black: #111213 !important;
    --lt-color-transparent: rgba(255, 255, 255, 0) !important;
    --lt-color-background-light: var(--lt-color-gray-100) !important;
    --lt-color-background-default: var(--lt-color-gray-200) !important;
    --lt-color-background-dark: var(--lt-color-gray-300) !important;
    --lt-color-border-light: var(--lt-color-gray-200) !important;
    --lt-color-border-default: var(--lt-color-gray-300) !important;
    --lt-color-border-dark: var(--lt-color-gray-400) !important;
    --lt-color-text-very-light: var(--lt-color-gray-500) !important;
    --lt-color-text-light: var(--lt-color-gray-600) !important;
    --lt-color-text-default: var(--lt-color-gray-700) !important;
    --lt-color-text-dark: var(--lt-color-gray-800) !important;
    --lt-color-overlay-default: #fff !important;
    --lt-color-overlay-dark: #fff !important;
    --lt-color-overlay-transparent: rgba(0, 0, 0, 0.1) !important;
    --lt-shadow-website-overlay: 0 0 7px 0 rgba(0, 0, 0, 0.3) !important;
    text-size-adjust: none !important;
    -webkit-font-smoothing: antialiased !important;
    user-select: none !important;
    direction: ltr !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: normal !important;
    color: #ffffff !important;
    text-wrap: wrap !important;

    -webkit-text-fill-color: white;
    text-shadow: 5px 5px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
    font-family: Netflix Sans, Helvetica Nueue, Helvetica, Arial, sans-serif !important;
    font-weight: bold !important;
}

.ytp-big-mode > div > div > span > span > span {
    font-size: 2.5vw !important;
    word-break: break-word;
    padding: 0 3vw !important;
}

.ytp-hide-info-bar > div > div > span > span > span {
    font-size: 2vw !important;
    word-break: break-word;
    padding: 0 3vw !important;
}

.ytp-caption-segment {
    background: none !important;
}

.caption-window {
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
    left: 0% !important;
    margin-left: auto !important;
}

.ytp-big-mode > div > .caption-window, .ytp-hide-info-bar > div > .caption-window {
    bottom: 6.9468% !important;
}

.ytp-big-mode.ytp-autohide-active > div > .caption-window, .ytp-autohide > div > .caption-window {
    bottom: 10% !important;
}
}