/* ================================ 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"); /* 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-size-lyrics: 14px; /* 1.5em (default) */ --font-weight: 400; /* 200 : 900 */ --line-height: 1.2; --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 */ --border-radius: 0px; --border-width: 1px; --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */ } /* font */ * { font-family: var(--font-family) !important; font-size: var(--font-size) !important; font-weight: var(--font-weight) !important; line-height: var(--line-height); } .lyrics-lyricsContent-lyric, .lyrics-lyricsContent-text { font-size: var(--font-size-lyrics) !important; } /* images */ .main-cardImage-imageWrapper img { display: var(--display-card-image); } .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-yourLibraryX-rowCover img, .main-avatar-image { display: var(--display-library-image); } .main-trackList-rowImage { display: var(--display-tracklist-image); } /* fix */ .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-topBar-container { width: 99.5%; } .main-topBar-background, .main-topBar-overlay, .main-home-homeHeader { background-color: var(--spice-main) !important; background-image: none; } /* .main-rootlist-wrapper, .main-rootlist-topSentinel, .main-rootlist-bottomSentinel, .main-rootlist-topSentinel div, .main-rootlist-bottomSentinel div { height: auto !important; contain: unset; } */ .main-trackList-rowPlayCount { width: 17ch; } .LayoutResizer__resize-bar { cursor: w-resize; } .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; } .tr1hDrJgoPSbMXlXU_sl { flex-direction: column-reverse; } .npv-main-container .playback-bar { position: unset; width: auto; } .mbUrqWP55sK6zhspiR72 { height: auto; } .Root__right-sidebar > section, section.main-buddyFeed-container { width: auto !important; } /* 1.2.11 backwards compatibility - for linux */ /* pane borders */ .main-yourLibraryX-entryPoints, .Root__main-view, .Root__now-playing-bar, .spotify__os--is-linux .Root__right-sidebar > div:nth-child(2) { border: var(--border-width) var(--border-style) var(--spice-border-inactive); border-radius: var(--border-radius) !important; background-color: var(--spice-main) !important; } .main-yourLibraryX-entryPoints:hover, .Root__main-view:hover, .Root__now-playing-bar:hover, .spotify__os--is-linux .Root__right-sidebar > div:nth-child(2):hover { border: var(--border-width) var(--border-style) var(--spice-border-active); } .main-nowPlayingBar-nowPlayingBar { padding: 8px 8px 32px 8px !important; height: 96px !important; } .Root__nav-bar { gap: var(--panel-gap) !important; } .spotify__os--is-linux .Root__top-container { padding-top: var(--panel-gap) !important; } /* 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); } .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, .Pns6F5g4OEwEpdmOWTLg, .eldivguzYznZgQoShJbe { background-color: var(--background-base); background-blend-mode: color-dodge; } .artist-artistAbout-container.artist-artistAbout-backgroundImage .artist-artistAbout-content > div { color: #fff; } .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, .BoxComponent-group-naked-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px:hover::after, .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, .BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px, .BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px { background-color: var(--spice-highlight); } .x-entityImage-imageContainer, .x-entityImage-imageContainer div, .fRZRXRIV2YBCFLYgwDAr { background-color: var(--spice-border-inactive); } .main-userWidget-boxCondensed, .main-userWidget-boxCondensed:focus-visible, .main-userWidget-boxCondensed:hover, .main-userWidget-boxCondensed[data-context-menu-open="true"] { background-color: var(--spice-border-inactive) !important; } .main-cardImage-imageWrapper { --card-color: var(--spice-border-inactive); -webkit-box-shadow: none; box-shadow: none; } /* pane borders */ .main-yourLibraryX-entryPoints, .Root__main-view, .Root__now-playing-bar, .Root__right-sidebar .main-buddyFeed-container { 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 .main-buddyFeed-container:hover { border: var(--border-width) var(--border-style) var(--spice-border-active); } /* pane headers */ .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 > section: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 > section: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 section:not(:empty):hover::before { color: var(--spice-border-active); } /* scrollbars */ .os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { border-radius: var(--border-radius); width: 2px; } .os-theme-spotify > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover { border-radius: var(--border-radius); width: 6px; } .main-view-container__scroll-node > .os-scrollbar-vertical { top: 5px !important; right: 5px !important; } .os-scrollbar-handle { position: absolute; top: 0; right: 0; } /* context menus */ .main-contextMenu-menu { border: var(--border-width) var(--border-style) var(--spice-border-active); border-radius: var(--border-radius); } /* 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; } .GenericModal::before { content: "Modal"; color: var(--spice-border-active); position: absolute; margin: -10px 4px; background: var(--spice-main); padding: 0 3px; z-index: 9; } .artist-artistAbout-modal { overflow: visible; } /* ================================ LEFT SIDEBAR ================================ */ /* pages pane */ .main-yourLibraryX-navLink { height: 24px; gap: 8px; } .main-yourLibraryX-navLink .home-icon, .main-yourLibraryX-navLink .search-icon, .main-yourLibraryX-navLinkActive .home-active-icon, .main-yourLibraryX-navLinkActive .search-active-icon, .main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper > span { transform: scale(0.6); } /* library pane */ .main-yourLibraryX-isScrolled { box-shadow: none; } .Wrapper-md-leading { margin-right: 8px; } .main-yourLibraryX-listRowSubtitle { display: none; } .main-yourLibraryX-listItemGroup { grid-template-rows: 24px !important; min-block-size: auto; padding: 4px 18px; } .x-entityImage-imageContainer, .x-entityImage-imageContainer div, .main-yourLibraryX-rowCover { height: 24px !important; width: 24px !important; -webkit-box-shadow: none; box-shadow: none; } .x-entityImage-imagePlaceholder, .main-yourLibraryX-rowCover .Svg-img-textBrightAccent-24-icon { transform: scale(0.5); } /* 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 /_/ /____/ */ .main-home-home::before { content: " _________ ____ / /_(_) __/_ __ / /___ __(_)\A / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A (__ ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A /____/ .___/\\____/\\__/_/_/ \\__, / \\__/\\__,_/_/\A /_/ /____/ "; white-space: pre-wrap; padding: 32px; color: var(--spice-banner); line-height: 1.2; } .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; } /* top bar */ .queue-tabBar-active, .marketplace-tabBar-active { text-decoration: underline !important; } .main-topBar-historyButtons .main-topBar-button, .main-topBar-buddyFeed { background-color: transparent; } .main-topBar-button:first-child:before { content: "<"; } .main-topBar-button.main-topBar-forward::before { content: ">"; } .main-topBar-button:first-child > svg, .main-topBar-button.main-topBar-forward > 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 * { border-radius: var(--border-radius); } /* headers */ .main-entityHeader-shadow { box-shadow: none; } .main-entityHeader-container.main-entityHeader-withBackgroundImage { background-image: radial-gradient( circle, transparent, rgba(var(--spice-rgb-main, 0.5)) 75%, var(--spice-main) ); } /* 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 */ .main-lyricsCinema-lyricsCinemaVisible { border: var(--border-width) var(--border-style) transparent; } .main-nowPlayingView-lyricsContent .lyrics-lyricsContent-provider, .main-nowPlayingView-lyricsContent .lyrics-lyricsContent-lyric { transform: translateX(100px); } /* ================================ 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-bar > .playback-progressbar { position: absolute; } .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; } [dir="ltr"] .main-coverSlotCollapsed-navAltContainer { -webkit-transform: none; transform: none; } [dir="ltr"] .main-nowPlayingWidget-coverExpanded { transform: translateX(-40px); } [dir="ltr"] .main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container.main-coverSlotCollapsed-navAltContainer { opacity: 0; } /* volume bar */ .volume-bar__slider-container .x-progressBar-fillColor, .volume-bar__slider-container .playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor, .volume-bar__slider-container .playback-progressbar-isInteractive .progress-bar:focus .x-progressBar-fillColor, .volume-bar__slider-container .playback-progressbar-isInteractive .volume-bar__slider-container .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 { content: "\21C4"; } .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, .main-playPauseButton-button: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"] )::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, .main-playPauseButton-button: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"] )::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, .main-skipBackButton-button > svg, .main-playPauseButton-button > svg, .main-skipForwardButton-button > svg, .main-repeatButton-button > svg { display: none; } /* connect bar */ .nav-ylx .main-connectBar-connectBar { position: absolute; background-color: transparent !important; color: var(--spice-accent-active) !important; mix-blend-mode: difference; pointer-events: none; right: var(--panel-gap); bottom: var(--panel-gap); padding: 17px; opacity: 0.25; } .main-devicePicker-indicator.main-devicePicker-connected { display: none; }