Skip to content

Spotify Minimal X Clear Theme (Pick your own BG) V2 by originalswayze

Screenshot of Spotify Minimal X Clear Theme (Pick your own BG) V2
Write a review Install Get Stylus

Details

Authororiginalswayze

LicenseNo License

Categoryhttps://open.spotify.com/

Created

Updated

Size12 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Spotify theme that allows for custom backgrounds with custom clear UI

If you're interested in the wallpaper used in my preview picture I uploaded it here: https://i.imgur.com/78crN6y.jpg

Notes

September 27 2022

Minor fixes and updated objects

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Spotify Minimal X Clear Theme (Pick your own BG)
@namespace      USO Archive
@author         Nick Brealey
@description    `Spotify Theme to allow custom backgrounds with clear UI`
@version        20220428.5.14
@license        NO-REDISTRIBUTION
@preprocessor   uso
@advanced dropdown ooh--pretty- "Pick You Background" {
ooh--pretty- "Windows*" <<<EOT https://i.imgur.com/78crN6y.jpg EOT;

	ooh--pretty--custom-dropdown "Custom" <<<EOT /*[[ooh--pretty--custom]]*\/ EOT;
}
@advanced text ooh--pretty--custom "Pick You Background (Custom)" "https://example.com/image.png"

==/UserStyle== */
@-moz-document domain("open.spotify.com") {
    .Root__top-container {
        background: url(/*[[ooh--pretty-]]*/) !important;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed !important;
        background-size: cover !important;
    }

    .Root__nav-bar {
        background-color: #0000004a !important;
        margin: 10px;
        border-radius: 0px !important;
    }

    .Root__now-playing-bar {
        background-color: #00000000;
    }

    .U05tnfKJjzV3lfrwRbLN {
        background-color: #0000004a;
        border-radius: 0px;
    }

    footer[data-testid*="now-playing-bar"] {
        border: none;
        margin: 10px;
        border-radius: 0px;
    }

    .Root__main-view {
        background-color: #00000000 !important;
        border-radius: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: calc(100% - 10px);
    }

    .contentSpacing {
        background-color: #00000000;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 0px;
    }

    .xYgjMpAjE5XT05aRIezb,
    .uebZpDr3EwDvpO0w6P9U {
        background: none;
        background-image: none;
        background-color: #00000000!important;
    }

    div[style] {
        background: #f0000000 !important;
    }

    .rezqw3Q4OEPB1m4rmwfw {
        background: #0000004a;
        isolation: isolate;
    }

    ._EShSNaBK1wUIaZQFJJQ {
        -webkit-box-shadow: 0 4px 60px rgb(0 0 0 / 50%);
        box-shadow: 0 4px 60px rgb(255 255 255 / 0%);
    }

    .wyYXgOW8iKGxW2RUhgmV {
        position: initial;
    }

    .encore-dark-theme .encore-bright-accent-set {
        --background-base: #ffffff;
        --background-highlight: #ffffff;
        --background-press: #ffffff;
        --background-elevated-base: #ffffff;
        --background-elevated-highlight: #ffffff;
        --background-elevated-press: #ffffff;
        --background-tinted-base: #ffffff;
        --background-tinted-highlight: #ffffff;
        --background-tinted-press: #ffffff;
        --background-unsafe-for-small-text-base: #ffffff;
        --background-unsafe-for-small-text-highlight: #ffffff;
        --background-unsafe-for-small-text-press: #ffffff;
        --text-base: #000;
        --text-subdued: #000;
        --text-bright-accent: #000;
        --text-negative: #000;
        --text-warning: #000;
        --text-positive: #000;
        --text-announcement: #000;
        --essential-base: #000;
        --essential-subdued: #000;
        --essential-bright-accent: #000;
        --essential-negative: #000;
        --essential-warning: #000;
        --essential-positive: #000;
        --essential-announcement: #000;
        --decorative-base: #000;
        --decorative-subdued: #ffffff;
    }

    .rRF_r7EyCHjZv058JACi,
    .rRF_r7EyCHjZv058JACi:focus,
    .rRF_r7EyCHjZv058JACi:hover {
        color: #ffffff;
    }

    .L6M8zGIwEK7CaBCiZ_3A {
        background-color: transparent;
        border: none;
        color: #ffffff;
        height: var(--button-size);
        min-width: var(--button-size);
        position: relative;
        width: var(--button-size);
    }

    .TywOcKZEqNynWecCiATc {
        --bg-color: hsla(0, 0%, 100%, 0.3);
        --fg-color: #fff;
        --is-active-fg-color: #b1b1b1;
        --progress-bar-transform: 0%;
        --progress-bar-height: 4px;
        --progress-bar-radius: calc(var(--progress-bar-height)/2);
        height: 100%;
        overflow: hidden;
        -ms-touch-action: none;
        touch-action: none;
        width: 100%;
    }

    .a2ruVaZt_DdrdHz3GqgU {
        border: none;
        border-radius: 0px;
        grid-column: span 2;
        height: 220px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .Em2LrSSfvrgXQoajs6cm {
        border: none;
        border-radius: 0px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .LunqxlFIupJw_Dkx6mNx {
        -webkit-box-flex: 1;
        background: #0000004a;
        border-radius: 0px;
        flex: 1;
        isolation: isolate;
        padding: 16px;
        position: relative;
        transition: background-color .3s ease;
        width: 100%;
    }

    .dZ3U5sTGUTdanNamXe1z {
        margin-top: -112px;
    }

    .GD2gbRtcs5dOjMGAM_Y4 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        background-color: #0000004a;
    }
}

.nav-alt .Y8edH1Yjo4xrW_58czQj {
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 7%, .7)), to(hsla(0, 0%, 7%, 0)));
    background: linear-gradient(180deg, hsl(0deg 0% 7% / 0%), hsla(0, 0%, 7%, 0));
}

