diff --git a/theme.js b/theme.js index 386ab55..fe34822 100644 --- a/theme.js +++ b/theme.js @@ -1,14 +1,26 @@ /* Based on https://github.com/harbassan/spicetify-galaxy/blob/main/galaxy.js Credits to harbassan */ -(function retroblur() { +(async function retroblur() { const YouTubeSVG = `` if (!(Spicetify.Player.data && Spicetify.Platform)) { setTimeout(retroblur, 100); return; } + if (typeof Marketplace !== 'undefined') console.log("(Retroblur) Selected marketplace theme: "+Marketplace.export()["marketplace:installed-themes"]) + async function waitForMarketplaceColors() { + return new Promise((resolve) => { + setInterval(() => { + if (typeof Marketplace == 'undefined' || Marketplace.export()["marketplace:installed-themes"] == "[]") resolve(null); + const marketplaceScheme = document.querySelector("style.marketplaceCSS.marketplaceScheme"); + if (marketplaceScheme) { + resolve(marketplaceScheme); + } + }, 50); + }); + } - console.log("retroblur wallpaper changer running"); + console.log("(Retroblur) Wallpaper Changer running"); Object.keys(localStorage).forEach(item => { if (item.includes("retroblur:temp")) localStorage.removeItem(item); @@ -28,30 +40,32 @@ } var defImage = `https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true`; - console.log(getComputedStyle(document.body).getPropertyValue("--spice-button")) - switch (getComputedStyle(document.body).getPropertyValue("--spice-button")) { + console.log("(Retroblur) Button color is '"+getComputedStyle(document.body).getPropertyValue("--spice-button")+"'") + const marketplaceSchemeCSS = await waitForMarketplaceColors(); + const buttonColor = marketplaceSchemeCSS == null ? getComputedStyle(document.body).getPropertyValue("--spice-button") : getComputedStyle(marketplaceSchemeCSS).getPropertyValue("--spice-button"); + switch (buttonColor) { case " #00bbff": { - console.log("setting default wallpaper to water"); + console.log("(Retroblur) Setting default wallpaper to Water"); defImage = "https://images.unsplash.com/photo-1502933691298-84fc14542831?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"; break; } case " #b0fd68": { - console.log("setting default wallpaper to lush"); + console.log("(Retroblur) Setting default wallpaper to Lush"); defImage = "https://images3.alphacoders.com/356/35627.jpg"; break; } case " #ceeb26": { - console.log("setting default wallpaper to sun"); + console.log("(Retroblur) Setting default wallpaper to Sun"); defImage = "https://images.unsplash.com/photo-1516370873344-fb7c61054fa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"; break; } case " #ebb726": { - console.log("setting default wallpaper to sunset"); + console.log("(Retroblur) Setting default wallpaper to Sunset"); defImage = "https://4kwallpapers.com/images/walls/thumbs_3t/4928.jpg"; break; } case " #a10003": { - console.log("setting default wallpaper to mercy"); + console.log("(Retroblur) Setting default wallpaper to Mercy"); defImage = "https://images3.alphacoders.com/356/35627.jpg"; break; } @@ -63,7 +77,7 @@ var image = imageData; if (config.matchWallpaperToTheme) image = defImage; document.body.style.backgroundImage = "url("+image+")"; - console.log("setBG"+image) + console.log("(Retroblur) Setting Wallpaper: "+image) } // input for custom background images diff --git a/user.css b/user.css index 9cf5994..f43c28c 100644 --- a/user.css +++ b/user.css @@ -6,7 +6,8 @@ --scrollbars: unset; --spice-main: transparent; --spice-misc: rgba(30, 30, 30, 0.8); - --spice-player: rgba(30, 30, 30, 0.5); + --spice-player: rgba(30, 30, 30, 0.45); + --retroblur-player: rgba(30, 30, 30, 0.45); /* --spice-player is changed by marketplace on color change */ } /* Set the wallpaper to one matching your color scheme @@ -37,7 +38,7 @@ body { /* Set the wallpaper link below */ /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */ - background-image: linear-gradient(left, #000000, #000000); + background: #000000; /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ background-repeat: no-repeat; background-size: 100%; @@ -161,9 +162,10 @@ div[aria-selected="true"] > div > div.main-trackList-rowSectionStart > div > div color: black; opacity: 90%; } -.iUSAh1wdhXLk9hHSbkCA.hsrxlVHxK0zZrgarkxuA:after { +#main > div > div.Root__top-container.Root__top-container--right-sidebar-hidden > div.Root__now-playing-bar > footer > div.main-nowPlayingBar-nowPlayingBar > div.main-nowPlayingBar-right > div > div.main-contextMenu-tippyWrapper > div > div { transform: scaleY(-1); bottom: 67px; + opacity: 90%; } .yaVzc4bseRnztmfRv_u3, .volume-bar .progress-bar__slider { filter: drop-shadow(0 0 6px var(--spice-button)) !important; @@ -235,6 +237,7 @@ div.GlueDropTarget.personal-library { /* Shows a reflection of the big cover image */ .main-coverSlotExpanded-container { -webkit-box-reflect: below; + position: initial; } .main-home-content, .main-entityHeader-backgroundColor, .main-actionBar-ActionBar, .content-spacing, :root, .main-navBar-navBar, .D_XKXBZDhgpM1KrmKy3O, .spotify__container--is-desktop:not(.fullscreen) .main-navBar-entryPoints { background-color: transparent !important; @@ -940,7 +943,7 @@ CANVAS!!! /* Fix your podcasts items having no background */ .TT1tIewS2iI8Uz8kLuQB { backdrop-filter: blur(10px); - background: var(--spice-player); + background: var(--retroblur-player); border-radius: 10px; } .TT1tIewS2iI8Uz8kLuQB:hover { @@ -950,7 +953,7 @@ CANVAS!!! #marketplace-readme, .x-settings-container { border-radius: 10px; backdrop-filter: blur(10px); - background: var(--spice-player) !important; + background: var(--retroblur-player) !important; } #marketplace-readme a { color: var(--spice-text) !important; @@ -1095,4 +1098,14 @@ span.toggle.enabled { } #wallpaper-select > div.main-playlistEditDetailsModal-imageChangeButton > div > button { border-radius: 10px; +} +.playlist-playlist-playlistContent { + background: transparent; +} +/* Fixes bottom bar not being transparent after color change in marketplace */ +.main-nowPlayingBar-container { + background-color: var(--retroblur-player); +} +a[class*='-tabBar-active'] { + backdrop-filter: blur(2px); } \ No newline at end of file