:root { --bar-height: 70px; --bar-cover-art-size: 40px; --main-gap: 10px; --main-corner-radius: 10px; --scrollbar-vertical-size: 8px; --cover-border-radius: 8px; --os-windows-icon-dodge: 0; } html.buddyFeed-hide-text { --panel-width: 72px !important; } @font-face { font-family: "Google Sans Display"; src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2"); font-style: normal; font-weight: 400; } @font-face { font-family: "Google Sans Display"; src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2"); font-style: normal; font-weight: 500; } @font-face { font-family: "Roboto"; src: url("glue-resources/fonts/Roboto.woff2") format("woff2"); font-style: normal; font-weight: 400; } @font-face { font-family: "Roboto"; src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2"); font-style: normal; font-weight: 500; } body { --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; font-family: var(--glue-font-family); letter-spacing: normal; } .main-type-bass { font-family: var(--glue-font-family); } .main-type-ballad { font-weight: 500; } .lyrics-lyricsContainer-LyricsLine { font-family: var(--glue-font-family); letter-spacing: -0.03em !important; } .main-rootlist-rootlistDivider { display: none; } input { background-color: unset !important; border-bottom: solid 1px var(--spice-text) !important; border-radius: 0 !important; padding: 6px 10px 6px 48px; color: var(--spice-text) !important; } .x-searchInput-searchInputSearchIcon, .x-searchInput-searchInputClearButton { color: var(--spice-text) !important; } .main-home-homeHeader, .x-entityHeader-overlay, .x-actionBarBackground-background, .main-actionBarBackground-background, .main-entityHeader-overlay, .main-entityHeader-backgroundColor { background-color: unset !important; background-image: unset !important; } .connect-title, .connect-header { display: none; } .connect-device-list { margin: 0px -5px; } /* Remove Topbar background colour */ .main-topBar-background { background-color: unset !important; } .main-topBar-overlay { background-color: var(--spice-main); } .main-entityHeader-shadow, .main-contextMenu-menu, .connect-device-list-container { box-shadow: 0 4px 20px #21212130; } .main-trackList-playingIcon { filter: grayscale(1); } span.artist-artistVerifiedBadge-badge svg > path:first-of-type { fill: var(--spice-button); } span.artist-artistVerifiedBadge-badge svg > path:last-of-type { fill: var(--spice-text); } /* Full window artist background */ .main-entityHeader-background.main-entityHeader-gradient { opacity: 0.3; } .main-entityHeader-container.main-entityHeader-withBackgroundImage, .main-entityHeader-background, .main-entityHeader-background.main-entityHeader-overlay:after { height: 100vh; } .main-entityHeader-withBackgroundImage .main-entityHeader-headerText { justify-content: center; } .main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage { padding-left: 9%; } .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 { font-size: 120px !important; line-height: 120px !important; } /** Hightlight selected playlist */ .main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive { background: var(--spice-button); border-radius: 4px; } .main-navBar-navBarLinkActive { background: var(--spice-button); } .main-contextMenu-menu { background-color: var(--spice-button); } .main-contextMenu-menuHeading, .main-contextMenu-menuItemButton, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { color: var(--spice-main); } .main-playPauseButton-button { background-color: transparent !important; } /** Queue page header */ .queue-queue-title, .queue-playHistory-title { color: var(--spice-text) !important; } /** Artist page */ .artist-artistOverview-heading { color: var(--spice-text) !important; } .artist-artistAbout-content .artist-artistAbout-cityBlock div, .artist-artistAbout-content .artist-artistAbout-stats div { color: var(--spice-text) !important; } .artist-artistAbout-content div { color: var(--spice-text) !important; } /** Cards */ .main-cardImage-imageWrapper { background-color: transparent; box-shadow: unset; -webkit-box-shadow: unset; } .main-cardImage-imagePlaceholder, .main-cardImage-image { border-radius: var(--cover-border-radius); } .main-rootlist-rootlistDivider { background-color: unset; } .main-nowPlayingBar-nowPlayingBar { height: var(--bar-height); } .Root__top-bar { border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; } .main-topBar-background { border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; } .Root__main-view { background-color: var(--spice-main); border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0; overflow: hidden; } .main-buddyFeed-friendsFeedContainer { box-shadow: unset; -webkit-box-shadow: unset; z-index: 0; } .main-buddyFeed-activityMetadata { margin-left: 24px; } .main-buddyFeed-headerTitle, .main-buddyFeed-activityMetadata .main-buddyFeed-username a { color: var(--spice-sidebar-text); } .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp { color: rgba(var(--spice-rgb-sidebar-text), 0.8); } .main-avatar-avatar.main-avatar-withBadge:after { box-shadow: 0 0 0 2px var(--spice-sidebar); background-color: var(--spice-notification); right: 0; } .Root__now-playing-bar { border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); background-color: unset; } .main-nowPlayingBar-container { border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); background-color: unset; background: radial-gradient( ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60% ); border-top: 0; min-width: 518px; } .main-connectBar-connectBar { border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); border: 2px solid var(--spice-main); border-top: 0; color: var(--spice-sidebar-text); } .Root__nav-bar { height: 100%; z-index: 1; width: var(--sidebar-width) !important; } .spotify__os--is-windows .Root__nav-bar, .spotify__os--is-windows .main-buddyFeed-friendsFeedContainer { padding-top: 15px; } .main-buddyFeed-friendsFeedContainer .os-content { padding-top: 0 !important; } html, .Root__nav-bar, .main-buddyFeed-friendsFeedContainer { background-color: var(--spice-sidebar) !important; } html { background-position: center; background-repeat: no-repeat; } .Root__nav-bar .link-subtle, .main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistContent span, .main-navBar-entryPoints span { color: var(--spice-sidebar-text); } .main-navBar-navBarItem { padding: 0 8px; } .main-rootlist-statusIcons { color: var(--spice-sidebar-text); padding-right: 16px; } .main-rootlist-statusIcons .main-playButton-button { color: var(--spice-sidebar-text); } .main-rootlist-expandArrow { position: absolute; top: 20px; right: 12px; width: 16px; height: 16px; color: var(--spice-sidebar-text) !important; opacity: 0; } li.GlueDropTarget:hover .main-rootlist-expandArrow { opacity: 1; } html:not(.sidebar-hide-text) .main-rootlist-expandArrow { opacity: 1; } .main-rootlist-expandArrow::before { font-size: 10px; padding-bottom: 3px; } html.sidebar-hide-text .main-rootlist-expandArrow { display: none; } html.sidebar-hide-text .main-navBar-navBarItem a span, html.sidebar-hide-text .main-rootlist-rootlistContent a span, html.sidebar-hide-text .main-rootlist-rootlistItem a span, html.sidebar-hide-text .main-rootlist-statusIcons { display: none; } .main-rootlist-rootlist { margin-top: 0; } .Root__nav-bar .os-scrollbar-vertical, .main-buddyFeed-friendsFeedContainer .os-scrollbar-vertical, .main-buddyFeed-friendsFeedContainer .os-scrollbar-horizontal { display: none; } .main-topBar-historyButtons .main-topBar-button { background-color: unset; width: 24px; height: 24px; } .main-topBar-historyButtons svg { color: var(--spice-button); fill: var(--spice-button); } .playback-bar__progress-time, .main-playbackBarRemainingTime-container, .playback-bar__progress-time-elapsed { display: none; } .playback-bar { position: absolute; width: var(--main-view-width); left: var(--sidebar-width); bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2); } /* when connect bar is visible */ .main-nowPlayingBar-nowPlayingBar:nth-last-child(2) .playback-bar { bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2); } .main-nowPlayingWidget-coverArt .cover-art { width: var(--bar-cover-art-size) !important; height: var(--bar-cover-art-size) !important; } .player-controls__buttons { margin-bottom: 0; width: 192px; } .progress-bar { --progress-bar-height: 2px; --fg-color: var(--spice-button); --bg-color: rgba(var(--spice-rgb-text), 0.2); } .minimal-player .player-controls__buttons { width: 120px; gap: 0px; } .minimal-player .player-controls__left, .minimal-player .player-controls__right { --button-size: 16px !important; gap: 0px; } .minimal-player .volume-bar { flex: 0 1 70px; } .extra-minimal-player .player-controls__buttons { width: 64px; } .extra-minimal-player .main-shuffleButton-button, .extra-minimal-player .main-repeatButton-button, .extra-minimal-player .ExtraControls__connect-device-picker, .extra-minimal-player .volume-bar .progress-bar-wrapper { display: none; } .extra-minimal-player .volume-bar { flex: 0 0 32px; } .main-trackInfo-name { font-weight: 500; } .main-topBar-topbarContent .main-playButton-PlayButton { --size: 35px !important; } .main-entityHeader-image { border-radius: 5px; } .main-entityHeader-metaDataText, .main-duration-container { color: var(--spice-subtext); } /** Sidebar */ .main-rootlist-rootlist .os-content { padding: 0 0 8px 0 !important; } .main-rootlist-rootlistDividerContainer { display: none; } .main-rootlist-rootlistItem a { align-items: center; border-radius: 4px; display: flex; height: 56px; padding: 0 12px; } img.playlist-picture { width: 32px; height: 32px; flex: 0 0 32px; background-size: cover; background-position: center; border-radius: 50%; } img.playlist-picture[src$=".svg"] { width: 24px; height: 24px; border-radius: 0; } .main-rootlist-rootlistItem a span { margin-left: 24px; } .main-rootlist-rootlistItem { padding-left: calc( var(--indentation) * var(--left-sidebar-item-indentation-width) ) !important; padding-right: 0 !important; transition: padding-left 0.5s ease; } html.sidebar-hide-text .main-rootlist-rootlistItem { padding: 0; } .main-rootlist-dropIndicator { background: var(--spice-selected-row); height: 2px; } .main-navBar-navBarLink { height: 56px; } .main-navBar-navBarItem .collection-active-icon, .main-navBar-navBarItem .collection-icon, .main-navBar-navBarItem .home-active-icon, .main-navBar-navBarItem .home-icon, .main-navBar-navBarItem .search-active-icon, .main-navBar-navBarItem .search-icon { flex: 0 0 auto; margin-right: 8px; color: var(--spice-sidebar-text); } .main-collectionLinkButton-icon, .main-createPlaylistButton-icon, .main-collectionLinkButton-icon { margin-right: 24px; } li.GlueDropTarget { padding: 0 8px; } /** OS-specific window controls dodge */ .spotify__os--is-windows .main-navBar-navBar { padding-top: calc(var(--os-windows-icon-dodge) * 24px); } .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints { padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px); } .spotify__os--is-windows .main-buddyFeed-header { padding-top: calc(var(--os-windows-icon-dodge) * 32px); } .spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .main-topBar-container { padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px); } .main-topBar-container { max-width: unset; } /** Linux-specific remove padding */ .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-entryPoints, .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-navBar { padding-top: 0; } /** Custom elements */ #dribbblish-sidebar-fade-in { position: absolute; bottom: 0; width: 100%; height: 15%; background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent); z-index: 3; pointer-events: none; } .dribs-playlist-list { padding: 0px 8px; } #dribbblish-back-shadow { z-index: 2; grid-area: main-view / main-view / now-playing-bar / main-view; box-shadow: 0 0 10px 3px #0000003b; border-radius: var(--main-corner-radius); pointer-events: none; } .playback-bar .prog-tooltip { position: absolute; min-width: 100px; width: unset; height: 25px; top: -35px; padding: 0 5px; border-radius: 4px; text-align: center; color: var(--spice-text); background-color: var(--spice-button); opacity: 0; transition: opacity, left 0.2s ease; } .playback-bar:hover .prog-tooltip { opacity: 1; } /** Rearrange player bar */ .main-nowPlayingBar-left { order: 1; flex: 1; width: auto; min-width: 0 !important; } .main-nowPlayingBar-center { order: 0; flex: 1; width: auto; min-width: unset !important; } .main-nowPlayingBar-right { order: 2; flex: 1; width: auto; min-width: unset !important; } .main-nowPlayingWidget-nowPlaying { justify-content: center; } .main-trackInfo-container > div > div::before, .main-trackInfo-container > div > div::after { background: unset; } .player-controls { justify-content: flex-start; flex-direction: row; } .main-playPauseButton-button svg { width: 32px !important; height: 32px !important; color: var(--spice-button); } /** Main container */ .contentSpacing, .artist-artistDiscography-headerContainer { padding-left: 64px; padding-right: 64px; } @media (min-width: 1280px) { .contentSpacing, .artist-artistDiscography-headerContainer { padding-left: 128px; padding-right: 128px; } } .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, .main-createPlaylistButton-button { opacity: 1; } .main-likedSongsButton-likedSongsIcon, .main-yourEpisodesButton-yourEpisodesIcon, .main-createPlaylistButton-createPlaylistIcon { background: unset !important; } .main-createPlaylistButton-icon, .main-collectionLinkButton-icon, .main-createPlaylistButton-icon { height: 40px; } .main-likedSongsButton-likedSongsIcon svg, .main-yourEpisodesButton-yourEpisodesIcon svg, .main-createPlaylistButton-createPlaylistIcon svg { fill: var(--spice-sidebar-text); width: 32px; height: 32px; } .main-yourEpisodesButton-yourEpisodesIcon svg path { fill: var(--spice-sidebar-text); } /** Grid */ .Root__top-container { padding: var(--main-gap) 0; } .Root__top-container:has(> .main-buddyFeed-container):not( .Root__top-container--right-sidebar-hidden ) { grid-template-areas: "top-bar top-bar top-bar" "nav-bar main-view right-sidebar" "nav-bar now-playing-bar right-sidebar"; } /* for spotify v prior to 1.2.9 */ .Root__top-container:not(:has(> .main-buddyFeed-container)) { grid-template-areas: "top-bar top-bar" "nav-bar main-view" "nav-bar now-playing-bar"; padding-right: var(--main-gap); } /* for spotify v 1.2.9 */ .Root__top-container.Root__top-container--right-sidebar-hidden { grid-template-areas: "top-bar top-bar" "nav-bar main-view" "nav-bar now-playing-bar"; padding-right: var(--main-gap); } /** Minimal profile button */ span.main-userWidget-displayName, .main-userWidget-box > div:last-child, .main-userWidget-box svg { display: none; } /** Big cover, small cover */ .main-coverSlotExpanded-container { position: fixed; z-index: 2; width: 250px; height: 250px; bottom: calc(var(--main-gap) + var(--bar-height) + 10px); left: calc(var(--sidebar-width) + 10px); } .Root.is-connectBarVisible .main-coverSlotExpanded-container { bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px); } html.right-expanded-cover .main-coverSlotExpanded-container { right: calc(var(--main-gap) + 10px); left: unset; } html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container { right: calc(var(--main-gap) + var(--panel-width) + 10px); left: unset; } .main-coverSlotExpanded-container img { border-radius: 4px; } .cover-art { border-radius: 4px; } .main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container { opacity: 0; } .main-nowPlayingWidget-coverExpanded { transform: translateX(-27px); } /** Mini dribbblish */ .x-categoryCard-CategoryCard > div { background-color: var(--spice-main); width: calc(100% - 14px); height: calc(100% - 6px); margin: 3px 10px; border-radius: 5px; } .x-categoryCard-CategoryCard { height: 100px; } .x-categoryCard-image { width: 50px !important; height: 50px !important; } .x-heroCategoryCard-HeroCategoryCard > div { background-color: var(--spice-main); width: calc(100% - 20px); height: calc(100% - 6px); margin: 3px 16px; border-radius: 5px; } .main-dropDown-dropDown, .x-sortBox-sortDropdown { background-color: rgba(var(--spice-rgb-selected-row), 0.1) !important; } .connect-device-list-item:focus, .connect-device-list-item:hover { background-color: rgba(var(--spice-rgb-selected-row), 0.3); } .bookmark-filter { color: var(--spice-main) !important; } /* 1.1.56 */ .main-navBar-navBar { width: var(--sidebar-width) !important; } .main-entityHeader-container.main-entityHeader-nonWrapped { padding-left: 64px; padding-right: 64px; } @media (min-width: 1024px) { .main-entityHeader-container.main-entityHeader-nonWrapped { padding-left: 128px; padding-right: 128px; } } .main-userWidget-dropDownMenu > li > button { color: rgba(var(--spice-rgb-selected-row), 0.7); padding-left: 8px; text-decoration: none; } .main-userWidget-dropDownMenu > li > button:hover, .main-userWidget-dropDownMenu > li > button:focus { color: var(--spice-text); } .main-userWidget-dropDownMenu svg { position: unset; } .main-userWidget-dropDownMenu > li svg { position: absolute; } .main-view-container { min-height: 90vh !important; } @media (max-height: 768px) { .main-view-container { min-height: 85vh !important; } } /* player control buttons */ button.main-shuffleButton-button { position: absolute; left: 200px; } .player-controls__buttons { position: relative; } button.main-skipForwardButton-button, button.main-repeatButton-button, button.main-skipBackButton-button, button.main-shuffleButton-button { color: var(--spice-text); } .player-controls__left, .player-controls__right { gap: 16px; } .control-button { color: var(--spice-text); } .main-genericButton-button { color: var(--spice-text); } /* increase spacing b/w history buttons */ .main-topBar-historyButtons { gap: 15px; } /* add top spacing to all */ section.contentSpacing { margin-top: 40px; } /* add fade to sidebar playlist list */ .main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] { -webkit-mask-image: linear-gradient( transparent 0%, black 10%, black 90%, transparent 100% ); } .main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] { -webkit-mask-image: linear-gradient(transparent 0%, black 10%); } .main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] { -webkit-mask-image: linear-gradient(black 90%, transparent 100%); } /* fix sidebar playlist section */ .main-navBar-navBar .main-rootlist-wrapper { contain: layout; height: auto !important; } /* fix sidebar resizer position (stops from causing scroll) */ .LayoutResizer__resize-bar { top: 0; } /* buddy feed w/ hidden text*/ .buddyFeed-hide-text .Root__right-sidebar { width: 72px !important; } .buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ, .buddyFeed-hide-text .main-buddyFeed-header { display: none; } .buddyFeed-hide-text .main-buddyFeed-friendActivity { padding: 0 0 0 4px; } .buddyFeed-hide-text .main-buddyFeed-activityMetadata { visibility: hidden; } .buddyFeed-hide-text .main-avatar-avatar > div > div > div { display: flex; justify-content: center; padding-top: 7px; } .buddyFeed-hide-text .main-avatar-avatar, .buddyFeed-hide-text .main-avatar-avatar div, .buddyFeed-hide-text .main-buddyFeed-overlay { width: 32px !important; height: 32px !important; } /* buddy feed heading and icons */ .NdQkQZhcYIEcJnRdAYcQ h1, .main-buddyFeed-header h1 { color: var(--spice-sidebar-text); } .main-buddyFeed-actions button { color: var(--spice-sidebar-text); } .NdQkQZhcYIEcJnRdAYcQ, .main-buddyFeed-header { padding-left: 0; } .spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR { margin-top: 16px; } span.YEaaNScT6lyJCVBeQoxd button { color: var(--spice-sidebar-text); } .main-avatar-avatar.BzunmwrVMyWGpopPJRt2::after { background: var(--spice-sidebar-text); } /* fix marketplace heading alignment */ .marketplace-header { flex-direction: row !important; } .marketplace-header__left { position: initial !important; } /* liked songs sidebar icon */ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected.active { background: var(--spice-button); } .main-collectionLinkButton-collectionLinkButton { height: 56px !important; } .GlueDropTarget.GlueDropTarget--tracks.personal-library { height: 56px; } .main-collectionLinkButton-collectionLinkText { padding-left: 8px; } /* topbar play button */ .main-topBar-topbarContent .main-playButton-PlayButton > button > span { inline-size: 32px; block-size: 32px; min-block-size: auto; } .main-topBar-topbarContent .main-playButton-PlayButton svg { width: 18px; height: 18px; } .main-topBar-topbarContent .main-playButton-PlayButton > button > span > span { position: initial; height: 18px; } /* keep progress knob on page : important for js to work */ .progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider { display: block; visibility: hidden; } /* progress bar moves smoothly */ .x-progressBar-fillColor { transition: transform 1s linear; } .progress-bar__slider { transition: left 1s linear; } .playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor, .playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider { transition: none; } /* marketplace page */ .marketplace-header__left h1, .marketplace-card-type-heading { font-family: var( --font-family, CircularSpTitle, CircularSpTitle-Tall, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif) ); } [dir="ltr"] .collection-collection-tabBar { padding-left: 0; } .marketplace-tabBar, .main-topBar-topbarContent { padding-left: 16px; } /* playbutton color */ .main-playButton-PlayButton > button > span { color: var(--spice-text); } /* lyrics background */ .lyrics-lyrics-background { background-color: var(--spice-main); }