[Text] cover images

[Evergreenpro]

i want to add the cover images of the playlists instead of the text and the list of songs too should show the cover ive tried changing the user.css but i couldnt figure out how to do that

user.css

[sanoojes]

Change --display-tracklist-image to block

Updated user.css

/*  ================================
    ROOT
    ================================ */

/* import */
/* find more in https://fonts.google.com/?category=Monospace&sort=popularity */
@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Cutive+Mono&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=M+PLUS+1+Code:wght@100..700&family=Nova+Mono&family=Overpass+Mono:wght@300..700&family=Oxygen+Mono&family=PT+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Share+Tech+Mono&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Sono:wght@200..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne+Mono&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=VT323&family=Xanh+Mono:ital@0;1&display=swap");
@import url("https://fonts.cdnfonts.com/css/asciid");

/* user settings */
:root {
    --font-family: "JetBrains Mono", monospace;
    /*
    --font-family: 'Anonymous Pro', monospace;
    --font-family: 'Azeret Mono', monospace;
    --font-family: 'B612 Mono', monospace;
    --font-family: 'Courier Prime', monospace;
    --font-family: 'Cousine', monospace;
    --font-family: 'Cutive Mono', monospace;
    --font-family: 'DM Mono', monospace;
    --font-family: 'Fira Code', monospace;
    --font-family: 'Fira Mono', monospace;
    --font-family: 'IBM Plex Mono', monospace;
    --font-family: 'JetBrains Mono', monospace;
    --font-family: 'M PLUS 1 Code', monospace;
    --font-family: 'Major Mono Display', monospace;
    --font-family: 'Monofett', monospace;
    --font-family: 'Nova Mono', monospace;
    --font-family: 'Overpass Mono', monospace;
    --font-family: 'Oxygen Mono', monospace;
    --font-family: 'PT Mono', monospace;
    --font-family: 'Roboto Mono', monospace;
    --font-family: 'Share Tech Mono', monospace;
    --font-family: 'Sometype Mono', monospace;
    --font-family: 'Sono', monospace;
    --font-family: 'Source Code Pro', monospace;
    --font-family: 'Space Mono', monospace;
    --font-family: 'Syne Mono', monospace;
    --font-family: 'Ubuntu Mono', monospace;
    --font-family: 'VT323', monospace;
    --font-family: 'Xanh Mono', monospace;
    */
    --font-size: 14px;
    --font-weight: 400; /* 200 : 900 */
    --line-height: 1.2;

    --font-size-lyrics: 14px; /* 1.5em (default) */

    --font-family-header: "asciid";
    --font-size-multiplier-header: 4;

    --display-card-image: block; /* none | block */
    --display-coverart-image: none; /* none | block */
    --display-header-image: none; /* none | block */
    --display-sidebar-image: block; /* none | block */
    --display-tracklist-image: block; /* none | block */
    --display-spicetify-banner-ascii: block; /* none | block */
    --display-music-banner-ascii: none; /* none | block */

    --border-radius: 0px;
    --border-width: 1px;
    --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
    --border-transition: 0.2s ease; /* 'none' to disable  */

    --global-nav-margin-top: 40px; /* set to '0px' if you disabled window controls */
}

