From 7a8daf464a2da43cffee433d8cd1fbfca4ddd4c4 Mon Sep 17 00:00:00 2001 From: Darkkal44 Date: Mon, 8 May 2023 08:28:49 +0530 Subject: [PATCH] Fixed Evergreen Spicetify Theme --- .../spicetify/Themes/Dribbblish/README.md | 16 +- .../spicetify/Themes/Dribbblish/color.ini | 25 +- .../spicetify/Themes/Dribbblish/dribbblish.js | 266 ++++++++++++++++++ .../spicetify/Themes/Dribbblish/user.css | 110 ++------ 4 files changed, 315 insertions(+), 102 deletions(-) create mode 100755 Themes/Everforest/.config/spicetify/Themes/Dribbblish/dribbblish.js diff --git a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/README.md b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/README.md index c5ec7a6..b1c98f4 100644 --- a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/README.md +++ b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/README.md @@ -57,8 +57,11 @@ Run these commands: In **Bash**: ```bash cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish" +mkdir -p ../../Extensions +cp dribbblish.js ../../Extensions/. +spicetify config extensions dribbblish.js spicetify config current_theme Dribbblish color_scheme base -spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 +spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 spicetify apply ``` @@ -66,8 +69,10 @@ spicetify apply In **Powershell**: ```powershell cd "$(spicetify -c | Split-Path)\Themes\Dribbblish" +Copy-Item dribbblish.js ..\..\Extensions +spicetify config extensions dribbblish.js spicetify config current_theme Dribbblish color_scheme base -spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 +spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 spicetify apply ``` @@ -92,9 +97,12 @@ Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/ ``` ## Manual uninstall -Remove the dribbblish theme with the following commands +Remove the dribbblish script with the following commands ``` -spicetify config current_theme " " color_scheme " " +spicetify config extensions dribbblish.js- +``` +And remove Patch lines you added in config file earlier. Finally, run: +``` spicetify apply ``` diff --git a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/color.ini b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/color.ini index 23b0d9a..8b52407 100644 --- a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/color.ini +++ b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/color.ini @@ -1,16 +1,16 @@ [base] -text = 86918A -subtext = 4E565C -sidebar-text = 86918A -main = 232A2E -sidebar = 343F44 -player = 232A2E -card = 232A2E +text = FFFFFF +subtext = B9BBBE +sidebar-text = FFFFFF +main = 0F1212 +sidebar = 202222 +player = 0F1212 +card = 0F1212 shadow = 000000 selected-row = 797979 -button = 414B4F -button-active = 414B4F -button-disabled = D3C6AA +button = 607767 +button-active = 607767 +button-disabled = 607767 tab-active = 1E2233 notification = 1db954 notification-error = e22134 @@ -18,8 +18,7 @@ misc = BFBFBF progress-fg = CAA9E0 progress-bg = 91B1F0 - -[...] +[white] text = 363636 subtext = 3D3D3D sidebar-text = FFF9F4 @@ -194,7 +193,7 @@ selected-row = 797979 button = 31748f button-active = 31748f button-disabled = 555169 -tab-active = 31748f +tab-active = ebbcba notification = 1db954 notification-error = eb6f92 misc = 6e6a86 diff --git a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/dribbblish.js b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/dribbblish.js new file mode 100755 index 0000000..969da73 --- /dev/null +++ b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/dribbblish.js @@ -0,0 +1,266 @@ +// 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)) { + func(queries); + } else if (timeout > 0) { + setTimeout(waitForElement, 300, els, func, --timeout); + } +} + +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}); +}); + +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"); + } + 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 == 320) { + 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]) => { + 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"); + } + }); +}); + +// 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"); + const root = document.querySelector(".Root"); + + if (!Spicetify.Player.origin || !progBar || !root) { + setTimeout(Dribbblish, 300); + return; + } + + const tooltip = document.createElement("div"); + 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"; + } else { + tooltip.style.left = String(offsetX - ttWidth) + "px"; + } + 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"); + } + }); + + // filepicker for custom folder images + const filePickerForm = document.createElement("form"); + filePickerForm.setAttribute("aria-hidden", true); + filePickerForm.innerHTML = ''; + 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.onchange = () => { + if (!filePickerInput.files.length) return; + + const file = filePickerInput.files[0]; + 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 + ); + } 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", + ([uri]) => { + const id = Spicetify.URI.from(uri).id; + localStorage.removeItem("dribbblish:folder-image:" + id); + DribbblishShared.loadPlaylistImage?.call(); + }, + ([uri]) => Spicetify.URI.isFolder(uri), + "x", + ).register(); + new Spicetify.ContextMenu.Item("Choose folder image", + ([uri]) => { + filePickerInput.uri = uri; + filePickerForm.reset(); + filePickerInput.click(); + }, + ([uri]) => Spicetify.URI.isFolder(uri), + "edit", + ).register(); +})(); diff --git a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/user.css b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/user.css index 7f1558a..e6f35da 100644 --- a/Themes/Everforest/.config/spicetify/Themes/Dribbblish/user.css +++ b/Themes/Everforest/.config/spicetify/Themes/Dribbblish/user.css @@ -14,16 +14,14 @@ html.buddyFeed-hide-text { @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,14 +41,10 @@ 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, + --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; + --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; } @@ -265,11 +259,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type { .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% - ); + 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; } @@ -498,9 +488,7 @@ img.playlist-picture[src$=".svg"] { } .main-rootlist-rootlistItem { - padding-left: calc( - var(--indentation) * var(--left-sidebar-item-indentation-width) - ) !important; + padding-left: calc(var(--indentation) * var(--left-sidebar-item-indentation-width)) !important; padding-right: 0 !important; transition: padding-left 0.5s ease; } @@ -544,8 +532,7 @@ li.GlueDropTarget { padding-top: calc(var(--os-windows-icon-dodge) * 24px); } -.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows - .main-navBar-entryPoints { +.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints { padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px); } @@ -553,8 +540,7 @@ li.GlueDropTarget { padding-top: calc(var(--os-windows-icon-dodge) * 32px); } -.spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] - .main-topBar-container { +.spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .main-topBar-container { padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px); } @@ -563,10 +549,8 @@ li.GlueDropTarget { } /** 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 { +.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; } @@ -668,8 +652,7 @@ li.GlueDropTarget { } .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, -.main-collectionLinkButton-collectionLinkButton - .main-collectionLinkButton-collectionLinkText, +.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, .main-createPlaylistButton-button { opacity: 1; } @@ -703,27 +686,14 @@ li.GlueDropTarget { padding: var(--main-gap) 0; } -.Root__top-container:has(> .main-buddyFeed-container):not( - .Root__top-container--right-sidebar-hidden - ) { +.Root__top-container:has(> .main-buddyFeed-container ) { grid-template-areas: "top-bar top-bar top-bar" "nav-bar main-view right-sidebar" "nav-bar now-playing-bar right-sidebar"; } -/* for spotify v prior to 1.2.9 */ - -.Root__top-container:not(:has(> .main-buddyFeed-container)) { - grid-template-areas: - "top-bar top-bar" - "nav-bar main-view" - "nav-bar now-playing-bar"; - padding-right: var(--main-gap); -} - -/* for spotify v 1.2.9 */ -.Root__top-container.Root__top-container--right-sidebar-hidden { +.Root__top-container:not(:has(> .main-buddyFeed-container )) { grid-template-areas: "top-bar top-bar" "nav-bar main-view" @@ -757,9 +727,7 @@ html.right-expanded-cover .main-coverSlotExpanded-container { left: unset; } -html.right-expanded-cover - .Root__top-container--right-sidebar-visible - .main-coverSlotExpanded-container { +html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container { right: calc(var(--main-gap) + var(--panel-width) + 10px); left: unset; } @@ -903,21 +871,13 @@ section.contentSpacing { } /* 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="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"] { +.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"] { +.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] { -webkit-mask-image: linear-gradient(black 90%, transparent 100%); } @@ -933,11 +893,6 @@ section.contentSpacing { } /* 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; @@ -971,12 +926,12 @@ section.contentSpacing { } .main-buddyFeed-actions button { - color: var(--spice-sidebar-text); + color: var(--spice-sidebar-text) } .NdQkQZhcYIEcJnRdAYcQ, .main-buddyFeed-header { - padding-left: 0; + padding-left: 16px; } .spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR { @@ -1033,8 +988,7 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec } /* keep progress knob on page : important for js to work */ -.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) - .progress-bar__slider { +.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider { display: block; visibility: hidden; } @@ -1048,29 +1002,15 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec 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) - ); + font-family: var(--font-family, CircularSpTitle, CircularSpTitle-Tall, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif)); } [dir="ltr"] .collection-collection-tabBar {