.Root__fixed-top-bar {
    -webkit-padding-start: 8px;
    background-color: #0000004a;
    border-radius: 0px;
    grid-area: top-bar;
    padding-inline-start: 8px;
}

.nav-alt .QO9loc33XC50mMRUCIvf {
    background-color: #0000004a;
    color: #fff!important;
    height: 48px;
    width: 440px;
}

.QO9loc33XC50mMRUCIvf {
    border: 0;
    border-radius: 0px;
    color: #000;
    height: 40px;
    padding: 6px 48px;
    text-overflow: ellipsis;
    width: 100%;
}

.J6VTd7VdGN2PM_oXCAyH {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -ms-flex-negative: 0;
    align-items: center;
    background-color: #24242400;
    border-radius: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.os-theme-spotify > .os-scrollbar-horizontal > .os-scrollbar-track,
.os-theme-spotify > .os-scrollbar-horizontal > .os-scrollbar-track.active,
.os-theme-spotify > .os-scrollbar-horizontal > .os-scrollbar-track:hover,
.os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track,
.os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track.active,
.os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track:hover {
    background: #09090980;
}

.BL__GuO2JsHMR6RgNfwY {
    background-color: #0000004a;
    isolation: isolate;
}

.dZPmmYYhskhqHJCAruvI {
    border-bottom: 1px;
    color: #ffffff;
    height: 36px;
}

.bfQ2S9bMXr_kJjqEfcwA a,
.rq2VQ5mb9SDAFWbBIUIn a {
    color: #ffffff;
}

.eDbSCl {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin-block: 0px;
    font-size: 0.8125rem;
    font-weight: 400;
    font-family: var(--font-family, CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif));
    color: #ffffff;
}

.nav-alt .GD2gbRtcs5dOjMGAM_Y4 {
    background: #0000004a;
    border: none;
}

.jYSKoa {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    background-color: var(--background-base, #1ed760);
    color: var(--text-base, #000000);
    display: flex;
    border-radius: 3px;
    font-size: inherit;
    min-block-size: 56px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
}

.dPQjiN {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    background-color: var(--background-base, #1ed760);
    color: var(--text-base, #000000);
    display: flex;
    border-radius: 0px;
    font-size: inherit;
    min-block-size: 48px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
}

.TywOcKZEqNynWecCiATc {
    --bg-color: hsl(0deg 0% 43% / 28%);
    --fg-color: #adadad;
    --is-active-fg-color: #ffffff;
    --progress-bar-transform: 0%;
    --progress-bar-height: 9px;
    --progress-bar-radius: 0px;
    height: 100%;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    width: 100%;
}

.vnCew8qzJq3cVGlYFXRI {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: #fff;
    border: 0px;
    border-radius: 3px;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--button-size);
    justify-content: center;
    min-width: var(--button-size);
    position: relative;
    -webkit-transition: none 33ms cubic-bezier(.3, 0, .7, 1);
    transition: none 33ms cubic-bezier(.3, 0, .7, 1);
    -webkit-transition-property: all;
    transition-property: all;
    width: var(--button-size);
}

.utSR0FVkHnII_aL8TOcu:link,
.utSR0FVkHnII_aL8TOcu:visited {
    color: #ffffff;
    cursor: default;
    text-decoration: none;
}

.h4HgbO_Uu1JYg5UGANeQ.iSbqnFdjb1SuyJ3uWydl .VpYFchIiPg3tPhBGyynT,
.h4HgbO_Uu1JYg5UGANeQ.iSbqnFdjb1SuyJ3uWydl .t_yrXoUO3qGsJS4Y6iXX {
    color: #ffffff;
    font-size: x-large;
    font-family: system-ui;
}

.control-button-heart[ar...

Reviews

No reviews yet.