diff --git a/dribbblish.js b/dribbblish.js index 631d465..c658dfa 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -258,6 +258,38 @@ DribbblishShared.config.register({ } }); +DribbblishShared.config.register({ + area: "Ads", + type: "checkbox", + key: "hideAds", + name: "Hide Ads", + description: `Hide ads / premium features (see: SpotifyNoPremium)`, + defaultValue: false, + onAppended: () => { + document.styleSheets[0].insertRule(/* css */ ` + /* Remove upgrade button*/ + body[hide-ads] .main-topBar-UpgradeButton { + display: none + } + `); + document.styleSheets[0].insertRule(/* css */ ` + /* Remove upgrade to premium button in user menu */ + body[hide-ads] .main-contextMenu-menuItemButton[href="https://www.spotify.com/premium/"] { + display: none + } + `); + document.styleSheets[0].insertRule(/* css */ ` + /* Remove ad placeholder in main screen */ + body[hide-ads] .main-leaderboardComponent-container { + display: none + } + `); + }, + onChange: (val) => { + document.body.setAttribute("hide-ads", val ? "" : null); + } +}); + waitForElement(["#main"], () => { DribbblishShared.config.register({ type: "select", diff --git a/user.css b/user.css index 6625a15..eff5f40 100644 --- a/user.css +++ b/user.css @@ -1,1224 +1,1224 @@ -:root { - --bar-height: 70px; - --bar-cover-art-size: 40px; - --main-gap: 10px; - --main-corner-radius: 10px; - --scrollbar-vertical-size: 8px; - --cover-border-radius: 8px; - --playbar-movement-anim-speed: 0.5s; - --image-radius: 10px; - --sidebar-icons-border-radius: 50%; - --song-transition-speed: 3s; -} - -@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; -} - -.os-scrollbar-handle { - background-color: var(--spice-text) !important; - border-radius: calc(var(--scrollbar-vertical-size) / 2); -} - -.os-scrollbar-handle:hover { - filter: brightness(80%); -} - -::-webkit-scrollbar { - width: var(--scrollbar-vertical-size); -} - -::-webkit-scrollbar-thumb { - background-color: var(--spice-text) !important; - border-radius: calc(var(--scrollbar-vertical-size) / 2); -} - -::-webkit-scrollbar-thumb:hover { - filter: brightness(80%); -} - -.main-type-mesto, -.main-type-mestoBold, -.main-type-ballad, -.main-type-balladBold, -.main-type-canon { - font-family: var(--info-font-family); - letter-spacing: normal; -} - -.main-type-ballad { - font-weight: 500; -} - -.lyrics-lyricsContainer-LyricsLine { - font-family: var(--glue-font-family); - letter-spacing: -.03em !important; -} - -.main-rootlist-rootlistDivider { - display: none; -} - -input { - background-color: unset !important; - border-radius: 0 !important; - padding: 6px 10px 6px 48px; - color: var(--spice-text) !important; -} - -input[type=range] { - -webkit-appearance: none; - background: transparent; - padding: 0px; -} - -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - width: 16px; - height: 16px; - margin-top: -4px; - border-radius: 50%; - background-color: var(--spice-text); -} - -input[type=range]::-webkit-slider-thumb:hover, -input[type=range]::-webkit-slider-thumb:active { - filter: brightness(80%); -} - -input[type=range]::after { - z-index: 9999; - content: attr(tooltip); - position: absolute; - min-width: 50px; - top: -10px; - left: 50%; - transform: translateX(calc(-50%)); - padding: 0 5px; - border-radius: 4px; - text-align: center; - color: var(--spice-sidebar-text); - background-color: var(--spice-button); - transition: opacity 0.25s ease; - opacity: 0; -} - -input[type=range]:hover::after, -input[type=range]:active::after { - opacity: 1; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 8px; - background-color: rgba(var(--spice-rgb-text), .2); - border-radius: 50vw; -} - -input[type=number], -input[type=text] { - height: 32px; - border: none; - border-radius: 4px !important; - padding: 0px 10px; - background-color: rgba(var(--spice-rgb-selected-row), .4) !important; - color: var(--spice-subtext) !important; -} - -input[type=number]:hover, -input[type=number]:active, -input[type=text]:hover, -input[type=text]:active { - background-color: rgba(var(--spice-rgb-selected-row), .6) !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; -} - -.main-playButton-PlayButton.main-playButton-primary { - color: white; -} - -.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%; -} - -.main-entityHeader-background.main-entityHeader-overlay:after { - background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main)); -} - -.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 { - font-size: 120px !important; - line-height: 120px !important; -} - -.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: var(--spice-button); - color: white; -} - -/** 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-buddyFeed { - box-shadow: unset; - -webkit-box-shadow: unset; - z-index: 0; -} - -.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-artistAndTrackName span, -.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, -.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp { - color: rgba(var(--spice-rgb-sidebar-text), 0.8); -} - -.main-buddyFeed-buddyFeedRoot .main-avatar-avatar, -.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay { - width: 32px !important; - height: 32px !important; -} - -.view-homeShortcutsGrid-shortcut { - overflow: hidden; - background-color: rgba(var(--spice-rgb-selected-row), 0.4); -} - -.view-homeShortcutsGrid-shortcut:hover { - background-color: rgba(var(--spice-rgb-selected-row), 0.6); -} - -.cover-art, -.main-userWidget-box.upd-avail, -.view-homeShortcutsGrid-shortcut, -:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) { - border-radius: var(--image-radius) !important; -} - -.main-avatar-image, -.main-userWidget-box:not(.upd-avail), -.main-avatar-userIcon, -.view-homeShortcutsGrid-shortcutLink { - border-radius: var(--sidebar-icons-border-radius) !important; -} - -.main-userWidget-box { - background-color: transparent; -} - -.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-buddyFeed-findFriendsButton { - color: var(--spice-sidebar-text); -} - -.main-connectBar-connectBar { - border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); - border: 2px solid var(--spice-main); - border-top: 0; - background-color: var(--spice-button) !important; - color: var(--spice-text) !important; -} - -.Root__nav-bar { - height: 100%; - z-index: 1; - width: var(--sidebar-width) !important; -} - -.main-buddyFeed-buddyFeedRoot { - height: 100%; -} - -.main-buddyFeed-buddyFeedRoot .os-content { - padding-top: 0 !important; -} - -html, -.Root__nav-bar, -.main-buddyFeed-buddyFeed { - 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 svg { - width: 24px !important; - height: 24px !important; -} - -.main-navBar-navBarItem { - position: relative; - padding: 0px; -} - -#spicetify-show-list >* { - 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; - background-color: var(--spice-button); - border-radius: 50%; - box-shadow: 0 0 0 2px var(--spice-sidebar); - 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 { - right: 4px; -} - -html.sidebar-hide-text .main-navBar-navBarItem span, -html.sidebar-hide-text .main-rootlist-rootlistContent span, -html.sidebar-hide-text .main-rootlist-rootlistItem span, -html.sidebar-hide-text .main-rootlist-statusIcons, -html.sidebar-hide-text .GlueDropTarget span { - display: none; -} - -.main-rootlist-rootlist { - margin-top: 0; -} - -.main-rootlist-rootlist::before, -.main-rootlist-rootlist::after { - z-index: 10; - position: absolute; - content: ""; - left: 0px; - right: 0px; - pointer-events: none; - transition: height 0.5s ease; -} - -.main-rootlist-rootlist.no-top-shadow::before { - height: 0px; -} - -.main-rootlist-rootlist.no-bottom-shadow::after { - height: 0px; -} - -.main-rootlist-rootlist::before { - top: 0px; - height: 5%; - background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent); -} - -.main-rootlist-rootlist::after { - bottom: 0px; - height: 15%; - background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent); -} - -.Root__nav-bar .os-scrollbar-vertical, -.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical { - display: none; -} - -.x-toggle-indicatorWrapper { - background-color: var(--spice-shadow); -} - -input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { - background-color: var(--spice-button-active); -} - -/** */ -.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, -.playback-bar__progress-time-elapsed, -.main-playbackBarRemainingTime-container { - 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); -} - -.Root.is-connectBarVisible .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), .2); -} - -.progress-bar__slider { - display: block !important; - opacity: 0; - transition: opacity 0.2s ease; -} - -.progress-bar:hover .progress-bar__slider, -.progress-bar:active .progress-bar__slider { - opacity: 1; -} - -.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { - transition: transform var(--playbar-movement-anim-speed) ease; -} - -.progress-bar:not(:active) .progress-bar__slider { - transition-property: left,opacity; -} - -.playback-bar .prog-tooltip { - position: absolute; - min-width: 100px; - top: -35px; - left: 50%; - transform: translateX(calc(-50%)); - padding: 0 5px; - border-radius: 4px; - text-align: center; - color: var(--spice-text); - background-color: var(--spice-button); -} - -.playback-bar:not(:active) .prog-tooltip { - transition: transform var(--playbar-movement-anim-speed) ease; -} - -.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: var(--sidebar-icons-border-radius); -} - -.main-rootlist-rootlistItem a span { - margin-left: 24px; -} - -.main-rootlist-rootlistItem { - padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)); - padding-right: 0; - transition: padding-left .5s ease; -} - -html.sidebar-hide-text .main-rootlist-rootlistItem { - padding: 0; -} - -.main-rootlist-dropIndicator { - background: var(--spice-selected-row); - height: 2px; -} - -.main-rootlist-rootlistPlaylistsScrollNode { - padding: 0px; -} - -.main-collectionLinkButton-icon, -.main-createPlaylistButton-icon { - margin: 0px; -} - -.main-navBar-navBarLink, -.main-collectionLinkButton-collectionLinkButton, -.main-createPlaylistButton-button { - gap: 24px; - height: 56px; -} - -li.GlueDropTarget { - padding: 0 8px; -} - -/** OS-specific window controls dodge */ -#main:not([top-bar^="none"]) .main-topBar-background { - -webkit-app-region: no-drag; -} - -#main:not([top-bar="none-padding"]) .main-navBar-navBar, -#main:not([top-bar="none-padding"]) .main-buddyFeed-header, -#main:not([top-bar="none-padding"]) .main-navBar-entryPoints { - padding-top: 8px !important; -} - -#main:not([top-bar^="none"]) { - padding-top: 31px; -} - -#main:not([top-bar^="none"])::before { - z-index: 999; - content: ""; - position: absolute; - top: 0px; - left: 0px; - right: 135px; - height: 31px; - background-color: rgba(0, 0, 0, 0.53); - -webkit-app-region: drag; - pointer-events: none; -} - -#main[top-bar="solid"]::before { - right: 0px; - background-color: black; -} - -#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar { - padding-top: 24px; -} - -#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints { - padding-top: 22px; -} - -#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header { - padding-top: 32px; -} - -#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container { - padding-right: 167px; -} - -.main-topBar-container { - max-width: unset; -} - -/** Custom elements */ -.dribs-playlist-list { - padding-bottom: 86px; -} - -#dribbblish-back-shadow { - position: fixed; - width: var(--main-view-width); - height: calc(var(--main-view-height) + var(--bar-height)); - box-shadow: 0 0 10px 3px #0000003b; - border-radius: var(--main-corner-radius); - z-index: 2; - pointer-events: none; -} - -#dribbblish-config { - display: none; - z-index: 99999; - position: absolute; - inset: 0px; - align-items: center; - justify-content: center; - color: var(--spice-text); -} - -#dribbblish-config[active] { - display: flex; -} - -#dribbblish-config .dribbblish-config-container { - z-index: 1; - position: relative; - max-width: 80%; - background-color: rgba(var(--spice-rgb-main), 0.9); - backdrop-filter: blur(3px); - padding: 20px 15px; - border-radius: var(--main-corner-radius); - box-shadow: 0 0 10px 3px #0000003b; - display: flex; - gap: 5px; - flex-direction: column; - align-items: center; - justify-content: center; -} - -#dribbblish-config .dribbblish-config-items { - max-height: 60vh; - overflow-y: auto; - padding: 0px 50px; -} - -.dribbblish-config-area > h2 { - text-align: center; -} - -#dribbblish-config .dribbblish-config-item { - position: relative; - width: 100%; - padding: 5px 0px; - height: min-content; - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: 1fr 1fr; - gap: 0px 10px; - grid-template-areas: - "header input" - "description input"; -} - -#dribbblish-config .dribbblish-config-item > .x-settings-title { - grid-area: header; - margin: 0px; - height: min-content; - position: relative; - bottom: 0px; -} - -#dribbblish-config .dribbblish-config-item > .x-settings-title.no-desc { - bottom: -10px; -} - -#dribbblish-config .dribbblish-config-item > .main-type-mesto { - grid-area: description; - height: min-content; -} - -#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn { - grid-area: input; -} - -#dribbblish-config .dribbblish-config-close { - position: absolute; - top: 15px; - right: 15px; -} - -#dribbblish-config .dribbblish-config-backdrop { - position: absolute; - content: ""; - inset: 0px; - backdrop-filter: blur(3px) brightness(60%); -} - -/** 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; -} - -.player-controls { - justify-content: flex-start; - flex-direction: row; -} - -.main-playPauseButton-button { - background-color: transparent; -} - -.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: 1024px) { - .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-collectionLinkButton-collectionLinkText, -.main-createPlaylistButton-text, -.main-navBar-navBarLink > span { - font-size: 14px; - font-weight: 400; - letter-spacing: normal; - line-height: 20px; - text-transform: none; -} - -.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 { - grid-template-areas: - "nav-bar main-view buddy-feed" - "nav-bar now-playing-bar buddy-feed"; - padding: var(--main-gap) 0; -} - -html:not(.buddyfeed-visible) .Root__top-container { - padding-right: var(--main-gap); -} - -/** Minimal profile button */ -span.main-userWidget-displayName, -.main-userWidget-box svg { - display: none; -} - -/** Sidebar config */ -#dribs-hidden-list { - background-color: rgba(var(--spice-rgb-main), .3); -} - -#dribs-sidebar-config { - position: relative; - width: 100%; - height: 0; - display: flex; - justify-content: space-evenly; - align-items: center; - top: -30px; - left: 0; -} - -#dribs-sidebar-config button { - min-width: 60px; - border-radius: 3px; - background-color: var(--spice-main); - color: var(--spice-text); - border: 1px solid var(--spice-text); -} -#dribs-sidebar-config button:disabled { - color: var(--spice-button-disabled); -} - -.main-navBar-entryPoints { - --left-sidebar-padding-left: 24px; - --left-sidebar-padding-right: 24px; - - padding: 0px 8px; -} - -.main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2), -.main-navBar-entryPoints, -#spicetify-show-list, -.main-rootlist-rootlistContent .os-content { - display: flex; - flex-direction: column; - gap: 5px; -} - -#spicetify-show-list:empty { - display: none; -} - -.main-rootlist-wrapper > div:nth-child(2) > li img, -.main-navBar-navBarLink > .icon { - z-index: 100; -} - -.main-collectionLinkButton-collectionLinkButton, -.main-createPlaylistButton-button { - position: relative; -} - -.main-navBar-navBarItem:hover::before, -.main-rootlist-rootlistItem:hover::before, -.main-rootlist-rootlistItemLinkActive::before, -.main-collectionLinkButton-collectionLinkButton:hover::before, -.main-collectionLinkButton-selected::before, -.main-createPlaylistButton-button:hover::before { - content: ""; - position: absolute; - inset: 0px; - background-color: rgba(var(--spice-rgb-main), 0.4); - border-radius: var(--image-radius); - pointer-events: none; -} - -.main-navBar-navBarLinkActive, -.main-collectionLinkButton-selected { - border-radius: var(--image-radius); - background-color: rgba(var(--spice-rgb-main), 0.4); -} - -.main-navBar-navBar a:hover, .main-navBar-navBar a:hover span { - color: unset !important; -} - -div.GlueDropTarget.personal-library { - padding: 0 8px; -} -div.GlueDropTarget.personal-library >* { - padding: 0 16px; - height: 56px; - border-radius: 4px; -} - -div.GlueDropTarget.personal-library >*.active { - background: transparent; -} - -/** 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.buddyfeed-visible .main-coverSlotExpanded-container { - right: calc(var(--main-gap) + var(--buddy-feed-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-buttons-button:not(.main-entityHeader-titleButton) { - color: var(--spice-main); -} - -.main-dropDown-dropDown, -.x-sortBox-sortDropdown { - background-color: rgba(var(--spice-rgb-selected-row), .4) !important; - color: var(--spice-subtext); -} - -.main-dropDown-dropDown:hover, -.x-sortBox-sortDropdown:hover { - background-color: rgba(var(--spice-rgb-selected-row), .6) !important; -} - -.connect-device-list-item:focus, -.connect-device-list-item:hover { - background-color: rgba(var(--spice-rgb-selected-row), .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), .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-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded { - z-index: 4; -} - -.main-actionBar-ActionBarRow button:not(.main-playButton-primary) { - color: var(--spice-subtext); -} +:root { + --bar-height: 70px; + --bar-cover-art-size: 40px; + --main-gap: 10px; + --main-corner-radius: 10px; + --scrollbar-vertical-size: 8px; + --cover-border-radius: 8px; + --playbar-movement-anim-speed: 0.5s; + --image-radius: 10px; + --sidebar-icons-border-radius: 50%; + --song-transition-speed: 3s; +} + +@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; +} + +.os-scrollbar-handle { + background-color: var(--spice-text) !important; + border-radius: calc(var(--scrollbar-vertical-size) / 2); +} + +.os-scrollbar-handle:hover { + filter: brightness(80%); +} + +::-webkit-scrollbar { + width: var(--scrollbar-vertical-size); +} + +::-webkit-scrollbar-thumb { + background-color: var(--spice-text) !important; + border-radius: calc(var(--scrollbar-vertical-size) / 2); +} + +::-webkit-scrollbar-thumb:hover { + filter: brightness(80%); +} + +.main-type-mesto, +.main-type-mestoBold, +.main-type-ballad, +.main-type-balladBold, +.main-type-canon { + font-family: var(--info-font-family); + letter-spacing: normal; +} + +.main-type-ballad { + font-weight: 500; +} + +.lyrics-lyricsContainer-LyricsLine { + font-family: var(--glue-font-family); + letter-spacing: -.03em !important; +} + +.main-rootlist-rootlistDivider { + display: none; +} + +input { + background-color: unset !important; + border-radius: 0 !important; + padding: 6px 10px 6px 48px; + color: var(--spice-text) !important; +} + +input[type=range] { + -webkit-appearance: none; + background: transparent; + padding: 0px; +} + +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; + height: 16px; + margin-top: -4px; + border-radius: 50%; + background-color: var(--spice-text); +} + +input[type=range]::-webkit-slider-thumb:hover, +input[type=range]::-webkit-slider-thumb:active { + filter: brightness(80%); +} + +input[type=range]::after { + z-index: 9999; + content: attr(tooltip); + position: absolute; + min-width: 50px; + top: -10px; + left: 50%; + transform: translateX(calc(-50%)); + padding: 0 5px; + border-radius: 4px; + text-align: center; + color: var(--spice-sidebar-text); + background-color: var(--spice-button); + transition: opacity 0.25s ease; + opacity: 0; +} + +input[type=range]:hover::after, +input[type=range]:active::after { + opacity: 1; +} + +input[type=range]:focus { + outline: none; +} + +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8px; + background-color: rgba(var(--spice-rgb-text), .2); + border-radius: 50vw; +} + +input[type=number], +input[type=text] { + height: 32px; + border: none; + border-radius: 4px !important; + padding: 0px 10px; + background-color: rgba(var(--spice-rgb-selected-row), .4) !important; + color: var(--spice-subtext) !important; +} + +input[type=number]:hover, +input[type=number]:active, +input[type=text]:hover, +input[type=text]:active { + background-color: rgba(var(--spice-rgb-selected-row), .6) !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; +} + +.main-playButton-PlayButton.main-playButton-primary { + color: white; +} + +.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%; +} + +.main-entityHeader-background.main-entityHeader-overlay:after { + background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main)); +} + +.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 { + font-size: 120px !important; + line-height: 120px !important; +} + +.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: var(--spice-button); + color: white; +} + +/** 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-buddyFeed { + box-shadow: unset; + -webkit-box-shadow: unset; + z-index: 0; +} + +.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-artistAndTrackName span, +.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, +.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp { + color: rgba(var(--spice-rgb-sidebar-text), 0.8); +} + +.main-buddyFeed-buddyFeedRoot .main-avatar-avatar, +.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay { + width: 32px !important; + height: 32px !important; +} + +.view-homeShortcutsGrid-shortcut { + overflow: hidden; + background-color: rgba(var(--spice-rgb-selected-row), 0.4); +} + +.view-homeShortcutsGrid-shortcut:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.6); +} + +.cover-art, +.main-userWidget-box.upd-avail, +.view-homeShortcutsGrid-shortcut, +:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) { + border-radius: var(--image-radius) !important; +} + +.main-avatar-image, +.main-userWidget-box:not(.upd-avail), +.main-avatar-userIcon, +.view-homeShortcutsGrid-shortcutLink { + border-radius: var(--sidebar-icons-border-radius) !important; +} + +.main-userWidget-box { + background-color: transparent; +} + +.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-buddyFeed-findFriendsButton { + color: var(--spice-sidebar-text); +} + +.main-connectBar-connectBar { + border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); + border: 2px solid var(--spice-main); + border-top: 0; + background-color: var(--spice-button) !important; + color: var(--spice-text) !important; +} + +.Root__nav-bar { + height: 100%; + z-index: 1; + width: var(--sidebar-width) !important; +} + +.main-buddyFeed-buddyFeedRoot { + height: 100%; +} + +.main-buddyFeed-buddyFeedRoot .os-content { + padding-top: 0 !important; +} + +html, +.Root__nav-bar, +.main-buddyFeed-buddyFeed { + 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 svg { + width: 24px !important; + height: 24px !important; +} + +.main-navBar-navBarItem { + position: relative; + padding: 0px; +} + +#spicetify-show-list >* { + 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; + background-color: var(--spice-button); + border-radius: 50%; + box-shadow: 0 0 0 2px var(--spice-sidebar); + 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 { + right: 4px; +} + +html.sidebar-hide-text .main-navBar-navBarItem span, +html.sidebar-hide-text .main-rootlist-rootlistContent span, +html.sidebar-hide-text .main-rootlist-rootlistItem span, +html.sidebar-hide-text .main-rootlist-statusIcons, +html.sidebar-hide-text .GlueDropTarget span { + display: none; +} + +.main-rootlist-rootlist { + margin-top: 0; +} + +.main-rootlist-rootlist::before, +.main-rootlist-rootlist::after { + z-index: 10; + position: absolute; + content: ""; + left: 0px; + right: 0px; + pointer-events: none; + transition: height 0.5s ease; +} + +.main-rootlist-rootlist.no-top-shadow::before { + height: 0px; +} + +.main-rootlist-rootlist.no-bottom-shadow::after { + height: 0px; +} + +.main-rootlist-rootlist::before { + top: 0px; + height: 5%; + background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent); +} + +.main-rootlist-rootlist::after { + bottom: 0px; + height: 15%; + background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent); +} + +.Root__nav-bar .os-scrollbar-vertical, +.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical { + display: none; +} + +.x-toggle-indicatorWrapper { + background-color: var(--spice-shadow); +} + +input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { + background-color: var(--spice-button-active); +} + +/** */ +.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, +.playback-bar__progress-time-elapsed, +.main-playbackBarRemainingTime-container { + 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); +} + +.Root.is-connectBarVisible .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), .2); +} + +.progress-bar__slider { + display: block !important; + opacity: 0; + transition: opacity 0.2s ease; +} + +.progress-bar:hover .progress-bar__slider, +.progress-bar:active .progress-bar__slider { + opacity: 1; +} + +.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div { + transition: transform var(--playbar-movement-anim-speed) ease; +} + +.progress-bar:not(:active) .progress-bar__slider { + transition-property: left,opacity; +} + +.playback-bar .prog-tooltip { + position: absolute; + min-width: 100px; + top: -35px; + left: 50%; + transform: translateX(calc(-50%)); + padding: 0 5px; + border-radius: 4px; + text-align: center; + color: var(--spice-text); + background-color: var(--spice-button); +} + +.playback-bar:not(:active) .prog-tooltip { + transition: transform var(--playbar-movement-anim-speed) ease; +} + +.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: var(--sidebar-icons-border-radius); +} + +.main-rootlist-rootlistItem a span { + margin-left: 24px; +} + +.main-rootlist-rootlistItem { + padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)); + padding-right: 0; + transition: padding-left .5s ease; +} + +html.sidebar-hide-text .main-rootlist-rootlistItem { + padding: 0; +} + +.main-rootlist-dropIndicator { + background: var(--spice-selected-row); + height: 2px; +} + +.main-rootlist-rootlistPlaylistsScrollNode { + padding: 0px; +} + +.main-collectionLinkButton-icon, +.main-createPlaylistButton-icon { + margin: 0px; +} + +.main-navBar-navBarLink, +.main-collectionLinkButton-collectionLinkButton, +.main-createPlaylistButton-button { + gap: 24px; + height: 56px; +} + +li.GlueDropTarget { + padding: 0 8px; +} + +/** OS-specific window controls dodge */ +#main:not([top-bar^="none"]) .main-topBar-background { + -webkit-app-region: no-drag; +} + +#main:not([top-bar="none-padding"]) .main-navBar-navBar, +#main:not([top-bar="none-padding"]) .main-buddyFeed-header, +#main:not([top-bar="none-padding"]) .main-navBar-entryPoints { + padding-top: 8px !important; +} + +#main:not([top-bar^="none"]) { + padding-top: 31px; +} + +#main:not([top-bar^="none"])::before { + z-index: 999; + content: ""; + position: absolute; + top: 0px; + left: 0px; + right: 135px; + height: 31px; + background-color: rgba(0, 0, 0, 0.53); + -webkit-app-region: drag; + pointer-events: none; +} + +#main[top-bar="solid"]::before { + right: 0px; + background-color: black; +} + +#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar { + padding-top: 24px; +} + +#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints { + padding-top: 22px; +} + +#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header { + padding-top: 32px; +} + +#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container { + padding-right: 167px; +} + +.main-topBar-container { + max-width: unset; +} + +/** Custom elements */ +.dribs-playlist-list { + padding-bottom: 86px; +} + +#dribbblish-back-shadow { + position: fixed; + width: var(--main-view-width); + height: calc(var(--main-view-height) + var(--bar-height)); + box-shadow: 0 0 10px 3px #0000003b; + border-radius: var(--main-corner-radius); + z-index: 2; + pointer-events: none; +} + +#dribbblish-config { + display: none; + z-index: 99999; + position: absolute; + inset: 0px; + align-items: center; + justify-content: center; + color: var(--spice-text); +} + +#dribbblish-config[active] { + display: flex; +} + +#dribbblish-config .dribbblish-config-container { + z-index: 1; + position: relative; + max-width: 80%; + background-color: rgba(var(--spice-rgb-main), 0.9); + backdrop-filter: blur(3px); + padding: 20px 15px; + border-radius: var(--main-corner-radius); + box-shadow: 0 0 10px 3px #0000003b; + display: flex; + gap: 5px; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#dribbblish-config .dribbblish-config-items { + max-height: 60vh; + overflow-y: auto; + padding: 0px 50px; +} + +.dribbblish-config-area > h2 { + text-align: center; +} + +#dribbblish-config .dribbblish-config-item { + position: relative; + width: 100%; + padding: 5px 0px; + height: min-content; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: 1fr 1fr; + gap: 0px 10px; + grid-template-areas: + "header input" + "description input"; +} + +#dribbblish-config .dribbblish-config-item > .x-settings-title { + grid-area: header; + margin: 0px; + height: min-content; + position: relative; + bottom: 0px; +} + +#dribbblish-config .dribbblish-config-item > .x-settings-title.no-desc { + bottom: -10px; +} + +#dribbblish-config .dribbblish-config-item > .main-type-mesto { + grid-area: description; + height: min-content; +} + +#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn { + grid-area: input; +} + +#dribbblish-config .dribbblish-config-close { + position: absolute; + top: 15px; + right: 15px; +} + +#dribbblish-config .dribbblish-config-backdrop { + position: absolute; + content: ""; + inset: 0px; + backdrop-filter: blur(3px) brightness(60%); +} + +/** 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; +} + +.player-controls { + justify-content: flex-start; + flex-direction: row; +} + +.main-playPauseButton-button { + background-color: transparent; +} + +.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: 1024px) { + .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-collectionLinkButton-collectionLinkText, +.main-createPlaylistButton-text, +.main-navBar-navBarLink > span { + font-size: 14px; + font-weight: 400; + letter-spacing: normal; + line-height: 20px; + text-transform: none; +} + +.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 { + grid-template-areas: + "nav-bar main-view buddy-feed" + "nav-bar now-playing-bar buddy-feed"; + padding: var(--main-gap) 0; +} + +html:not(.buddyfeed-visible) .Root__top-container { + padding-right: var(--main-gap); +} + +/** Minimal profile button */ +span.main-userWidget-displayName, +.main-userWidget-box svg { + display: none; +} + +/** Sidebar config */ +#dribs-hidden-list { + background-color: rgba(var(--spice-rgb-main), .3); +} + +#dribs-sidebar-config { + position: relative; + width: 100%; + height: 0; + display: flex; + justify-content: space-evenly; + align-items: center; + top: -30px; + left: 0; +} + +#dribs-sidebar-config button { + min-width: 60px; + border-radius: 3px; + background-color: var(--spice-main); + color: var(--spice-text); + border: 1px solid var(--spice-text); +} +#dribs-sidebar-config button:disabled { + color: var(--spice-button-disabled); +} + +.main-navBar-entryPoints { + --left-sidebar-padding-left: 24px; + --left-sidebar-padding-right: 24px; + + padding: 0px 8px; +} + +.main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2), +.main-navBar-entryPoints, +#spicetify-show-list, +.main-rootlist-rootlistContent .os-content { + display: flex; + flex-direction: column; + gap: 5px; +} + +#spicetify-show-list:empty { + display: none; +} + +.main-rootlist-wrapper > div:nth-child(2) > li img, +.main-navBar-navBarLink > .icon { + z-index: 100; +} + +.main-collectionLinkButton-collectionLinkButton, +.main-createPlaylistButton-button { + position: relative; +} + +.main-navBar-navBarItem:hover::before, +.main-rootlist-rootlistItem:hover::before, +.main-rootlist-rootlistItemLinkActive::before, +.main-collectionLinkButton-collectionLinkButton:hover::before, +.main-collectionLinkButton-selected::before, +.main-createPlaylistButton-button:hover::before { + content: ""; + position: absolute; + inset: 0px; + background-color: rgba(var(--spice-rgb-main), 0.4); + border-radius: var(--image-radius); + pointer-events: none; +} + +.main-navBar-navBarLinkActive, +.main-collectionLinkButton-selected { + border-radius: var(--image-radius); + background-color: rgba(var(--spice-rgb-main), 0.4); +} + +.main-navBar-navBar a:hover, .main-navBar-navBar a:hover span { + color: unset !important; +} + +div.GlueDropTarget.personal-library { + padding: 0 8px; +} +div.GlueDropTarget.personal-library >* { + padding: 0 16px; + height: 56px; + border-radius: 4px; +} + +div.GlueDropTarget.personal-library >*.active { + background: transparent; +} + +/** 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.buddyfeed-visible .main-coverSlotExpanded-container { + right: calc(var(--main-gap) + var(--buddy-feed-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-buttons-button:not(.main-entityHeader-titleButton) { + color: var(--spice-main); +} + +.main-dropDown-dropDown, +.x-sortBox-sortDropdown { + background-color: rgba(var(--spice-rgb-selected-row), .4) !important; + color: var(--spice-subtext); +} + +.main-dropDown-dropDown:hover, +.x-sortBox-sortDropdown:hover { + background-color: rgba(var(--spice-rgb-selected-row), .6) !important; +} + +.connect-device-list-item:focus, +.connect-device-list-item:hover { + background-color: rgba(var(--spice-rgb-selected-row), .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), .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-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded { + z-index: 4; +} + +.main-actionBar-ActionBarRow button:not(.main-playButton-primary) { + color: var(--spice-subtext); +} \ No newline at end of file