/* font */
*:not([style*="lyric" i] *, [class*="lyric" i], .main-entityHeader-title) {
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    font-weight: var(--font-weight) !important;
    line-height: var(--line-height) !important;
}
.lyrics-lyrics-container *,
.main-nowPlayingView-lyricsContent * {
    font-family: var(--font-family);
    font-size: var(--font-size-lyrics);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
}
.main-entityHeader-title h1,
.main-entityHeader-title span {
    font-family: var(--font-family-header) !important;
    font-size: calc(
        var(--font-size) * var(--font-size-multiplier-header)
    ) !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* images */
.main-card-imageContainer img,
.view-homeShortcutsGrid-imageContainer img {
    display: var(--display-card-image) !important;
}
.main-coverSlotCollapsed-container {
    display: var(--display-coverart-image);
}
.main-entityHeader-imageContainer,
.under-main-view,
.main-entityHeader-creatorWrapper .main-avatar-avatar,
.main-entityHeader-imageContainer,
.playlist-playlist-playlistImageContainer,
.profile-userOverview-imageContainer {
    display: var(--display-header-image);
}
.x-entityImage-imageContainer img,
.main-avatar-image {
    display: var(--display-sidebar-image);
}
.main-trackList-rowImage {
    display: var(--display-tracklist-image);
}

/* fix */
.Root__globalNav {
    padding: 8px 16px !important;
    height: unset;
}
.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav,
.spotify__container--is-desktop.spotify__os--is-macos .Root__globalNav {
    margin: 0;
    margin-top: var(--global-nav-margin-top);
}
.spotify__container--is-desktop.spotify__os--is-linux .Root__globalNav {
    margin: 8px 0 0;
}
.Root__top-container {
    --panel-gap: 16px !important;
}
.Root__top-bar {
    border: var(--border-width) solid transparent;
}
.Root__nav-bar,
.main-nowPlayingBar-container {
    overflow: visible;
}
.main-view-container {
    overflow: hidden;
}
section:has(> .main-entityHeader-container),
div:has(> .main-entityHeader-container) {
    margin-top: 0;
}
.main-entityHeader-container {
    height: unset !important;
    min-height: unset !important;
}
.main-entityHeader-imageContainerNew {
    height: 128px;
    width: 128px;
}
.main-topBar-overlay,
.main-entityHeader-container > div,
.main-entityHeader-container + div[style*="background-color"],
.main-entityHeader-container + div > div[style*="background-color"],
.main-home-homeHeader,
.main-nowPlayingView-contextItemInfo::before {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    transition: unset !important;
}
.main-topBar-background,
.main-home-filterChipsSection,
.main-home-filterChipsSection::after,
.main-trackList-trackListHeader,
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
.main-entityHeader-container + div,
.main-entityHeader-container + div > div {
    background-color: var(--spice-main) !important;
    background: var(--spice-main);
    transition: unset !important;
}
.LayoutResizer__resize-bar {
    cursor: w-resize;
}
.LayoutResizer__inline-end:after,
.LayoutResizer__inline-start:after {
    background-color: var(--spice-border-inactive);
}
.LayoutResizer__resize-bar--resizing.LayoutResizer__inline-start:after,
.LayoutResizer__resize-bar--resizing.LayoutResizer__inline-end:after {
    background-color: var(--spice-border-active);
}
div[class*="minBlockSize_56px-padding_8px"] {
    padding: 4px !important;
}
.main-trackList-number {
    top: 0;
}

/* fullscreen */
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art,
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
    bottom: 18em;
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art {
    -webkit-transform: scale(0.34375);
    transform: scale(0.34375);
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
    -webkit-transform: none;
    transform: none;
}
.npv-main-container .playback-bar {
    position: unset;
    width: auto;
}
.npv-nowPlayingBar-controls {
    height: auto;
}

/* recolor */
:root {
    --spice-main-elevated: var(--spice-main);
    --spice-highlight-elevated: var(--spice-main);
    --spice-sidebar: var(--spice-main);
    --spice-player: var(--spice-main);
    --spice-card: var(--spice-main);
    --spice-shadow: var(--spice-main);
    --spice-selected-row: var(--spice-subtext);
    --spice-button: var(--spice-accent);
    --spice-button-active: var(--spice-accent-active);
    --spice-button-disabled: var(--spice-accent-inactive);
    --spice-tab-active: var(--spice-main);
    --spice-rgb-main-elevated: var(--spice-rgb-main);
    --spice-rgb-highlight-elevated: var(--spice-rgb-main);
    --spice-rgb-sidebar: var(--spice-rgb-main);
    --spice-rgb-player: var(--spice-rgb-main);
    --spice-rgb-card: var(--spice-rgb-main);
    --spice-rgb-shadow: var(--spice-rgb-main);
    --spice-rgb-selected-row: var(--spice-rgb-subtext);
    --spice-rgb-button: var(--spice-rgb-accent);
    --spice-rgb-button-active: var(--spice-rgb-accent-active);
    --spice-rgb-button-disabled: var(--spice-rgb-accent-inactive);
    --spice-rgb-tab-active: var(--spice-rgb-main);
}
.encore-dark-theme,
.encore-dark-theme .encore-base-set {
    --background-press: var(--spice-highlight);
    --background-elevated-press: var(--spice-main-elevated);
    --essential-subdued: var(--spice-border-inactive);
    --decorative-subdued: var(--spice-accent-inactive);
}
.encore-dark-theme .encore-bright-accent-set {
    --background-highlight: var(--spice-button-active) !important;
    --background-elevated-base: var(--spice-button-active) !important;
    --background-elevated-highlight: var(--spice-button-active) !important;
    --background-press: var(--spice-button-active) !important;
    --background-elevated-press: var(--spice-button-active) !important;
}
.Root__top-container,
.Root__nav-bar {
    background-color: var(--spice-main);
}
.main-playPauseButton-button {
    background-color: transparent;
    color: var(--spice-subtext);
}
.main-playPauseButton-button:focus,
.main-playPauseButton-button:hover {
    transform: none;
    color: var(--spice-text);
}
.view-homeShortcutsGrid-equaliser,
.main-devicePicker-nowPlayingActiveIcon,
.main-trackList-playingIcon {
    filter: grayscale(1) opacity(0.2)
        drop-shadow(0 0 0 var(--spice-button-active))
        drop-shadow(0 0 0 var(--spice-button-active))
        drop-shadow(0 0 0 var(--spice-button-active));
}
::placeholder {
    color: var(--spice-subtext);
}
.main-entityHeader-background,
.main-entityHeader-backgroundColor,
.main-entityHeader-overlay,
.main-actionBarBackground-background,
.main-buddyFeed-container,
.main-nowPlayingView-content.main-nowPlayingView-gradient {
    background-color: transparent !important;
    background-image: none;
}
.progress-bar {
    --fg-color: var(--spice-button-active);
    --bg-color: var(--spice-button-disabled);
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
    mix-blend-mode: difference;
    color: var(--spice-button-active);
}
.main-trackList-placeholder {
    background-color: var(--background-base);
    background-blend-mode: color-dodge;
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover,
.main-contextMenu-menuItemButton:hover,
.main-contextMenu-menuItemButton:not([aria-checked="true"]):focus,
.main-card-card:hover,
.main-card-card[data-context-menu-open="true"],
[class*="listRow-isInteractive"]:hover,
[class*="listRow-isInteractive"]:hover::after {
    background-color: rgba(var(--spice-rgb-highlight), 0.5) !important;
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
    background-color: var(--spice-highlight) !important;
}
.x-entityImage-imageContainer,
.main-card-imageContainer > div:first-child {
    background-color: var(--card-color, var(--spice-border-inactive));
}
.main-avatar-avatar {
    background-color: var(--spice-border-inactive) !important;
}
.main-entityHeader-title h1,
.main-entityHeader-title span {
    color: var(--spice-banner);
}
div[style*="--text-subdued: rgba(255, 255, 255, 0.7);"] {
    --text-subdued: var(--spice-subtext) !important;
}
.search-searchCategory-contentArea {
    --carousel-start-chevron-gradient: var(--spice-main);
    --carousel-end-chevron-gradient: var(--spice-main);
}

/* pane borders */
.Root__globalNav,
.main-yourLibraryX-entryPoints,
.Root__main-view,
.main-nowPlayingBar-container,
.Root__right-sidebar:has(aside:not(:empty)) {
    border: var(--border-width) var(--border-style);
    border-color: var(--spice-border-inactive);
    border-radius: var(--border-radius);
    background-color: var(--spice-main);
    transition: border-color var(--border-transition);
}
.Root__globalNav:hover,
.main-yourLibraryX-entryPoints:hover,
.Root__main-view:hover,
.main-nowPlayingBar-container:hover,
.Root__right-sidebar:has(aside:not(:empty)):hover {
    border: var(--border-width) var(--border-style);
    border-color: var(--spice-border-active);
}

/* pane headers */
.Root__nav-bar .main-yourLibraryX-entryPoints {
    overflow-x: visible !important;
}
.Root__globalNav::before,
.main-globalNav-searchContainer
    form
    div:has(> .main-topBar-searchBar:focus)::before,
.Root__nav-bar
    .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-navItems)::before,
.Root__nav-bar
    .main-yourLibraryX-entryPoints:has(
        .main-yourLibraryX-libraryContainer
    )::before,
.Root__main-view::before,
.main-nowPlayingBar-container::before,
.Root__right-sidebar:has(aside:not(:empty))::before {
    color: var(--spice-header);
    position: absolute;
    margin: -10px 4px;
    background: var(--spice-main);
    padding: 0 3px;
    z-index: 3;
    transition: color var(--border-transition);
}
.Root__globalNav::before {
    content: "Nav";
    top: 0;
    left: 0;
}
.main-globalNav-searchContainer
    form
    div:has(> .main-topBar-searchBar:focus)::before {
    content: "Search";
    color: var(--spice-border-active) !important;
}
.Root__nav-bar
    .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-navItems)::before {
    content: "Pages";
}
.Root__nav-bar
    .main-yourLibraryX-entryPoints:has(
        .main-yourLibraryX-libraryContainer
    )::before {
    content: "Library";
}
.Root__main-view::before {
    content: "Main";
    position: fixed;
}
.main-nowPlayingBar-container::before {
    content: "Playing";
}
.Root__right-sidebar:has(aside:not(:empty))::before {
    content: "Sidebar";
}
.Root__globalNav:hover::before,
.Root__nav-bar .main-yourLibraryX-entryPoints:hover::before,
.Root__main-view:hover::before,
.main-nowPlayingBar-container:hover::before,
.Root__right-sidebar:has(aside:not(:empty)):hover::before {
    color: var(--spice-border-active);
}

