Invidious - Create Your Theme [Redesign] by tsyron

/* ==UserStyle==
@name           Invidious - Create Your Theme [Redesign]
@namespace      github.com/Tsyron/Create-Your-Theme/tree/main/Invidious
@version        1.0.3
@description    Create Your Theme by choosing a couple colours
@author         Tsyron
@preprocessor   stylus
@license        AGPLv3

@var            color color-background-light "Light Mode: Background" #fff

@var            color color-foreground-light "--- Foreground" #0f0f0f

@var            color color-accent-light "--- Accent" #f00

@var            color color-links-light "--- Links" #065fd4

@var            color color-blue-light "--- Blue" #065fd4

@var            checkbox checkbox-subscribe-text-light "--- Subscribe Button Text Inverse" 0

@var            color color-background-dark "Dark Mode: Background" #0f0f0f

@var            color color-foreground-dark "--- Foreground" #f1f1f1

@var            color color-accent-dark "--- Accent" #f00

@var            color color-links-dark "--- Links" #3ea6ff

@var            color color-blue-dark "--- Blue" #3ea6ff

@var            checkbox checkbox-subscribe-text-dark "--- Subscribe Button Text Inverse" 0

==/UserStyle== */
@-moz-document url-prefix("https://iv."),
url-prefix("https://inv"),
url-prefix("https://invidio."),
url-prefix("https://invidious"),
url-prefix("https://vid."),
url-prefix("https://y.com."),
url-prefix("https://yt"),
url-prefix("https://tube."),
domain("yewtu.be"),
domain("watch.thekitty.zone"),
domain("onion.tube"),
domain("not-ytb.blocus.ch"),
domain("youtube.076.ne.jp"),
domain("youtube.owacon.moe"),
domain("sea1.iv.ggtyler.dev"),
domain("anontube.lvkaszus.pl"),
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("inv.vern.i2p"),
domain("pjsfhqamc7k6htnumrvn4cwqqdoggeepj7u5viyimgnxg3gar72q.b32.i2p"),
domain("pjsfi2szfkb4guqzmfmlyq4no46fayertjrwt4h2uughccrh2lvq.b32.i2p") {
    
    /* Light Theme */
    bg1l=color-background-light
    bg2l=darken(bg1l, 1.5%) /* select focus, .watched buttons */
    bg3l=darken(bg1l, 5%) /* Video player: hover controls */
    bg5l=darken(bg1l, 2.5%) /* search filter box */
    
    fg1l=color-foreground-light
    fg2l=rgba(fg1l, 0.7) /* links hover */
    fg3l=rgba(fg1l, 0.2) /* border colour */
    fg4l=rgba(fg1l, 0.05) /* button background colour, redirect bg table */
    fg5l=rgba(fg1l, 0.1) /* button background hover colour, selection */
    fg6l=rgba(fg1l, 0.025) /* checkbox, radio */
    fg7l=rgba(fg1l, 0.2) /* progress bar unloaded */
    fg8l=rgba(fg1l, 0.8) /* time */
    fg9l=rgba(fg1l, 0.75)
    fg10l=darken(fg1l, 50%)
    fg11l=rgba(fg10l, 0.75)

    ca1l=color-accent-light
    ca2l=rgba(ca1l, 0.8) /* hover */
    ca3l=rgba(ca1l, 0.4) /* thumbnail overlay after watch */
    ca4l=rgba(ca1l, 0.675)

    cl1l=color-links-light
    cl2l=rgba(cl1l, 0.8) /* hover */

    cb1l=color-blue-light
    cb2l=rgba(cb1l, 0.8) /* hover */

    /* Dark Theme */
    bg1d=color-background-dark
    bg2d=lighten(bg1d, 2.5%) /* select focus, .watched buttons, search filter box */
    bg3d=rgba(bg1d, 0.8) /* time */
    bg4d=darken(bg1d, 50%)
    bg6d=rgba(bg1d, 0.75)
    bg7d=rgba(bg4d, 0.75)
    
    fg1d=color-foreground-dark
    fg2d=rgba(fg1d, 0.8) /* links hover */
    fg3d=rgba(fg1d, 0.2) /* border colour */
    fg4d=rgba(fg1d, 0.1) /* button background colour, redirect bg table */
    fg5d=rgba(fg1d, 0.15) /* button background hover colour */
    fg6d=rgba(fg1d, 0.035) /* checkbox, radio */
    fg7d=rgba(fg1d, 0.25) /* selection */

    ca1d=color-accent-dark
    ca2d=rgba(ca1d, 0.9) /* hover */
    ca3d=rgba(ca1d, 0.4) /* thumbnail overlay after watch */
    ca4d=rgba(ca1d, 0.8)

    cl1d=color-links-dark
    cl2d=rgba(cl1d, 0.8) /* hover */

    cb1d=color-blue-dark
    cb2d=rgba(cb1d, 0.8) /* hover */

    /* Border-Radius */
    br1=6px
    br2=12px
    br3=18px

    /* Light Theme */
    @media (prefers-color-scheme: light) {

        .no-theme {
            /* Background, Foreground */
            body,
            .pure-g,
            .pure-form legend {
                background: bg1l;
                color: fg1l; }

            /* Links */
            summary,
            a.feed-menu-item.pure-menu-heading,
            a:link:not(.pure-button):not(.channel-owner) {
                color: fg2l; }

            a,
            a:active,
            a:visited,
            footer a {
                color: fg2l !important; }

            a.feed-menu-item.pure-menu-heading:hover,
            a:link:not(.pure-button):not(.channel-owner):hover {
                color: fg1l; }

            summary:hover,
            summary:focus,
            a:hover,
            footer a:hover {
                color: fg1l !important; }

            /* Links Outside of Invidious */
            a[href^="https://www.youtube.com"],
            a[href^="https://redirect.invidious.io"],
            div.pure-u-md-22-24 p[style="white-space:pre-wrap"] a,
            #descriptionWrapper a {
                color: cl2l !important; }

            a[href^="https://www.youtube.com"]:hover,
            a[href^="https://redirect.invidious.io"]:hover,
            div.pure-u-md-22-24 p[style="white-space:pre-wrap"] a:hover,
            #descriptionWrapper a:hover {
                color: cl1l !important; }

            /* Input, select & textarea */
            input,
            input[type="email"],
            input[type="number"],
            input[type="password"],
            input[type="text"],
            input[type="submit"],
            input[type="checkbox"],
            input[type="radio"],
            input[type="range"],
            select,
            textarea {
                border: 1px solid fg3l;
                -webkit-border: 1px solid fg3l;
                background-color: fg4l;
                color: fg1l; }

            input:focus,
            input[type="email"]:focus,
            input[type="number"]:focus,
            input[type="password"]:focus,
            input[type="text"]:focus,
            input[type="submit"]:focus,
            input[type="checkbox"]:focus,
            input[type="radio"]:focus,
            input[type="range"]:focus,
            select:focus,
            textarea:focus {
                border: 1px solid cb1l;
                -webkit-border: 1px solid cb1l; }

            select {
                background-color: fg4l; }

            select:focus {
                background-color: bg2l; }

            /* Checkbox & Radio */
            input[type="checkbox"],
            input[type="radio"] {
                background-color: fg6l; }

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

            input[type="radio"]:checked:after {
                background-color: fg1l !important; }

            /* Range */
            input[type="range"]::-webkit-slider-thumb {
                background: fg4l;
                box-shadow: -80px 0 0 75px fg4l;
                border-right: 1px solid fg3l !important; }

            input[disabled] {
                background-color: fg6l; }

            /* Button */
            .pure-button-primary,
            .pure-button-secondary,
            .pure-button-primary:hover,
            .pure-button-secondary:hover,
            .pure-button-primary:focus,
            .pure-button-secondary:focus {
                border: 1px solid fg3l !important;
                color: fg1l !important; }

            .pure-button-primary:focus,
            .pure-button-secondary:focus {
                border: 1px solid cb1l !important; }

            .pure-button-primary,
            .pure-button-secondary {
                background-color: fg4l !important; }

            .pure-button-primary:hover,
            .pure-button-secondary:hover,
            .pure-button-primary:focus,
            .pure-button-secondary:focus {
                background-color: fg5l !important; }

            /* Button: Subscribe */
            #subscribe,
            #subscribe:hover,
            #subscribe:focus {
                border: 1px solid fg3l !important;
                color: bg1l !important; }

            #subscribe:focus {
                border: 1px solid cb1l !important; }

            #subscribe {
                background-color: ca2l !important; }

            #subscribe:hover,
            #subscribe:focus {
                background-color: ca1l !important; }

            if checkbox-subscribe-text-light {
                #subscribe,
                #subscribe:hover,
                #subscribe:focus,
                .video-js .vjs-big-play-button .vjs-icon-placeholder {
                    color: fg1l !important; } }

            /* Invidious Logo */
            .navbar .index-link,
            #search-widget #logo .pure-menu-heading {
                color: ca2l; }

            .navbar {
         ...