Theme/deluxify/user.css

:root {
	--modspotify_main_bg: #181818 !important;
    --modspotify_rgb_cover_overlay_and_shadow: 24, 24, 24;
    --modspotify_rgb_sidebar_and_player_bg: 24, 24, 24;
    --modspotify_sidebar_and_player_bg: #181818;
}

body {
	/* background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url('https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; */
	background: linear-gradient(180deg, #181818 16%, transparent 330%) fixed no-repeat;
	background-color: var(--dynamic_color);
	transition-property: background-color, color, background;
	transition-duration: 3s;
}

.sticky-clone.sticky-top {
	right: 0px !important;
	left: 0px !important;
	background: #181818;
}

.sticky-clone.sticky-top table {
	padding-left: 32px;
	padding-right: 32px;
}

.sticky-clone.sticky-top table thead, .glue-page-header__sticky.sticky-top, .Header--with-active-sticky-header .Header__sticky {
	background: #181818;
}

.glue-page-header__sticky.sticky-top {
	padding-top: 42px !important;
}

.current.playing.tracklist-playlist tr[data-playback-active="true"] {
	background: #0000002b !important;
}

.main-navBar-navBar {
    width: 100%;
}

.main-trackList-trackListRow.main-trackList-trackListRowGrid .main-trackList-rowTitle,
.main-trackList-trackListRow.main-trackList-trackListRowGrid .main-trackList-rowSectionVariable a,
.main-trackList-trackListRow.main-trackList-trackListRowGrid .main-trackList-rowSubTitle,
.main-trackList-trackListRow.main-trackList-trackListRowGrid .main-trackList-rowSubTitle a {
    transition: color 100ms !important;
}

/* dynamic colors */

.h-title a {
	color: white !important;
}

.tl-row.current .tl-cell:not(.tl-number), .tl-row.current .tl-cell a:link, .tl-row.current .tl-highlight {
	color: var(--dynamic_color-light) !important;
	transition-property: color !important;
	transition-duration: 3s;
}

.current.playing.tracklist-playlist tr[data-playback-active="true"] td div span, .current.playing.tracklist-playlist tr[data-playback-active="true"] td, .current.playing.tracklist-playlist tr[data-playback-active="true"] td a {
	color: var(--dynamic_color-light) !important;
	transition-property: color;
	transition-duration: 3s;
}

.section-divider>* {
	color: var(--dynamic_color-light) !important;
	transition-property: color;
	transition-duration: 3s;
}

button {
	transition-property: color, background, background-color !important;
	transition-duration: 1s !important;
}

button:hover {
	transition-property: color, background, background-color !important;
	transition-duration: 250ms !important;
}

.SidebarListItemLink--is-highlighted, .SidebarListItemLink--is-highlighted:link, .RootlistItem--is-active:before, a {
	transition-property: color, background, background-color !important;
	transition-duration: 1s !important;
}

.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
    background-color: rgba(var(--dynamic_color-dark_RGB), .3) !important;
}

.main-trackList-trackListRow:hover {
    background-color: rgba(var(--dynamic_color-dark_RGB), .1) !important;
}

.main-topBar-background {
    background: var(--dynamic_color) !important;
    transition: background 1000ms;
}

.main-playButton-PlayButton.main-playButton-primary {
    color: white;
}

/* style SPOTIFY PREMIUM text */

#spotifyText {
	z-index: 99999999999;
	position: fixed;
	top: 5px;
	left: calc(var(--nav-bar-width)*0.154);
	/* transform: translate(-50%, 0); */
	height: 21px;
    font-size: calc(var(--nav-bar-width)*0.086);
	/* font-size: 2em; */
	font-family: 'SlasherX';
	color: var(--dynamic_color);
	transition: all 3s;
}

#spotifyText.non-premium {
    transform: translate(50%, 0);
}

/*
Move progress bar
*/

.playback-bar {
	position: absolute !important;
	width: 100% !important;
	height: 10px !important;
	bottom: 85px !important;
	left: 0px !important;
	border-radius: 0px !important;
	margin: 0 0 0 0 !important;
	z-index: 9999 !important;
}

.playback-bar .progress-bar {
	margin-top: -6px !important;
	top: 100% !important;
	border-radius: 0px !important;
	transition-duration: 1000ms !important;
}

.playback-bar .progress-bar .progress-bar__fg {
	/* top: 100% !important;
	margin-top: -4px !important; */
	border-radius: 0px !important;
	background-color: var(--dynamic_color-light);
	transition: background 1000ms, transform 1000ms !important;
	/* mix-blend-mode: color-burn; */
}

.playback-bar .progress-bar .progress-bar__slider {
	background-color: var(--dynamic_color-light);
	border-color: var(--dynamic_color);
	/* transition-duration: 1000ms !important;
	transition-property: background !important; */
    transition: background 1000ms, left 1000ms linear !important;
}

