spicetify-themes/text/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:wght@400;700&family=Courier+Prime:wght@400;700&family=Cousine:wght@400;700&family=Cutive+Mono&family=DM+Mono:wght@300;400;500&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Nanum+Gothic+Coding:wght@400;700&family=PT+Mono&family=Roboto+Mono:wght@100;200;300;400;500;600;700&family=Share+Tech+Mono&family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Ubuntu+Mono:wght@400;700&family=VT323&display=swap");
@import url("https://fonts.cdnfonts.com/css/asciid");

/* user settings */
:root {
    --font-family: "DM Mono", monospace;
    /*
    --font-family: 'Anonymous Pro', monospace;
    --font-family: 'Courier Prime', monospace;
    --font-family: 'Cousine', monospace;
    --font-family: 'Cutive Mono', monospace;
    --font-family: 'DM Mono', monospace;
    --font-family: 'Fira Mono', monospace;
    --font-family: 'IBM Plex Mono', monospace;
    --font-family: 'Inconsolata', monospace;
    --font-family: 'Nanum Gothic Coding', monospace;
    --font-family: 'PT Mono', monospace;
    --font-family: 'Roboto Mono', monospace;
    --font-family: 'Share Tech Mono', monospace;
    --font-family: 'Source Code Pro', monospace;
    --font-family: 'Space Mono', monospace;
    --font-family: 'Ubuntu Mono', monospace;
    --font-family: 'VT323', 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-library-image: block; /* none | block */
    --display-tracklist-image: none; /* 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 */
}

/* 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 {
    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;
}

/* 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-library-image);
}
.main-trackList-rowImage {
    display: var(--display-tracklist-image);
}

/* fix */
:root {
    --content-max-width: 100% !important;
}
.Root__top-container {
    --panel-gap: 16px !important;
}
.Root__top-bar {
    border: var(--border-width) solid transparent;
}
.Root__main-view,
.Root__nav-bar,
.Root__now-playing-bar {
    overflow: visible;
}
.main-view-container {
    overflow: hidden;
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
.main-entityHeader-container.main-entityHeader-nonWrapped {
    height: 250px;
    min-height: unset;
}
.main-entityHeader-imageContainerNew {
    height: 128px;
    width: 128px;
}
.main-topBar-background,
.main-topBar-overlay,
.main-home-homeHeader,
.main-home-filterChipsSection,
.main-home-filterChipsSection::after {
    background-color: var(--spice-main) !important;
    background-image: none;
}
.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);
}

/* 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-highlight);
    --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-highlight);
    --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);
}
.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);
}
#_R_G *:not([fill="none"]) {
    fill: var(--spice-button-active) !important;
}
#_R_G *:not([stroke="none"]) {
    stroke: var(--spice-button-active);
}
.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-trackListHeaderStuck.main-trackList-trackListHeader {
    background: var(--spice-main);
}
.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"] {
    background-color: rgba(var(--spice-rgb-highlight), 0.5);
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
    background-color: var(--spice-highlight);
}
.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 {
    color: var(--spice-banner);
}

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

/* pane headers */
.Root__nav-bar .main-yourLibraryX-entryPoints {
    overflow-x: visible !important;
}
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before,
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before,
.Root__main-view::before,
.Root__now-playing-bar::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: 9;
}
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before {
    content: "Pages";
}
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before {
    content: "Library";
}
.Root__main-view::before {
    content: "Main";
}
.Root__now-playing-bar::before {
    content: "Playing";
}
.Root__right-sidebar:has(aside:not(:empty))::before {
    content: "Sidebar";
}
.Root__nav-bar .main-yourLibraryX-entryPoints:hover::before,
.Root__main-view:hover::before,
.Root__now-playing-bar: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 {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius) !important;
}

/* modals */
.GenericModal {
    border: var(--border-width) var(--border-style) var(--spice-border-active);
    border-radius: var(--border-radius);
    outline: 14px solid var(--spice-main) !important;
    overflow: visible;
}
.GenericModal::before {
    content: "Modal";
    color: var(--spice-border-active);
    position: absolute;
    margin: -10px 4px;
    background: var(--spice-main);
    padding: 0 3px;
    z-index: 9;
}

/*  ================================
    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.6);
}

/* library pane */
.x-entityImage-imageContainer {
    transform: scale(0.7);
}
.main-yourLibraryX-filterArea {
    padding: 0 8px;
}
.main-yourLibraryX-libraryRootlist {
    padding: 0 16px 8px;
}

/* 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;
    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;
    display: var(--display-music-banner-ascii);
}

/* top bar */
.queue-tabBar-active,
.marketplace-tabBar-active {
    text-decoration: underline !important;
}
.main-topBar-historyButtons .main-topBar-button {
    background-color: transparent;
}
.main-topBar-historyButtons > .main-topBar-button:first-child::before {
    content: "<";
}
.main-topBar-button.main-topBar-responsiveForward::before {
    content: ">";
}
.main-topBar-historyButtons > .main-topBar-button:first-child > svg,
.main-topBar-button.main-topBar-responsiveForward > svg {
    display: none;
}
.main-topBar-topbarContent {
    gap: 24px;
}
.x-searchInput-searchInputInput {
    border-radius: var(--border-radius);
    background-color: transparent;
}
.x-searchInput-searchInputInput:hover,
.x-searchInput-searchInputInput:focus {
    box-shadow: none;
    border: 1px solid var(--spice-button-active);
    background-color: transparent;
}
.search-searchCategory-catergoryGrid *,
.main-shelf-subHeader * {
    border-radius: var(--border-radius);
}

/* headers */
.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%
    );
}

/* compact tracklists */
.main-trackList-trackListRow {
    height: 32px;
}
.main-trackList-rowMainContent {
    grid-template: "title badges subtitle" / auto 1fr;
}
.main-trackList-rowImage {
    height: 24px;
    width: 24px;
}
.main-trackList-rowTitle::after {
    content: " |";
    color: var(--spice-highlight);
}
.main-trackList-number,
.main-trackList-icon {
    top: unset;
}

/* 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-main);
    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;
}

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

/* 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;
}
.player-controls__buttons:hover,
.main-nowPlayingBar-extraControls:hover {
    opacity: 1;
}
.main-shuffleButton-button::before,
.ecHWOS
    button: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"]
    )::before {
    content: "\21C4";
}
.ecHWOS
    button: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"]
    )::before {
    content: "\21C4\2726";
}
.main-skipBackButton-button::before {
    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"]
    )::before {
    content: "\25B6";
}
.main-playPauseButton-button[aria-label="Pause"]::before,
.main-playPauseButton-button: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"]
    )::before {
    content: "\275A\275A";
}
.main-skipForwardButton-button::before {
    content: "\25B7";
}
.main-repeatButton-button::before {
    content: "\21BB";
}
.main-repeatButton-button[aria-checked="mixed"]::before {
    content: "\21BB\2474";
}
.main-shuffleButton-button > svg,
.ecHWOS svg,
.main-skipBackButton-button > svg,
.main-playPauseButton-button > svg,
.main-skipForwardButton-button > svg,
.main-repeatButton-button > 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);
}