Invidious - Dark Theme [Redesign] by tsyron

/* ==UserStyle==
@name           Invidious - Dark Theme
@namespace      https://github.com/Tsyron/Invidious-Theme
@version        1.1.0
@license        GPLv3
@description    Invidious Website In Dark Theme/Style
@author         Tsyron
@preprocessor   stylus

@var            select select-color "Colours" ["Colourful", "Light"]

@var            range range-corners "Corner Radius" [18, 0, 35, "px"]

@var            range range-searchbox "Searchbox Corner Radius" [18, 0, 18, "px"]

@var            checkbox checkbox-borders "Borders" 0

@var            select select-font "Font" ["YouTube", "Default", "Monospace"]

@var            range range-font "Font Size" [11, 8, 16, "pt"]

@var            range range-screen-width "Screen Width" [95, 48, 170, "em"]

@var            checkbox checkbox-shadow "Shadow" 1

@var            checkbox checkbox-theatre "Theatre Mode at Screen Width (experimental)" 0

==/UserStyle== */
@-moz-document url-prefix("https://invidious."),
url-prefix("https://inv."),
url-prefix("https://invidio."),
url-prefix("https://invidious-"),
url-prefix("https://iv."),
url-prefix("https://vid."),
url-prefix("https://y.com."),
url-prefix("https://yt"),
url-prefix("https://tube."),
domain("watch.thekitty.zone"),
domain("onion.tube"),
domain("not-ytb.blocus.ch"),
domain("yewtu.be"),
domain("youtube.076.ne.jp"),
domain("youtube.owacon.moe"),
domain("sea1.iv.ggtyler.dev"),
domain("am74vkcrjp2d5v36lcdqgsj2m6x36tbrkhsruoegwfcizzabnfgf5zyd.onion"),
domain("c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion"),
domain("euxxcnhsynwmfidvhjf6uzptsmh4dipkmgdmcmxxuo7tunp3ad2jrwyd.onion"),
domain("grwp24hodrefzvjjuccrkw3mjq4tzhaaq32amf33dzpmuxe7ilepcmad.onion"),
domain("kbjggqkzv65ivcqj6bumvp337z6264huv5kpkwuv6gu5yjiskvan7fad.onion"),
domain("ng27owmagn5amdm7l5s3rsqxwscl5ynppnis5dqcasogkyxcfqn7psid.onion"),
domain("osbivz6guyeahrwp2lnwyjk2xos342h4ocsxyqrlaopqjuhwn2djiiyd.onion"),
domain("u2cvlit75owumwpy4dj2hsmvkq7nvrclkpht7xgyye2pyoxhpmclkrad.onion"),
domain("w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion"),
domain("invbp.pjsfkvpxlinjamtawaksbnnaqs2fc2mtvmozrzckxh7f3kis6yea25ad.onion"),
domain("invidiousge2cq2qegp4vdzsfu6mvpqdf6dtcyzmqbv7yx2spvkkajad.onion"),
domain("inv.vern.i2p"),
domain("pjsfhqamc7k6htnumrvn4cwqqdoggeepj7u5viyimgnxg3gar72q.b32.i2p"),
domain("pjsfi2szfkb4guqzmfmlyq4no46fayertjrwt4h2uughccrh2lvq.b32.i2p") {

    /* Darker Tints */
    bg-1=#232323
    bg-2=lighten(bg-1, 10%)
    bg-2-disabled=rgba(bg-2, 0.5)
    bg-3=lighten(bg-1, 25%)
    bg-4=lighten(bg-1, 40%)
    
    /* Lighter Tints */
    fg-1=#fff
    fg-2=darken(fg-1, 10%)
    fg-3=darken(fg-1, 20%)
    fg-4=darken(fg-1, 30%)
    
    /* Linked */
    link=fg-3
    link-h=fg-4

    red-1=#ff4343
    red-1-h=rgba(red-1, 0.9)
    red-1-watched=rgba(red-1, 0.4)
    red-2=#ff6969
    red-2-h=rgba(red-2, 0.9)
    red-3=#ff9898
    red-3-h=rgba(red-3, 0.9)
    
    light-1=fg-3
    light-1-h=fg-4
    light-1-watched=rgba(light-1, 0.4)
    light-2=fg-3
    light-2-h=fg-4
    light-3=fg-3
    light-3-h=fg-4
    
    /* Shadow */
    shadow=rgba(0, 0, 0, 0.3)

    :root {
        /* Colours */
        if select-color=="Colourful" {
            --Color1: red-1;
            --Color1Hover: red-1-h;
            --Color1Watched: red-1-watched;
            --Color2: red-2;
            --Color2Hover: red-2-h;
            --Color3: red-3;
            --Color3Hover: red-3-h; }

        if select-color=="Light" {
            --Color1: light-1;
            --Color1Hover: light-1-h;
            --Color1Watched: light-1-watched;
            --Color2: light-2;
            --Color2Hover: light-2-h;
            --Color3: light-3;
            --Color3Hover: light-3-h; }

        if select-font=="YouTube" {
            --Font: Roboto, Arial, sans-serif !important; }

        if select-font=="Default" {
            --Font: inherit; }

        if select-font=="Monospace" {
            --Font: monospace; } }

    .dark-theme,
    .no-theme,
    .light-theme {
        /* Main Theme : The Dark Theme */
        body,
        .pure-g,
        .pure-form legend {
            background: bg-1;
            color: fg-1; }

        /* Clickable Links */
        a:not(.navbar .index-link),
        a:active:not(.navbar .index-link),
        a:visited:not(.navbar .index-link),
        summary,
        a:not([data-id]) > .icon,
        a:link:not(.pure-button):not(.channel-owner) {
            color: link; }

        footer a {
            color: link !important; }

        a:hover,
        footer a:hover,
        summary:hover,
        a:not([data-id]) > .icon:hover {
            color: link-h !important; }

        /* Multiple option Select Box */
        .pure-form {
            input[type="color"],
            input[type="date"],
            input[type="datetime-local"],
            input[type="datetime"],
            input[type="email"],
            input[type="month"],
            input[type="number"],
            input[type="password"],
            input[type="tel"],
            input[type="text"],
            input[type="time"],
            input[type="url"],
            input[type="week"],
            select,
            textarea {
                box-shadow: transparent 0px 1px 3px inset;
                border: transparent;
                border-radius: range-corners;
                background-color: bg-2;
                color: fg-1; } }

        /* General Button */
        .pure-button-primary,
        .pure-button-secondary,
        .pure-button-primary:focus,
        .pure-button-secondary:focus {
            border: transparent;
            background-color: bg-2 !important;
            color: fg-1 !important; }

        .pure-button-primary:hover,
        .pure-button-secondary:hover {
            background-color: bg-3 !important;
            color: fg-1 !important; }

        /* Checkbox & Radio: Background color */
        input[type="checkbox"],
        input[type="checkbox"]:before,
        input[type="checkbox"]:checked:before,
        input[type='radio'],
        input[type='radio']:before,
        input[type='radio']:checked:before {
            color: fg-1; }

        input[disabled] {
            background-color: bg-2-disabled; }

        /* Checkbox & Radio: Color check */
        input[type="checkbox"]:checked,
        input[type='radio']:checked {
            background-color: bg-3 !important; }

        /* Range slider: Background */
        input[type='range'] {
            background-color: bg-2; }

        /* Home Screen: Clickable links colors */
        p,
        p.video-data:hover {
            color: fg-1; }

        /* Home Screen: Donate/Popular/Trending */
        a.feed-menu-item.pure-menu-heading {
            color: link; }

        /* Home Screen: Only Highlights YouTube Video's */
        a[href^="/watch?v="] p:not(.length):hover {
            color: fg-2; }

        /* Home Screen: Watched */
        .watched {
            background-color: bg-2;
            color: fg-1; }

        /* Home Screen: Length Time*/
        .length,
        p.length {
            color: fg-1;
            background-color: bg-2; }

        p.channel-name {
            color: link; }

        p.channel-name:hover {
            color: link-h; }

        /* Search: Filters */
        #filters-box {
            background: bg-1 !important; }

        /* Searchbox: background color */
        .pure-form input[type="search"] {
            border: transparent;
            background-color: bg-2;
            color: fg-1; }

        /* Video Player */
        .video-js {
            /* Video player: play button: color */
            .vjs-big-play-button .vjs-icon-placeholder {
                color: fg-1; }

            /* Video player: Controls: Color */
            .vjs-control-bar,
            .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
                background-color: bg-1;
                color: fg-1; }

            /* Button Hover */
            button:hover {
                color: fg-1; }

            /* Video player: Controls: Hovering Over Selected Option colors */
            .vjs-menu li.vjs-menu-item:focus,
            .vjs-menu li.vjs-menu-item:hover {
                background-color: var(--Color1Hover);
                color: fg-1; }

            /* Video player: Controls: The Selected option colors */
            .vjs-menu li.vjs-selected,
            .vjs-menu li.vjs-selected:focus,
            .vjs-menu li.vjs-selected:hover {
                background-color: var(--Color1);
                color: fg-1; }

            /* Video player: Share Links */
            .vjs-share__short-link,
            .vjs-share__btn,
            .vjs-share__short-link-wrapper {
                font-family: sans-serif;
                background-color: bg-2;
                color: fg-1; }

            .vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button,
            .vjs-share__subtitle,
            .vjs-share__title {
                font-family: sans-serif;
                color: fg-1; }

            .vjs-videojs-share_open .vjs-modal-dialog .vjs-modal-dialog-content,
            .vjs-modal-dialog {
                background: bg-1; }

            .vjs-modal-dialog .vjs-modal-dialog-content,
            .vjs-modal-dialog,
            .vjs-modal-dialog-content {
                background: bg-1 !important; }

            /* Video player: Settings */
            .vjs-text-track-settings legend {
                color: fg-1; }

            /* Video Player: Text */
            .vjs-icon-placeholder,
            .vjs-icon-share {
                color: fg-1; }

            /* Video Player: Sliders */
            .vjs-play-progress,
            .vjs-volume-level {
                color: fg-1; }
            
            /* Video Player: Tooltip */
            .vjs-time-tooltip {
                font-family: sans-serif;
                border-radius: range-corners;
                top: -3.8em;
                background-color: bg-...