/* scrollbars */
.os-scrollbar-handle {
    border-radius: var(--border-radius) !important;
    width: 2px !important;
    position: absolute;
    top: 0;
    right: 0;
}
.os-scrollbar-handle:hover {
    border-radius: var(--border-radius) !important;
    width: 6px !important;
}
.os-scrollbar-vertical {
    top: 5px !important;
    right: 5px !important;
}

/* context menus + tippy boxes */
.main-contextMenu-menu,
.tippy-box,
#context-menu > form,
#context-menu div > ul {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius) !important;
}

/* modals */
.GenericModal,
.GenericModal__overlay > div,
dialog {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius) !important;
    overflow: visible !important;
    box-shadow: 0 0 0 16px var(--spice-main);
}
.GenericModal::before,
.GenericModal__overlay > div::before,
dialog::before {
    content: "Modal";
    color: var(--spice-border-active);
    position: absolute;
    margin: -10px 4px;
    background: var(--spice-main);
    padding: 0 3px;
    z-index: 9;
}

/* inputs */
button,
.x-toggle-indicatorWrapper,
select {
    border-radius: var(--border-radius) !important;
}
button:hover {
    transform: unset !important;
}
select {
    color: var(--spice-text) !important;
    border: 1px solid var(--essential-subdued) !important;
}
select:hover,
select:focus {
    border: 1px solid var(--essential-base) !important;
}

