Light Theme for YouTube Music by tech-how

/* ==UserStyle==
@name           Light Theme for YouTube Music
@author         Tristian Dedinas (https://github.com/Tech-How)
@namespace      Tech-How
@version        2.1
@description    A refreshing new look for YouTube Music
@supportURL     https://github.com/Tech-How/Light-Theme-for-YouTube-Music/issues
@preprocessor   stylus
@var    text        info1       "INFO: The inverted accent color will be used when the background is black instead of white. This can be the same as the normal accent, or different."     "Ok"
@var    color       userYTMAccent       "Accent Color"      #f00
@var    color       userYTMAccentInvert         "Accent Color (Inverted)"       #f00
@var    checkbox        userYTMAnimations       "Animations"       1
@var    checkbox        userYTMTransitions     "Transition Improvements"        1
@var    checkbox        userYTMShadow           "Shadowing"         1
@var    checkbox        userYTMRound            "Rounded Corners"           1
@var    checkbox        userYTMTextTransform    "Normal Text Casing"        1
@var    checkbox        userYTMNoStickyHeader     "Allow Album Cover Scroll"  0
==/UserStyle== */

@-moz-document domain("music.youtube.com") {
/* Global Site */

/* Variables */
:root {
    --ytm-bg-app: #f4f4f4;
    --ytm-bg-content: #fff;
    --ytm-content: #262626;
    --ytm-hover: #eee;
    --ytm-hover-app: #e5e5e5;
    --ytm-hover-invert: #262626;
    --ytm-selected: #ddd;
    --ytm-seperator: #ccc;
    --ytm-seperator-invert: #383838;
    --ytm-text: #000;
    --ytm-text-invert: #fff;
    --ytm-placeholder: #404040;
    --ytm-btn-mono: #000;
    --ytm-btn-mono-invert: #fff;
    --ytm-btn-tonal: var(--ytm-selected);
    --ytm-accent: userYTMAccent;
    --ytm-accent-invert: userYTMAccentInvert; /* Used when the background is black instead of white. */
    --ytm-toggle: #3387ce;
    --ytm-toggle-bg: #3ea6ff;
    --ytm-progress-primary: var(--ytm-accent);
    --ytm-progress-secondary: #aaa;
    --ytm-progress-tertiary: #ccc;
    --ytm-scrollbar: #aaa;
}

if userYTMShadow {
    :root {
        --ytm-shadow-big: 3px 3px 15px rgba(0, 0, 0, .5);
        --ytm-shadow-medium: 0px 0px 4px 2px rgba(0,0,0,0.3);
        --ytm-shadow-small: 0px 0px 3px 2px rgba(0,0,0,0.3);
        --ytm-shadow-mini: 0px 0px 3px 1px rgba(0,0,0,0.3);
        --ytm-shadow-browse: 1px 2px 8px 3px rgba(0,0,0,0.27);
        --ytm-shadow-search: 0px 6px 6px 1px rgba(0, 0, 0, 0.26);
        --ytm-shadow-dropdown: 0px 0px 10px -4px rgba(0,0,0,0.60);
        --ytm-shadow-dialog: 1px 1px 8px 0px rgba(0,0,0,0.3);
        --ytm-shadow-toast: 7px 7px 10px rgba(0, 0, 0, .5);
    }
}

if userYTMRound {
    :root {
        --ytm-radius-big: 10px;
        --ytm-radius-small: 7px;
        --ytm-radius-mini: 3px;
    }
}

/* Animations */
@keyframes fluentDown {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(6px);
    }
}

