From 1eb8d413945d542825e08faec087d931e4e73fa8 Mon Sep 17 00:00:00 2001 From: harbassan <84175605+harbassan@users.noreply.github.com> Date: Wed, 21 Jun 2023 12:17:59 +1200 Subject: [PATCH] fix(Dribbblish): add ylx support (#953) --- Dribbblish/theme.js | 282 ++++----- Dribbblish/user.css | 1347 ++++++++++++------------------------------- 2 files changed, 478 insertions(+), 1151 deletions(-) diff --git a/Dribbblish/theme.js b/Dribbblish/theme.js index 1fdd629..bcca18e 100644 --- a/Dribbblish/theme.js +++ b/Dribbblish/theme.js @@ -1,31 +1,3 @@ -// Hide popover message -// document.getElementById("popover-container").style.height = 0; -const DribbblishShared = { - configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []), - rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true", - setRightBigCover: () => { - if (DribbblishShared.rightBigCover) { - document.documentElement.classList.add("right-expanded-cover"); - } else { - document.documentElement.classList.remove("right-expanded-cover"); - } - } -}; - -// register drib menu item -DribbblishShared.configMenu.register(); -DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item( - "Right expanded cover", - DribbblishShared.rightBigCover, - (self) => { - self.isEnabled = !self.isEnabled; - DribbblishShared.rightBigCover = self.isEnabled; - localStorage.setItem("dribs-right-big-cover", self.isEnabled); - DribbblishShared.setRightBigCover(); - } -)); -DribbblishShared.setRightBigCover(); - function waitForElement(els, func, timeout = 100) { const queries = els.map(el => document.querySelector(el)); if (queries.every(a => a)) { @@ -35,102 +7,22 @@ function waitForElement(els, func, timeout = 100) { } } -waitForElement([ - `ul[tabindex="0"]`, - `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders` -], ([root, firstItem]) => { - const listElem = firstItem.parentElement; - root.classList.add("dribs-playlist-list"); - - /** Replace Playlist name with their pictures */ - function loadPlaylistImage() { - for (const item of listElem.children) { - let link = item.querySelector("a"); - if (!link) continue; - - let [_, app, uid ] = link.pathname.split("/"); - let uri; - if (app === "playlist") { - uri = `spotify:playlist:${uid}`; - } else if (app === "folder") { - const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); - let img = link.querySelector("img"); - if (!img) { - img = document.createElement("img"); - img.classList.add("playlist-picture"); - link.prepend(img); - } - img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; - continue; - } - - Spicetify.CosmosAsync.get( - `sp://core-playlist/v1/playlist/${uri}/metadata`, - { policy: { picture: true } } - ).then(res => { - const meta = res.metadata; - let img = link.querySelector("img"); - if (!img) { - img = document.createElement("img"); - img.classList.add("playlist-picture"); - link.prepend(img); - } - img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; - }); - } - } - - DribbblishShared.loadPlaylistImage = loadPlaylistImage; - loadPlaylistImage(); - - new MutationObserver(loadPlaylistImage) - .observe(listElem, {childList: true}); -}); - +// back shadow waitForElement([".Root__top-container"], ([topContainer]) => { const shadow = document.createElement("div"); shadow.id = "dribbblish-back-shadow"; topContainer.prepend(shadow); -}); -// allow resizing of the navbar -waitForElement([ - ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input" -], ([resizer]) => { - const observer = new MutationObserver(updateVariable); - observer.observe(resizer, { attributes: true, attributeFilter: ["value"]}); - function updateVariable() { - let value = resizer.value; - if (value < 121) { - value = 72; - document.documentElement.classList.add("sidebar-hide-text"); - } else { - document.documentElement.classList.remove("sidebar-hide-text"); - } - document.documentElement.style.setProperty( - "--sidebar-width", value + "px"); + // check if element has two children + const mainNav = topContainer.querySelector(".main-navBar-mainNav"); + if (mainNav && mainNav.childElementCount === 1) { + document.documentElement.classList.add("legacy-nav"); + legacy(); } - updateVariable(); -}); - -// allow resizing of the buddy feed -waitForElement([".Root__right-sidebar .LayoutResizer__input, .Root__right-sidebar .LayoutResizer__resize-bar input"], ([resizer]) => { - const observer = new MutationObserver(updateVariable); - observer.observe(resizer, { attributes: true, attributeFilter: ["value"] }); - function updateVariable() { - let value = resizer.value; - if (value == 280) { - value = 72; - document.documentElement.classList.add("buddyFeed-hide-text"); - } else { - document.documentElement.classList.remove("buddyFeed-hide-text"); - } - } - updateVariable(); }); // add fade effect on playlist/folder list -waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => { +waitForElement([".main-navBar-mainNav .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => { scrollNode.setAttribute("fade", "bottom"); scrollNode.addEventListener("scroll", () => { if (scrollNode.scrollTop == 0) { @@ -143,26 +35,6 @@ waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars- }); }); -// improve styles at smaller sizes -waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => { - const observer = new ResizeObserver(updateVariable); - observer.observe(resizeHost); - function updateVariable([ event ]) { - document.documentElement.style.setProperty( - "--main-view-width", event.contentRect.width + "px"); - if (event.contentRect.width < 700) { - document.documentElement.classList.add("minimal-player"); - } else { - document.documentElement.classList.remove("minimal-player"); - } - if (event.contentRect.width < 550) { - document.documentElement.classList.add("extra-minimal-player"); - } else { - document.documentElement.classList.remove("extra-minimal-player"); - } - } -}); - (function Dribbblish() { // dynamic playback time tooltip const progBar = document.querySelector(".playback-bar"); @@ -177,33 +49,106 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => tooltip.className = "prog-tooltip"; progBar.append(tooltip); - const progKnob = progBar.querySelector(".progress-bar__slider"); - function updateProgTime({ data: e }) { - const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2; const maxWidth = progBar.offsetWidth; const curWidth = Spicetify.Player.getProgressPercent() * maxWidth; const ttWidth = tooltip.offsetWidth / 2; - if (curWidth < ttWidth) { - tooltip.style.left = String(offsetX) + "px"; - } else if (curWidth > maxWidth - ttWidth) { - tooltip.style.left = String(offsetX - ttWidth * 2) + "px"; + if (curWidth < ttWidth + 12) { + tooltip.style.left = "12px"; + } else if (curWidth > maxWidth - ttWidth - 12) { + tooltip.style.left = String(maxWidth - ttWidth * 2 - 12) + "px"; } else { - tooltip.style.left = String(offsetX - ttWidth) + "px"; + tooltip.style.left = String(curWidth - ttWidth) + "px"; } - tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + - Spicetify.Player.formatTime(Spicetify.Player.getDuration()); + tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration()); } Spicetify.Player.addEventListener("onprogress", updateProgTime); updateProgTime({ data: Spicetify.Player.getProgress() }); +})(); - Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => { - const isExternal = state.devices.some(a => a.is_active); - if (isExternal) { - root.classList.add("is-connectBarVisible"); - } else { - root.classList.remove("is-connectBarVisible"); +// LEGACY NAVBAR ONLY + +function legacy() { + if (!Spicetify.Platform) { + setTimeout(legacy, 300); + return; + } + + let DribbblishShared = {}; + + // allow resizing of the navbar + waitForElement([".Root__nav-bar .LayoutResizer__resize-bar"], ([resizer]) => { + console.log(resizer); + const observer = new MutationObserver(updateVariable); + observer.observe(resizer, { attributes: true, attributeFilter: ["class"] }); + function updateVariable() { + if (resizer.classList.contains("LayoutResizer__resize-bar-east")) { + document.documentElement.style.setProperty("--left-sidebar-width", "72px"); + document.documentElement.classList.add("left-sidebar-collapsed"); + } else { + document.documentElement.classList.remove("left-sidebar-collapsed"); + } } + updateVariable(); + }); + + // add fade effect on playlist/folder list + waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => { + scrollNode.setAttribute("fade", "bottom"); + scrollNode.addEventListener("scroll", () => { + if (scrollNode.scrollTop == 0) { + scrollNode.setAttribute("fade", "bottom"); + } else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) { + scrollNode.setAttribute("fade", "top"); + } else { + scrollNode.setAttribute("fade", "full"); + } + }); + }); + + waitForElement([`ul[tabindex="0"]`, `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`], ([root, firstItem]) => { + const listElem = firstItem.parentElement; + root.classList.add("dribs-playlist-list"); + + /** Replace Playlist name with their pictures */ + function loadPlaylistImage() { + for (const item of listElem.children) { + let link = item.querySelector("a"); + if (!link) continue; + + let [_, app, uid] = link.pathname.split("/"); + let uri; + if (app === "playlist") { + uri = `spotify:playlist:${uid}`; + } else if (app === "folder") { + const base64 = localStorage.getItem("dribbblish:folder-image:" + uid); + let img = link.querySelector("img"); + if (!img) { + img = document.createElement("img"); + img.classList.add("playlist-picture"); + link.prepend(img); + } + img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; + continue; + } + + Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, { policy: { picture: true } }).then(res => { + const meta = res.metadata; + let img = link.querySelector("img"); + if (!img) { + img = document.createElement("img"); + img.classList.add("playlist-picture"); + link.prepend(img); + } + img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg"; + }); + } + } + + DribbblishShared.loadPlaylistImage = loadPlaylistImage; + loadPlaylistImage(); + + new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true }); }); // filepicker for custom folder images @@ -213,54 +158,45 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => document.body.appendChild(filePickerForm); /** @type {HTMLInputElement} */ const filePickerInput = filePickerForm.childNodes[0]; - filePickerInput.accept = [ - "image/jpeg", - "image/apng", - "image/avif", - "image/gif", - "image/png", - "image/svg+xml", - "image/webp" - ].join(","); + filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(","); filePickerInput.onchange = () => { if (!filePickerInput.files.length) return; const file = filePickerInput.files[0]; - const reader = new FileReader; - reader.onload = (event) => { + const reader = new FileReader(); + reader.onload = event => { const result = event.target.result; const id = Spicetify.URI.from(filePickerInput.uri).id; try { - localStorage.setItem( - "dribbblish:folder-image:" + id, - result - ); + localStorage.setItem("dribbblish:folder-image:" + id, result); } catch { Spicetify.showNotification("File too large"); } DribbblishShared.loadPlaylistImage?.call(); - } + }; reader.readAsDataURL(file); - } + }; // context menu items for custom folder images - new Spicetify.ContextMenu.Item("Remove folder image", + new Spicetify.ContextMenu.Item( + "Remove folder image", ([uri]) => { const id = Spicetify.URI.from(uri).id; localStorage.removeItem("dribbblish:folder-image:" + id); DribbblishShared.loadPlaylistImage?.call(); }, ([uri]) => Spicetify.URI.isFolder(uri), - "x", + "x" ).register(); - new Spicetify.ContextMenu.Item("Choose folder image", + new Spicetify.ContextMenu.Item( + "Choose folder image", ([uri]) => { filePickerInput.uri = uri; filePickerForm.reset(); filePickerInput.click(); }, ([uri]) => Spicetify.URI.isFolder(uri), - "edit", + "edit" ).register(); -})(); +} diff --git a/Dribbblish/user.css b/Dribbblish/user.css index f470e5a..d368a3d 100644 --- a/Dribbblish/user.css +++ b/Dribbblish/user.css @@ -1,29 +1,20 @@ :root { - --bar-height: 70px; + --corner-radius: 10px; --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; + --scrollbar-vertical-size: 10px; + --scrollbar-horizontal-size: 10px; } @font-face { font-family: "Google Sans Display"; - src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") - format("woff2"); + 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"); + src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2"); font-style: normal; font-weight: 500; } @@ -43,554 +34,95 @@ html.buddyFeed-hide-text { } 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; + --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__top-container { + grid-template-areas: + "left-sidebar main-view right-sidebar" + "left-sidebar now-playing-bar right-sidebar"; + gap: 0; + padding-left: 0 !important; } .Root__now-playing-bar { - border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius); - background-color: unset; + background-color: var(--spice-player); + border-radius: 0 0 var(--corner-radius) var(--corner-radius) !important; } -.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; +.Root__main-view { + border-radius: var(--corner-radius) var(--corner-radius) 0 0 !important; } -.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__right-sidebar { + padding-left: 8px; +} +.Root__right-sidebar:not(:has(> aside)) { + padding-left: 0; } -.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; +.Root__right-sidebar > aside { + border-radius: var(--corner-radius) !important; + box-shadow: 0 0 10px 3px #0000003b; } +/* move the progress bar to the top */ .playback-bar { position: absolute; - width: var(--main-view-width); - left: var(--sidebar-width); - bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2); + left: 0; + top: -5px; } - -/* 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-nowPlayingBar-nowPlayingBar { + position: relative; + padding-inline-end: 16px !important; } - -.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; + --progress-bar-radius: 0; --fg-color: var(--spice-button); --bg-color: rgba(var(--spice-rgb-text), 0.2); } -.minimal-player .player-controls__buttons { - width: 120px; - gap: 0px; +/* 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; } -.minimal-player .player-controls__left, -.minimal-player .player-controls__right { - --button-size: 16px !important; - gap: 0px; +/* 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; } -.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 { +/* hide time elapsed */ +.main-playbackBarRemainingTime-container, +.playback-bar__progress-time-elapsed { 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; -} - +/* custom dynamic prog tooltip */ .playback-bar .prog-tooltip { position: absolute; min-width: 100px; @@ -603,491 +135,350 @@ li.GlueDropTarget { color: var(--spice-text); background-color: var(--spice-button); opacity: 0; - transition: opacity, left 0.2s ease; + transition: opacity 0.2s linear, left 0.2s linear; } - .playback-bar:hover .prog-tooltip { opacity: 1; } -/** Rearrange player bar */ -.main-nowPlayingBar-left { - order: 1; - flex: 1; - width: auto; - min-width: 0 !important; +/* 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; } -.main-nowPlayingBar-center { - order: 0; - flex: 1; - width: auto; - min-width: unset !important; +/* customise play button */ +.main-playPauseButton-button { + background-color: transparent !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 */ +/* 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; +} +/* 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; +} +/* 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-text) !important; +} +.main-navBar-mainNav li p svg { + fill: var(--spice-text) !important; +} +/* reduce spacing between playlist name and subtitle */ +.main-yourLibraryX-listRowSubtitle { + margin-top: -8px; +} +.main-yourLibraryX-collapseButton > button { + gap: 8px; +} +/* expanded sidebar buttons */ +.search-searchCategory-carouselButton { + background-color: transparent; +} +.search-searchCategory-carouselButton:hover { + background-color: var(--spice-tab-active); +} +.main-yourLibraryX-iconOnly:hover { + background-color: var(--spice-tab-active); + color: var(--spice-text); +} +.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-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); +} +/* 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; } - -@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(> .Root__right-sidebar > .main-buddyFeed-container):not( - .Root__top-container--right-sidebar-hidden - ) { - grid-template-areas: - "top-bar top-bar top-bar" - "left-sidebar main-view right-sidebar" - "left-sidebar now-playing-bar right-sidebar"; -} - -/* for spotify v prior to 1.2.9 */ - -.Root__top-container:not(:has(> .Root__right-sidebar > .main-buddyFeed-container)) { - grid-template-areas: - "top-bar top-bar" - "left-sidebar main-view" - "left-sidebar 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" - "left-sidebar main-view" - "left-sidebar 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; +.artist-artistOverview-overview .main-entityHeader-headerText { 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 { +.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) - ); +/* 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; } -[dir="ltr"] .collection-collection-tabBar { - padding-left: 0; +/* 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%); } -.marketplace-tabBar, -.main-topBar-topbarContent { - padding-left: 16px; +/* 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::placeholder { + color: var(--spice-subtext) !important; } -/* playbutton color */ -.main-playButton-PlayButton > button > span { - color: var(--spice-text); +/* LEGACY NAVBAR ONLY */ +.legacy-nav .Root__top-container { + padding: 8px; + background-color: var(--spice-sidebar); } - -/* lyrics background */ -.lyrics-lyrics-background { +.legacy-nav .Root__main-view { background-color: var(--spice-main); } +.legacy-nav .main-rootlist-rootlistDivider { + background-color: transparent; +} +.legacy-nav .main-rootlist-rootlistDividerGradient { + background: none; +} +.legacy-nav .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, +.legacy-nav .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText { + opacity: 1; +} +.legacy-nav .main-collectionLinkButton-collectionLinkButton, +.legacy-nav .main-createPlaylistButton-button { + color: var(--spice-subtext); + opacity: 1; +} +.legacy-nav .main-likedSongsButton-likedSongsIcon { + background: none; +} +.legacy-nav .main-likedSongsButton-likedSongsIcon > svg { + height: 20px !important; + width: 20px !important; +} +/* style added sidebar images */ +.legacy-nav .main-rootlist-rootlistItem a { + align-items: center; + border-radius: 4px; + display: flex; + height: 56px; + gap: 12px; +} +.legacy-nav img.playlist-picture { + width: 32px; + height: 32px; + flex: 0 0 32px; + background-size: cover; + background-position: center; + border-radius: 50%; +} +.legacy-nav img.playlist-picture[src$=".svg"] { + width: 24px; + height: 24px; + border-radius: 0; +} +.legacy-nav .Root__nav-bar .main-rootlist-wrapper { + height: fit-content !important; + contain: none !important; +} +.legacy-nav .main-navBar-mainNav li:has(> div > .active) { + background-color: var(--spice-tab-active); +} +.legacy-nav .main-collectionLinkButton-selected.active { + background-color: var(--spice-tab-active) !important; +} +.legacy-nav .main-navBar-mainNav li { + background-color: transparent !important; +} +.legacy-nav a.active { + background-color: var(--spice-tab-active) !important; +} +.legacy-nav .main-rootlist-rootlistItem:has(> .main-rootlist-rootlistItemLinkActive) { + background-color: var(--spice-tab-active) !important; +} +.legacy-nav .main-rootlist-rootlistItemLink { + padding-left: 12px; +} +.legacy-nav .main-rootlist-rootlistItem { + margin-left: 8px; + margin-right: 8px; + padding-left: 0; + padding-right: 8px; + border-radius: 4px; +} +.legacy-nav .dribs-playlist-list { + overflow: hidden; +} +.legacy-nav.left-sidebar-collapsed .main-rootlist-expandArrow { + display: none; +} +.legacy-nav .main-navBar-navBarLink, +.legacy-nav .main-collectionLinkButton-collectionLinkButton { + height: 56px !important; +}