Mixcloud Midnight Theme by BoffinBrain

/* ==UserStyle==
@name           Mixcloud Midnight Theme
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    A dark skin that keeps the classic blue/purple color scheme.
@author         BoffinBrain
==/UserStyle== */

@-moz-document domain("mixcloud.com") {

    /*
        This style would be a lot smaller if the Mixcloud devs didn't half-ass their
        themes by hard-coding certain colors for certain elements.
        My apologies for all the poorly-performing attribute selectors in this project.
        Unfortunately, like many big companies, Mixcloud devs use some kind of design
        framework that randomizes the class names with every change they make, which
        makes all CSS mods extremely fragile.
    */

    /* Keep the original theme variables for the following elements */
    div[class^="styles__HQAudioTag"], /* HQ badge over mix artwork */
    div[class^="styles__PopoverContentWrapper"], /* Popup menu */
    div[data-testid="playerHero"], /* Top section of mix page */
    div.jNmPWl[class^="styles__FullWidthHeader"], /* Nav bar when search is open */
    div[class^="Search__SearchContainer"], /* Search results */
    div[class^="playerAlreadyOpen"], /* Player-related panels */
    .player-height-placeholder,
    .player-open,
    .up-next-open {
        --color-core-primary: #5000ff;
        --color-core-secondary: #f778eb;
        --color-core-premium: #f3f810;
        --color-core-subtle: #d2d3d7;
        --color-core-success: #e3faf0;
        --color-core-warning: #f9fbb2;
        --color-core-info: #e2e3ff;
        --color-core-error: #fde1f7;
        --color-core-disabled: #d2d3d7;
        --color-core-important: #d20442;
        --color-core-confirm: #0cc281;
        --color-text-primary: #171c2b;
        --color-text-secondary: #61667a;
        --color-text-tertiary: #ffffff;
        --color-text-hover: #2a3145;
        --color-surface-primary: #ffffff;
        --color-surface-secondary: #171c2b;
        --color-surface-tertiary: #f4f4f5;
        --color-surface-subtle: #f4f4f580;
        --color-tint-primary: #e2e3ff;
        --color-button-primary: #5000ff;
        --color-button-secondary: #f778eb;
        --color-button-tertiary: #d2d3d7;
        --color-button-disabled: #61667a;
        --color-card-background-dark: #22293c;
        --color-card-background-light: #f4f4f5;
    }



    /* Change the theme variables for the rest of the page */
    :root {
        --color-core-primary: #a060ff;
        --color-core-secondary: #f778eb;
        --color-core-premium: #5060ab;
        --color-core-subtle: #334;
        --color-text-primary: #fff;
        --color-text-secondary: #8389a2;
        --color-text-tertiary: #fff;
        --color-text-hover: #ddf;
        --color-surface-primary: #10131a;
        --color-surface-secondary: #171c2b;
        --color-surface-tertiary: #404460;
        --color-surface-subtle: #00000080;
        --color-card-background-light: #00000080;
    }

    body {
        background: var(--color-surface-primary);
    }



    /* Nav */
    ul[data-menu="top-level"] > li > button::after {
        filter: invert(1);
    }

    div[class^="styles__DropdownMenu"] {
        background: var(--color-surface-secondary);
        color: var(--color-text-primary);
    }



    /* Home Sidebar */
    nav[class^="styles__LeftNavWrapper"] > a {
        color: var(--color-text-primary);
    }

    nav[class^="styles__LeftNavWrapper"] > a > svg > path {
        fill: var(--color-text-primary);
    }



    /* Remove 'New' chip from the sidebar home link */
    p[aria-label="(New)"] {
        display: none;
    }



    /* Genre tag rankings on mix details */
    span[class^="styles__GenreTagPosition"] {
        background: var(--color-surface-secondary);
    }



    /* Creator Dashboard Guides*/
    .jwcuGB {
        color: var(--color-text-primary);
    }



    /* Sidebar on Profile page */
    ul[class^="styles__OptionContainer"],
    div[class^="styles__ProfileMeta-"] {
        box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 22px;
    }

    div[class^="styles__Expander-"] > button > svg > path,
    a[class^="button__InlineAnchor-"] > svg > path {
        color: var(--color-text-hover);
        fill: var(--color-text-hover) !important;
    }



    /* Scrolling tabs nav on Profile page */
    main[class^="styles__ProfileTabs"] .scroll-bar {
        background: var(--color-surface-secondary);
        color: var(--color-text-primary);
        box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px;
    }



    /* Links next to left/right sidebar headings */
    h4 > a[class^="button__StyledLink-"] {
        color: var(--color-text-secondary);
    }



    /* Account Settings */
    .incomplete-nag {
        background: var(--color-card-background-light) !important;
    }

    .incomplete-nag .meter-inner {
        background: var(--color-surface-subtle) !important;
    }

    .bWufsN.percentage {
        color: var(--color-text-secondary);
    }

    .fieldset,
    .dtjSYs,
    .diRxPC,
    .hkiJMt,
    div[class^="DEPRECATED_Forms__DEPRECATEDFieldset"] {
        border-color: var(--color-core-subtle);
    }

    div[class^="DEPRECATED_Forms__DEPRECATEDFieldset"] label > b {
        color: var(--color-text-primary);
        font-weight: normal
    }

}