Hiphop Youtube Music Theme by edieye

/* ==UserStyle==
@name           Hiphop YT Music Theme
@namespace      youtube.com/@edieye
@version        4.17
0description    A hiphop Youtube Music Theme
@author         edieye

@preprocessor less
@var select separator0 "----Global----" {" ":""}
@var checkbox coloriseYT "Personalised color for YT logo" 1
@var checkbox useBlur "Use Blurry Background (Experimental)" 1
@var number blur "Blur amount (background)" [4, 0, 50, 1, 'px']
@var number pbo "Miniplayer progress bar opacity" [0.9, 0, 1, 0.05]

@var select separator1 "" {" ":""}

@var select separator2 "----Themes----" {" ":""}
@var checkbox useDefaultThemes "Use default themes" 1
@var select theme "Default Theme" ["nyan:Nyan Cat", "oled:Oled Gif (animated)", "genshin:Genshin Characters", "genshin2:Genshin Characters 2", "genshin3:Genshin Characters 3", "zhongli:Zhongli", "keqing:Keqing", "eula:Eula", "xenoblade:Xenoblade Chronicles Series (animated)", "xenoblade3:Xenoblade Chronicles 3", "xenobladegirls:Xenoblade Chronicles Girls", "rogtranslucid:ROG Translucid", "mixcraftio:Mixcraftio"]


@var select separator3 "----Custom----" {" ":""}
@var checkbox useDefaultBackgrounds "Use default backgrounds" 0
@var text bgImage "Background Image URL" "'https://i.ibb.co/4tFgYSd/wallpaper-ytmusicv3-of.png'"
@var color color-dark "Dark color" #101010
@var color color-light "Bright color" #121212

==/UserStyle== */
@-moz-document domain("music.youtube.com") {
    /*Stylus variables*/
    :root {
        --blur: @blur;
        & when (@useDefaultThemes =1) or (@useDefaultBackgrounds =1) {
            & when (@theme =nyan) {
                --color-dark: #121212;
                --color-light: #101010;
                --bg-url: url("https://i.ibb.co/4tFgYSd/wallpaper-ytmusicv3-of.png");
            }
        }
    }

    html {
        &,
        &[dark],
        &[darker-dark-theme],
        &[darker-dark-theme][dark],
        [dark] {
            background: var(--color-dark) !important;
            /*Youtube vars:*/
            /*Theme*/
            /*Dark*/
            --ytmusic-player-bar-background: var(--color-dark) !important;
            --ytmusic-detail-header: var(--color-dark) !important;
            --paper-checkbox-checkmark-color: var(--color-dark) !important;
            yt-notification-action-renderer.ytmusic-popup-container {
                --paper-toast-background-color: var(--color-dark) !important;
            }
            /*light
            --ytmusic-background: var(--color-light) !important;
            --ytmusic-brand-background-solid: var(--color-light) !important;
            --yt-spec-raised-background: var(--color-light) !important;
            --paper-dialog-background-color: var(--color-light) !important;
            --paper-listbox-background-color: var(--color-light) !important;
            /*searchbox + nav*/
            --ytmusic-nav-bar: var(--color-dark) !important;
            ytmusic-tabs.stuck {
                background-color: var(--color-dark) !important;
            }
        }

        /*Background Image*/
        &:before {
            content: '';
            width: 100%;
            height: 100%;
            position: fixed;
            background: var(--bg-url) no-repeat var(--color-light);
            background-size: cover;
            will-change: transform;
            z-index: -1;
        }
    }

    body {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    /*Blur*/
    html when (@useBlur =1) {
        #content[role="main"] {
            backdrop-filter: blur(var(--blur));
        }
    }

    /*Background fix*/
    ytmusic-browse-response[has-background]:not([disable-gradient]) .background-gradient.ytmusic-browse-response {
        background: transparent !important;
        position: relative;
    }
    ytmusic-fullbleed-thumbnail-renderer[is-background] .image.ytmusic-fullbleed-thumbnail-renderer {
        visibility: hidden !important;
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 0, 0)), to(rgba(255, 0, 0, 0)));
        mask-image: linear-gradient(to bottom, rgb(255, 0, 0), rgba(255, 0, 0, 0));
    }


    tp-yt-iron-icon {
        color: rgba(255, 255, 255);
    }


    ::-webkit-scrollbar {
        background-color: var(--color-dark) !important;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 8px !important;
        border: 4px solid rgba(250, 0, 0, 0) !important;
        background-clip: content-box !important;
        background-color: var(--yt-spec-text-secondary) !important;
    }
}