/*  ================================
    GLOBAL NAV
    ================================ */

/* fix spacing */
.main-globalNav-historyButtonsContainer > div {
    gap: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
}
.main-globalNav-historyButtonsContainer
    > div:not([class*="custom"])
    > div:nth-child(1),
.Root__globalNav > div:nth-child(3) > div:nth-child(2),
.main-topBar-topbarContentRight + div {
    height: 0;
    width: 0;
}
.Root__globalNav > div:nth-child(3) {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
}
.main-globalNav-historyButtons {
    gap: 0 !important;
    padding-inline: 0 !important;
}
.main-globalNav-historyButtons > button {
    padding-inline: var(--encore-spacing-tighter, 12px);
}

/* icons */
.main-globalNav-historyButtonsContainer svg,
.main-globalNav-searchContainer svg {
    transform: scale(0.7);
}

/* search section */
.main-globalNav-searchSection,
.main-globalNav-searchContainer {
    align-items: center;
}
.main-globalNav-searchSection {
    position: unset;
    top: unset;
    left: unset;
}
.main-globalNav-searchContainer {
    max-width: unset;
    width: 100%;
}
.x-searchInput-searchInputInput,
.main-globalNav-searchContainer form .main-topBar-searchBar {
    border-radius: var(--border-radius);
    border: 1px solid;
    border-color: var(--spice-main);
}
.x-searchInput-searchInputInput:hover,
.x-searchInput-searchInputInput:focus,
.main-globalNav-searchContainer form:hover .main-topBar-searchBar {
    box-shadow: none;
    border: 1px solid;
    border-color: var(--spice-border-inactive);
}
.Root__globalNav:hover:has(.main-topBar-searchBar:focus) {
    border: var(--border-width) var(--border-style);
    border-color: var(--spice-border-inactive);
}
.Root__globalNav:hover:has(.main-topBar-searchBar:focus)::before {
    color: var(--spice-header);
}
.main-globalNav-searchContainer form .main-topBar-searchBar:focus {
    box-shadow: none;
    border: var(--border-width) var(--border-style);
    border-color: var(--spice-border-active);
    outline: 14px solid var(--spice-main);
}
.main-globalNav-searchContainer
    form
    :is(#recent-searches-dropdown, #search-dropdown)
    > div {
    border-radius: var(--border-radius);
    box-shadow: none;
    margin: 24.5px 0;
    border: var(--border-width) var(--border-style);
    border-color: var(--spice-border-active);
    outline: 14px solid var(--spice-main);
}
form .main-topBar-searchBar::placeholder,
form .main-topBar-searchBar:placeholder-shown {
    transition: none !important;
}

/*  ================================
    LEFT SIDEBAR
    ================================ */

/* pages pane */
.main-yourLibraryX-navLink {
    height: 24px;
    gap: 8px;
    text-decoration: none !important;
}
.main-yourLibraryX-navLink > svg,
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper > span {
    transform: scale(0.7);
}

/* library pane */
.HeaderSideArea:has(.x-entityImage-imageContainer) {
    transform: scale(0.7);
}
.main-yourLibraryX-filterArea {
    padding: 0 8px;
}
.main-yourLibraryX-libraryRootlist {
    padding: 0 16px 8px;
}
.main-yourLibraryX-listItem span.LineClamp {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* sidebar config */
.main-yourLibraryX-entryPoints:first-child:has(
        .main-yourLibraryX-navItems:empty
    ) {
    display: none;
}

/*  ================================
    MAIN VIEW
    ================================ */

/* check out a cool project: https://github.com/Rigellute/spotify-tui

    _________  ____  / /_(_) __/_  __      / /___  __(_)\A
   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A
  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A
 /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A
     /_/                    /____/                      

*/
.view-homeShortcutsGrid-shortcuts::before {
    content: "   _________  ____  / /_(_) __/_  __      / /___  __(_)\A   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A     /_/                    /____/                      ";
    white-space: pre-wrap;
    padding: 32px 0;
    color: var(--spice-banner);
    line-height: 1.2;
    text-wrap: nowrap;
    display: var(--display-spicetify-banner-ascii);
}
.main-entityHeader-headerText::before {
    content: "────█▀█▄▄▄▄─────██▄\A────█▀▄▄▄▄█─────█▀▀█\A─▄▄▄█─────█──▄▄▄█\A██▀▄█─▄██▀█─███▀█\A─▀▀▀──▀█▄█▀─▀█▄█▀\A";
    white-space: pre-wrap;
    padding-bottom: 32px;
    color: var(--spice-banner);
    line-height: 1.2;
    text-wrap: nowrap;
    display: var(--display-music-banner-ascii);
}

/* top bar */
.main-topBar-container a,
.marketplace-tabBar-active {
    text-decoration: underline !important;
}
.search-searchCategory-catergoryGrid *,
.main-shelf-subHeader *,
.ChipInnerComponent-sm,
.ChipInnerComponent-sm-selected,
.ChipInnerComponent-sm-selected-isUsingKeyboard {
    border-radius: var(--border-radius);
}
.main-actionBar-ActionBar
    button:is([class*="button-primary"], [data-encore-id="buttonPrimary"]),
.main-actionBar-ActionBar
    button:is(
        [class*="button-primary"],
        [data-encore-id="buttonPrimary"]
    ):hover,
.main-topBar-topbarContent
    button:is([class*="button-primary"], [data-encore-id="buttonPrimary"]),
.main-topBar-topbarContent
    button:is(
        [class*="button-primary"],
        [data-encore-id="buttonPrimary"]
    ):hover {
    transform: scale(0.5) !important;
}
.main-actionBar-ActionBarRow > :first-child:not(:only-child) {
    margin-right: var(--content-spacing);
}

/* headers */
.main-entityHeader-container {
    padding: var(--content-spacing) 0;
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
    background-image: radial-gradient(
        circle,
        rgba(var(--spice-rgb-main), 0.7) 0%,
        rgba(var(--spice-rgb-main), 0.9) 50%,
        rgba(var(--spice-rgb-main), 1) 100%
    );
}

/* lyrics page & sidebar */
.lyrics-lyrics-background {
    background-color: var(--spice-main);
}
.main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient {
    background-color: var(--background-tinted-base);
}
.lyrics-lyrics-contentContainer {
    justify-content: start;
}
.lyrics-lyrics-container,
.main-nowPlayingView-section {
    --lyrics-color-active: var(--spice-text) !important;
    --lyrics-color-inactive: var(--spice-subtext) !important;
    --lyrics-color-passed: var(--spice-subtext) !important;
    --lyrics-color-messaging: var(--spice-subtext) !important;
}
.lyrics-lyricsContent-lyric {
    opacity: 0.3;
    display: flex;
    flex-direction: row;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
    opacity: 0.7;
    transition: none;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(:empty) {
    background-color: var(--lyrics-color-background);
    color: var(--spice-text);
    opacity: 1;
    transition: none;
}
.lyrics-lyricsContent-lyric:not(:empty)::before {
    content: ">> ";
    opacity: 0;
    white-space: break-spaces;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(:empty)::before {
    content: ">> ";
    opacity: 1;
    white-space: break-spaces;
}

/* lyrics cinema */
.Root__lyrics-cinema {
    border: var(--border-width) var(--border-style) transparent;
    overflow: hidden;
}
.main-nowPlayingView-lyricsContent {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/*  ================================
    PLAYBACK BAR
    ================================ */

/* playback bar itself */
.main-nowPlayingBar-nowPlayingBar {
    padding: 8px 8px 32px 8px;
    height: 96px;
}
.playback-bar {
    position: absolute;
    left: calc(var(--panel-gap) + 8px);
    bottom: calc(var(--panel-gap) + 8px);
    width: calc(100vw - var(--panel-gap) * 2 - 16px);
    justify-content: center;
}

/* playback time indicators */
.playback-bar__progress-time-elapsed {
    pointer-events: none;
}
.playback-bar__progress-time-elapsed::after {
    content: " /";
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
    z-index: 9;
    padding-top: 2px;
}

/* playback seek bar */
.playback-progressbar-container {
    position: absolute;
    width: 100%;
}
.progress-bar {
    --progress-bar-height: 16px;
    --progress-bar-radius: var(--border-radius);
}
.progress-bar__slider {
    box-shadow: none;
    height: 100%;
    border-radius: 0;
    background-color: var(--spice-text);
}
.x-progressBar-fillColor {
    transition-duration: unset;
}

/* cover art */
.main-nowPlayingWidget-coverArt .cover-art {
    height: 32px !important;
    width: 32px !important;
}

/* left nowplaying text */
.main-nowPlayingBar-left {
    padding-inline-start: 0;
}
.main-nowPlayingWidget-trackInfo {
    margin: 0;
}

/* volume bar */
.volume-bar__slider-container .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .progress-bar--isDragging
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .progress-bar:focus
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive
    .progress-bar:hover
    .x-progressBar-fillColor,
.volume-bar__slider-container
    .playback-progressbar-isInteractive:focus-within
    .x-progressBar-fillColor {
    height: 9px;
    background-color: transparent;
    border-bottom: 2px dashed var(--fg-color);
}
.volume-bar__slider-container .x-progressBar-progressBarBg {
    background-color: transparent;
}

/* player controls */
.player-controls__buttons {
    margin-bottom: 0;
}
.player-controls__buttons,
.main-nowPlayingBar-extraControls {
    opacity: 0.25;
    transition: opacity var(--border-transition);
}
.player-controls__buttons:hover,
.main-nowPlayingBar-extraControls:hover {
    opacity: 1;
}
.main-shuffleButton-button::before,
button[data-testid="control-button-shuffle"] > span::after,
button
    > span:has(
        path[d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75 13.15.922zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"]
    )::after,
button
    > span:has(
        path[d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"]
    )::after {
    content: "\21C4";
}
button
    > span:has(
        path[d="M12.09.922a.75.75 0 0 1 1.061 0L15.98 3.75l-2.83 2.828a.75.75 0 1 1-1.06-1.06L13.109 4.5H11.16a2.25 2.25 0 0 0-1.724.804L3.264 12.66A3.75 3.75 0 0 1 .391 14H0v-1.5h.391a2.25 2.25 0 0 0 1.724-.804L8.288 4.34A3.75 3.75 0 0 1 11.16 3h1.947L12.09 1.982a.75.75 0 0 1 0-1.06zM.88 3.319C2.255 2.874 2.976 1.787 3.297.874c.036-.102.37-.102.406 0 .321.913 1.042 2 2.417 2.445.103.033.103.329 0 .362-1.375.445-2.096 1.532-2.417 2.445-.036.102-.37.102-.406 0-.321-.913-1.042-2-2.417-2.445-.103-.033-.103-.329 0-.362z"]
    )::after,
button
    > span:has(
        path[d="M4.502 0a.637.637 0 0 1 .634.58 4.84 4.84 0 0 0 .81 2.184c.515.739 1.297 1.356 2.487 1.486a.637.637 0 0 1 0 1.267c-1.19.13-1.972.747-2.487 1.487a4.8 4.8 0 0 0-.81 2.185.637.637 0 0 1-1.268 0 4.8 4.8 0 0 0-.81-2.185C2.543 6.265 1.76 5.648.57 5.518a.637.637 0 0 1 0-1.268c1.19-.13 1.972-.747 2.487-1.486a4.84 4.84 0 0 0 .81-2.185A.637.637 0 0 1 4.502 0m4.765 11.878c.056.065.126.15.198.236l.33.397.013.015A3 3 0 0 0 12.1 13.59h1.009l-.444.443a.75.75 0 0 0 1.061 1.06l2.254-2.253-2.254-2.254a.75.75 0 0 0-1.06 1.06l.443.444H12.1a1.5 1.5 0 0 1-1.146-.533l-.004-.005-.333-.4-.288-.343-.031-.035-.02-.021-.037-.037-.974 1.16Z"]
    )::after {
    content: "\21C4\2726";
    text-wrap: nowrap;
}
button[data-testid="control-button-seek-back-15"] > span::before,
button
    > span:has(
        path[d="M2.464 4.5h1.473a.75.75 0 0 1 0 1.5H0V2.063a.75.75 0 0 1 1.5 0v1.27a8.25 8.25 0 1 1 10.539 12.554.75.75 0 0 1-.828-1.25A6.75 6.75 0 1 0 2.464 4.5Z"]
    )::after {
    content: "\21A9";
}
.main-skipBackButton-button::before,
button[data-testid="control-button-skip-back"] > span::after {
    content: "\25C1";
}
.main-playPauseButton-button[aria-label="Play"]::before,
.main-playPauseButton-button:has(
        path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288z"]
    )::after {
    content: "\25B6";
}
.main-playPauseButton-button[aria-label="Pause"]::before,
.main-playPauseButton-button:has(
        path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="M5.7 3a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7H5.7zm10 0a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7h-2.6z"]
    )::after,
button[data-testid="control-button-playpause"]
    > span
    > span:has(
        path[d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7z"]
    )::after {
    content: "\275A\275A";
    text-wrap: nowrap;
}
button[data-testid="control-button-playpause"] > span {
    background-color: transparent;
    color: var(--spice-subtext);
}
button[data-testid="control-button-playpause"]:hover > span {
    color: var(--spice-text);
}
.main-skipForwardButton-button::before,
button[data-testid="control-button-skip-forward"] > span::after {
    content: "\25B7";
}
.main-repeatButton-button::before,
button[data-testid="control-button-repeat"] > span::after {
    content: "\21BB";
}
.main-repeatButton-button[aria-checked="mixed"]::before,
button[data-testid="control-button-repeat"][aria-checked="mixed"]
    > span::after {
    content: "\21BB\2474";
    text-wrap: nowrap;
}
button[data-testid="control-button-seek-forward-15"] > span::before,
button:has(
        path[d="M13.536 4.488h-1.473a.75.75 0 1 0 0 1.5H16V2.051a.75.75 0 0 0-1.5 0v1.27A8.25 8.25 0 1 0 3.962 15.876a.75.75 0 0 0 .826-1.252 6.75 6.75 0 1 1 8.747-10.136Z"]
    )
    > span::after {
    content: "\21AA";
}
.main-shuffleButton-button > svg,
.main-skipBackButton-button > svg,
.main-playPauseButton-button > svg,
.main-skipForwardButton-button > svg,
.main-repeatButton-button > svg,
:is(.player-controls__buttons, .npv-nowPlayingBar-controls) svg {
    display: none;
}

/* connect bar */
.main-connectBar-connectBar {
    position: absolute;
    background-color: transparent !important;
    mix-blend-mode: difference;
    pointer-events: none;
    right: var(--panel-gap);
    bottom: var(--panel-gap);
    opacity: 0.25;
    padding: 0 10px 10px;
}
.main-connectBar-connectBar span {
    color: var(--spice-accent-active);
}
.main-connectBar-connectBar svg {
    fill: var(--spice-accent-active);
}

[shivansh47]

I have applied this updated user.css file using the "Add CSS" feature in the marketplace, but it doesn't seem to add any cover arts nor in the banner or the playlist.

edit: nvm i removed the declutter now playing snippet and it got fixed, but it is still not showing the playlist cover art on the banner, is there a way to fix that ?

[sanoojes]

I have applied this updated user.css file using the "Add CSS" feature in the marketplace, but it doesn't seem to add any cover arts nor in the banner or the playlist.

edit: nvm i removed the declutter now playing snippet and it got fixed, but it is still not showing the playlist cover art on the banner, is there a way to fix that ?

check and change the variables inside

/* user settings */
:root {}```

[shivansh47]

Thank you, i was able to fix it, but i am unable to figure out why my set of icons on the right look like the default spotify icons, and also why my progress bar is not looking like it should, i tried tweaking around in the css file but nothing seems to affect them, if you could kindly pinpoint what needs to be changed, that would be great

[appelmoesgg]

@shivansh47 I'm currently writing a fix for the progress bar and I'll open a PR when I'm done