@keyframes fluentUp {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fluentLeft {
    0% {
        opacity: 0;
        transform: translateX(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fluentRight {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fluentDownInline {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fluentSlideUpIn {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* The below keyframe must return to its original position after the element animates out, otherwise the miniplayer would remain hidden beneath the viewport. */
@keyframes fluentSlideDownOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    25% {
        opacity: 0;
        transform: translateY(50%);
    }
    50% {
        opacity: 0;
        transform: translateY(50%);
    }
    75% {
        opacity: 0;
        transform: translateY(calc(100% + var(--ytmusic-player-bar-height) * 2 - 15px));
    }
    100% {
        opacity: 1;
        transform: translateY(calc(100% + var(--ytmusic-player-bar-height) * 2 - 15px));
    }
}

@keyframes miniPlayer {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shadowIn {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: var(--ytm-shadow-search);
    }
}

if userYTMAnimations {
    /* Sidebar */
    ytmusic-guide-renderer {
        animation: fluentLeft .3s forwards ease;
    }

    #contentContainer.tp-yt-app-drawer[opened] {
        animation: fluentRight .3s forwards ease;
    }
    
    /* Pop-ups and Dialogs */
    .style-scope.ytmusic-popup-container:not(ytmusic-notification-action-renderer):not(ytmusic-notification-text-renderer):not(ytmusic-video-download-toast-renderer) {
        animation: fluentUp .2s forwards ease;
    }
    
    ytmusic-dialog {
        animation: fadeIn .3s forwards ease;
    }
    
    /* Dropdowns and Items */
    tp-yt-iron-dropdown.tp-yt-paper-menu-button {
        animation: fluentDown .2s forwards ease;
    }
    
    ytmusic-search-box[opened] #suggestions {
        animation: fluentDownInline .2s forwards ease;
    }
    
    /* Player Page Enhancement */
    ytmusic-app-layout:not([is-mweb-modernization-enabled]):not([is-mobile-web]) > [slot="player-page"] {
        transform: none;
        animation: fluentSlideDownOut .65s forwards;
        animation-delay: .15s;
    }

    ytmusic-app-layout[player-page-open]:not([is-mobile-web]) > [slot="player-page"] {
        opacity: 0;
        transform: none;
        animation: fluentSlideUpIn .2s forwards;
        animation-delay: .1s;
    }
    
    /* Mini Player Enhancement */
    ytmusic-player-page[mini-player-enabled][player-page-open] #player.ytmusic-player-page {
        animation: miniPlayer .6s ease;
    }
}

if userYTMTransitions {
    /* Sidebar */
    tp-yt-paper-item.ytmusic-guide-entry-renderer {
        transition: background .1s;
    }
    
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        transition: background .1s;
    }
    
    /* Search Box */
    ytmusic-search-box:not([opened]):not([has-query]):not([is-mobile-view]) .search-box.ytmusic-search-box {
        transition: background .2s;
    }

    ytmusic-search-box[opened] #suggestions {
        transition: background .2s;
    }

    ytmusic-search-box[opened] #suggestions ytmusic-search-suggestion {
        transition: background .1s;
    }

    ytmusic-search-box[opened] .search-container.ytmusic-search-box, ytmusic-search-box[is-bauhaus-sidenav-enabled] #suggestion-list.ytmusic-search-box {
        animation: shadowIn .2s forwards ease;
    }

        /* Search Box Initiated */
    ytmusic-search-box:not([is-mobile-view]) .search-box.ytmusic-search-box {
        transition: background .2s;
    }

            /* Search Tabs */
    ytmusic-tabs.stuck {
        transition: background .2s;
    }

    /* Grid Item Artwork Hover Animation */
    ytmusic-item-thumbnail-overlay-renderer[display-style="MUSIC_ITEM_THUMBNAIL_OVERLAY_DISPLAY_STYLE_HOVER"] #play-button.ytmusic-item-thumbnail-overlay-renderer, #background.ytmusic-item-thumbnail-overlay-renderer, ytmusic-item-thumbnail-overlay-renderer > [slot="menu"], ytmusic-item-thumbnail-overlay-renderer #play-button.ytmusic-item-thumbnail-overlay-renderer:not([state="default"]), ytmusic-item-thumbnail-overlay-renderer:hover #play-button.ytmusic-item-thumbnail-overlay-renderer, ytmusic-item-thumbnail-overlay-renderer:hover #background.ytmusic-item-thumbnail-overlay-renderer, ytmusic-item-thumbnail-overlay-renderer:hover > [slot="menu"], ytmusic-item-thumbnail-overlay-renderer[focus-within] #play-button.ytmusic-item-thumbnail-overlay-renderer, ytmusic-item-thumbnail-overlay-renderer[focus-within] > [slot="menu"] {
        transition: opacity .2s;
    }
    
    /* List Item Artwork Hover Animation */
    .thumbnail-overlay.ytmusic-responsive-list-item-renderer {
        transition: opacity .1s;
    }
    
    /* Top Result Artwork Hover Animation */
    .thumbnail-overlay.ytmusic-card-shelf-renderer {
        transition: opacity .15s;
    }
    
    /* Queue Artwork Hover Animation */
    .thumbnail-overlay.ytmusic-player-queue-item {
        transition: opacity .1s;
    }
    
    /* Search Chips (New Design) */
    ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_UNKNOWN"] a.ytmusic-chip-cloud-chip-renderer:hover, ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_DEFAULT"] a.ytmusic-chip-cloud-chip-renderer:hover, ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_ICON_SECOND"] a.ytmusic-chip-cloud-chip-renderer:hover {
        transition: background .1s;
    }

    ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_PRIMARY"] a.ytmusic-chip-cloud-chip-renderer, ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_SECONDARY"] a.ytmusic-chip-cloud-chip-renderer, ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_UNKNOWN"][is-selected] a.ytmusic-chip-cloud-chip-renderer, ytmusic-chip-cloud-chip-renderer[enable-bauhaus-style][chip-style="STYLE_IC...