:root { --corner-radius: 10px; --bar-cover-art-size: 40px; --scrollbar-vertical-size: 10px; --scrollbar-horizontal-size: 10px; --bar-height: 90px; --main-gap: 10px; } @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; } .Root__top-container { grid-template-areas: "left-sidebar main-view right-sidebar" "left-sidebar now-playing-bar right-sidebar" !important; gap: 0; padding-left: 0 !important; } .Root__now-playing-bar { background-color: var(--spice-player); border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important; grid-area: now-playing-bar !important; } .Root__main-view { border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important; grid-area: main-view !important; } .legacy .Root__top-container:not(:has(> .Root__right-sidebar)) { padding-right: var(--main-gap); } .ylx .Root__top-container:not(:has(> .Root__right-sidebar > aside)) { padding-right: var(--main-gap); } .Root__right-sidebar:not(:has(> aside)) { padding-left: 0; } .Root__nav-bar { grid-area: left-sidebar !important; } /* move the progress bar to the top */ .playback-bar { position: absolute; left: 0; top: -5px; } .main-nowPlayingBar-nowPlayingBar { position: relative; padding-inline-end: 16px !important; } .progress-bar { --progress-bar-height: 2px; --progress-bar-radius: 0; --fg-color: var(--spice-button); --bg-color: rgba(var(--spice-rgb-text), 0.2); } /* add gradient to player bar */ .main-nowPlayingBar-container { background-color: unset; background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%) !important; border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important; border-top: 0; min-width: 518px; } /* 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; } /* hide time elapsed */ .main-playbackBarRemainingTime-container, .playback-bar__progress-time-elapsed { display: none; } /* custom dynamic prog tooltip */ .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 0.2s linear, left 0.2s linear; } .playback-bar:hover .prog-tooltip { opacity: 1; } /* customise player controls buttons */ .player-controls__buttons { position: relative; margin-bottom: 0; } .main-shuffleButton-button { position: absolute; left: 200px; } .main-skipForwardButton-button, .main-repeatButton-button, .main-skipBackButton-button, .main-shuffleButton-button { color: var(--spice-text); } .player-controls__left, .player-controls__right { gap: 16px; flex: 0; } .player-controls__right svg, .player-controls__left svg { width: 14px; height: 14px; } /* customise play button */ .main-playPauseButton-button { background-color: transparent !important; } .main-playPauseButton-button svg { width: 32px !important; height: 32px !important; color: var(--spice-button); } /* customise right side player buttons */ .control-button { color: var(--spice-text); } .main-genericButton-button { color: var(--spice-text); } /* customise player cover art */ .main-nowPlayingWidget-coverArt .cover-art { width: var(--bar-cover-art-size) !important; height: var(--bar-cover-art-size) !important; background-color: transparent; } .main-nowPlayingWidget-nowPlaying { justify-content: center; } /* style navbar */ .main-navBar-mainNav { gap: 0 !important; } .main-navBar-mainNav > div { background-color: var(--spice-sidebar); } .main-yourLibraryX-navLink { height: 48px; } /* change tab colours */ .main-navBar-mainNav .link-subtle, .main-navBar-mainNav .link-subtle svg { color: var(--spice-sidebar-text) !important; } /* give active nav tab a background */ .main-navBar-mainNav li:has(> .active) { background-color: var(--spice-tab-active); border-radius: 4px; } /* align library button with other nav items */ .main-yourLibraryX-header { padding-top: 4px !important; } .main-yourLibraryX-navItems { padding-bottom: 0 !important; padding: 8px; } .main-yourLibraryX-navItems li { padding-left: 16px; } /* remove built in scrolllist shadow */ .main-yourLibraryX-isScrolled { box-shadow: none !important; } /* round playlist images */ .x-entityImage-imageContainer { border-radius: 50% !important; background-color: transparent; width: 40px !important; height: 40px !important; align-self: center; box-shadow: none !important; } li div:has(> .x-entityImage-imageContainer), li div:has(> .main-yourLibraryX-rowCover) { justify-content: center; width: 48px; } /* folder items */ .x-entityImage-imagePlaceholder { background-color: transparent; color: var(--spice-sidebar-text); } /* local files item */ .main-yourLibraryX-rowCover { width: 40px; height: 40px; } .fRZRXRIV2YBCFLYgwDAr { border-radius: 50% !important; } .fRZRXRIV2YBCFLYgwDAr > svg { width: 15px; height: 15px; } /* remove hover effect */ li > div > div::after { background-color: transparent !important; } li > div::after { background-color: transparent !important; } /* give background to active playlist */ .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-tab-active); } /* fix scrolllist item colours */ .main-navBar-mainNav li p { color: var(--spice-sidebar-text) !important; } .main-navBar-mainNav li p svg { fill: var(--spice-sidebar-text) !important; } .main-yourLibraryX-listRowIconWrapper { fill: var(--spice-sidebar-text) !important; } /* reduce spacing between playlist name and subtitle */ .main-yourLibraryX-listRowSubtitle { margin-top: -8px; } .main-yourLibraryX-collapseButton > button { gap: 8px; color: var(--spice-sidebar-text) !important; } /* expanded sidebar buttons */ .search-searchCategory-carouselButton { background-color: transparent; } .search-searchCategory-carouselButton:hover { background-color: var(--spice-tab-active); } .search-searchCategory-carouselButton svg { fill: var(--spice-sidebar-text) !important; } .main-yourLibraryX-iconOnly { color: var(--spice-sidebar-text) !important; } .main-yourLibraryX-iconOnly:hover { background-color: var(--spice-tab-active); } .main-yourLibraryX-filterArea > div > div:first-child button { background-color: var(--spice-tab-active) !important; } .main-yourLibraryX-filterArea > div > div:first-child button > span { background-color: var(--spice-tab-active) !important; color: var(--spice-text) !important; } .main-yourLibraryX-libraryFilter .x-sortBox-sortDropdown, .main-yourLibraryX-libraryFilter .x-filterBox-expandButton, .main-yourLibraryX-libraryFilter .x-filterBox-searchIconContainer, .main-yourLibraryX-libraryFilter .x-filterBox-filterInput, .main-yourLibraryX-libraryFilter .x-filterBox-clearButton { color: var(--spice-sidebar-text); } /* hide main view backgound gradient */ .main-entityHeader-backgroundColor, .main-actionBarBackground-background, .main-topBar-background, .main-home-homeHeader { background-color: var(--spice-main) !important; background-image: none !important; } .main-topBar-background { border-radius: var(--corner-radius); } .main-topBar-overlay, .main-trackList-trackListHeader { background-color: var(--spice-main) !important; } /* fix play button icon colour */ .main-playButton-PlayButton svg { color: var(--spice-text); } /* fix playlist action bar buttons colour */ .main-actionBar-ActionBarRow button, .main-actionBar-ActionBarRow svg:not(.main-playButton-PlayButton svg) { color: rgba(var(--spice-rgb-text), 0.7); } .main-actionBar-ActionBarRow button:hover, .main-actionBar-ActionBarRow button:hover svg:not(.main-playButton-PlayButton svg) { color: var(--spice-text); } /* change playing icon from gif to svg */ .main-trackList-playingIcon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); background: var(--spice-button); content-visibility: hidden; -webkit-mask-repeat: no-repeat; } /* full screen artists background */ .main-entityHeader-container.main-entityHeader-withBackgroundImage, .main-entityHeader-background, .main-entityHeader-background.main-entityHeader-overlay:after { height: 100vh; } .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 { font-size: 120px !important; line-height: 120px !important; } .contentSpacing, .artist-artistDiscography-headerContainer { padding-left: 64px; padding-right: 64px; } .artist-artistOverview-overview .main-entityHeader-headerText { justify-content: center; } /* 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; } /* right sidebar text */ .Root__right-sidebar { --text-base: var(--spice-sidebar-text); --background-tinted-base: var(--spice-tab-active); } .Root__right-sidebar a, .Root__right-sidebar .main-trackInfo-artists a, .artist-artistOnTour-timeAndVenue.artist-artistOnTour-condensed, .Root__right-sidebar .main-nowPlayingView-creditsSource, .Root__right-sidebar .main-nowPlayingView-playNextButton, .Root__right-sidebar .main-nowPlayingView-playNext { color: var(--spice-sidebar-text); } .main-nowPlayingView-content { --text-subdued: var(--spice-sidebar-text); } /* add main backshadow */ #dribbblish-back-shadow { z-index: 5; grid-area: main-view / main-view / now-playing-bar / main-view; box-shadow: 0 0 10px 3px #0000003b; border-radius: var(--corner-radius); pointer-events: none; } /* add fade effect to playlist scrolllist */ .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] { -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%); } .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] { -webkit-mask-image: linear-gradient(transparent 0%, black 10%); mask-image: linear-gradient(transparent 0%, black 10%); } .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] { -webkit-mask-image: linear-gradient(black 90%, transparent 100%); mask-image: linear-gradient(black 90%, transparent 100%); } /* style input els */ 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; } .Root__nav-bar input { border-bottom: solid 1px var(--spice-sidebar-text) !important; color: var(--spice-sidebar-text) !important; } .Root__nav-bar input::placeholder { color: rgba(var(--spice-rgb-sidebar-text), 0.5) !important; } /* fix connect bar styles */ .main-connectBar-connectBar { color: var(--spice-main) !important; border-radius: 0 0 var(--corner-radius) var(--corner-radius); } /* 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; } /* disable dynamic lyrics background */ .lyrics-lyrics-container { --lyrics-color-inactive: rgba(var(--spice-rgb-text), 0.3) !important; } .lyrics-lyrics-background { background-color: var(--spice-main); } /* v1.2.14 */ .main-yourLibraryX-libraryContainer.main-yourLibraryX-libraryIsExpanded.main-yourLibraryX-libraryIsCollapsed, .main-yourLibraryX-libraryRootlist.main-yourLibraryX-libraryIsExpanded:not(.main-yourLibraryX-libraryIsCollapsed) { padding-bottom: 0; } [dir="ltr"] .main-nowPlayingWidget-coverExpanded { transform: none; } .ylx .main-coverSlotExpanded-container { bottom: calc(var(--main-gap) + 70px + 10px); left: calc(var(--nav-bar-width) + 10px); } .ylx.connected .main-coverSlotExpanded-container { bottom: calc(var(--main-gap) + 70px + 24px + 10px); } /* v1.2.12 -> 1.2.13 */ .main-buddyFeed-container { background-color: inherit; box-shadow: none; } .legacy-gridChange .main-coverSlotExpanded-container { left: calc(var(--nav-bar-width) + 10px); } /* v1.2.0 --> 1.2.11 */ .legacy .Root__top-container { grid-template-areas: "left-sidebar top-bar right-sidebar" "left-sidebar main-view right-sidebar" "left-sidebar now-playing-bar right-sidebar" !important; } .Root__top-container { padding: 10px 0; background-color: var(--spice-sidebar); } .Root__right-sidebar { background-color: var(--spice-sidebar); } .Root__main-view { background-color: var(--spice-main); } .main-rootlist-rootlistDivider { background-color: transparent; } .main-buddyFeed-activityMetadata .main-buddyFeed-username a, .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp, .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink { color: var(--spice-sidebar-text) !important; } .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName { color: var(--spice-sidebar-text); } .collection-icon, .premiumSpotifyIcon, .search-icon { color: var(--spice-sidebar-text) !important; } .main-confirmDialog-container { background-color: var(--spice-card); } .main-confirmDialog-container .TypeElement-canon-textBase { color: var(--spice-text); } .main-confirmDialog-buttonContainer button span { color: var(--spice-card); } .main-coverSlotExpanded-container { position: fixed; z-index: 2; width: 250px; height: 250px; bottom: calc(var(--main-gap) + var(--bar-height) + 10px); left: calc(var(--nav-bar-width) + 20px); } .connected .main-coverSlotExpanded-container { bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px); } .left-sidebar-collapsed .main-coverSlotExpanded-container { left: 82px; } .main-coverSlotExpanded-container img { border-radius: 4px; } .cover-art { border-radius: 4px; } .left-sidebar-collapsed .Root__nav-bar { width: 72px; } .left-sidebar-collapsed .main-rootlist-statusIcons { display: none; } .main-navBar-navBarLinkActive { background-color: var(--spice-tab-active); } .Root__nav-bar .main-rootlist-rootlist .os-scrollbar-handle { display: none; } .Root__top-container:has(> .Root__top-container--right-sidebar-hidden) { padding-right: 10px; } /* buddy feed w/ hidden text*/ .buddyFeed-hide-text .Root__top-container:not(:has(> .Root__top-container--right-sidebar-hidden)) .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; } .main-rootlist-rootlistDividerGradient { background: none; } .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText { opacity: 1; } .main-collectionLinkButton-collectionLinkButton, .main-createPlaylistButton-button { color: var(--spice-sidebar-text); opacity: 1; } .main-likedSongsButton-likedSongsIcon { background: none; } .main-likedSongsButton-likedSongsIcon > svg { height: 20px !important; width: 20px !important; } /* style added sidebar images */ .main-rootlist-rootlistItem a { align-items: center; border-radius: 4px; display: flex; height: 56px; gap: 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; } .legacy .Root__nav-bar .main-rootlist-wrapper, .legacy-gridChange .Root__nav-bar .main-rootlist-wrapper { height: fit-content !important; contain: none !important; } .main-navBar-mainNav li:has(> div > .active) { background-color: var(--spice-tab-active); } .main-collectionLinkButton-selected.active { background-color: var(--spice-tab-active) !important; } .legacy .main-navBar-mainNav li, .legacy-gridChange .main-navBar-mainNav li { background-color: transparent !important; } /* a.active { background-color: var(--spice-tab-active) !important; } */ .main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) { background-color: var(--spice-tab-active) !important; } .main-rootlist-rootlistItemLink { padding-left: 12px; } .main-rootlist-rootlistItem { margin-left: 8px; margin-right: 8px; padding-left: 0 !important; padding-right: 8px !important; border-radius: 4px; } .dribs-playlist-list { overflow: hidden; } .left-sidebar-collapsed .main-rootlist-expandArrow { display: none; } .main-navBar-navBarLink, .main-collectionLinkButton-collectionLinkButton, .main-createPlaylistButton-button { height: 56px !important; } .Button-md-buttonSecondary-useBrowserDefaultFocusStyle { border: 1px solid var(--spice-text); } .Button-md-buttonPrimary-useBrowserDefaultFocusStyle .ButtonInner-md { color: var(--spice-text); } /* sidebar speaker icon */ .CCeu9OfWSwIAJqA49n84 { color: var(--spice-sidebar-text); } .legacy .Root__right-sidebar .os-content { overflow-x: hidden; } .Root__right-sidebar .os-scrollbar-horizontal { display: none; } .UyzJidwrGk3awngSGIwv, .poz9gZKE7xqFwgk231J4, .xWm_uA0Co4SXVxaO7wlB { color: var(--spice-text); } .main-navBar-navBarLink { color: var(--spice-sidebar-text); } .main-navBar-navBarLink:focus, .main-navBar-navBarLink:hover { color: var(--spice-sidebar-text); } .main-createPlaylistButton-createPlaylistIcon { background-color: var(--spice-sidebar-text); } .main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited { color: var(--spice-sidebar-text) !important; } .main-rootlist-expandArrow { color: var(--spice-sidebar-text); } .main-buddyFeed-actions button, .main-buddyFeed-titleContainer { color: var(--spice-sidebar-text) !important; } .main-tag-container { background-color: var(--spice-subtext); } .main-buddyFeed-content { height: fit-content; }