Sui
Black spotify by him
Details
Authorhim
LicenseNo License
Categoryopen.spotify.com
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Max spotify
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://open.spotify.com/") {
/* Insert code here... */
.ojrThQm1wxR2gZ6GntJB {
-webkit-margin-start: calc(min(var(--ylx-folder-depth, 0),5)*16px);
grid-template-rows: 48px!important;
margin-inline-start: calc(min(var(--ylx-folder-depth, 0),5)*16px);
height: 1px;
}
.ljvfQS {
grid-column: 1;
gap: 16px;
display: none
}
.LSrBzBljgLeDhcm3Soye {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
min-width: 0;
display: none
}
.qEiVyQ28VnOKb0LeijqL {
contain: content;
gap: unset;
column-gap: unset;
height: 41.5px;
}
.fkzPZy {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
font-size: 19px;
font-family:
}
.jgTSDy {
font-size: 0.875rem;
display: none;
}
.kzxKsG {
font-size: 0.875rem;
display: none;
}
.main-view-container__mh-footer-container {
background-color: var(--background-base);
padding-top: 40px;
display: none;
}
.T1xI1RTSFU7Wu94UuvE6 {
background-color: #0202023d;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
bottom: 0;
left: 0;
opacity: var(--top-bar-opacity,1);
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .25s,ease-out;
transition: background-color .25s,ease-out;
z-index: -1;
backdrop-filter: blur(10px);
}
.facDIsOQo9q7kiWc4jSg.coBkWVskipFo8KxLKief:before {
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
bottom: 0;
content: "";
left: 8px;
position: absolute;
right: 8px;
top: 0;
background-color: #1010103b;
}
}
@-moz-document domain("open.spotify.com") {
/* ==UserStyle==
@name Him'spotify
@namespace userstyles.world/user/him
@version 1.0.0
@description A new userstyle
@author Him
@var color accentColor "Accent" rgb(153, 0, 255)
==/UserStyle== */
@-moz-document url-prefix("https://open.spotify.com") {
/* Insert code here... */
}
.ZcNcu7WZgOAz_Mkcoff3{
offset: 20px
}
.Root__nav-bar {
background-color: rgba(0,0,0,0.4);
width: 70px;
transition: width ease-in 2s;
}
.TQQSam9tGsRXGj4aGFSc {
display: none;
}
.Root__nav-bar:hover {
width: initial;
}
.Root__nav-bar:hover .TQQSam9tGsRXGj4aGFSc{
display: block;
}
.veu1BUqeOKBg94mEMhsQ, .Foyk_HJx16yh22JYmQ56, {
display: none;
}
.rVxzkDirgkuRPv5V1HYF, .Foyk_HJx16yh22JYmQ56{
opacity: 0
}
{
background: linear-gradient(to top, var(--accent) 30%, #000 70%);
}
.Root__nav-bar:hover .veu1BUqeOKBg94mEMhsQ {
display: block;
}
.GD2gbRtcs5dOjMGAM_Y4{
border-radius: 10px
}
.xdh_vm__glIIwrj_yEO7, .icon {
display: none;
}
.Root__nav-bar:hover .xdh_vm__glIIwrj_yEO7 {
display: block;
}
.Root__main-view{
background-image: url(https://cdn.wallpapersafari.com/96/87/akiW8x.jpg);
color: #505050;
background-attachment: fixed;
background-size: cover;
background-blend-mode: color;
background-color: rgba(0,0,0,0.6)
}
.Root__nav-bar{
background-image: url(https://starwarsblog.starwars.com/wp-content/uploads/2020/04/star-wars-backgrounds-38.jpg)
}
.HsbczDqu9qjcYr7EIdHR{
display: none
}
.CoLO4pdSl8LGWyVZA00t{
display: none
}
.BL__GuO2JsHMR6RgNfwY{
background-color: #0000
}
.rVxzkDirgkuRPv5V1HYF{
display: none
}
.QyANtc_r7ff_tqrf5Bvc{
color: #000000bd
}
.rezqw3Q4OEPB1m4rmwfw{
background-color: #0000
}
.gHImFiUWOg93pvTefeAD{
display: none
}
.Z35BWOA10YGn5uc9YgAp{
color: #0000
}
.CmkY1Ag0tJDfnFXbGgju, .xBV4XgMq0gC5lQICFWY_, .g4PZpjkqEh5g7xDpCr2K, .xBV4XgMq0gC5lQICFWY_{
border-radius: 10px;
background-color: #0000
}
.LunqxlFIupJw_Dkx6mNx{
background-color: #36363678
}
:root {
--accent: rgb(153, 0, 255);
}
:root {
--accent: var(--accentColor);
/* custom border radius vars */
--borderrad1: var(--borderrad1custom);
--borderrad2: var(--borderrad2custom);
}
body, html, button, input, ::placeholder, span, h1, h2, h3, h4, h5 {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
/* left side */
.e5fbdde4ec1ae3b90af47e3c87b98bb7-scss,
._56457be97556c9daa63940d2affe755c-scss{
border-radius: var(--borderrad1);
background: none;
background-color: var(--accent);
color: var(--text);
}
._752cd60a82eaf0dd41c84e90b6479cbb-scss {
background-color: var(--text-dark);
height: 4px;
border-radius: var(--borderrad1);
}
._7b6273541d969069bb18c4fcae4120e7-scss {
background: none;
}
._9a78420cc4a863b2f413ce55e759a321-scss:link, ._9a78420cc4a863b2f413ce55e759a321-scss:visited {
color: var(--text-dark);
}
.bd0f04911fe4adb022e666269a90a739-scss {
font-weight: 500;
transition: .1s;
}
._5c12c73a4f38b98340ea33803209fdc8-scss {
background-color: var(--accent);
}
[dir=ltr] ._5c12c73a4f38b98340ea33803209fdc8-scss a {
color: var(--text);
margin-left: 18px;
transition: color .12s;
}
[dir=ltr] ._5c12c73a4f38b98340ea33803209fdc8-scss a:hover {
color: #000;
}
#main > div > div.Root__top-container > nav > div.e628850198dd4b611f8d7ebc057a4734-scss > div:nth-child(4) > div > a > span {
font-weight: 700;
}
#main > div > div.Root__top-container > nav > div.e628850198dd4b611f8d7ebc057a4734-scss > div:nth-child(4) > div > a {
background: none;
}
#main > div > div.Root__top-container > nav > div.e628850198dd4b611f8d7ebc057a4734-scss > div:nth-child(4) > div > a > span {
font-weight: 800;
}
/* left side end */
/* bottom */
.cover-art .cover-art-image {
border-radius: var(--borderrad2)
}
.cover-art {
background-color: transparent;
}
#main > div > div.Root__top-container > nav > div.e628850198dd4b611f8d7ebc057a4734-scss > div:nth-child(4) > div._4fac214bccd807d7c6fed21d4e0ea6de-scss > div > a > div > div > img {
border-radius: 0px;
}
#main > div > div.Root__top-container > div > footer > div.a2d114f8465b4517d0dcdf068d15e9cd-scss > div.b51affc9f26a5c8f65a387abdd375bef-scss > div > div._5c9e3ef76ffc5bc2927fdf51d789e2e6-scss.ellipsis-one-line > div._3773b711ac57b50550c9f80366888eab-scss.ellipsis-one-line.f3fc214b257ae2f1d43d4c594a94497f-scss > span > a {
font-weight: 700;
}
#main > div > div.Root__top-container > div > footer > div.a2d114f8465b4517d0dcdf068d15e9cd-scss > div.b51affc9f26a5c8f65a387abdd375bef-scss > div > div._5c9e3ef76ffc5bc2927fdf51d789e2e6-scss.ellipsis-one-line > div.b6d18e875efadd20e8d037931d535319-scss.ellipsis-one-line._5f899d811cf206c5925f6450626fb0aa-scss > span > span > a {
font-weight: 500;
color: var(--text-dark);
}
._07bed3a434fa59aa1852a431bf2e19cb-scss,
.bc13c597ccee51a09ec60253c3c51c75-scss,
.bf01b0d913b6bfffea0d4ffd7393c4af-scss,
.ebfd411a126f1e7bea6133f21b4ef88e-scss,
#main > div > div.Root__top-container > div > footer > div.a2d114f8465b4517d0dcdf068d15e9cd-scss > div.e50fd4214085264775224bdf740f9c28-scss > div > div.GlueDropTarget.GlueDropTarget--tracks.GlueDropTarget--episodes > div > button,
#main > div > div.Root__top-container > div > footer > div.a2d114f8465b4517d0dcdf068d15e9cd-scss > div.e50fd4214085264775224bdf740f9c28-scss > div > div.volume-bar > button,
#main > div > div.Root__top-container > div > footer > div.a2d114f8465b4517d0dcdf068d15e9cd-scss > div.e50fd4214085264775224bdf740f9c28-scss > div > button{
color: var(--text-dark);
}
._82ba3fb528bb730b297a91f46acd37a3-scss {
background-color: var(--accent);
color: var(--text);
}
._39234eb5c173f8b6de80ed73820b1be8-scss._2b9d3fe8c4a53ea94eb650fbbb9b0124-scss,
.ebfd411a126f1e7bea6133f21b4ef88e-scss._46e671f2323a45b17a6f4a3d15c2961f-scss,
.control-button--active,
.a65d8d62fe56eed3e660b937a9be8a93-scss, .a65d8d62fe56eed3e660b937a9be8a93-scss:focus, .a65d8d62fe56eed3e660b937a9be8a93-scss:hover{
color: var(--accnt)!important;
}
.playback-bar__progress-time,
._3a5249d5858e3e9a297d855ad04d4be6-scss{
font-weight: 700;
color: var(--text-dark)!important;
}
:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg ,
.progress-bar--is-active .progress-bar__fg{
background-color: var(--accent);
}
._3a923fa2dfd1f66547507cb7a617062d-scss {
background-color: var(--accent);
color: var(--text);
}
._3a923fa2dfd1f66547507cb7a617062d-scss:after {
border-bottom-color: var(--accent);
}
._9329f4018e3f8175af6dd8af74580f3b-scss,
._9329f4018e3f8175af6dd8af74580f3b-scss:hover,
._9095528d2dbe05a133448a31c0484f54-scss,
._9095528d2dbe05a133448a31c0484f54-scss:hover{
background-color: var(--borderc);
transition: .1s;
}
.connect-device-list-container {
border-radius: var(--borderrad2);
box-shadow: none;
}
.connect-device-list-content {
border-radius: var(--borderrad2);
box-shadow: var(--shadow-4);
}
.connect-device-list-container:before {
border-top-color: var(--bg3);
}
.connect-device-list-item--active .connect-device-list-item__icon,
.connect-device-list-item--active .connect-device-list-item__device-subtitle,
.connect-device-list-item--active{
color: var(--accent);
}
.control-button--active-dot:after {
background-color: var(--accent);
}
#onetrust-consent-sdk #onetrust-policy-title, #onetrust-consent-sdk #onetrust-policy-text, #onetrust-consent-sdk .ot-b-addl-desc, #onetrust-consent-sdk .ot-dpd-desc, #onetrust-consent-sdk .ot-dpd-title, #onetrust-consent-sdk ...