From 860cdb4925f583c990ec0e86aa56cd2b654b8123 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Sun, 24 Oct 2021 23:15:15 +0200 Subject: [PATCH] add prettier action --- .github/workflows/prettier.yml | 26 + .prettierignore | 1 + .prettierrc | 6 + dribbblish-dynamic.js | 944 +++++------ dribbblish.js | 50 +- user.css | 2768 ++++++++++++++++---------------- 6 files changed, 1910 insertions(+), 1885 deletions(-) create mode 100644 .github/workflows/prettier.yml create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml new file mode 100644 index 0000000..b6f481a --- /dev/null +++ b/.github/workflows/prettier.yml @@ -0,0 +1,26 @@ +name: Prettier + +on: + pull_request: + push: + branches: + - master + +jobs: + prettier: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v2 + with: + # Make sure the actual branch is checked out when running on pull requests + ref: ${{ github.head_ref }} + # This is important to fetch the changes to the previous commit + fetch-depth: 0 + + - name: Prettify code + uses: creyD/prettier_action@v4.0 + with: + prettier_options: --write **/*.{js,css} + same_commit: True \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c3d3691 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +Vibrant.min.js \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a7d3ebf --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "endOfLine": "crlf", + "tabWidth": 4, + "trailingComma": "none", + "printWidth": 999999 +} diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js index b067afa..9a64aed 100644 --- a/dribbblish-dynamic.js +++ b/dribbblish-dynamic.js @@ -1,469 +1,475 @@ -let current = '2.6.0' - -/* css is injected so this works with untouched user.css from Dribbblish */ -/* progressbar tooltip text color */ -document.styleSheets[0].insertRule(` - .playback-bar .prog-tooltip { - color: var(--spice-sidebar-text) !important; - }`) - -/* edit button of CustomApps */ -document.styleSheets[0].insertRule(` - .reddit-sort-container button.switch, - .new-releases-header button.switch, - .lyrics-tabBar-header button.switch { - background-color: rgba(var(--spice-rgb-subtext), 0.15) !important; - color: var(--spice-text); - }`) - -document.styleSheets[0].insertRule(` - .reddit-sort-container button.switch:hover, - .new-releases-header button.switch:hover, - .lyrics-tabBar-header button.switch:hover { - background-color: rgba(var(--spice-rgb-subtext), 0.3) !important; - }`) - -document.styleSheets[0].insertRule(` - .lyrics-lyricsContainer-LyricsBackground { - background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important; - }`) - -/* big cover opacity on hover */ -document.styleSheets[0].insertRule(` - .main-coverSlotExpanded-container:hover .cover-art, - .main-coverSlotExpanded-container:hover img { - opacity: 0.5; - }`) - -document.styleSheets[0].insertRule(` - .main-navBar-navBar a:hover, - .main-navBar-navBar a:hover span, - .main-buddyFeed-activityMetadata a:hover { - color: var(--spice-shadow) !important; - }`) - -document.styleSheets[0].insertRule(` - .collection-collectionEntityHeroCard-likedSongs, - .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link, - .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer, - .x-heroCategoryCard-heroTitle, - .main-rootlist-expandArrow:focus, - .main-rootlist-expandArrow:hover, - .main-rootlist-textWrapper:focus, - .main-rootlist-textWrapper:hover, - .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-sidebar-text) !important; - }`) - -/* Config settings */ - -DribbblishShared.config.register({ - area: "Animations & Transitions", - type: "slider", - key: "fadeDuration", - name: "Color Fade Duration", - description: "Select the duration of the color fading transition", - defaultValue: 0.5, - data: { - min: 0, - max: 10, - step: 0.1, - suffix: "s" - }, - onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s") -}); - -// waitForElement because Spicetify is not initialized at startup -waitForElement(["#main"], () => { - DribbblishShared.config.register({ - area: { name: "About", order: 999 }, - type: "button", - key: "aboutDribbblish", - name: "Info", - description: ` - OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version} - Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple} - Dribbblish: v${current} - `, - data: "Copy", - onChange: (val) => { - copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description); - Spicetify.showNotification("Copied Versions"); - } - }); -}); - -function capitalizeFirstLetter(string) { - return string.charAt(0).toUpperCase() + string.slice(1); - } - -function copyToClipboard(text) { - var input = document.createElement('textarea'); - input.style.display = "fixed"; - input.innerHTML = text; - document.body.appendChild(input); - input.select(); - var result = document.execCommand('copy'); - document.body.removeChild(input); - return result; -} - -/* js */ -function getAlbumInfo(uri) { - return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`) -} - -function isLight(hex) { - var [r,g,b] = hexToRgb(hex).map(Number) - const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000 - return brightness > 128 -} - -function hexToRgb(hex) { - var bigint = parseInt(hex.replace("#",""), 16) - var r = (bigint >> 16) & 255 - var g = (bigint >> 8) & 255 - var b = bigint & 255 - return [r, g, b] -} - -function rgbToHex([r, g, b]) { - const rgb = (r << 16) | (g << 8) | (b << 0) - return '#' + (0x1000000 + rgb).toString(16).slice(1) -} - -const LightenDarkenColor = (h, p) => '#' + [1, 3, 5].map(s => parseInt(h.substr(s, 2), 16)).map(c => parseInt((c * (100 + p)) / 100)).map(c => (c < 255 ? c : 255)).map(c => c.toString(16).padStart(2, '0')).join('') - -function rgbToHsl([r, g, b]) { - r /= 255, g /= 255, b /= 255 - var max = Math.max(r, g, b), min = Math.min(r, g, b) - var h, s, l = (max + min) / 2 - if (max == min) { - h = s = 0 // achromatic - } else { - var d = max - min - s = l > 0.5 ? d / (2 - max - min) : d / (max + min) - switch (max) { - case r: h = (g - b) / d + (g < b ? 6 : 0) - break - case g: h = (b - r) / d + 2 - break - case b: h = (r - g) / d + 4 - break - } - h /= 6 - } - return [h, s, l] -} - -function hslToRgb([h, s, l]) { - var r, g, b - if (s == 0) { - r = g = b = l // achromatic - } else { - function hue2rgb(p, q, t) { - if (t < 0) t += 1 - if (t > 1) t -= 1 - if (t < 1/6) return p + (q - p) * 6 * t - if (t < 1/2) return q - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6 - return p - } - var q = l < 0.5 ? l * (1 + s) : l + s - l * s - var p = 2 * l - q - r = hue2rgb(p, q, h + 1/3) - g = hue2rgb(p, q, h) - b = hue2rgb(p, q, h - 1/3) - } - return [r * 255, g * 255, b * 255] -} - -function setLightness(hex, lightness) { - hsl = rgbToHsl(hexToRgb(hex)) - hsl[2] = lightness - return rgbToHex(hslToRgb(hsl)) -} - -let textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text') -let textColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main') -let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-sidebar') - -function setRootColor(name, colHex) { - let root = document.documentElement - if (root===null) return - root.style.setProperty('--spice-' + name, colHex) - root.style.setProperty('--spice-rgb-' + name, hexToRgb(colHex).join(',')) -} - -function toggleDark(setDark) { - if (setDark===undefined) setDark = isLight(textColorBg) - - document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1) - textColorBg = setDark ? "#0A0A0A" : "#FAFAFA" - - setRootColor('main', textColorBg) - setRootColor('player', textColorBg) - setRootColor('card', setDark ? "#040404" : "#ECECEC") - setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D") - setRootColor('notification', setDark ? "#303030" : "#DDDDDD") - - updateColors(textColor, sidebarColor) -} - -function checkDarkLightMode() { - if (DribbblishShared.config.get("theme") != 2) return; - - const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) - + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]) - const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) - + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]) - - const now = new Date() - const time = 60 * now.getHours() + now.getMinutes() - - if (end < start) - dark = start <= time || time < end - else - dark = start <= time && time < end - toggleDark(dark); -} -// Run every Minute to check time and set dark / light mode -setInterval(checkDarkLightMode, 60000); - -DribbblishShared.config.register({ - area: "Theme", - type: "select", - data: ["Dark", "Light", "Based on Time"], - key: "theme", - name: "Theme", - description: "Select Dark / Bright mode", - defaultValue: 0, - showChildren: (val) => { - return val == 2; - }, - onChange: (val) => { - switch (val) { - case 0: - toggleDark(true); - break; - case 1: - toggleDark(false); - break; - case 2: - checkDarkLightMode(); - break; - } - }, - children: [ - { - type: "time", - key: "darkModeOnTime", - name: "Dark Mode On Time", - description: "Beginning of Dark mode time", - defaultValue: "20:00", - fireInitialChange: false, - onChange: checkDarkLightMode - }, - { - type: "time", - key: "darkModeOffTime", - name: "Dark Mode Off Time", - description: "End of Dark mode time", - defaultValue: "06:00", - fireInitialChange: false, - onChange: checkDarkLightMode - } - ] -}); - -var currentColor; -var currentSideColor; -var colorFadeInterval = false; - -function updateColors(textColHex, sideColHex) { - let isLightBg = isLight(textColorBg) - if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode - - let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20) - let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40) - let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14) - setRootColor('text', textColHex) - setRootColor('button', darkerColHex) - setRootColor('button-active', darkColHex) - setRootColor('selected-row', darkerColHex) - setRootColor('tab-active', buttonBgColHex) - setRootColor('button-disabled', buttonBgColHex) - setRootColor('sidebar', sideColHex) -} - -let nearArtistSpanText = "" -let coverListenerInstalled = true -async function songchange() { - try { - // warning popup - if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`); - } catch (err) { - console.error(err); - } - - let album_uri = Spicetify.Player.data.track.metadata.album_uri - let bgImage = Spicetify.Player.data.track.metadata.image_url - if (bgImage === undefined) { - bgImage = "/images/tracklist-row-song-fallback.svg" - textColor = "#509bf5" - updateColors(textColor, textColor) - coverListenerInstalled = false - } - if (!coverListenerInstalled) - hookCoverChange(true) - - if (album_uri !== undefined && !album_uri.includes('spotify:show')) { - const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", "")) - - let album_date = new Date(albumInfo.year, (albumInfo.month || 1)-1, albumInfo.day|| 0) - let recent_date = new Date() - recent_date.setMonth(recent_date.getMonth() - 6) - album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' }) - album_link = ""+Spicetify.Player.data.track.metadata.album_title+"" - - nearArtistSpanText = album_link + " • " + album_date - } else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) { - // podcast - bgImage = bgImage.replace('spotify:image:', 'https://i.scdn.co/image/') - nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title - } else if (Spicetify.Player.data.track.metadata.is_local=="true") { - // local file - nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title - } else if (Spicetify.Player.data.track.provider=="ad") { - // ad - nearArtistSpanText = "advertisement" - coverListenerInstalled = false - return - } else { - // When clicking a song from the homepage, songChange is fired with half empty metadata - // todo: retry only once? - setTimeout(songchange, 200) - } - - if( document.querySelector("#main-trackInfo-year")===null ) { - waitForElement([".main-trackInfo-container"], (queries) => { - nearArtistSpan = document.createElement("div") - nearArtistSpan.id = 'main-trackInfo-year' - nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale") - nearArtistSpan.innerHTML = nearArtistSpanText - queries[0].append(nearArtistSpan) - }) - } else { - nearArtistSpan.innerHTML = nearArtistSpanText - } - document.documentElement.style.setProperty('--image_url', 'url("' + bgImage + '")') -} - -Spicetify.Player.addEventListener("songchange", songchange) - -function pickCoverColor(img) { - if (!img.currentSrc.startsWith('spotify:')) - return - var swatches = new Vibrant(img, 5).swatches() - lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"] - darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"] - - mainCols = isLight(textColorBg) ? lightCols : darkCols - textColor = "#509bf5" - for (var col in mainCols) - if (swatches[mainCols[col]]) { - textColor = swatches[mainCols[col]].getHex() - break - } - - sidebarColor = "#509bf5" - for (var col in lightCols) - if (swatches[lightCols[col]]) { - sidebarColor = swatches[lightCols[col]].getHex() - break - } - updateColors(textColor, sidebarColor) -} - -waitForElement([".main-nowPlayingBar-left"], (queries) => { - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.removedNodes.length>0) - coverListenerInstalled = false - }); - }); - observer.observe(queries[0], { childList: true }) -}); - -function hookCoverChange(pick) { - waitForElement([".cover-art-image"], (queries) => { - coverListenerInstalled = true - if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]); - queries[0].addEventListener("load", function () { - try { - pickCoverColor(queries[0]) - } catch (error) { - console.error(error) - setTimeout(pickCoverColor, 300, queries[0]) - } - }); - }); -} - -hookCoverChange(false); - -(function Startup() { - if (!Spicetify.showNotification) { - setTimeout(Startup, 300); - return; - } - // Check latest release - fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest") - .then((response) => { - return response.json(); - }) - .then((data) => { - if (data.tag_name > current) { - upd = document.createElement("div"); - upd.innerText = `Theme UPD v${data.tag_name} avail.`; - upd.classList.add("ellipsis-one-line", "main-type-finale"); - upd.setAttribute("title", `Changes: ${data.name}`); - upd.style.setProperty("color", "var(--spice-button-active)"); - document.querySelector(".main-userWidget-box").append(upd); - document.querySelector(".main-userWidget-box").classList.add("update-avail"); - new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register(); - } - }) - .catch((err) => { - // Do something for an error here - console.error(err); - }); -})(); - -/* translucid background cover */ -document.styleSheets[0].insertRule(` - .Root__top-container::before { - content: ''; - background-image: var(--image_url); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - position: fixed; - display: block; - top: 0; - left: 0; - right: 0; - bottom: 0; - filter: blur(15px); - pointer-events: none; - backface-visibility: hidden; - will-change: transform; - opacity: calc(0.07 + 0.03 * var(--is_light, 0)); - z-index: +3; - transition: background-image var(--song-transition-speed) linear; - }`) - -document.documentElement.style.setProperty('--warning_message', ' '); +let current = "2.6.0"; + +/* css is injected so this works with untouched user.css from Dribbblish */ +/* progressbar tooltip text color */ +document.styleSheets[0].insertRule(` + .playback-bar .prog-tooltip { + color: var(--spice-sidebar-text) !important; + }`); + +/* edit button of CustomApps */ +document.styleSheets[0].insertRule(` + .reddit-sort-container button.switch, + .new-releases-header button.switch, + .lyrics-tabBar-header button.switch { + background-color: rgba(var(--spice-rgb-subtext), 0.15) !important; + color: var(--spice-text); + }`); + +document.styleSheets[0].insertRule(` + .reddit-sort-container button.switch:hover, + .new-releases-header button.switch:hover, + .lyrics-tabBar-header button.switch:hover { + background-color: rgba(var(--spice-rgb-subtext), 0.3) !important; + }`); + +document.styleSheets[0].insertRule(` + .lyrics-lyricsContainer-LyricsBackground { + background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important; + }`); + +/* big cover opacity on hover */ +document.styleSheets[0].insertRule(` + .main-coverSlotExpanded-container:hover .cover-art, + .main-coverSlotExpanded-container:hover img { + opacity: 0.5; + }`); + +document.styleSheets[0].insertRule(` + .main-navBar-navBar a:hover, + .main-navBar-navBar a:hover span, + .main-buddyFeed-activityMetadata a:hover { + color: var(--spice-shadow) !important; + }`); + +document.styleSheets[0].insertRule(` + .collection-collectionEntityHeroCard-likedSongs, + .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link, + .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer, + .x-heroCategoryCard-heroTitle, + .main-rootlist-expandArrow:focus, + .main-rootlist-expandArrow:hover, + .main-rootlist-textWrapper:focus, + .main-rootlist-textWrapper:hover, + .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-sidebar-text) !important; + }`); + +/* Config settings */ + +DribbblishShared.config.register({ + area: "Animations & Transitions", + type: "slider", + key: "fadeDuration", + name: "Color Fade Duration", + description: "Select the duration of the color fading transition", + defaultValue: 0.5, + data: { + min: 0, + max: 10, + step: 0.1, + suffix: "s" + }, + onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s") +}); + +// waitForElement because Spicetify is not initialized at startup +waitForElement(["#main"], () => { + DribbblishShared.config.register({ + area: { name: "About", order: 999 }, + type: "button", + key: "aboutDribbblish", + name: "Info", + description: ` + OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version} + Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple} + Dribbblish: v${current} + `, + data: "Copy", + onChange: (val) => { + copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description); + Spicetify.showNotification("Copied Versions"); + } + }); +}); + +function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} + +function copyToClipboard(text) { + var input = document.createElement("textarea"); + input.style.display = "fixed"; + input.innerHTML = text; + document.body.appendChild(input); + input.select(); + var result = document.execCommand("copy"); + document.body.removeChild(input); + return result; +} + +/* js */ +function getAlbumInfo(uri) { + return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`); +} + +function isLight(hex) { + var [r, g, b] = hexToRgb(hex).map(Number); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + return brightness > 128; +} + +function hexToRgb(hex) { + var bigint = parseInt(hex.replace("#", ""), 16); + var r = (bigint >> 16) & 255; + var g = (bigint >> 8) & 255; + var b = bigint & 255; + return [r, g, b]; +} + +function rgbToHex([r, g, b]) { + const rgb = (r << 16) | (g << 8) | (b << 0); + return "#" + (0x1000000 + rgb).toString(16).slice(1); +} + +const LightenDarkenColor = (h, p) => + "#" + + [1, 3, 5] + .map((s) => parseInt(h.substr(s, 2), 16)) + .map((c) => parseInt((c * (100 + p)) / 100)) + .map((c) => (c < 255 ? c : 255)) + .map((c) => c.toString(16).padStart(2, "0")) + .join(""); + +function rgbToHsl([r, g, b]) { + (r /= 255), (g /= 255), (b /= 255); + var max = Math.max(r, g, b), + min = Math.min(r, g, b); + var h, + s, + l = (max + min) / 2; + if (max == min) { + h = s = 0; // achromatic + } else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } + return [h, s, l]; +} + +function hslToRgb([h, s, l]) { + var r, g, b; + if (s == 0) { + r = g = b = l; // achromatic + } else { + function hue2rgb(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + } + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + return [r * 255, g * 255, b * 255]; +} + +function setLightness(hex, lightness) { + hsl = rgbToHsl(hexToRgb(hex)); + hsl[2] = lightness; + return rgbToHex(hslToRgb(hsl)); +} + +let textColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-text"); +let textColorBg = getComputedStyle(document.documentElement).getPropertyValue("--spice-main"); +let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-sidebar"); + +function setRootColor(name, colHex) { + let root = document.documentElement; + if (root === null) return; + root.style.setProperty("--spice-" + name, colHex); + root.style.setProperty("--spice-rgb-" + name, hexToRgb(colHex).join(",")); +} + +function toggleDark(setDark) { + if (setDark === undefined) setDark = isLight(textColorBg); + + document.documentElement.style.setProperty("--is_light", setDark ? 0 : 1); + textColorBg = setDark ? "#0A0A0A" : "#FAFAFA"; + + setRootColor("main", textColorBg); + setRootColor("player", textColorBg); + setRootColor("card", setDark ? "#040404" : "#ECECEC"); + setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D"); + setRootColor("notification", setDark ? "#303030" : "#DDDDDD"); + + updateColors(textColor, sidebarColor); +} + +function checkDarkLightMode() { + if (DribbblishShared.config.get("theme") != 2) return; + + const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]); + const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]); + + const now = new Date(); + const time = 60 * now.getHours() + now.getMinutes(); + + if (end < start) dark = start <= time || time < end; + else dark = start <= time && time < end; + toggleDark(dark); +} +// Run every Minute to check time and set dark / light mode +setInterval(checkDarkLightMode, 60000); + +DribbblishShared.config.register({ + area: "Theme", + type: "select", + data: ["Dark", "Light", "Based on Time"], + key: "theme", + name: "Theme", + description: "Select Dark / Bright mode", + defaultValue: 0, + showChildren: (val) => { + return val == 2; + }, + onChange: (val) => { + switch (val) { + case 0: + toggleDark(true); + break; + case 1: + toggleDark(false); + break; + case 2: + checkDarkLightMode(); + break; + } + }, + children: [ + { + type: "time", + key: "darkModeOnTime", + name: "Dark Mode On Time", + description: "Beginning of Dark mode time", + defaultValue: "20:00", + fireInitialChange: false, + onChange: checkDarkLightMode + }, + { + type: "time", + key: "darkModeOffTime", + name: "Dark Mode Off Time", + description: "End of Dark mode time", + defaultValue: "06:00", + fireInitialChange: false, + onChange: checkDarkLightMode + } + ] +}); + +var currentColor; +var currentSideColor; +var colorFadeInterval = false; + +function updateColors(textColHex, sideColHex) { + let isLightBg = isLight(textColorBg); + if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15); // vibrant color is always too bright for white bg mode + + let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20); + let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40); + let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.9 : 0.14); + setRootColor("text", textColHex); + setRootColor("button", darkerColHex); + setRootColor("button-active", darkColHex); + setRootColor("selected-row", darkerColHex); + setRootColor("tab-active", buttonBgColHex); + setRootColor("button-disabled", buttonBgColHex); + setRootColor("sidebar", sideColHex); +} + +let nearArtistSpanText = ""; +let coverListenerInstalled = true; +async function songchange() { + try { + // warning popup + if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`); + } catch (err) { + console.error(err); + } + + let album_uri = Spicetify.Player.data.track.metadata.album_uri; + let bgImage = Spicetify.Player.data.track.metadata.image_url; + if (bgImage === undefined) { + bgImage = "/images/tracklist-row-song-fallback.svg"; + textColor = "#509bf5"; + updateColors(textColor, textColor); + coverListenerInstalled = false; + } + if (!coverListenerInstalled) hookCoverChange(true); + + if (album_uri !== undefined && !album_uri.includes("spotify:show")) { + const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", "")); + + let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0); + let recent_date = new Date(); + recent_date.setMonth(recent_date.getMonth() - 6); + album_date = album_date.toLocaleString("default", album_date > recent_date ? { year: "numeric", month: "short" } : { year: "numeric" }); + album_link = '' + Spicetify.Player.data.track.metadata.album_title + ""; + + nearArtistSpanText = album_link + " • " + album_date; + } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) { + // podcast + bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/"); + nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title; + } else if (Spicetify.Player.data.track.metadata.is_local == "true") { + // local file + nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title; + } else if (Spicetify.Player.data.track.provider == "ad") { + // ad + nearArtistSpanText = "advertisement"; + coverListenerInstalled = false; + return; + } else { + // When clicking a song from the homepage, songChange is fired with half empty metadata + // todo: retry only once? + setTimeout(songchange, 200); + } + + if (document.querySelector("#main-trackInfo-year") === null) { + waitForElement([".main-trackInfo-container"], (queries) => { + nearArtistSpan = document.createElement("div"); + nearArtistSpan.id = "main-trackInfo-year"; + nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale"); + nearArtistSpan.innerHTML = nearArtistSpanText; + queries[0].append(nearArtistSpan); + }); + } else { + nearArtistSpan.innerHTML = nearArtistSpanText; + } + document.documentElement.style.setProperty("--image_url", 'url("' + bgImage + '")'); +} + +Spicetify.Player.addEventListener("songchange", songchange); + +function pickCoverColor(img) { + if (!img.currentSrc.startsWith("spotify:")) return; + var swatches = new Vibrant(img, 5).swatches(); + lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]; + darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]; + + mainCols = isLight(textColorBg) ? lightCols : darkCols; + textColor = "#509bf5"; + for (var col in mainCols) + if (swatches[mainCols[col]]) { + textColor = swatches[mainCols[col]].getHex(); + break; + } + + sidebarColor = "#509bf5"; + for (var col in lightCols) + if (swatches[lightCols[col]]) { + sidebarColor = swatches[lightCols[col]].getHex(); + break; + } + updateColors(textColor, sidebarColor); +} + +waitForElement([".main-nowPlayingBar-left"], (queries) => { + var observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + if (mutation.removedNodes.length > 0) coverListenerInstalled = false; + }); + }); + observer.observe(queries[0], { childList: true }); +}); + +function hookCoverChange(pick) { + waitForElement([".cover-art-image"], (queries) => { + coverListenerInstalled = true; + if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]); + queries[0].addEventListener("load", function () { + try { + pickCoverColor(queries[0]); + } catch (error) { + console.error(error); + setTimeout(pickCoverColor, 300, queries[0]); + } + }); + }); +} + +hookCoverChange(false); + +(function Startup() { + if (!Spicetify.showNotification) { + setTimeout(Startup, 300); + return; + } + // Check latest release + fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest") + .then((response) => { + return response.json(); + }) + .then((data) => { + if (data.tag_name > current) { + upd = document.createElement("div"); + upd.innerText = `Theme UPD v${data.tag_name} avail.`; + upd.classList.add("ellipsis-one-line", "main-type-finale"); + upd.setAttribute("title", `Changes: ${data.name}`); + upd.style.setProperty("color", "var(--spice-button-active)"); + document.querySelector(".main-userWidget-box").append(upd); + document.querySelector(".main-userWidget-box").classList.add("update-avail"); + new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register(); + } + }) + .catch((err) => { + // Do something for an error here + console.error(err); + }); +})(); + +/* translucid background cover */ +document.styleSheets[0].insertRule(` + .Root__top-container::before { + content: ''; + background-image: var(--image_url); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + filter: blur(15px); + pointer-events: none; + backface-visibility: hidden; + will-change: transform; + opacity: calc(0.07 + 0.03 * var(--is_light, 0)); + z-index: +3; + transition: background-image var(--song-transition-speed) linear; + }`); + +document.documentElement.style.setProperty("--warning_message", " "); diff --git a/dribbblish.js b/dribbblish.js index d05933a..8574685 100644 --- a/dribbblish.js +++ b/dribbblish.js @@ -567,11 +567,9 @@ waitForElement([".Root__main-view"], ([mainView]) => { mainView.prepend(shadow); }); -waitForElement([ - ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input" -], ([resizer]) => { +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"]}); + observer.observe(resizer, { attributes: true, attributeFilter: ["value"] }); function updateVariable() { let value = resizer.value; if (value < 121) { @@ -580,8 +578,7 @@ waitForElement([ } else { document.documentElement.classList.remove("sidebar-hide-text"); } - document.documentElement.style.setProperty( - "--sidebar-width", value + "px"); + document.documentElement.style.setProperty("--sidebar-width", value + "px"); } updateVariable(); }); @@ -589,11 +586,9 @@ waitForElement([ 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"); - document.documentElement.style.setProperty( - "--main-view-height", event.contentRect.height + "px"); + function updateVariable([event]) { + document.documentElement.style.setProperty("--main-view-width", event.contentRect.width + "px"); + document.documentElement.style.setProperty("--main-view-height", event.contentRect.height + "px"); if (event.contentRect.width < 700) { document.documentElement.classList.add("minimal-player"); } else { @@ -639,7 +634,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => updateProgTime(); Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => { - const isExternal = state.devices.some(a => a.is_active); + const isExternal = state.devices.some((a) => a.is_active); if (isExternal) { root.classList.add("is-connectBarVisible"); } else { @@ -653,53 +648,44 @@ 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; + 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); - } + }; - 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/user.css b/user.css index 0a131a7..6cf8142 100644 --- a/user.css +++ b/user.css @@ -1,1384 +1,1384 @@ -: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; -} - - -/* smooth color transitions */ -@property --spice-sidebar { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-main { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-text { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -@property --spice-button { - syntax: ''; - initial-value: magenta; - inherits: true; -} - -:root { - transition: all var(--song-transition-speed) linear; - transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button; -} - -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], -input[type=time] { - 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, -input[type=time]:hover, -input[type=time]:active { - background-color: rgba(var(--spice-rgb-selected-row), .6) !important; -} - -input[type="time"]::-webkit-calendar-picker-indicator { - filter: invert(calc(1 - var(--is_light))); -} - -input[type=color] { - position: relative; - padding: 0px; - border: none; -} - -input[type=color]::before { - z-index: -1; - content: ""; - position: absolute; - inset: -5px; - border-radius: 4px; - background-color: rgba(var(--spice-rgb-selected-row), .4); -} - -input[type=color]:hover::before, -input[type=color]:active::before { - background-color: rgba(var(--spice-rgb-selected-row), .6); -} - -.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; - border-radius: var(--sidebar-icons-border-radius); -} - -.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.update-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(.update-avail), -.main-avatar-userIcon, -.view-homeShortcutsGrid-shortcutLink { - border-radius: var(--sidebar-icons-border-radius) !important; -} - -.main-userWidget-box { - background-color: transparent !important; -} - -.main-userWidget-box.update-avail { - backdrop-filter: invert(0.1); -} - -.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 { - z-index: 999; - 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: transparent; - backdrop-filter: invert(0.25); -} - -input:checked~.x-toggle-indicatorWrapper { - background-color: rgba(var(--spice-rgb-button), 0.4); -} - -input:hover:checked~.x-toggle-indicatorWrapper { - background-color: rgba(var(--spice-rgb-button), 0.5) !important; -} - -input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper { - background-color: transparent; - backdrop-filter: invert(0.4); -} - -/** */ -.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); - pointer-events: none; -} - -.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-container { - z-index: 1; - position: relative; - width: clamp(500px, 50%, 650px); - 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-areas { - display: flex; - width: 100%; - flex-direction: column; - gap: 16px; - max-height: 60vh; - overflow-y: auto; - padding: 0px 50px; -} - -.dribbblish-config-area, -.dribbblish-config-area-items { - display: flex; - flex-direction: column; - gap: 16px; -} - -.dribbblish-config-area[collapsed] { - overflow: hidden; - min-height: 38px; /* for some reason height alone isn't enough */ - height: 38px; -} - -.dribbblish-config-area:empty { - display: none -} - -.dribbblish-config-area > h2 { - position: relative; - text-align: center; - height: 38px; -} - -.dribbblish-config-area > h2 svg { - position: absolute; - margin-left: 10px; - bottom: -2px; - color: var(--spice-text); - padding: 0px; - height: 100%; - stroke-width: 2px; - transform: rotate(90deg); -} - -.dribbblish-config-area[collapsed] > h2 svg { - transform: rotate(270deg); -} - -.dribbblish-config-item { - position: relative; - width: 100%; - height: min-content; - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto auto; - gap: 5px 10px; - grid-template-areas: - "header input" - "description input"; -} - -.dribbblish-config-item[parent] { - padding-left: 16px; -} - -.dribbblish-config-item[hidden=true] { - display: none; -} - -.dribbblish-config-item > .x-settings-title { - grid-area: header; - margin: 0px; - height: min-content; - position: relative; - bottom: 0px; -} - -.dribbblish-config-item > .x-settings-title.no-desc { - bottom: -10px; -} - -.dribbblish-config-item > .main-type-mesto { - grid-area: description; - height: min-content; - color: var(--spice-subtext); -} - -.dribbblish-config-item > .x-settings-secondColumn { - grid-area: input; -} - -.dribbblish-config-close { - position: absolute; - top: 15px; - right: 15px; -} - -.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); -} - -/* Spotify style player bar */ -#main[player-controls=spotify] .main-nowPlayingBar-left { - order: 0; -} - -#main[player-controls=spotify] .main-nowPlayingBar-center { - order: 1; -} - -#main[player-controls=spotify] .main-nowPlayingWidget-nowPlaying { - justify-content: left; -} - -#main[player-controls=spotify] .player-controls { - justify-content: center; -} - -/** 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-navBarLink::before, -.main-collectionLinkButton-collectionLinkButton::before, -.main-createPlaylistButton-button::before, -.main-rootlist-rootlistItemLink::before { - content: ""; - position: absolute; - width: 100%; - inset: 0px; - left: -200%; - opacity: 0.4; - background-color: black; - border-radius: var(--image-radius); - pointer-events: none; - transition: all calc(var(--sidebar-icons-hover-animation) * 0.2s) ease; - transition-property: left, opacity; -} - -.main-navBar-navBarLink:hover::before, -.main-collectionLinkButton-collectionLinkButton:hover::before, -.main-createPlaylistButton-button:hover::before, -.main-rootlist-rootlistItemLink:hover::before, -.main-navBar-navBarLinkActive::before, -.main-collectionLinkButton-selected::before { - left: 0px; -} - -.main-navBar-navBarLinkActive:hover::before, -.main-collectionLinkButton-selected:hover::before { - opacity: 0.6; -} - -.main-rootlist-rootlist .main-navBar-navBarItem:hover::before { - margin: 0 8px; -} - -.main-navBar-navBarLinkActive, -.main-collectionLinkButton-selected { - background-color: transparent; -} - -.main-navBar-navBar a:hover, -.main-navBar-navBar a:hover span { - color: var(--spice-sidebar-text) !important; -} - -div.GlueDropTarget.personal-library { - padding: 0px; -} -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-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); -} - -/* explicit icon */ -.main-tag-container { - background-color: var(--spice-text); -} +: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; +} + +/* smooth color transitions */ +@property --spice-sidebar { + syntax: ""; + initial-value: magenta; + inherits: true; +} + +@property --spice-main { + syntax: ""; + initial-value: magenta; + inherits: true; +} + +@property --spice-text { + syntax: ""; + initial-value: magenta; + inherits: true; +} + +@property --spice-button { + syntax: ""; + initial-value: magenta; + inherits: true; +} + +:root { + transition: all var(--song-transition-speed) linear; + transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button; +} + +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: -0.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), 0.2); + border-radius: 50vw; +} + +input[type="number"], +input[type="text"], +input[type="time"] { + height: 32px; + border: none; + border-radius: 4px !important; + padding: 0px 10px; + background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important; + color: var(--spice-subtext) !important; +} + +input[type="number"]:hover, +input[type="number"]:active, +input[type="text"]:hover, +input[type="text"]:active, +input[type="time"]:hover, +input[type="time"]:active { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important; +} + +input[type="time"]::-webkit-calendar-picker-indicator { + filter: invert(calc(1 - var(--is_light))); +} + +input[type="color"] { + position: relative; + padding: 0px; + border: none; +} + +input[type="color"]::before { + z-index: -1; + content: ""; + position: absolute; + inset: -5px; + border-radius: 4px; + background-color: rgba(var(--spice-rgb-selected-row), 0.4); +} + +input[type="color"]:hover::before, +input[type="color"]:active::before { + background-color: rgba(var(--spice-rgb-selected-row), 0.6); +} + +.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; + border-radius: var(--sidebar-icons-border-radius); +} + +.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.update-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(.update-avail), +.main-avatar-userIcon, +.view-homeShortcutsGrid-shortcutLink { + border-radius: var(--sidebar-icons-border-radius) !important; +} + +.main-userWidget-box { + background-color: transparent !important; +} + +.main-userWidget-box.update-avail { + backdrop-filter: invert(0.1); +} + +.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 { + z-index: 999; + 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: transparent; + backdrop-filter: invert(0.25); +} + +input:checked ~ .x-toggle-indicatorWrapper { + background-color: rgba(var(--spice-rgb-button), 0.4); +} + +input:hover:checked ~ .x-toggle-indicatorWrapper { + background-color: rgba(var(--spice-rgb-button), 0.5) !important; +} + +input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper { + background-color: transparent; + backdrop-filter: invert(0.4); +} + +/** */ +.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), 0.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); + pointer-events: none; +} + +.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 0.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-container { + z-index: 1; + position: relative; + width: clamp(500px, 50%, 650px); + 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-areas { + display: flex; + width: 100%; + flex-direction: column; + gap: 16px; + max-height: 60vh; + overflow-y: auto; + padding: 0px 50px; +} + +.dribbblish-config-area, +.dribbblish-config-area-items { + display: flex; + flex-direction: column; + gap: 16px; +} + +.dribbblish-config-area[collapsed] { + overflow: hidden; + min-height: 38px; /* for some reason height alone isn't enough */ + height: 38px; +} + +.dribbblish-config-area:empty { + display: none; +} + +.dribbblish-config-area > h2 { + position: relative; + text-align: center; + height: 38px; +} + +.dribbblish-config-area > h2 svg { + position: absolute; + margin-left: 10px; + bottom: -2px; + color: var(--spice-text); + padding: 0px; + height: 100%; + stroke-width: 2px; + transform: rotate(90deg); +} + +.dribbblish-config-area[collapsed] > h2 svg { + transform: rotate(270deg); +} + +.dribbblish-config-item { + position: relative; + width: 100%; + height: min-content; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto; + gap: 5px 10px; + grid-template-areas: + "header input" + "description input"; +} + +.dribbblish-config-item[parent] { + padding-left: 16px; +} + +.dribbblish-config-item[hidden="true"] { + display: none; +} + +.dribbblish-config-item > .x-settings-title { + grid-area: header; + margin: 0px; + height: min-content; + position: relative; + bottom: 0px; +} + +.dribbblish-config-item > .x-settings-title.no-desc { + bottom: -10px; +} + +.dribbblish-config-item > .main-type-mesto { + grid-area: description; + height: min-content; + color: var(--spice-subtext); +} + +.dribbblish-config-item > .x-settings-secondColumn { + grid-area: input; +} + +.dribbblish-config-close { + position: absolute; + top: 15px; + right: 15px; +} + +.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); +} + +/* Spotify style player bar */ +#main[player-controls="spotify"] .main-nowPlayingBar-left { + order: 0; +} + +#main[player-controls="spotify"] .main-nowPlayingBar-center { + order: 1; +} + +#main[player-controls="spotify"] .main-nowPlayingWidget-nowPlaying { + justify-content: left; +} + +#main[player-controls="spotify"] .player-controls { + justify-content: center; +} + +/** 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), 0.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-navBarLink::before, +.main-collectionLinkButton-collectionLinkButton::before, +.main-createPlaylistButton-button::before, +.main-rootlist-rootlistItemLink::before { + content: ""; + position: absolute; + width: 100%; + inset: 0px; + left: -200%; + opacity: 0.4; + background-color: black; + border-radius: var(--image-radius); + pointer-events: none; + transition: all calc(var(--sidebar-icons-hover-animation) * 0.2s) ease; + transition-property: left, opacity; +} + +.main-navBar-navBarLink:hover::before, +.main-collectionLinkButton-collectionLinkButton:hover::before, +.main-createPlaylistButton-button:hover::before, +.main-rootlist-rootlistItemLink:hover::before, +.main-navBar-navBarLinkActive::before, +.main-collectionLinkButton-selected::before { + left: 0px; +} + +.main-navBar-navBarLinkActive:hover::before, +.main-collectionLinkButton-selected:hover::before { + opacity: 0.6; +} + +.main-rootlist-rootlist .main-navBar-navBarItem:hover::before { + margin: 0 8px; +} + +.main-navBar-navBarLinkActive, +.main-collectionLinkButton-selected { + background-color: transparent; +} + +.main-navBar-navBar a:hover, +.main-navBar-navBar a:hover span { + color: var(--spice-sidebar-text) !important; +} + +div.GlueDropTarget.personal-library { + padding: 0px; +} +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-dropDown-dropDown, +.x-sortBox-sortDropdown { + background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important; + color: var(--spice-subtext); +} + +.main-dropDown-dropDown:hover, +.x-sortBox-sortDropdown:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !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-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded { + z-index: 4; +} + +.main-actionBar-ActionBarRow button:not(.main-playButton-primary) { + color: var(--spice-subtext); +} + +/* explicit icon */ +.main-tag-container { + background-color: var(--spice-text); +}