.playback-bar .progress-bar--is-active .progress-bar__slider,
.playback-bar .progress-bar--is-active .progress-bar__fg {
    transition: background 1000ms !important;
}

.playback-bar .player-controls-container .progress-container.progress-bar-enabled.dragging-progress-bar .progress-bar .inner, .view-player .player-controls-container .progress-container.progress-bar-enabled:hover .progress-bar .inner {
	background-color: var(--dynamic_color) !important;
	transition-duration: 0ms !important;
}

/*
re position elapsed and remaining time
*/

.playback-bar .playback-bar__progress-time {
	position: fixed;
	right: 315px;
	bottom: 38px;
	font-size: 1.1em;
	opacity: 0.8;
}

.playback-bar .playback-bar__progress-time::after {
	position: fixed;
	right: 305px;
	bottom: 38px;
	font-size: 1.2em;
	content: "/";
}

.playback-bar .main-playbackBarRemainingTime-container {
	/* display: none !important; */
	position: fixed;
	right: 265px;
	bottom: 38px;
	font-size: 1.1em;
	opacity: 0.9;
}

/*
fix backgrounds
*/

.playlist-playlist-playlistContent,
.main-entityHeader-backgroundColor,
/* .main-entityHeader-background, */
.main-entityHeader-background.main-entityHeader-overlay::after,
.main-actionBarBackground-background {
    background: transparent !important;
}

/*
style playlists that have a background
*/
.under-main-view div {
    position: fixed;
    left: calc(var(--nav-bar-width) + 9px);
    top: 0px;
    height: 100vh;
    width: calc(100vw - (var(--nav-bar-width) + 9px));
}
.playlist-playlist-playlistContent {
    backdrop-filter: blur(30px);
}
.main-entityHeader-withBackgroundImage + .playlist-playlist-playlistContent {
    /* background: rgba(0,0,0,0.5) !important; */
    /* background: linear-gradient(180deg, rgba(0,0,0,0.5) 43%, rgba(0,0,0,0.6) 55%, var(--dynamic_color) 147%) fixed no-repeat !important; */
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 73%, var(--dynamic_color) 160%) fixed no-repeat !important;
	/* background-color: var(--dynamic_color)55 !important; */
	transition-property: background-color, color, background;
	transition-duration: 3s;
    /* background:red !important; */
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
    background: linear-gradient(360deg, rgba(0,0,0,0.5), transparent);
    height: 65vh;
}

/* fix playlist bottom padding */
.main-view-container__scroll-node-child {
    padding-bottom: 0px !important;
}
.main-trackList-trackList {
    padding-bottom: 21px;
}

/*
remove playlist header image shadow
*/

.playlist-playlist-playlistImageContainer img {
    box-shadow: none !important;
}

/*
artist page
*/
.artist-artistOverview-artistOverviewContent {
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(26px);
}

/*
main cards
*/
.main-card-card {
    background: rgb(30 30 30 / 47%) !important;
    border-radius: 12px !important;
}
.main-card-card:hover {
    background: rgb(30 30 30) !important;
}
.main-cardImage-circular,
.main-cardImage-image,
.main-cardImage-imageWrapper {
    border-radius: 12px !important;
}


/*
set text color white
*/
h1, h2, h3, h4, h5, h6, p, .main-trackList-rowTitle,
.main-entityHeader-metaData span, .main-entityHeader-metaData div {
    color: rgb(238, 238, 238);
}

.main-trackList-rowTitle {
    transition: color 1000ms;
}

.main-trackList-trackListRow:hover .main-trackList-rowTitle,
.main-trackList-trackListRow:focus-within .main-trackList-rowTitle {
    color: var(--modspotify_main_fg);
}

/*
set active song in list to song colors
*/

.main-trackList-trackListRow.main-trackList-trackListRowGrid.main-trackList-active .main-trackList-rowTitle,
.main-trackList-trackListRow.main-trackList-trackListRowGrid.main-trackList-active .main-trackList-rowSectionVariable a,
.main-trackList-trackListRow.main-trackList-trackListRowGrid.main-trackList-active .main-trackList-rowSubTitle,
.main-trackList-trackListRow.main-trackList-trackListRowGrid.main-trackList-active .main-trackList-rowSubTitle a  {
    color: var(--modspotify_main_fg) !important;
}

/*
dynamic playing waveform color
*/
.main-trackList-playingIcon {
    filter: hue-rotate(var(--waveform-hue-rotation)) brightness(var(--waveform-brightness)) saturate(var(--waveform-saturation));
}

/*
fix not unhiding top bar
*/

.main-topBar-topbarContent.main-entityHeader-topbarContent.main-entityHeader-topbarContentFadeIn>*,
.main-topBar-topbarContentWrapper [class*="searchInput-searchInput"] {
    opacity: 1 !important;
}

/*
Set spotify connect picker to top
*/

.connect-device-list-container--is-visible {
	z-index: 99999999;
}