Invidious - Nord Theme [Redesign] by tsyron

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

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

@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 */
    d-1=#2E3440
    d-2=#3B4252
    d-3=#434C5E
    d-3-disabled=rgba(d-3, 0.3)
    d-4=#4C566A
    d-4-h=rgba(d-1, 0.9)
    d-4-space=rgba(d-4, 1)
    
    /* Lighter Tints */
    l-1=#D8DEE9
    l-1-space=rgba(l-1, 0.3)
    l-1-h=rgba(l-1, 0.9)
    l-1-disabled=rgba(l-1, 0.5)
    l-2=#E5E9F0
    l-3=#ECEFF4
    
    /* Dark Theme */
    bg-d-1=d-1
    bg-d-2=d-2
    bg-d-3=d-3
    bg-d-3-disabled=d-3-disabled
    bg-d-4=d-4
    bg-d-4-space=d-4-space
        
    fg-d-1=l-1
    fg-d-1-h=l-1-h
    fg-d-2=l-2
    fg-d-3=l-3
    
    /* Light Theme */
    bg-l-1=l-1
    bg-l-1-space=l-1-space
    bg-l-1-disabled=l-1-disabled
    bg-l-2=l-2
    bg-l-3=l-3
        
    fg-l-1=d-1
    fg-l-2=d-2
    fg-l-3=d-3
    fg-l-4=d-4
    fg-l-4-h=d-4-h
    
    /* Linked */
    link-d=#81A1C1
    link-d-h=rgba(link-d, 0.9)
    
    link-l=#5E81AC
    link-l-h=rgba(link-l, 0.9)
    
    /* Colours */
    red-n=#BF616A
    red-n-hover=rgba(red-n, 0.9)
    red-n-watched=rgba(red-n, 0.4)
    orange-n=#D08770
    orange-n-hover=rgba(orange-n, 0.9)
    pink-n=#B48EAD
    pink-n-h=rgba(pink-n, 0.9)
    yellow-n=#EBCB8B
    yellow-n-h=rgba(yellow-n, 0.9)
    green-n=#A3BE8C
    green-n-h=rgba(green-n, 0.9)
    green-border=rgba(green-n, 0.3)
    
    
    nord-1=#88C0D0
    nord-1-h=rgba(nord-1, 0.9)
    nord-1-watched=rgba(nord-1, 0.4)
    nord-2=#5E81AC
    nord-2-h=rgba(nord-2, 0.9)
    nord-3=nord-2
    nord-3-h=rgba(nord-3, 0.9)
    nord-4=#8FBCBB
    nord-4-h=rgba(nord-4, 0.9)
    nord-5=nord-1
    nord-5-h=rgba(nord-5, 0.9)
    nord-5-border=rgba(nord-5, 0.3)
    
    /* Shadow */
    shadow=rgba(0, 0, 0, 0.3)

    :root {
        if select-color=="Colourful" {
            --Color1: red-n;
            --Color1Hover: red-n-hover;
            --Color1Watched: red-n-watched;
            --Color2: orange-n;
            --Color2Hover: orange-n-hover;
            --Color3: pink-n;
            --Color3Hover: pink-n-h;
            --Color4: yellow-n;
            --Color4Hover: yellow-n-h;
            --Color5: green-n;
            --Color5Hover: green-n-h;
            --Color5Border: green-border}

        if select-color=="Frost" {
            --Color1: nord-1;
            --Color1Hover: nord-1-h;
            --Color1Watched: nord-1-watched;
            --Color2: nord-2;
            --Color2Hover: nord-2-h;
            --Color3: nord-3;
            --Color3Hover: nord-3-h;
            --Color4: nord-4;
            --Color4Hover: nord-4-h;
            --Color5: nord-5;
            --Color5Hover: nord-5-h;
            --Color5Border: nord-5-border}

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

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

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

    /* Dark Theme */
    @media (prefers-color-scheme: dark) {
        
        body,
        .pure-g,
        .pure-form legend {
            background: bg-d-1;
            color: fg-d-1; }

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

        a:hover,
        footer a:hover,
        summary:hover,
        a:not([data-id]) > .icon:hover,
        a:link:not(.pure-button):not(.channel-owner):hover {
            color: link-d-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-d-2;
                color: fg-d-1; } }

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

        .pure-button-primary:hover,
        .pure-button-secondary:hover {
            background-color: bg-d-3 !important;
            color: fg-d-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: bg-d-3; }

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


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

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

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

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

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

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

        p.channel-name {
            color: link-d; }

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

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

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

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

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

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

            /* 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: l-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-d-1; }

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