test
test by ang3lbunny
Details
Authorang3lbunny
LicenseNo License
Categoryopen.spotify.com
Created
Updated
Size7.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==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 20220924.1.42
@license NO-REDISTRIBUTION
@preprocessor uso
@advanced dropdown ooh--pretty- "Pick You Background" {
ooh--pretty- "Joker*" <<<EOT https://images.hdqwalls.com/download/2020-joker-always-smile-4k-vr-3840x2160.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: #00000000 !important;
margin: 10px;
border-radius: 0px !important;
}
.Root__now-playing-bar {
background-color: #00000000;
}
.U05tnfKJjzV3lfrwRbLN {
background-color: #fff;
border-radius: 0px;
}
footer[data-testid*="now-playing-bar"] {
border: none;
margin: 10px;
border-radius: 0px;
}
.Root__main-view {
background-color: #0000 !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: #0000 !important;
}
div[style] {
background: #0000 !important;
}
.rezqw3Q4OEPB1m4rmwfw {
background: #FBE6EF;
isolation: isolate;
}
._EShSNaBK1wUIaZQFJJQ {
-webkit-box-shadow: 0 4px 60px rgb(0 0 0 / 0%);
box-shadow: 0 4px 60px rgb(255 255 255 / 0%);
}
.wyYXgOW8iKGxW2RUhgmV {
position: initial;
}
.encore-dark-theme .encore-bright-accent-set {
--background-base: #FBE6EF;
--background-highlight: #F9DDEA;
--background-press: #F9DDEA;
--background-elevated-base: #FBE6EF;
--background-elevated-highlight: #F9DDEA;
--background-elevated-press: #F9DDEA;
--background-tinted-base: #FBE6EF;
--background-tinted-highlight: #F9DDEA;
--background-tinted-press: #F9DDEA;
--background-unsafe-for-small-text-base: #fff;
--background-unsafe-for-small-text-highlight: #ffffff;
--background-unsafe-for-small-text-press: #ffffff;
--text-base: #fff;
--text-subdued: #F9DDEA;
--text-bright-accent: #FBE6EF;
--text-negative: #F9DDEA;
--text-warning: #F9DDEA;
--text-positive: #F9DDEA;
--text-announcement: #F9DDEA;
--essential-base: #F9DDEA;
--essential-subdued: #F9DDEA;
--essential-bright-accent: #F9DDEA;
--essential-negative: #F9DDEA;
--essential-warning: #F9DDEA;
--essential-positive: #F9DDEA;
--essential-announcement: #F9DDEA;
--decorative-base: #F9DDEA;
--decorative-subdued: #F9DDEA;
}
.rRF_r7EyCHjZv058JACi,
.rRF_r7EyCHjZv058JACi:focus,
.rRF_r7EyCHjZv058JACi:hover {
color: #F9DDEA;
}
.L6M8zGIwEK7CaBCiZ_3A {
background-color: #F9DDEA;
border: none;
color: #F9DDEA;
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: #F9DDEA;
--is-active-fg-color: #F9DDEA;
--progress-bar-transform: 0%;
--progress-bar-height: 4px;
--progress-bar-radius: calc(var(--progress-bar-height)/2);
height: 60%;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
width: 60%;
}
.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: #0000;
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: #fff;
}
nav-alt .Y8edH1Yjo4xrW_58czQj {
background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, .0)), to(hsla(0, 0%, 0%, 0)));
background: linear-gradient(180deg, hsl(0deg 0% 0% / 0%), hsla(0, 0%, 0%, 0));
}
.Root__fixed-top-bar {
-webkit-padding-start: 8px;
background-color: #fff;
border-radius: 0px;
grid-area: top-bar;
padding-inline-start: 8px;
}
.nav-alt .QO9loc33XC50mMRUCIvf {
background-color: #fff;
color: #fff !important;
height: 48px;
width: 440px;
}
.QO9loc33XC50mMRUCIvf {
border: 0;
border-radius: 0px;
color: #fff;
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: #FBE6EF;
}
.BL__GuO2JsHMR6RgNfwY {
background-color: #FBE6EF;
isolation: isolate;
}
.dZPmmYYhskhqHJCAruvI {
border-bottom: 1px;
color: #FBE6EF;
height: 36px;
}
.bfQ2S9bMXr_kJjqEfcwA a, .rq2VQ5mb9SDAFWbBIUIn a {
color: #FBE6EF;
}
.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: #fff;
}
}