From 6264dd234664883319b5707f93af6ee778be4206 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Fri, 13 Sep 2024 15:39:58 +0530 Subject: [PATCH 01/19] feat: add styles for now playing connect bar --- Comfy/assets/_now_playing.scss | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index 2412ebe..6397d22 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -1,5 +1,4 @@ :root .Root__top-container { - // Cover-art .main-nowPlayingWidget-nowPlaying { height: 0; @@ -10,7 +9,7 @@ bottom: var(--cover-art-bottom); border-radius: var(--cover-art-radius); - >div button { + > div button { border-radius: var(--cover-art-radius) !important; background: none; } @@ -27,6 +26,18 @@ } } } + + // Connect bar + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + position: absolute; + margin-left: auto; + padding: 0.75rem 1rem; + top: -45%; + // bottom: calc(100% + 0.75rem); // can use this too + right: 0; + } + } } :root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container { @@ -51,7 +62,6 @@ // Center .main-nowPlayingBar-center { - // Player Controls .player-controls__buttons--new-icons { margin-bottom: 0px !important; @@ -74,7 +84,7 @@ } // Timers - &>div:not(.playback-progressbar-container) { + & > div:not(.playback-progressbar-container) { text-align: center; &:first-of-type { @@ -118,7 +128,6 @@ // Right .main-nowPlayingBar-right { - // Volume Bar .main-nowPlayingBar-volumeBar .progress-bar { --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); @@ -139,9 +148,7 @@ } } } - } - } } -} \ No newline at end of file +} From a2f4a169ac241c060ab89f1f94b4b26b75a37eba Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 00:19:35 +0530 Subject: [PATCH 02/19] fix: comply with biome TODO: fix `lint/security/noGlobalEval` --- Comfy/theme.script.js | 158 ++++++++++++++++++++++-------------------- 1 file changed, 84 insertions(+), 74 deletions(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 3e27ed6..a2faf3e 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -29,15 +29,15 @@ todo: console.log(JSON.parse(localStorage.getItem("comfy:config") || "{}")); } }; - console.debug(`[Comfy-Event]: Global Functions Added`); + console.debug("[Comfy-Event]: Global Functions Added"); // Initialize Config - let config = JSON.parse(localStorage.getItem("comfy:config") || "{}"); + const config = JSON.parse(localStorage.getItem("comfy:config") || "{}"); let configScheme = Spicetify.Config?.color_scheme || "Comfy"; let preloadedScheme = false; let startup = true; - let preloadContainer = document.createElement("div"); - console.debug(`[Comfy-Event]: Config Initialized`); + const preloadContainer = document.createElement("div"); + console.debug("[Comfy-Event]: Config Initialized"); // Preload Applied Colorscheme const colorScheme = getConfig("Color-Scheme"); @@ -99,8 +99,8 @@ todo: const newPanelWidth = mutations[0].target.style.getPropertyValue("--panel-width"); const newSidebarWidth = mutations[0].target.style.getPropertyValue("--left-sidebar-width"); if (newPanelWidth !== panelWidth || newSidebarWidth !== sidebarWidth) { - const trimmedPanelWidth = parseInt(newPanelWidth); - const trimmedSidebarWidth = parseInt(newSidebarWidth); + const trimmedPanelWidth = Number.parseInt(newPanelWidth); + const trimmedSidebarWidth = Number.parseInt(newSidebarWidth); document.documentElement.style.setProperty("--comfy-panel-width", `${trimmedPanelWidth}px`); document.documentElement.style.setProperty("--comfy-left-sidebar-width", `${trimmedSidebarWidth}px`); panelWidth = newPanelWidth; @@ -109,7 +109,7 @@ todo: }).observe(document.documentElement, { attributes: true, attributeFilter: ["style"] }); // Banner Image(s) - let channels = { + const channels = { Lyrics: { regex: /^\/lyrics$/, enabled: getConfig("Lyrics") ?? false }, Playlist: { regex: /^\/playlist\//, enabled: getConfig("Playlist") ?? true }, Station: { regex: /^\/station\/playlist\//, enabled: getConfig("Station") ?? true }, @@ -129,10 +129,10 @@ todo: const banner = [document.createElement("div"), document.createElement("div")]; frame.className = "comfy-banner-frame"; - banner.forEach(image => { + for (const image of banner) { image.className = "comfy-banner-image"; frame.append(image); - }); + } waitForDeps( ".under-main-view", @@ -273,7 +273,7 @@ todo: callback?.(value); setState(value); - items.forEach(item => { + for (const item of items) { const both = () => (item.type === Input ? "" : item.defaultVal); const state = getConfig(item.name) ?? both(); @@ -294,7 +294,7 @@ todo: console.debug(`[Comfy-subCallback]: ${item.name}`, state); item.callback?.(state, item.name); } - }); + } }, onClick: () => { if (state) { @@ -514,7 +514,7 @@ todo: Spicetify.React.createElement( "button", { - className: `switch`, + className: "switch", onClick: event => { event.stopPropagation(); // Prevent event from propagating up setSelectedValue(defaultVal); @@ -768,7 +768,7 @@ todo: Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton ZbimwwLeKzV0_OVbLg0e`, + className: "search-searchCategory-carouselButton ZbimwwLeKzV0_OVbLg0e", tabIndex: -1, onClick: () => handleButtonClick("LEFT"), inert: true @@ -782,7 +782,7 @@ todo: Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton P0I0a36y0BWbeGseMsmE`, + className: "search-searchCategory-carouselButton P0I0a36y0BWbeGseMsmE", tabIndex: -1, onClick: () => handleButtonClick("RIGHT"), inert: true @@ -831,13 +831,11 @@ todo: { type: Dropdown, name: "Color-Scheme", - title: `Color Scheme`, - desc: "For faster loadtimes use cli to change color schemes", + title: "Color Scheme", + desc: "For faster load times use cli to change color schemes", options: () => { const schemes = Object.keys(getConfig("Color-Schemes")); - const decapSchemes = schemes.map(function (x) { - return x.toLowerCase(); - }); + const decapSchemes = schemes.map(x => x.toLowerCase()); if (!decapSchemes.includes(configScheme.toLowerCase())) { schemes.unshift(configScheme); @@ -845,10 +843,12 @@ todo: return schemes; }, - defaultVal: (configScheme = - (getConfig("Color-Schemes") && - Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) || - configScheme), + defaultVal: (() => { + const foundScheme = getConfig("Color-Schemes") + ? Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase()) + : null; + return foundScheme || configScheme; + })(), condition: getConfig("Color-Schemes") && !preloadedScheme && !document.querySelector("body > style.marketplaceCSS.marketplaceScheme"), callback: (name, value) => { updateScheme(value); @@ -856,8 +856,8 @@ todo: }, { type: Dropdown, - name: `Scheme-Features`, - title: `Additional Features`, + name: "Scheme-Features", + title: "Additional Features", description: "Extra tweaks to complete specific color schemes", options: ["nord", "nord-flat", "kitty"], callback: (name, value, options, defaultVal) => { @@ -964,7 +964,7 @@ todo: height: `${(value === "0" ? "1" : value) || "40"}px` }); - document.documentElement.style.setProperty("--comfy-topbar-height", value ? value + "px" : ""); + document.documentElement.style.setProperty("--comfy-topbar-height", value ? `${value}px` : ""); }); }, callbackOverride: true @@ -983,7 +983,7 @@ todo: Spicetify.React.createElement("li", null, "Comfy default: 8px"), Spicetify.React.createElement("li", null, "Spotify default: 50px") ), - callback: value => document.documentElement.style.setProperty("--button-radius", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--button-radius", value ? `${value}px` : "") }, { type: SubSection, @@ -1198,7 +1198,7 @@ todo: null, Spicetify.React.createElement("h4", null, "Set to 0 to disable the gradient!") ), - callback: value => document.documentElement.style.setProperty("--tracklist-gradient-height", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--tracklist-gradient-height", value ? `${value}px` : "") }, { type: Input, @@ -1242,10 +1242,10 @@ todo: const rightbar = topContainer.querySelector(".Root__right-sidebar"); const resizeObserver = new ResizeObserver(entries => { if (getConfig("Playbar-Above-Right-Panel-Snippet")) { - for (let entry of entries) { + for (const entry of entries) { if (entry.target === rightbar) { let newWidth = entry.contentRect.width; - if (newWidth == 0) { + if (newWidth === 0) { const localStorageWidth = localStorage.getItem("223ni6f2epqcidhx5etjafeai:panel-width-saved"); if (localStorageWidth) { newWidth = localStorageWidth; @@ -1334,7 +1334,7 @@ todo: title: "Width", defaultVal: "84px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-width", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-width", value ? `${value}px` : "") }, { type: Input, @@ -1343,7 +1343,7 @@ todo: title: "Height", defaultVal: "84px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-height", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-height", value ? `${value}px` : "") }, { type: Input, @@ -1352,7 +1352,7 @@ todo: title: "Border Radius", defaultVal: "8px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-radius", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-radius", value ? `${value}px` : "") }, { type: Input, @@ -1361,7 +1361,7 @@ todo: title: "Left Margin", defaultVal: "0px", desc: "Change the distance between the cover art and the left of the playbar", - callback: value => document.documentElement.style.setProperty("--cover-art-left", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-left", value ? `${value}px` : "") }, { type: Input, @@ -1376,7 +1376,7 @@ todo: Spicetify.React.createElement("li", null, "Spotify default: 0px") ), desc: "Change the distance between the cover art and the bottom of the playbar", - callback: value => document.documentElement.style.setProperty("--cover-art-bottom", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-bottom", value ? `${value}px` : "") } ] } @@ -1415,10 +1415,10 @@ todo: type: Toggle, name: channel, title: `${channel.replace("-", " ")} Page`, - defaultVal: channels[channel]["enabled"], + defaultVal: channels[channel].enabled, callback: value => { - if (value !== channels[channel]["enabled"]) { - channels[channel]["enabled"] = value; + if (value !== channels[channel].enabled) { + channels[channel].enabled = value; updateBanner(); } } @@ -1503,7 +1503,7 @@ todo: Spicetify.React.createElement("h4", null, "Seconds per full rotation (360°):"), Spicetify.React.createElement("li", null, "Comfy default: 50") ), - callback: value => document.documentElement.style.setProperty("--gradient-speed", value ? value + "s" : "") + callback: value => document.documentElement.style.setProperty("--gradient-speed", value ? `${value}s` : "") }, { type: Input, @@ -1518,7 +1518,7 @@ todo: Spicetify.React.createElement("h4", null, "Width of circles in relation to viewport (in %)"), Spicetify.React.createElement("li", null, "Comfy default: 150") ), - callback: value => document.documentElement.style.setProperty("--gradient-width", value ? value + "%" : "") + callback: value => document.documentElement.style.setProperty("--gradient-width", value ? `${value}%` : "") }, { type: Input, @@ -1528,7 +1528,7 @@ todo: desc: "Radius of circles (in %)", defaultVal: "50", min: "0", - callback: value => document.documentElement.style.setProperty("--gradient-radius", value ? value + "%" : "") + callback: value => document.documentElement.style.setProperty("--gradient-radius", value ? `${value}%` : "") } ], collapseItems: true @@ -1572,7 +1572,7 @@ todo: Spicetify.React.createElement("h4", null, "Amount of banner blur in pixels:"), Spicetify.React.createElement("li", null, "Comfy default: 4px") ), - callback: value => document.documentElement.style.setProperty("--image-blur", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--image-blur", value ? `${value}px` : "") } ]), Spicetify.React.createElement(Section, { name: "Settings", filter }, [ @@ -1725,7 +1725,7 @@ todo: isLarge: true }); - document.querySelector(".main-trackCreditsModal-closeBtn[aria-label='Close']").addEventListener("click", function () { + document.querySelector(".main-trackCreditsModal-closeBtn[aria-label='Close']").addEventListener("click", () => { document.getElementById("main").classList.remove("Settings-Open"); }); @@ -1789,7 +1789,7 @@ todo: function setConfig(key, value, message, silent) { if (value !== getConfig(key)) { - if (!silent) console.debug(`[Comfy-Config]: ${message ?? key + " ="}`, value); + if (!silent) console.debug(`[Comfy-Config]: ${message ?? `${key} =`}`, value); config[key] = value; localStorage.setItem("comfy:config", JSON.stringify(config)); } @@ -1813,7 +1813,7 @@ todo: async function waitForDeps(dependencies, callback, element = false, elementType = "querySelector", timeout = 5000) { return new Promise(resolve => { let allDependenciesLoaded = false; - let startTime = Date.now(); + const startTime = Date.now(); async function checkElements() { const check = () => @@ -1839,7 +1839,7 @@ todo: if (Date.now() - startTime < timeout) { setTimeout(checkDependencies, 10); } else { - console.error(`[Comfy-Error]: Dependency Timeout -`, dependencies); + console.error("[Comfy-Error]: Dependency Timeout -", dependencies); resolve(); } return; @@ -1922,41 +1922,48 @@ todo: console.debug(`[Comfy-Event]: Banner Source = ${source}`); const preloadImage = new Image(); - preloadImage.onload = function () { + preloadImage.onload = () => { document.documentElement.style.setProperty("--image-url", `url(${source})`); }; preloadImage.src = source; } - banner.forEach(image => { + for (const image of banner) { image.style.display = source ? "" : "none"; - }); + } } - function updateScheme(scheme, message) { + function updateScheme(schemeName, message) { const marketplace = document.querySelector("body > style.marketplaceCSS.marketplaceScheme"); const colorSchemes = getConfig("Color-Schemes"); const existingScheme = document.querySelector("style.comfyScheme"); existingScheme?.remove(); - if (colorSchemes[scheme] && !marketplace && scheme !== configScheme) { - console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${scheme}`); - scheme = colorSchemes[scheme]; + + let activeScheme = null; + + if (colorSchemes[schemeName] && !marketplace && schemeName !== configScheme) { + console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${schemeName}`); + activeScheme = colorSchemes[schemeName]; + } else if (colorSchemes[schemeName]) { + console.warn("[Comfy-Event]: Scheme found but not applied", schemeName); } else { - return; + console.warn("[Comfy-Event]: Scheme not found", schemeName); } - const schemeTag = document.createElement("style"); - schemeTag.classList.add("comfyScheme"); - let injectStr = ":root {"; - const themeIniKeys = Object.keys(scheme); - themeIniKeys.forEach(key => { - injectStr += `--spice-${key}: #${scheme[key]};`; - injectStr += `--spice-rgb-${key}: ${hexToRGB(scheme[key])};`; - }); - injectStr += "}"; - schemeTag.innerHTML = injectStr; - document.body.appendChild(schemeTag); + if (activeScheme) { + const schemeTag = document.createElement("style"); + schemeTag.classList.add("comfyScheme"); + let injectStr = ":root {"; + const themeIniKeys = Object.keys(activeScheme); + for (const key of themeIniKeys) { + injectStr += `--spice-${key}: #${activeScheme[key]};`; + injectStr += `--spice-rgb-${key}: ${hexToRGB(activeScheme[key])};`; + } + injectStr += "}"; + schemeTag.innerHTML = injectStr; + document.body.appendChild(schemeTag); + } } function parseIni(data) { @@ -1970,10 +1977,11 @@ todo: const lines = data.split(/[\r\n]+/); - lines.forEach(function (line) { + for (const line of lines) { if (regex.comment.test(line)) { return; - } else if (regex.param.test(line)) { + } + if (regex.param.test(line)) { if (line.includes("xrdb")) { delete value[section || ""]; section = null; @@ -1999,29 +2007,31 @@ todo: } else if (line.length === 0 && section) { section = null; } - }); + } return value; } function hexToRGB(hex) { - if (hex.length === 3) { - hex = hex + let normalizedHex = hex; + + if (normalizedHex.length === 3) { + normalizedHex = normalizedHex .split("") .map(char => char + char) .join(""); - } else if (hex.length != 6) { + } else if (normalizedHex.length !== 6) { throw "Only 3- or 6-digit hex colours are allowed"; - } else if (hex.match(/[^0-9a-f]/i)) { + } else if (normalizedHex.match(/[^0-9a-f]/i)) { throw "Only hex colours are allowed"; } - const aRgbHex = hex.match(/.{1,2}/g); + const aRgbHex = normalizedHex.match(/.{1,2}/g); if (!aRgbHex || aRgbHex.length !== 3) { throw "Could not parse hex colour"; } - const aRgb = [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)]; + const aRgb = [Number.parseInt(aRgbHex[0], 16), Number.parseInt(aRgbHex[1], 16), Number.parseInt(aRgbHex[2], 16)]; return aRgb; } From 7f73f23ac58e1f86e45f9bf21dccf96bcdd72209 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 00:40:57 +0530 Subject: [PATCH 03/19] fix: comply with biome --- Comfy/theme.script.js | 120 ++++++++++++++++++++++++++++++++---------- 1 file changed, 91 insertions(+), 29 deletions(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index a2faf3e..422c400 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -106,22 +106,49 @@ todo: panelWidth = newPanelWidth; sidebarWidth = newSidebarWidth; } - }).observe(document.documentElement, { attributes: true, attributeFilter: ["style"] }); + }).observe(document.documentElement, { + attributes: true, + attributeFilter: ["style"] + }); // Banner Image(s) const channels = { Lyrics: { regex: /^\/lyrics$/, enabled: getConfig("Lyrics") ?? false }, - Playlist: { regex: /^\/playlist\//, enabled: getConfig("Playlist") ?? true }, - Station: { regex: /^\/station\/playlist\//, enabled: getConfig("Station") ?? true }, - Artist: { regex: /^\/artist\/(?!artists\b)\w+$/, enabled: getConfig("Artist") ?? true }, + Playlist: { + regex: /^\/playlist\//, + enabled: getConfig("Playlist") ?? true + }, + Station: { + regex: /^\/station\/playlist\//, + enabled: getConfig("Station") ?? true + }, + Artist: { + regex: /^\/artist\/(?!artists\b)\w+$/, + enabled: getConfig("Artist") ?? true + }, Album: { regex: /^\/album\//, enabled: getConfig("Album") ?? true }, - Collection: { regex: /^\/collection\/tracks$/, enabled: getConfig("Collection") ?? true }, - "Your-Episodes": { regex: /^\/collection\/your-episodes$/, enabled: getConfig("Your-Episodes") ?? true }, - "Local-Files": { regex: /^\/collection\/local-files$/, enabled: getConfig("Local-Files") ?? true }, + Collection: { + regex: /^\/collection\/tracks$/, + enabled: getConfig("Collection") ?? true + }, + "Your-Episodes": { + regex: /^\/collection\/your-episodes$/, + enabled: getConfig("Your-Episodes") ?? true + }, + "Local-Files": { + regex: /^\/collection\/local-files$/, + enabled: getConfig("Local-Files") ?? true + }, Show: { regex: /^\/show\//, enabled: getConfig("Show") ?? true }, Episode: { regex: /^\/episode\//, enabled: getConfig("Episode") ?? true }, - "Lyrics-Plus": { regex: /^\/lyrics-plus$/, enabled: getConfig("Lyrics-Plus") ?? true }, - User: { regex: /^\/user\/(?!users\b)\w+$/, enabled: getConfig("User") ?? true }, + "Lyrics-Plus": { + regex: /^\/lyrics-plus$/, + enabled: getConfig("Lyrics-Plus") ?? true + }, + User: { + regex: /^\/user\/(?!users\b)\w+$/, + enabled: getConfig("User") ?? true + }, Genre: { regex: /^\/genre\//, enabled: getConfig("Genre") ?? true } }; @@ -193,7 +220,9 @@ todo: children.map(child => Spicetify.React.createElement(child.type, { ...child, - tippy: Spicetify.React.createElement(Tippy, { label: child.tippy }) + tippy: Spicetify.React.createElement(Tippy, { + label: child.tippy + }) }) ) ) @@ -250,7 +279,10 @@ todo: Spicetify.React.createElement("div", { className: "setting-action" }, action) ), Spicetify.React.createElement("div", { className: "setting-description" }, desc), - desc && Spicetify.React.createElement("div", { className: "setting-description-spacer" }) + desc && + Spicetify.React.createElement("div", { + className: "setting-description-spacer" + }) ) ); }); @@ -266,7 +298,10 @@ todo: null, Spicetify.React.createElement( "div", - { className: "setting-subSection", id: state ? (collapseItems ? "collapsed" : "enabled") : "disabled" }, + { + className: "setting-subSection", + id: state ? (collapseItems ? "collapsed" : "enabled") : "disabled" + }, Spicetify.React.createElement(Toggle, { name, callback: value => { @@ -310,7 +345,9 @@ todo: items.map(item => Spicetify.React.createElement(item.type, { ...item, - tippy: Spicetify.React.createElement(Tippy, { label: item.tippy }) + tippy: Spicetify.React.createElement(Tippy, { + label: item.tippy + }) }) ) ) @@ -400,7 +437,9 @@ todo: Spicetify.React.createElement( "span", { className: "x-toggle-indicatorWrapper" }, - Spicetify.React.createElement("span", { className: "x-toggle-indicator" }) + Spicetify.React.createElement("span", { + className: "x-toggle-indicator" + }) ) ), onClick @@ -532,15 +571,23 @@ todo: ), Spicetify.React.createElement( "div", - { className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? "menu-open" : ""}`, id: name }, + { + className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? "menu-open" : ""}`, + id: name + }, Spicetify.React.createElement( "div", - { className: "dropdown-button", onClick: () => setMenuOpen(!menuOpen) }, + { + className: "dropdown-button", + onClick: () => setMenuOpen(!menuOpen) + }, Spicetify.React.createElement("div", { className: "dropdown-selection" }, selectedValue), Spicetify.React.createElement( "div", { className: "dropdown-arrow-wrapper" }, - Spicetify.React.createElement("span", { className: "dropdown-arrow" }) + Spicetify.React.createElement("span", { + className: "dropdown-arrow" + }) ) ), menuOpen && @@ -764,7 +811,10 @@ todo: ), Spicetify.React.createElement( "div", - { className: "search-searchCategory-carousel e1CGifl7UjMqePPNhj5A", dir: "ltr" }, + { + className: "search-searchCategory-carousel e1CGifl7UjMqePPNhj5A", + dir: "ltr" + }, Spicetify.React.createElement( "button", { @@ -776,7 +826,9 @@ todo: Spicetify.React.createElement("svg", { viewBox: "0 0 16 16", className: "Svg-img-icon-small-textBase", - dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-left"] } + dangerouslySetInnerHTML: { + __html: Spicetify.SVGIcons["chevron-left"] + } }) ), Spicetify.React.createElement( @@ -790,7 +842,9 @@ todo: Spicetify.React.createElement("svg", { viewBox: "0 0 16 16", className: "Svg-img-icon-small-textBase", - dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-right"] } + dangerouslySetInnerHTML: { + __html: Spicetify.SVGIcons["chevron-right"] + } }) ) ) @@ -945,7 +999,10 @@ todo: waitForDeps("Spicetify.Platform.UserAPI", async () => { const productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service; await productState.delOverridesValues({ keys: ["name"] }); - if (value) await productState.putOverridesValues({ pairs: { name: value } }); + if (value) + await productState.putOverridesValues({ + pairs: { name: value } + }); }); } }, @@ -1829,7 +1886,10 @@ todo: resolve(); } }); - observer.observe(document.documentElement, { childList: true, subtree: true }); + observer.observe(document.documentElement, { + childList: true, + subtree: true + }); } } @@ -1942,13 +2002,15 @@ todo: let activeScheme = null; - if (colorSchemes[schemeName] && !marketplace && schemeName !== configScheme) { - console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${schemeName}`); - activeScheme = colorSchemes[schemeName]; - } else if (colorSchemes[schemeName]) { - console.warn("[Comfy-Event]: Scheme found but not applied", schemeName); - } else { - console.warn("[Comfy-Event]: Scheme not found", schemeName); + if (colorSchemes?.[schemeName]) { + if (!marketplace && schemeName !== configScheme) { + console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${schemeName}`); + activeScheme = colorSchemes[schemeName]; + } else if (colorSchemes[schemeName]) { + console.warn("[Comfy-Event]: Scheme found but not applied", schemeName); + } else { + console.warn("[Comfy-Event]: Scheme not found", schemeName); + } } if (activeScheme) { From 271ba345cb836c70cd4998ab62000cc8d2d5b8f2 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 00:42:28 +0530 Subject: [PATCH 04/19] chore: Migrate from node-sass to sass --- Comfy/assets/_now_playing.scss | 18 ++++++++++-------- Comfy/assets/_top_bar.scss | 16 +++++++++------- Comfy/package.json | 7 +++++-- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index 6397d22..04920b5 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -28,14 +28,16 @@ } // Connect bar - .main-nowPlayingBar-container { - .main-connectBar-connectBar { - position: absolute; - margin-left: auto; - padding: 0.75rem 1rem; - top: -45%; - // bottom: calc(100% + 0.75rem); // can use this too - right: 0; + .compact-connect-bar { + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + position: absolute; + margin-left: auto; + padding: 0.75rem 1rem; + top: -45%; + // bottom: calc(100% + 0.75rem); // can use this too + right: 0; + } } } } diff --git a/Comfy/assets/_top_bar.scss b/Comfy/assets/_top_bar.scss index ad01cca..ee5cc5c 100644 --- a/Comfy/assets/_top_bar.scss +++ b/Comfy/assets/_top_bar.scss @@ -6,13 +6,15 @@ } .main-topBar-searchBar { - >form input { - &::placeholder { - color: rgba(var(--spice-rgb-selected-row), 0.7); - } - + > form input { height: 32px; background-color: rgba(var(--spice-rgb-shadow), 0.7); + + & { + ::placeholder { + color: rgba(var(--spice-rgb-selected-row), 0.7); + } + } } } @@ -20,7 +22,7 @@ transform: scale(1.1); } - .main-topBar-topbarContent>div:has([data-encore-id="buttonPrimary"]):first-child { + .main-topBar-topbarContent > div:has([data-encore-id="buttonPrimary"]):first-child { display: none !important; } @@ -41,4 +43,4 @@ box-sizing: content-box; width: 12px; } -} \ No newline at end of file +} diff --git a/Comfy/package.json b/Comfy/package.json index 58f63b0..05d2b27 100644 --- a/Comfy/package.json +++ b/Comfy/package.json @@ -11,7 +11,10 @@ "type": "git", "url": "git+https://github.com/Comfy-Themes/Spicetify.git" }, - "keywords": ["comfy", "spicetify"], + "keywords": [ + "comfy", + "spicetify" + ], "author": "Comfy-Themes", "license": "WTFPL", "bugs": { @@ -19,6 +22,6 @@ }, "homepage": "https://github.com/Comfy-Themes/Spicetify#readme", "dependencies": { - "node-sass": "^7.0.3" + "sass": "^1.78.0" } } From 7239734a1db0275cc1caec456c09909cdfee317c Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 01:01:31 +0530 Subject: [PATCH 05/19] feat: add connect bar styles --- Comfy/assets/_now_playing.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index 04920b5..c24d517 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -28,16 +28,10 @@ } // Connect bar - .compact-connect-bar { - .main-nowPlayingBar-container { - .main-connectBar-connectBar { - position: absolute; - margin-left: auto; - padding: 0.75rem 1rem; - top: -45%; - // bottom: calc(100% + 0.75rem); // can use this too - right: 0; - } + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + margin-left: auto; + width: 92vw; } } } From 1f08962b10ec0a5b1ea9e5a373506047459c2655 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 01:02:09 +0530 Subject: [PATCH 06/19] feat: add Compact Connect Bar Snippet this commit also lints the code --- Comfy/app.css | 1459 ++++++++++++++++++++++++++++++++++- Comfy/assets/_snippets.scss | 66 +- 2 files changed, 1502 insertions(+), 23 deletions(-) diff --git a/Comfy/app.css b/Comfy/app.css index 6b636c1..0fd7506 100644 --- a/Comfy/app.css +++ b/Comfy/app.css @@ -1 +1,1458 @@ -:root .global-nav .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;align-items:center;margin-top:64px}:root #main.Banner-Enabled .comfy-banner-frame{display:block}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:top;background-image:var(--image-url);filter:blur(var(--image-blur));-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));transition:background .5s ease}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image:last-of-type{display:none}:root #main.Banner-Enabled .main-entityHeader-backgroundColor{background:none !important}:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px - 12px) !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled .main-actionBarBackground-background{background-image:linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, var(--spice-main) var(--tracklist-gradient-height)),var(--tracklist-gradient-noise) !important;background-color:rgba(0,0,0,0) !important;height:calc(100% - 250px);min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px);background-size:auto 100%,300px var(--tracklist-gradient-height);background-repeat:repeat-x}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent{position:relative !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent .main-actionBarBackground-background{background-image:none !important;background-color:unset !important}:root #main.Banner-Enabled .playlist-playlist-playlistContent,:root #main.Banner-Enabled .dTKw7B8X1ybw7SHebMH3,:root #main.Banner-Enabled .xcTrtCsYOPtSElbX9inq,:root #main.Banner-Enabled .EmeHQXR87mUskYK6xEde,:root #main.Banner-Enabled .N_8iI7NKHP0iG2jp3g0R{background:none}:root #main.Banner-Enabled .main-entityHeader-background{height:calc(clamp(340px,30vh,400px) + var(--tracklist-gradient-height));max-height:100%}:root #main.Banner-Enabled .main-entityHeader-background.main-entityHeader-overlay{--bgColor: unset !important}:root #main.Banner-Enabled .main-entityHeader-withBackgroundImage{height:clamp(340px,30vh,400px) !important}:root .Root__main-view .comfy-banner-frame{display:none}:root .Root__main-view .main-leaderboardComponent-container,:root .Root__main-view .sponsor-container{display:none !important}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)){position:sticky;padding-bottom:32px}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-host-overflow,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-padding,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-viewport,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) div[data-overlayscrollbars~=host],:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) [data-overlayscrollbars-viewport~=scrollbarHidden]{overflow:visible !important}:root .Root__main-view .main-view-container input:checked~.x-toggle-indicatorWrapper{background-color:var(--spice-radio-btn-active)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card{background:var(--spice-sidebar);border-radius:var(--border-radius);padding:0;overflow:hidden}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card:hover{background:var(--spice-card)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-PlayButtonContainer{right:12px !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer{margin-bottom:-4px}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-circular,:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer img{border-radius:0 !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-imageWrapper{box-shadow:none !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-cardMetadata{padding:16px}:root .Root__main-view .main-view-container .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc:after,:root .Root__main-view .main-view-container .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4:after,:root .Root__main-view .main-view-container .main-home-filterChipsContainer>div:first-child:after{background-color:var(--spice-main)}:root .Root__main-view .main-view-container .main-home-homeHeader{display:none}:root .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2),:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer{align-self:center;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText{flex:unset;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText .main-entityHeader-title h1{font-size:3rem !important}:root .Root__main-view .main-view-container .main-actionBar-ActionBar{padding:8px 16px 16px 16px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow:first-of-type>div:first-child{margin-top:-24px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>div:first-child{margin-left:calc(var(--content-spacing) + 3px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>:first-child:not(:only-child){margin-right:calc(var(--content-spacing) + 4px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow [class*=Button]{min-block-size:32px;padding-block:0}:root .Root__main-view .main-view-container .artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer{padding-bottom:var(--grid-gap)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut{border-radius:var(--border-radius)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper{border-radius:calc(var(--border-radius) + 15px)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .main-playButton-PlayButton{background:none !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-Provider{font-size:0}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar{width:0 !important;height:0 !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer .lyrics-lyricsContainer-LyricsBackground{z-index:-1;background-repeat:no-repeat;background-size:cover;-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6))}:root .Root__main-view .main-view-container section[data-testid=your-episodes-page] .main-actionBarBackground-background{height:calc(100vh - 494px) !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar{flex-direction:column-reverse}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow{margin-top:0 !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow:nth-child(1){padding-top:2rem}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li .main-yourLibraryX-listRowEntityImage{border-radius:var(--border-radius) !important}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li>div:active::after{background-color:var(--spice-highlight-elevated);top:0;bottom:0;left:0;right:0}:root .Root__nav-bar .main-rootlist-wrapper [role=presentation]>li>div>div>div>div>div>.x-entityImage-imageContainer{box-shadow:0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important}:root .Root__nav-bar .main-yourLibraryX-isScrolled{box-shadow:none !important}:root .Root__nav-bar .os-scrollbar{display:none}:root .Root__top-container .main-nowPlayingWidget-nowPlaying{height:0;z-index:1;left:var(--cover-art-left)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{bottom:var(--cover-art-bottom);border-radius:var(--cover-art-radius)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>div button{border-radius:var(--cover-art-radius) !important;background:none}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .cover-art,:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .VideoPlayer__container video{width:var(--cover-art-width) !important;height:var(--cover-art-height) !important;border-radius:var(--cover-art-radius);overflow:hidden;object-fit:cover;max-height:none;max-width:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{position:relative;border-top:none;flex-direction:column-reverse !important;background-clip:text}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container::before{z-index:auto !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container:has(.main-connectBar-connectBar)::before{height:calc(100% - 40px);top:40px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{margin-bottom:12px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .player-controls__buttons--new-icons{margin-bottom:0px !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar{position:fixed;display:grid;grid-template-columns:auto auto;grid-template-areas:"time-left time-right" "bar bar";bottom:0;right:0;gap:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .saber-hilt{height:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container){text-align:center}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):first-of-type{grid-area:time-left}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):last-of-type{grid-area:time-right}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar-container{display:contents}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar{grid-column:1/3;grid-area:bar;height:11px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);--fg-color: var(--spice-progress-fg);--progress-bar-height: 12px;--progress-bar-radius: 0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .x-progressBar-fillColor{width:107%;background-color:rgba(0,0,0,0);background-image:linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .progress-bar__slider{display:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-volumeBar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive){color:rgba(var(--spice-rgb-selected-row), 0.7)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive):hover{color:var(--spice-text) !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls .main-devicePicker-indicator{display:none}.x-settings-container{max-width:unset}.x-toggle-indicatorWrapper{border-radius:var(--button-radius)}#main.Settings-Open~generic-modal .GenericModal__overlay{--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header{padding:12px 12px 12px 16px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-type-alto{font-size:25px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn{background-color:var(--background-tinted-base);height:34px;cursor:pointer}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:hover{transform:scale(1.04) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:focus{transform:scale(1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:active{transform:scale(0.98) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:first-of-type{margin-left:auto}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:not(:last-of-type){margin-right:8px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:last-of-type svg{scale:.8}#main.Settings-Open~generic-modal .GenericModal__overlay .main-embedWidgetGenerator-container{max-height:75vh !important;width:550px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection{padding:0px 16px 0;scrollbar-width:thin;min-height:calc(100% - 60px)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection::after{content:"";position:absolute;bottom:0;width:calc(100% - 12px);left:0;height:25px;background:linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5));pointer-events:none;border-radius:8px;z-index:0;border-bottom-right-radius:0}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar{width:8px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb{border-radius:1em !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal{border-radius:10px}.comfy-settings .search-searchCategory-SearchCategory{background:var(--spice-player);grid-column:1/-1;height:48px;padding-top:7px;position:sticky;top:0px;z-index:1}.comfy-settings .search-searchCategory-SearchCategory{height:unset;padding-bottom:12px;padding-top:12px;top:0}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%;padding-inline:0px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGrid{overflow-y:hidden}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem{cursor:pointer;padding:2px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem button::after{border:none !important}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:active,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:hover{text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible{outline:none;text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible>*{outline:5px auto #3673d4}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem>*{margin-inline-end:8px;margin-block-end:0 !important}.comfy-settings .setting-header{text-align:center;padding:5px 0}.comfy-settings .setting-card{background-color:var(--background-tinted-base);border-radius:10px;margin:8px 0}.comfy-settings .setting-card .setting-container{padding:12px 16px;display:flex;flex-direction:column}.comfy-settings .setting-card .setting-container .setting-item{display:flex;flex-direction:row;justify-content:space-between}.comfy-settings .setting-card .setting-container .setting-item .setting-title{padding-right:15px;font-weight:600}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip{cursor:help !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper{padding:0px 8px 0px 8px !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper svg{fill:var(--spice-subtext);transition:fill .2s}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:focus-within svg,.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:hover svg{fill:var(--spice-text) !important}.comfy-settings .setting-card .setting-container .setting-action,.comfy-settings .setting-card .setting-container .setting-title{display:flex;align-items:center;padding:8px 0}.comfy-settings .setting-card .setting-description{font-size:.9rem;color:var(--spice-subtext)}.comfy-settings .setting-card .setting-description-spacer{height:.9rem}.comfy-settings .setting-card .setting-action{text-align:right}.comfy-settings .setting-card .setting-action .x-toggle-wrapper{cursor:pointer}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-input{width:100%}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-indicatorWrapper{transition:background-color .2s;--spice-button-disabled: var(--background-tinted-base)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:checked:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--spice-button-active)}.comfy-settings .setting-card .setting-action button.switch{border:0px;background-color:var(--background-tinted-base);cursor:pointer;display:flex;padding:8px;margin-inline-end:12px}.comfy-settings .setting-card .setting-action button.switch:hover{transform:scale(1.04);color:var(--spice-text)}.comfy-settings .setting-card .setting-action button.switch:active{transform:scale(0.98);color:var(--spice-text)}.comfy-settings .setting-card .setting-action input{padding-inline:10px;text-align:center;background-color:var(--background-tinted-base);color:var(--spice-text);border:none;height:32px;width:120px}.comfy-settings .setting-card .setting-action input::placeholder{color:rgba(var(--spice-rgb-text), 0.3)}.comfy-settings .setting-card .setting-action input[type=number]{width:50px;transition:width .2s}.comfy-settings .setting-card .setting-action input[type=number]::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]::-webkit-outer-spin-button{display:none}.comfy-settings .setting-card .setting-action input[type=number]:hover{width:60px}.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-outer-spin-button{display:block}.comfy-settings .setting-card .setting-action input[type=color]{width:32px;padding:3px;transition:all .2s ease;cursor:pointer;margin-left:8px}.comfy-settings .setting-card .setting-action input[type=color]:hover,.comfy-settings .setting-card .setting-action input[type=color]:focus,.comfy-settings .setting-card .setting-action input[type=color]:active{scale:1.04;background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch-wrapper{padding:0;margin:0}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--button-radius)}.comfy-settings .setting-card .setting-action .dropdown-wrapper{position:relative}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-button{border-bottom-left-radius:0;border-bottom-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(var(--spice-rgb-text), 0.7);border-width:0 5px 5px}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button{position:relative;background-color:var(--background-tinted-base);border:0;border-radius:var(--button-radius);box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);cursor:default;outline:0;padding:0 36px 0 16px;transition:all .2s ease;height:32px;cursor:pointer !important}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button:hover{color:var(--spice-rgb-text);background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button .dropdown-selection{display:flex;align-items:center;height:32px}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-arrow{border-color:rgba(var(--spice-rgb-text), 0.7) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-ceil(2.5);position:absolute;right:16px;top:14px;width:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-menu{scrollbar-width:thin;background-color:var(--spice-card);opacity:1;border:0;border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option{box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);background-color:var(--background-tinted-highlight);cursor:pointer;display:block;padding:8px 10px;text-align:center}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option.selected{background-color:rgba(var(--spice-rgb-text), 0.7);color:var(--spice-sidebar)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option:hover{background-color:rgb(var(--spice-rgb-text));color:var(--spice-sidebar)}.comfy-settings .setting-subSection#enabled .setting-card{border-radius:0;margin:0}.comfy-settings .setting-subSection#enabled .setting-card:first-child{border-radius:10px 10px 0px 0px;background-color:var(--spice-sidebar);margin-top:8px;transition:.2s}.comfy-settings .setting-subSection#enabled .setting-card:first-child:hover{background-color:var(--spice-button-disabled);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#enabled .setting-card:first-child .setting-title{cursor:pointer !important}.comfy-settings .setting-subSection#enabled .setting-card:last-child{border-radius:0 0 10px 10px;margin-bottom:8px}.comfy-settings .setting-subSection#collapsed .setting-card{background-color:var(--spice-sidebar);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#collapsed .setting-card:hover{background-color:var(--spice-button-disabled)}.comfy-settings .setting-subSection#collapsed .setting-card .setting-title{cursor:pointer !important}.comfy-settings .setting-button-row{display:flex;align-items:center;justify-content:space-between;padding:8px}.comfy-settings .main-buttons-button{background-color:rgba(0,0,0,0);color:var(--spice-button);border:2px solid var(--spice-button) !important;margin:5px 10px;border:2px solid rgba(0,0,0,0);border-radius:10px;cursor:pointer;display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.76px;line-height:18px;padding:8px 8%;text-align:center;text-transform:uppercase;transition:all 33ms cubic-bezier(0.3, 0, 0, 1);white-space:nowrap;will-change:transform}.comfy-settings .main-buttons-button:hover{transform:scale(1.02);filter:brightness(1.2)}.comfy-settings .main-buttons-button:active{transform:scale(0.98);filter:brightness(0.8)}:root .main-topBar-container .main-topBar-topbarContent *,:root .main-topBar-container .main-topBar-topbarContentWrapper *{justify-content:center;text-align:center}:root .main-topBar-container .main-topBar-searchBar>form input{height:32px;background-color:rgba(var(--spice-rgb-shadow), 0.7)}:root .main-topBar-container .main-topBar-searchBar>form input::placeholder{color:rgba(var(--spice-rgb-selected-row), 0.7)}:root .main-topBar-container .main-topBar-historyButtons button:hover{transform:scale(1.1)}:root .main-topBar-container .main-topBar-topbarContent>div:has([data-encore-id=buttonPrimary]):first-child{display:none !important}:root .main-topBar-container .main-topBar-background{background-color:var(--spice-main) !important}:root .main-topBar-container .main-topBar-overlay{background-color:rgba(0,0,0,0) !important}:root .main-topBar-container .main-topBar-UpgradeButton{font-size:0;overflow:hidden;background:url("https://i.imgur.com/nzAfcIL.png") 50%/contain no-repeat;border:none;padding:5px;box-sizing:content-box;width:12px}:root.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:60px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:0px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:72px 0px !important}:root.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top{height:calc(var(--comfy-topbar-height, 40px) + 8px) !important}:root:has(#main.Flatten-Colors-normal){--spice-main: var(--spice-sidebar);--spice-main-transition: var(--spice-sidebar);--spice-rgb-main: var(--spice-rgb-sidebar);--spice-rgb-main-transition: var(--spice-rgb-sidebar)}:root:has(#main.Flatten-Colors-reverse){--spice-sidebar: var(--spice-main);--spice-rgb-sidebar: var(--spice-rgb-main)}:root:has(#main.Comfy-Dark-Modals-Snippet) .ABD0FGjBGqGZG33bP7Lc,:root:has(#main.Comfy-Dark-Modals-Snippet) .main-duplicateTrackModal-container{background-color:var(--spice-main);color:var(--spice-text)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-player, var(--spice-sidebar))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar{margin-bottom:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar{padding:0 8px 6px 0 !important;margin-bottom:0 !important;background:var(--bg-img, var(--spice-player));border-radius:var(--border-radius)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar{position:absolute !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text{position:fixed;bottom:14px;right:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type{transform:translateX(calc(-100% - 20px))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after{position:absolute;left:calc(100% + 10px);font-weight:bold;color:rgba(var(--spice-rgb-custom-subdued), 0.8);content:"/";transform:translateX(-50%)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea{border-radius:0 0 8px 8px !important;height:6px !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after{content:"";padding:8px;position:absolute;top:-6px;width:calc(100% - 16px)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor{height:6px !important;border-radius:50px !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-main) !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .main-nowPlayingBar-nowPlayingBar{background:var(--bg-img, var(--spice-main))}:root #main.Comfy-kitty-Snippet .Root__main-view{background-image:url("https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif") !important;background-position-x:center !important;background-position-y:center !important;background-size:610px !important;background-repeat:no-repeat !important}:root #main.Remove-Column-Bar-Snippet .main-trackList-trackListHeader{display:none}:root #main.Home-Header-Snippet .main-home-homeHeader{display:block !important}:root #main.Home-Header-Color .main-home-homeHeader{background-color:var(--home-header-color) !important}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list{justify-content:center;align-items:center;display:flex;flex-wrap:wrap}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list span{display:none}:root #main.Horizontal-pageLinks-Snippet .main-yourLibraryX-navItem{padding:4px 8px !important}:root #main.Playbar-Above-Right-Panel-Snippet .artist-artistOverview-artistOverviewContent,:root #main.Playbar-Above-Right-Panel-Snippet .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 50px) !important}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container{grid-template-areas:"left-sidebar main-view now-playing-bar" "left-sidebar main-view right-sidebar"}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container[data-right-sidebar-hidden] .Root__main-view{grid-area:main-view/main-view/main-view/span 1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__main-view,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__nav-bar{margin-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__right-sidebar{height:calc(100vh - 450px);width:min-content;padding-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar{width:var(--comfy-panel-width);background-color:var(--spice-main);border-radius:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{flex-direction:column;min-width:280px;max-width:420px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{flex-direction:column;padding:8px;min-height:400px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-left{width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .player-controls__buttons.player-controls__buttons--new-icons{order:2}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS{order:1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right{width:calc(var(--comfy-panel-width) - 16px)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls{width:calc(var(--comfy-panel-width) - 16px);justify-content:space-evenly}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{width:100%;height:100%;bottom:0}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child{width:100%;height:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child>:first-child{width:100%;height:100%;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .main-coverSlotCollapsed-expandButton{top:3%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx{background-color:rgba(0,0,0,0);margin:auto;width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt{width:100%;height:100%;padding-bottom:5px;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art{height:220px !important;width:220px !important;margin:auto;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art img{background-color:rgba(0,0,0,0);box-shadow:0 0 5px 5px var(--spice-text)}:root #main.Smooth-Progress-Bar-Snippet .playback-bar>div,:root #main.Smooth-Progress-Bar-Snippet .playback-bar~div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea>div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea~div{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:1000ms;transition-duration:1000ms;-webkit-transition-property:left,-webkit-transform;transition-property:left,-webkit-transform;transition-property:transform,left;transition-property:transform,left,-webkit-transform;-webkit-transition-timing-function:linear;transition-timing-function:linear}:root #main.Remove-Progress-Bar-Gradient-Snippet .x-progressBar-fillColor{background-color:var(--fg-color) !important;border-radius:var(--progress-bar-radius) !important;height:var(--progress-bar-height) !important;transform:translateX(calc(-100% + var(--progress-bar-transform))) !important;width:100% !important}:root #main.Remove-Connect-Bar-Snippet .main-connectBar-connectBar,:root #main.Remove-Connect-Bar-Snippet .main-devicePicker-indicator{display:none !important}:root #main.Remove-Lyrics-Button-Snippet .main-nowPlayingBar-lyricsButton{display:none !important}:root #main.Hoverable-Timers-Snippet .playback-bar>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS>div{transition:all .3s ease;opacity:0}:root #main.Hoverable-Timers-Snippet .playback-bar:hover>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS:hover>div{transition:all .3s ease;opacity:1 !important}:root #main.Hoverable-Timers-Snippet .playback-bar .playback-progressbar,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .playback-progressbar{opacity:1 !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container{grid-template-areas:"top-bar top-bar top-bar" "left-sidebar main-view right-sidebar" "now-playing-bar now-playing-bar now-playing-bar" !important;grid-template-rows:0 1fr auto !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container{pointer-events:none;grid-area:top-bar;contain:unset;top:calc(var(--comfy-topbar-height, 40px)*-1 + 1px);height:calc(var(--comfy-topbar-height, 40px) + 8px);padding-block:8px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper>*:not(.main-topBar-searchBar):not(:has(ul)){justify-content:center;display:flex}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper ul{text-align:center !important;justify-content:center}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper .queue-tabBar-headerItemLink{padding:5px 16px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent{app-region:drag !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent .main-entityHeader-topbarTitle{height:100%}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-background{display:none}:root #main.Topbar-Inside-Titlebar-Snippet main:not(:has(.main-home-filterChipsContainer)),:root #main.Topbar-Inside-Titlebar-Snippet .queue-queuePage-queuePage,:root #main.Topbar-Inside-Titlebar-Snippet .search-searchCategory-SearchCategory,:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar,:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91,:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{margin-top:-64px !important;top:0 !important}:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91{padding-top:15px !important}:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{padding-top:8px}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar{height:64px !important;box-shadow:none}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum{padding-top:32px}:root #main.Topbar-Inside-Titlebar-Snippet .main-view-container .search-searchCategory-SearchCategory{height:64px;padding-top:17px}:root #main.Collapse-Topbar-Snippet .main-topBar-topbarContentWrapper nav{justify-content:center;display:flex}:root #main.Header-Background .main-entityHeader-imageContainerNew{align-self:center;left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 24px + var(--content-spacing));position:relative;z-index:1}:root #main.Header-Background .main-entityHeader-headerText{background-color:rgba(var(--spice-rgb-main-transition), var(--header-opacity));padding:24px 32px;border-radius:var(--border-radius);min-width:fit-content;box-shadow:0 2px 4px rgba(var(--spice-rgb-shadow), 0.1);justify-content:space-evenly !important;height:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 48px)}:root #main.Header-Background .main-entityHeader-imageContainerNew+.main-entityHeader-headerText{padding-left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 32px + var(--content-spacing));margin-right:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + var(--content-spacing))}:root #main.Header-Background:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>*{opacity:var(--top-bar-opacity) !important}:root #main.AM-Gradient-Include-Existing-Snippet.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame),:root #main.Replace-Existing-Banners.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame){display:none !important}:root #main.Lyrics main>div>div:empty{--lyrics-color-background: transparent !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame{position:absolute;width:100%;height:100%;z-index:0;filter:blur(calc(var(--image-blur) * 10));background-image:var(--gradient-background-image)}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image{position:absolute !important;width:var(--gradient-width) !important;aspect-ratio:1;animation:rotate var(--gradient-speed) linear infinite;border-radius:var(--gradient-radius) !important;mix-blend-mode:var(--gradient-blend-mode);background-size:cover !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:first-of-type{height:revert;left:unset;background-size:unset;background-position:unset;filter:none;-webkit-mask-image:none;mask-image:none;right:0;top:0;z-index:10}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:last-of-type{display:revert;left:0;bottom:0;animation-direction:reverse}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}:root .main-trackList-active .main-trackList-rowTitle{color:var(--spice-text) !important;text-shadow:0px 0px 6px var(--spice-text);-webkit-text-stroke:thin}:root .main-trackList-trackListHeader._2ajKWDiy6YvJu5wo8I1g{background:var(--spice-main) !important;top:0 !important}:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListRow:hover,:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListHeaderRow:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.05)}:root .main-trackList-trackListRow,:root .main-trackList-trackListHeaderRow{border-radius:var(--border-radius);border:none;transition:200ms background-color}:root .main-trackList-trackListRow.main-trackList-selected,:root .main-trackList-trackListHeaderRow.main-trackList-selected{background-color:rgba(var(--spice-rgb-selected-row), 0.1)}:root .main-trackList-trackListRow.main-trackList-selected:hover,:root .main-trackList-trackListHeaderRow.main-trackList-selected:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.15)}:root .main-trackList-trackListRow .main-type-mesto,:root .main-trackList-trackListRow .main-type-ballad,:root .main-trackList-trackListHeaderRow .main-type-mesto,:root .main-trackList-trackListHeaderRow .main-type-ballad{transition:300ms color}:root .main-trackList-trackListRow .main-trackList-rowImageFallback,:root .main-trackList-trackListHeaderRow .main-trackList-rowImageFallback{border-radius:var(--border-radius) !important}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListHeader .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListHeader .main-trackList-rowSectionIndex{opacity:0}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex{background:rgba(var(--spice-rgb-play-button), 0.5)}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton{opacity:1}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowSectionIndex{color:var(--spice-sidebar);border-radius:var(--border-radius);transition:200ms opacity,200ms background}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow>.main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow>.main-trackList-rowSectionIndex{position:relative;z-index:1000;top:8px;left:56px;width:40px;height:40px;justify-content:center;text-indent:-1000px}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="3"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="4"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="5"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="6"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important}:root{--border-radius: 8px;--button-radius: 8px;--image-blur: 4px;--gradient-speed: 50s;--gradient-width: 150%;--gradient-blend-mode: luminosity;--gradient-background-image: none;--gradient-radius: 50%;--cover-art-width: 84px;--cover-art-height: 84px;--cover-art-radius: 8px;--cover-art-left: 0px;--cover-art-bottom: 20px;--header-opacity: 0.6;--tracklist-gradient-height: 232px;--tracklist-gradient-opacity: 0.6;--tracklist-gradient-noise: var(--background-noise);--image-url: none}:root button,:root button span,:root input,:root select,:root img,:root .x-entityImage-xsmall,:root div[style*=background-image]:has(img),:root .profile-userEditDetails-image div:nth-child(2),:root [data-encore-id=buttonSecondary]{border-radius:var(--border-radius) !important}:root button:not(.main-editImageButton-overlay):not([style*=background-image]):not(.main-buddyFeed-overlay),:root button span:not(.Lyric.Synced.Line):not([data-encore-id=text]),:root button figure img,:root button:has(span:empty),:root input:not([style*=background-image]),:root select,:root [data-encore-id=buttonSecondary]{border-radius:var(--button-radius) !important}:root .Root__top-container{overflow:hidden}:root:not(:has(.global-nav)) .Root__top-container{padding-top:max(var(--comfy-topbar-height, 40px)/var(--zoom, 1),8px) !important}:root .global-nav .Root__top-container{grid-template-rows:calc(var(--comfy-topbar-height, 64px)/var(--zoom, 1) - 16px) 1fr auto}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav) body::after{height:calc(var(--comfy-topbar-height, 64px)/var(--zoom, 1)) !important}:root.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav{padding-block:calc(var(--comfy-topbar-height, 64px)/2 - 8px)}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after{content:"";position:absolute;right:0;z-index:999;backdrop-filter:brightness(2.12);width:calc(135px/var(--zoom, 1));height:calc(var(--comfy-topbar-height, 40px)/var(--zoom, 1))}:root .main-trackList-playingIcon,:root .view-homeShortcutsGrid-playingIcon,:root [src*=equaliser]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");background:var(--spice-button-active);content-visibility:hidden;-webkit-mask-repeat:no-repeat;border-radius:0 !important}:root .x-settings-equalizerPanelCanvas{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;border-radius:0 !important}:root .encore-dark-theme,:root .encore-dark-theme .encore-base-set{--background-elevated-base: var(--spice-main-elevated);--background-highlight: var(--spice-highlight)}:root .encore-bright-accent-set{--background-base: var(--spice-play-button);--background-highlight: var(--spice-play-button-active);--background-press: var(--spice-play-button-active)}:root .encore-inverted-light-set{--background-highlight: var(--spice-text);--background-press: var(--spice-subtext)}:root .npv-background-image__overlay{background:linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%),var(--background-noise);background-color:unset}:root .Root__main-view .main-view-container__scroll-node-child{padding-bottom:0}:root aside#Desktop_PanelContainer_Id .os-scrollbar-vertical,:root .os-scrollbar-horizontal{display:none !important}:root .os-scrollbar-track,:root ::-webkit-scrollbar{width:8px}:root .os-scrollbar-handle,:root ::-webkit-scrollbar-thumb{border-radius:1em;--os-handle-perpendicular-size-active: 8px;--os-handle-perpendicular-size-hover: 8px;--os-handle-perpendicular-size: 8px}:root .os-scrollbar{--os-padding-perpendicular: 4px}:root ::-webkit-scrollbar-track{margin-bottom:10px}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,:root .main-addButton-active{color:var(--spice-heart)}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover,:root .main-addButton-active:hover{color:rgba(var(--spice-rgb-heart), 0.7)}:root #_R_G *:not([stroke=none]){stroke:var(--spice-heart)}:root .main-trackList-rowHeartButton *:not([fill=none]),:root .control-button-heart *:not([fill=none]),:root #_R_G *:not([fill=none]){fill:var(--spice-heart) !important}:root #context-menu{overflow:hidden}:root #context-menu .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span+svg)::before{border-bottom:1px solid rgba(var(--spice-rgb-selected-row), 0.1);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:root #context-menu .main-popper-arrow,:root #context-menu .main-popper-arrow::before{background-color:var(--spice-player) !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]){background-color:var(--spice-player)}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a{border-radius:2px !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button[aria-expanded=true],:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color}:root #bookmark-menu{background-color:var(--spice-player);border-radius:var(--border-radius)}:root #bookmark-menu .bookmark-filter{background-color:var(--spice-player)}:root #bookmark-menu button,:root #bookmark-menu a{border-radius:0}:root #bookmark-menu button::before,:root #bookmark-menu button::after,:root #bookmark-menu a::before,:root #bookmark-menu a::after{content:none}:root #bookmark-menu button:not(.main-contextMenu-disabled):focus,:root #bookmark-menu button:not(.main-contextMenu-disabled):hover,:root #bookmark-menu button[aria-expanded=true],:root #bookmark-menu a:not(.main-contextMenu-disabled):focus,:root #bookmark-menu a:not(.main-contextMenu-disabled):hover,:root #bookmark-menu a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color} +:root .global-nav .Root__main-view .main-view-container .main-entityHeader-container { + padding: 32px; + align-items: center; + margin-top: 64px; +} + +:root #main.Banner-Enabled .comfy-banner-frame { + display: block; +} +:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-size: cover; + background-position: top; + background-image: var(--image-url); + filter: blur(var(--image-blur)); + -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); + mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); + transition: background 0.5s ease; +} +:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image:last-of-type { + display: none; +} +:root #main.Banner-Enabled .main-entityHeader-backgroundColor { + background: none !important; +} +:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) .artist-artistOverview-artistOverviewContent, +:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) .main-actionBarBackground-background { + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 128px - 12px) !important; +} +:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent, +:root #main.Banner-Enabled .main-actionBarBackground-background { + background-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, var(--spice-main) var(--tracklist-gradient-height)), var(--tracklist-gradient-noise) !important; + background-color: transparent !important; + height: calc(100% - 250px); + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 128px); + background-size: auto 100%, 300px var(--tracklist-gradient-height); + background-repeat: repeat-x; +} +:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent { + position: relative !important; +} +:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent .main-actionBarBackground-background { + background-image: none !important; + background-color: unset !important; +} +:root #main.Banner-Enabled .playlist-playlist-playlistContent, +:root #main.Banner-Enabled .dTKw7B8X1ybw7SHebMH3, +:root #main.Banner-Enabled .xcTrtCsYOPtSElbX9inq, +:root #main.Banner-Enabled .EmeHQXR87mUskYK6xEde, +:root #main.Banner-Enabled .N_8iI7NKHP0iG2jp3g0R { + background: none; +} +:root #main.Banner-Enabled .main-entityHeader-background { + height: calc(clamp(340px, 30vh, 400px) + var(--tracklist-gradient-height)); + max-height: 100%; +} +:root #main.Banner-Enabled .main-entityHeader-background.main-entityHeader-overlay { + --bgColor: unset !important; +} +:root #main.Banner-Enabled .main-entityHeader-withBackgroundImage { + height: clamp(340px, 30vh, 400px) !important; +} + +:root .Root__main-view .comfy-banner-frame { + display: none; +} +:root .Root__main-view .main-leaderboardComponent-container, +:root .Root__main-view .sponsor-container { + display: none !important; +} +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) { + position: sticky; + padding-bottom: 32px; +} +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-host-overflow, +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-padding, +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-viewport, +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) div[data-overlayscrollbars~=host], +:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) [data-overlayscrollbars-viewport~=scrollbarHidden] { + overflow: visible !important; +} +:root .Root__main-view .main-view-container input:checked ~ .x-toggle-indicatorWrapper { + background-color: var(--spice-radio-btn-active); +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card { + background: var(--spice-sidebar); + border-radius: var(--border-radius); + padding: 0; + overflow: hidden; +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card:hover { + background: var(--spice-card); +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-PlayButtonContainer { + right: 12px !important; +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer { + margin-bottom: -4px; +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-circular, +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer img { + border-radius: 0 !important; +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-imageWrapper { + box-shadow: none !important; +} +:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-cardMetadata { + padding: 16px; +} +:root .Root__main-view .main-view-container .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc:after, +:root .Root__main-view .main-view-container .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4:after, +:root .Root__main-view .main-view-container .main-home-filterChipsContainer > div:first-child:after { + background-color: var(--spice-main); +} +:root .Root__main-view .main-view-container .main-home-homeHeader { + display: none; +} +:root .Root__main-view .main-view-container .main-entityHeader-container { + padding: 32px; + justify-content: center; +} +:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2), :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing, +:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer { + align-self: center; + justify-content: center; +} +:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2) + .main-entityHeader-headerText, :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing + .main-entityHeader-headerText, +:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer + .main-entityHeader-headerText { + flex: unset; + justify-content: center; +} +:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2) + .main-entityHeader-headerText .main-entityHeader-title h1, :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing + .main-entityHeader-headerText .main-entityHeader-title h1, +:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer + .main-entityHeader-headerText .main-entityHeader-title h1 { + font-size: 3rem !important; +} +:root .Root__main-view .main-view-container .main-actionBar-ActionBar { + padding: 8px 16px 16px 16px; +} +:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow:first-of-type > div:first-child { + margin-top: -24px; +} +:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow > div:first-child { + margin-left: calc(var(--content-spacing) + 3px); +} +:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow > :first-child:not(:only-child) { + margin-right: calc(var(--content-spacing) + 4px); +} +:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow [class*=Button] { + min-block-size: 32px; + padding-block: 0; +} +:root .Root__main-view .main-view-container .artist-artistOverview-artistOverviewContent .contentSpacing > .main-gridContainer-gridContainer { + padding-bottom: var(--grid-gap); +} +:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut { + border-radius: var(--border-radius); +} +:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper { + border-radius: calc(var(--border-radius) + 15px); +} +:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .main-playButton-PlayButton { + background: none !important; +} +:root .Root__main-view .main-view-container .lyrics-lyricsContainer-Provider { + font-size: 0; +} +:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; +} +:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer .lyrics-lyricsContainer-LyricsBackground { + z-index: -1; + background-repeat: no-repeat; + background-size: cover; + -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); + mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); +} +:root .Root__main-view .main-view-container section[data-testid=your-episodes-page] .main-actionBarBackground-background { + height: calc(100vh - 494px) !important; +} +:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar { + flex-direction: column-reverse; +} +:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow { + margin-top: 0 !important; +} +:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow:nth-child(1) { + padding-top: 2rem; +} + +:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li .main-yourLibraryX-listRowEntityImage { + border-radius: var(--border-radius) !important; +} +:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:active::after { + background-color: var(--spice-highlight-elevated); + top: 0; + bottom: 0; + left: 0; + right: 0; +} +:root .Root__nav-bar .main-rootlist-wrapper [role=presentation] > li > div > div > div > div > div > .x-entityImage-imageContainer { + box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important; +} +:root .Root__nav-bar .main-yourLibraryX-isScrolled { + box-shadow: none !important; +} +:root .Root__nav-bar .os-scrollbar { + display: none; +} + +:root .Root__top-container .main-nowPlayingWidget-nowPlaying { + height: 0; + z-index: 1; + left: var(--cover-art-left); +} +:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container { + bottom: var(--cover-art-bottom); + border-radius: var(--cover-art-radius); +} +:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > div button { + border-radius: var(--cover-art-radius) !important; + background: none; +} +:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .cover-art, +:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .VideoPlayer__container video { + width: var(--cover-art-width) !important; + height: var(--cover-art-height) !important; + border-radius: var(--cover-art-radius); + overflow: hidden; + object-fit: cover; + max-height: none; + max-width: none; +} +:root .Root__top-container .main-nowPlayingBar-container .main-connectBar-connectBar { + margin-left: auto; + width: 92vw; +} + +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container { + position: relative; + border-top: none; + flex-direction: column-reverse !important; + background-clip: text; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container::before { + z-index: auto !important; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container:has(.main-connectBar-connectBar)::before { + height: calc(100% - 40px); + top: 40px; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar { + margin-bottom: 12px; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .player-controls__buttons--new-icons { + margin-bottom: 0px !important; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar { + position: fixed; + display: grid; + grid-template-columns: auto auto; + grid-template-areas: "time-left time-right" "bar bar"; + bottom: 0; + right: 0; + gap: 0; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .saber-hilt { + height: 0; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container) { + text-align: center; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container):first-of-type { + grid-area: time-left; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container):last-of-type { + grid-area: time-right; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar-container { + display: contents; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar { + grid-column: 1/3; + grid-area: bar; + height: 11px; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar { + --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); + --fg-color: var(--spice-progress-fg); + --progress-bar-height: 12px; + --progress-bar-radius: 0; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .x-progressBar-fillColor { + width: 107%; + background-color: transparent; + background-image: linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%); +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .progress-bar__slider { + display: none; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-volumeBar .progress-bar { + --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive) { + color: rgba(var(--spice-rgb-selected-row), 0.7); +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive):hover { + color: var(--spice-text) !important; +} +:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls .main-devicePicker-indicator { + display: none; +} + +.x-settings-container { + max-width: unset; +} + +.x-toggle-indicatorWrapper { + border-radius: var(--button-radius); +} + +#main.Settings-Open ~ generic-modal .GenericModal__overlay { + --background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07); + --background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1); +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header { + padding: 12px 12px 12px 16px; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-type-alto { + font-size: 25px; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn { + background-color: var(--background-tinted-base); + height: 34px; + cursor: pointer; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:hover { + transform: scale(1.04) !important; + color: var(--spice-text); +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:focus { + transform: scale(1); +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:active { + transform: scale(0.98) !important; + color: var(--spice-text); +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:first-of-type { + margin-left: auto; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:not(:last-of-type) { + margin-right: 8px; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:last-of-type svg { + scale: 0.8; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-embedWidgetGenerator-container { + max-height: 75vh !important; + width: 550px !important; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection { + padding: 0px 16px 0; + scrollbar-width: thin; + min-height: calc(100% - 60px); +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection::after { + content: ""; + position: absolute; + bottom: 0; + width: calc(100% - 12px); + left: 0; + height: 25px; + background: linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5)); + pointer-events: none; + border-radius: 8px; + z-index: 0; + border-bottom-right-radius: 0; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar, +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar, +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar { + width: 8px !important; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar-thumb, +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb, +#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb { + border-radius: 1em !important; +} +#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal { + border-radius: 10px; +} + +.comfy-settings .search-searchCategory-SearchCategory { + background: var(--spice-player); + grid-column: 1/-1; + height: 48px; + padding-top: 7px; + position: sticky; + top: 0px; + z-index: 1; +} +.comfy-settings .search-searchCategory-SearchCategory { + height: unset; + padding-bottom: 12px; + padding-top: 12px; + top: 0; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + overflow: hidden; + width: 100%; + padding-inline: 0px; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGrid { + overflow-y: hidden; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem { + cursor: pointer; + padding: 2px; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem button::after { + border: none !important; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:active, .comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus, .comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:hover { + text-decoration: none; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible { + outline: none; + text-decoration: none; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible > * { + outline: 5px auto #3673d4; +} +.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem > * { + margin-inline-end: 8px; + margin-block-end: 0 !important; +} +.comfy-settings .setting-header { + text-align: center; + padding: 5px 0; +} +.comfy-settings .setting-card { + background-color: var(--background-tinted-base); + border-radius: 10px; + margin: 8px 0; +} +.comfy-settings .setting-card .setting-container { + padding: 12px 16px; + display: flex; + flex-direction: column; +} +.comfy-settings .setting-card .setting-container .setting-item { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.comfy-settings .setting-card .setting-container .setting-item .setting-title { + padding-right: 15px; + font-weight: 600; +} +.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip { + cursor: help !important; +} +.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper { + padding: 0px 8px 0px 8px !important; +} +.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper svg { + fill: var(--spice-subtext); + transition: fill 0.2s; +} +.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:focus-within svg, .comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:hover svg { + fill: var(--spice-text) !important; +} +.comfy-settings .setting-card .setting-container .setting-action, +.comfy-settings .setting-card .setting-container .setting-title { + display: flex; + align-items: center; + padding: 8px 0; +} +.comfy-settings .setting-card .setting-description { + font-size: 0.9rem; + color: var(--spice-subtext); +} +.comfy-settings .setting-card .setting-description-spacer { + height: 0.9rem; +} +.comfy-settings .setting-card .setting-action { + text-align: right; +} +.comfy-settings .setting-card .setting-action .x-toggle-wrapper { + cursor: pointer; +} +.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-input { + width: 100%; +} +.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-indicatorWrapper { + transition: background-color 0.2s; + --spice-button-disabled: var(--background-tinted-base); +} +.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { + background-color: var(--background-tinted-highlight); +} +.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { + background-color: var(--spice-button-active); +} +.comfy-settings .setting-card .setting-action button.switch { + border: 0px; + background-color: var(--background-tinted-base); + cursor: pointer; + display: flex; + padding: 8px; + margin-inline-end: 12px; +} +.comfy-settings .setting-card .setting-action button.switch:hover { + transform: scale(1.04); + color: var(--spice-text); +} +.comfy-settings .setting-card .setting-action button.switch:active { + transform: scale(0.98); + color: var(--spice-text); +} +.comfy-settings .setting-card .setting-action input { + padding-inline: 10px; + text-align: center; + background-color: var(--background-tinted-base); + color: var(--spice-text); + border: none; + height: 32px; + width: 120px; +} +.comfy-settings .setting-card .setting-action input::placeholder { + color: rgba(var(--spice-rgb-text), 0.3); +} +.comfy-settings .setting-card .setting-action input[type=number] { + width: 50px; + transition: width 0.2s; +} +.comfy-settings .setting-card .setting-action input[type=number]::-webkit-inner-spin-button, .comfy-settings .setting-card .setting-action input[type=number]::-webkit-outer-spin-button { + display: none; +} +.comfy-settings .setting-card .setting-action input[type=number]:hover { + width: 60px; +} +.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-inner-spin-button, .comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-outer-spin-button { + display: block; +} +.comfy-settings .setting-card .setting-action input[type=color] { + width: 32px; + padding: 3px; + transition: all 0.2s ease; + cursor: pointer; + margin-left: 8px; +} +.comfy-settings .setting-card .setting-action input[type=color]:hover, .comfy-settings .setting-card .setting-action input[type=color]:focus, .comfy-settings .setting-card .setting-action input[type=color]:active { + scale: 1.04; + background-color: var(--background-tinted-highlight); +} +.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch-wrapper { + padding: 0; + margin: 0; +} +.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch { + border: none; + border-radius: var(--button-radius); +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper { + position: relative; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-button { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-arrow { + border-color: transparent transparent rgba(var(--spice-rgb-text), 0.7); + border-width: 0 5px 5px; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-menu { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button { + position: relative; + background-color: var(--background-tinted-base); + border: 0; + border-radius: var(--button-radius); + box-sizing: border-box; + color: rgba(var(--spice-rgb-text), 0.7); + cursor: default; + outline: 0; + padding: 0 36px 0 16px; + transition: all 0.2s ease; + height: 32px; + cursor: pointer !important; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button:hover { + color: var(--spice-rgb-text); + background-color: var(--background-tinted-highlight); +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button .dropdown-selection { + display: flex; + align-items: center; + height: 32px; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-arrow { + border-color: rgba(var(--spice-rgb-text), 0.7) transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + content: " "; + display: block; + height: 0; + margin-top: -ceil(2.5); + position: absolute; + right: 16px; + top: 14px; + width: 0; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-menu { + scrollbar-width: thin; + background-color: var(--spice-card); + opacity: 1; + border: 0; + border-radius: 8px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + overflow-y: auto; + overflow-x: hidden; + position: absolute; + top: 100%; + width: 100%; + z-index: 1000; + -webkit-overflow-scrolling: touch; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option { + box-sizing: border-box; + color: rgba(var(--spice-rgb-text), 0.7); + background-color: var(--background-tinted-highlight); + cursor: pointer; + display: block; + padding: 8px 10px; + text-align: center; +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option.selected { + background-color: rgba(var(--spice-rgb-text), 0.7); + color: var(--spice-sidebar); +} +.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option:hover { + background-color: rgb(var(--spice-rgb-text)); + color: var(--spice-sidebar); +} +.comfy-settings .setting-subSection#enabled .setting-card { + border-radius: 0; + margin: 0; +} +.comfy-settings .setting-subSection#enabled .setting-card:first-child { + border-radius: 10px 10px 0px 0px; + background-color: var(--spice-sidebar); + margin-top: 8px; + transition: 0.2s; +} +.comfy-settings .setting-subSection#enabled .setting-card:first-child:hover { + background-color: var(--spice-button-disabled); + transition: background-color 0.2s; + cursor: pointer; +} +.comfy-settings .setting-subSection#enabled .setting-card:first-child .setting-title { + cursor: pointer !important; +} +.comfy-settings .setting-subSection#enabled .setting-card:last-child { + border-radius: 0 0 10px 10px; + margin-bottom: 8px; +} +.comfy-settings .setting-subSection#collapsed .setting-card { + background-color: var(--spice-sidebar); + transition: background-color 0.2s; + cursor: pointer; +} +.comfy-settings .setting-subSection#collapsed .setting-card:hover { + background-color: var(--spice-button-disabled); +} +.comfy-settings .setting-subSection#collapsed .setting-card .setting-title { + cursor: pointer !important; +} +.comfy-settings .setting-button-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px; +} +.comfy-settings .main-buttons-button { + background-color: transparent; + color: var(--spice-button); + border: 2px solid var(--spice-button) !important; + margin: 5px 10px; + border: 2px solid transparent; + border-radius: 10px; + cursor: pointer; + display: inline-block; + font-size: 12px; + font-weight: 700; + letter-spacing: 1.76px; + line-height: 18px; + padding: 8px 8%; + text-align: center; + text-transform: uppercase; + transition: all 33ms cubic-bezier(0.3, 0, 0, 1); + white-space: nowrap; + will-change: transform; +} +.comfy-settings .main-buttons-button:hover { + transform: scale(1.02); + filter: brightness(1.2); +} +.comfy-settings .main-buttons-button:active { + transform: scale(0.98); + filter: brightness(0.8); +} + +:root .main-topBar-container .main-topBar-topbarContent *, +:root .main-topBar-container .main-topBar-topbarContentWrapper * { + justify-content: center; + text-align: center; +} +:root .main-topBar-container .main-topBar-searchBar > form input { + height: 32px; + background-color: rgba(var(--spice-rgb-shadow), 0.7); +} +:root .main-topBar-container .main-topBar-searchBar > form input ::placeholder { + color: rgba(var(--spice-rgb-selected-row), 0.7); +} +:root .main-topBar-container .main-topBar-historyButtons button:hover { + transform: scale(1.1); +} +:root .main-topBar-container .main-topBar-topbarContent > div:has([data-encore-id=buttonPrimary]):first-child { + display: none !important; +} +:root .main-topBar-container .main-topBar-background { + background-color: var(--spice-main) !important; +} +:root .main-topBar-container .main-topBar-overlay { + background-color: transparent !important; +} +:root .main-topBar-container .main-topBar-UpgradeButton { + font-size: 0; + overflow: hidden; + background: url("https://i.imgur.com/nzAfcIL.png") 50%/contain no-repeat; + border: none; + padding: 5px; + box-sizing: content-box; + width: 12px; +} + +:root.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { + padding-inline: 60px 150px !important; +} +:root.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { + padding-inline: 0px 150px !important; +} +:root.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { + padding-inline: 72px 0px !important; +} +:root.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top { + height: calc(var(--comfy-topbar-height, 40px) + 8px) !important; +} +:root:has(#main.Flatten-Colors-normal) { + --spice-main: var(--spice-sidebar); + --spice-main-transition: var(--spice-sidebar); + --spice-rgb-main: var(--spice-rgb-sidebar); + --spice-rgb-main-transition: var(--spice-rgb-sidebar); +} +:root:has(#main.Flatten-Colors-reverse) { + --spice-sidebar: var(--spice-main); + --spice-rgb-sidebar: var(--spice-rgb-main); +} +:root:has(#main.Comfy-Dark-Modals-Snippet) .ABD0FGjBGqGZG33bP7Lc, +:root:has(#main.Comfy-Dark-Modals-Snippet) .main-duplicateTrackModal-container { + background-color: var(--spice-main); + color: var(--spice-text); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX { + --cover-ambience-background: var(--spice-player, var(--spice-sidebar)); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar { + margin-bottom: 8px; +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar { + padding: 0 8px 6px 0 !important; + margin-bottom: 0 !important; + background: var(--bg-img, var(--spice-player)); + border-radius: var(--border-radius); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar { + position: absolute !important; +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text { + position: fixed; + bottom: 14px; + right: 8px; +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type { + transform: translateX(calc(-100% - 20px)); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after { + position: absolute; + left: calc(100% + 10px); + font-weight: bold; + color: rgba(var(--spice-rgb-custom-subdued), 0.8); + content: "/"; + transform: translateX(-50%); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea { + border-radius: 0 0 8px 8px !important; + height: 6px !important; +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after { + content: ""; + padding: 8px; + position: absolute; + top: -6px; + width: calc(100% - 16px); +} +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar, +:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar, +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor { + height: 6px !important; + border-radius: 50px !important; +} +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__now-playing-bar.LibraryX { + --cover-ambience-background: var(--spice-main) !important; +} +:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .main-nowPlayingBar-nowPlayingBar { + background: var(--bg-img, var(--spice-main)); +} +:root #main.Comfy-kitty-Snippet .Root__main-view { + background-image: url("https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif") !important; + background-position-x: center !important; + background-position-y: center !important; + background-size: 610px !important; + background-repeat: no-repeat !important; +} +:root #main.Remove-Column-Bar-Snippet .main-trackList-trackListHeader { + display: none; +} +:root #main.Home-Header-Snippet .main-home-homeHeader { + display: block !important; +} +:root #main.Home-Header-Color .main-home-homeHeader { + background-color: var(--home-header-color) !important; +} +:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list { + justify-content: center; + align-items: center; + display: flex; + flex-wrap: wrap; +} +:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list span { + display: none; +} +:root #main.Horizontal-pageLinks-Snippet .main-yourLibraryX-navItem { + padding: 4px 8px !important; +} +:root #main.Playbar-Above-Right-Panel-Snippet .artist-artistOverview-artistOverviewContent, +:root #main.Playbar-Above-Right-Panel-Snippet .main-actionBarBackground-background { + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container { + grid-template-areas: "left-sidebar main-view now-playing-bar" "left-sidebar main-view right-sidebar"; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container[data-right-sidebar-hidden] .Root__main-view { + grid-area: main-view/main-view/main-view/span 1; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__main-view, +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__nav-bar { + margin-bottom: 8px; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__right-sidebar { + height: calc(100vh - 450px); + width: min-content; + padding-bottom: 8px; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar { + width: var(--comfy-panel-width); + background-color: var(--spice-main); + border-radius: 8px; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container { + flex-direction: column; + min-width: 280px; + max-width: 420px; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar { + flex-direction: column; + padding: 8px; + min-height: 400px; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center, +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-left { + width: 100%; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .player-controls__buttons.player-controls__buttons--new-icons { + order: 2; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .playback-bar, +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS { + order: 1; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right { + width: calc(var(--comfy-panel-width) - 16px); +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls { + width: calc(var(--comfy-panel-width) - 16px); + justify-content: space-evenly; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying { + width: 100%; + height: auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container { + width: 100%; + height: 100%; + bottom: 0; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > :first-child { + width: 100%; + height: 100%; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > :first-child > :first-child { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .main-coverSlotCollapsed-expandButton { + top: 3%; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx { + background-color: rgba(0, 0, 0, 0); + margin: auto; + width: 100%; +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt { + width: 100%; + height: 100%; + padding-bottom: 5px; + background-color: rgba(0, 0, 0, 0); +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art { + height: 220px !important; + width: 220px !important; + margin: auto; + background-color: rgba(0, 0, 0, 0); +} +:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art img { + background-color: rgba(0, 0, 0, 0); + box-shadow: 0 0 5px 5px var(--spice-text); +} +:root #main.Smooth-Progress-Bar-Snippet .playback-bar > div, +:root #main.Smooth-Progress-Bar-Snippet .playback-bar ~ div, +:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea > div, +:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea ~ div { + -webkit-transition-delay: 0s; + transition-delay: 0s; + -webkit-transition-duration: 1000ms; + transition-duration: 1000ms; + -webkit-transition-property: left, -webkit-transform; + transition-property: left, -webkit-transform; + transition-property: transform, left; + transition-property: transform, left, -webkit-transform; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; +} +:root #main.Remove-Progress-Bar-Gradient-Snippet .x-progressBar-fillColor { + background-color: var(--fg-color) !important; + border-radius: var(--progress-bar-radius) !important; + height: var(--progress-bar-height) !important; + transform: translateX(calc(-100% + var(--progress-bar-transform))) !important; + width: 100% !important; +} +:root #main.Remove-Connect-Bar-Snippet .main-connectBar-connectBar, +:root #main.Remove-Connect-Bar-Snippet .main-devicePicker-indicator { + display: none !important; +} +:root #main.Compact-Connect-Bar-Snippet .main-nowPlayingBar-container .main-connectBar-connectBar { + position: absolute; + margin-left: auto; + padding: 0.75rem 1rem; + top: -45%; + right: 0; +} +:root #main.Remove-Lyrics-Button-Snippet .main-nowPlayingBar-lyricsButton { + display: none !important; +} +:root #main.Hoverable-Timers-Snippet .playback-bar > div, +:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS > div { + transition: all 0.3s ease; + opacity: 0; +} +:root #main.Hoverable-Timers-Snippet .playback-bar:hover > div, +:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS:hover > div { + transition: all 0.3s ease; + opacity: 1 !important; +} +:root #main.Hoverable-Timers-Snippet .playback-bar .playback-progressbar, +:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .playback-progressbar { + opacity: 1 !important; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container { + grid-template-areas: "top-bar top-bar top-bar" "left-sidebar main-view right-sidebar" "now-playing-bar now-playing-bar now-playing-bar" !important; + grid-template-rows: 0 1fr auto !important; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container { + pointer-events: none; + grid-area: top-bar; + contain: unset; + top: calc(var(--comfy-topbar-height, 40px) * -1 + 1px); + height: calc(var(--comfy-topbar-height, 40px) + 8px); + padding-block: 8px; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper > *:not(.main-topBar-searchBar):not(:has(ul)) { + justify-content: center; + display: flex; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper ul { + text-align: center !important; + justify-content: center; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper .queue-tabBar-headerItemLink { + padding: 5px 16px; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent { + app-region: drag !important; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent .main-entityHeader-topbarTitle { + height: 100%; +} +:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-background { + display: none; +} +:root #main.Topbar-Inside-Titlebar-Snippet main:not(:has(.main-home-filterChipsContainer)), +:root #main.Topbar-Inside-Titlebar-Snippet .queue-queuePage-queuePage, +:root #main.Topbar-Inside-Titlebar-Snippet .search-searchCategory-SearchCategory, +:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar, +:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header, +:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI, +:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91, +:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer { + margin-top: -64px !important; + top: 0 !important; +} +:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header, +:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI, +:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91 { + padding-top: 15px !important; +} +:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer { + padding-top: 8px; +} +:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar { + height: 64px !important; + box-shadow: none; +} +:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum { + padding-top: 32px; +} +:root #main.Topbar-Inside-Titlebar-Snippet .main-view-container .search-searchCategory-SearchCategory { + height: 64px; + padding-top: 17px; +} +:root #main.Collapse-Topbar-Snippet .main-topBar-topbarContentWrapper nav { + justify-content: center; + display: flex; +} +:root #main.Header-Background .main-entityHeader-imageContainerNew { + align-self: center; + left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 24px + var(--content-spacing)); + position: relative; + z-index: 1; +} +:root #main.Header-Background .main-entityHeader-headerText { + background-color: rgba(var(--spice-rgb-main-transition), var(--header-opacity)); + padding: 24px 32px; + border-radius: var(--border-radius); + min-width: fit-content; + box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1); + justify-content: space-evenly !important; + height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 48px); +} +:root #main.Header-Background .main-entityHeader-imageContainerNew + .main-entityHeader-headerText { + padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing)); + margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing)); +} +:root #main.Header-Background:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn > * { + opacity: var(--top-bar-opacity) !important; +} +:root #main.AM-Gradient-Include-Existing-Snippet.Banner-Enabled .under-main-view > div:not(.comfy-banner-frame), :root #main.Replace-Existing-Banners.Banner-Enabled .under-main-view > div:not(.comfy-banner-frame) { + display: none !important; +} +:root #main.Lyrics main > div > div:empty { + --lyrics-color-background: transparent !important; +} +:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + filter: blur(calc(var(--image-blur) * 10)); + background-image: var(--gradient-background-image); +} +:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image { + position: absolute !important; + width: var(--gradient-width) !important; + aspect-ratio: 1; + animation: rotate var(--gradient-speed) linear infinite; + border-radius: var(--gradient-radius) !important; + mix-blend-mode: var(--gradient-blend-mode); + background-size: cover !important; +} +:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:first-of-type { + height: revert; + left: unset; + background-size: unset; + background-position: unset; + filter: none; + -webkit-mask-image: none; + mask-image: none; + right: 0; + top: 0; + z-index: 10; +} +:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:last-of-type { + display: revert; + left: 0; + bottom: 0; + animation-direction: reverse; +} +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +:root .main-trackList-active .main-trackList-rowTitle { + color: var(--spice-text) !important; + text-shadow: 0px 0px 6px var(--spice-text); + -webkit-text-stroke: thin; +} +:root .main-trackList-trackListHeader._2ajKWDiy6YvJu5wo8I1g { + background: var(--spice-main) !important; + top: 0 !important; +} +:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListRow:hover, +:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListHeaderRow:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.05); +} +:root .main-trackList-trackListRow, +:root .main-trackList-trackListHeaderRow { + border-radius: var(--border-radius); + border: none; + transition: 200ms background-color; +} +:root .main-trackList-trackListRow.main-trackList-selected, +:root .main-trackList-trackListHeaderRow.main-trackList-selected { + background-color: rgba(var(--spice-rgb-selected-row), 0.1); +} +:root .main-trackList-trackListRow.main-trackList-selected:hover, +:root .main-trackList-trackListHeaderRow.main-trackList-selected:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.15); +} +:root .main-trackList-trackListRow .main-type-mesto, +:root .main-trackList-trackListRow .main-type-ballad, +:root .main-trackList-trackListHeaderRow .main-type-mesto, +:root .main-trackList-trackListHeaderRow .main-type-ballad { + transition: 300ms color; +} +:root .main-trackList-trackListRow .main-trackList-rowImageFallback, +:root .main-trackList-trackListHeaderRow .main-trackList-rowImageFallback { + border-radius: var(--border-radius) !important; +} +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListHeader .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListHeader .main-trackList-rowSectionIndex { + opacity: 0; +} +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex { + background: rgba(var(--spice-rgb-play-button), 0.5); +} +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton { + opacity: 1; +} +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowSectionIndex { + color: var(--spice-sidebar); + border-radius: var(--border-radius); + transition: 200ms opacity, 200ms background; +} +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow > .main-trackList-rowSectionIndex, +:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow > .main-trackList-rowSectionIndex { + position: relative; + z-index: 1000; + top: 8px; + left: 56px; + width: 40px; + height: 40px; + justify-content: center; + text-indent: -1000px; +} +:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="3"] .main-trackList-trackListRowGrid { + padding-left: 2px; + grid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important; +} +:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="4"] .main-trackList-trackListRowGrid { + padding-left: 2px; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important; +} +:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="5"] .main-trackList-trackListRowGrid { + padding-left: 2px; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; +} +:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="6"] .main-trackList-trackListRowGrid { + padding-left: 2px; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; +} + +:root { + --border-radius: 8px; + --button-radius: 8px; + --image-blur: 4px; + --gradient-speed: 50s; + --gradient-width: 150%; + --gradient-blend-mode: luminosity; + --gradient-background-image: none; + --gradient-radius: 50%; + --cover-art-width: 84px; + --cover-art-height: 84px; + --cover-art-radius: 8px; + --cover-art-left: 0px; + --cover-art-bottom: 20px; + --header-opacity: 0.6; + --tracklist-gradient-height: 232px; + --tracklist-gradient-opacity: 0.6; + --tracklist-gradient-noise: var(--background-noise); + --image-url: none; +} +:root button, +:root button span, +:root input, +:root select, +:root img, +:root .x-entityImage-xsmall, +:root div[style*=background-image]:has(img), +:root .profile-userEditDetails-image div:nth-child(2), +:root [data-encore-id=buttonSecondary] { + border-radius: var(--border-radius) !important; +} +:root button:not(.main-editImageButton-overlay):not([style*=background-image]):not(.main-buddyFeed-overlay), +:root button span:not(.Lyric.Synced.Line):not([data-encore-id=text]), +:root button figure img, +:root button:has(span:empty), +:root input:not([style*=background-image]), +:root select, +:root [data-encore-id=buttonSecondary] { + border-radius: var(--button-radius) !important; +} +:root .Root__top-container { + overflow: hidden; +} +:root:not(:has(.global-nav)) .Root__top-container { + padding-top: max(var(--comfy-topbar-height, 40px) / var(--zoom, 1), 8px) !important; +} +:root .global-nav .Root__top-container { + grid-template-rows: calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1) - 16px) 1fr auto; +} +:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav) body::after { + height: calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1)) !important; +} +:root.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav { + padding-block: calc(var(--comfy-topbar-height, 64px) / 2 - 8px); +} +:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after { + content: ""; + position: absolute; + right: 0; + z-index: 999; + backdrop-filter: brightness(2.12); + width: calc(135px / var(--zoom, 1)); + height: calc(var(--comfy-topbar-height, 40px) / var(--zoom, 1)); +} +:root .main-trackList-playingIcon, +:root .view-homeShortcutsGrid-playingIcon, +:root [src*=equaliser] { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); + background: var(--spice-button-active); + content-visibility: hidden; + -webkit-mask-repeat: no-repeat; + border-radius: 0 !important; +} +:root .x-settings-equalizerPanelCanvas { + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important; + border-radius: 0 !important; +} +:root .encore-dark-theme, :root .encore-dark-theme .encore-base-set { + --background-elevated-base: var(--spice-main-elevated); + --background-highlight: var(--spice-highlight); +} +:root .encore-bright-accent-set { + --background-base: var(--spice-play-button); + --background-highlight: var(--spice-play-button-active); + --background-press: var(--spice-play-button-active); +} +:root .encore-inverted-light-set { + --background-highlight: var(--spice-text); + --background-press: var(--spice-subtext); +} +:root .npv-background-image__overlay { + background: linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%), var(--background-noise); + background-color: unset; +} +:root .Root__main-view .main-view-container__scroll-node-child { + padding-bottom: 0; +} +:root aside#Desktop_PanelContainer_Id .os-scrollbar-vertical, +:root .os-scrollbar-horizontal { + display: none !important; +} +:root .os-scrollbar-track, +:root ::-webkit-scrollbar { + width: 8px; +} +:root .os-scrollbar-handle, +:root ::-webkit-scrollbar-thumb { + border-radius: 1em; + --os-handle-perpendicular-size-active: 8px; + --os-handle-perpendicular-size-hover: 8px; + --os-handle-perpendicular-size: 8px; +} +:root .os-scrollbar { + --os-padding-perpendicular: 4px; +} +:root ::-webkit-scrollbar-track { + margin-bottom: 10px; +} +:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle, +:root .main-addButton-active { + color: var(--spice-heart); +} +:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover, +:root .main-addButton-active:hover { + color: rgba(var(--spice-rgb-heart), 0.7); +} +:root #_R_G *:not([stroke=none]) { + stroke: var(--spice-heart); +} +:root .main-trackList-rowHeartButton *:not([fill=none]), +:root .control-button-heart *:not([fill=none]), +:root #_R_G *:not([fill=none]) { + fill: var(--spice-heart) !important; +} +:root #context-menu { + overflow: hidden; +} +:root #context-menu .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before { + border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); + content: ""; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; +} +:root #context-menu .main-popper-arrow, +:root #context-menu .main-popper-arrow::before { + background-color: var(--spice-player) !important; +} +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) { + background-color: var(--spice-player); +} +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button, +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a { + border-radius: 2px !important; +} +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):focus, :root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):hover, :root #context-menu ul:not([aria-labelledby~=device-picker-header]) button[aria-expanded=true], +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):focus, +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):hover, +:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a[aria-expanded=true] { + background-color: rgba(var(--spice-rgb-pagelink-active), 0.15); + transition: 150ms background-color; +} +:root #bookmark-menu { + background-color: var(--spice-player); + border-radius: var(--border-radius); +} +:root #bookmark-menu .bookmark-filter { + background-color: var(--spice-player); +} +:root #bookmark-menu button, +:root #bookmark-menu a { + border-radius: 0; +} +:root #bookmark-menu button::before, :root #bookmark-menu button::after, +:root #bookmark-menu a::before, +:root #bookmark-menu a::after { + content: none; +} +:root #bookmark-menu button:not(.main-contextMenu-disabled):focus, :root #bookmark-menu button:not(.main-contextMenu-disabled):hover, :root #bookmark-menu button[aria-expanded=true], +:root #bookmark-menu a:not(.main-contextMenu-disabled):focus, +:root #bookmark-menu a:not(.main-contextMenu-disabled):hover, +:root #bookmark-menu a[aria-expanded=true] { + background-color: rgba(var(--spice-rgb-pagelink-active), 0.15); + transition: 150ms background-color; +} + +/*# sourceMappingURL=app.css.map */ diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss index ea38aa8..f33a26b 100644 --- a/Comfy/assets/_snippets.scss +++ b/Comfy/assets/_snippets.scss @@ -34,7 +34,6 @@ } &:has(#main.Comfy-Dark-Modals-Snippet) { - .ABD0FGjBGqGZG33bP7Lc, .main-duplicateTrackModal-container { background-color: var(--spice-main); @@ -43,7 +42,6 @@ } #main { - &.Comfy-nord-Snippet.Custom-Playbar-Snippet, &.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet { .Root__top-container { @@ -169,10 +167,13 @@ } &.Playbar-Above-Right-Panel-Snippet { - .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important; + min-height: calc( + 100vh - + min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - + 50px + ) !important; } .Root__top-container { @@ -293,12 +294,10 @@ } &.Smooth-Progress-Bar-Snippet { - .playback-bar, .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea { - - >div, - ~div { + > div, + ~ div { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 1000ms; @@ -308,7 +307,7 @@ transition-property: transform, left; transition-property: transform, left, -webkit-transform; -webkit-transition-timing-function: linear; - transition-timing-function: linear + transition-timing-function: linear; } } } @@ -324,13 +323,26 @@ } &.Remove-Connect-Bar-Snippet { - .main-connectBar-connectBar, .main-devicePicker-indicator { display: none !important; } } + // Connect bar + &.Compact-Connect-Bar-Snippet { + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + position: absolute; + margin-left: auto; + padding: 0.75rem 1rem; + top: -45%; + // bottom: calc(100% + 0.75rem); // can use this too + right: 0; + } + } + } + &.Remove-Lyrics-Button-Snippet { .main-nowPlayingBar-lyricsButton { display: none !important; @@ -338,15 +350,14 @@ } &.Hoverable-Timers-Snippet { - .playback-bar, .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS { - >div { + > div { transition: all 0.3s ease; opacity: 0; } - &:hover>div { + &:hover > div { transition: all 0.3s ease; opacity: 1 !important; } @@ -374,7 +385,7 @@ padding-block: 8px; .main-topBar-topbarContentWrapper { - >*:not(.main-topBar-searchBar):not(:has(ul)) { + > *:not(.main-topBar-searchBar):not(:has(ul)) { justify-content: center; display: flex; } @@ -450,7 +461,10 @@ &.Header-Background { .main-entityHeader-imageContainerNew { align-self: center; - left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 24px + var(--content-spacing)); + left: calc( + clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 24px + + var(--content-spacing) + ); position: relative; z-index: 1; } @@ -462,15 +476,23 @@ min-width: fit-content; box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1); justify-content: space-evenly !important; - height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 48px); + height: calc( + clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 48px + ); } - .main-entityHeader-imageContainerNew+.main-entityHeader-headerText { - padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing)); - margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing)); + .main-entityHeader-imageContainerNew + .main-entityHeader-headerText { + padding-left: calc( + clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + + var(--content-spacing) + ); + margin-right: calc( + clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + + var(--content-spacing) + ); } - &:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>* { + &:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn > * { opacity: var(--top-bar-opacity) !important; } } @@ -483,7 +505,7 @@ } &.Lyrics { - main>div>div:empty { + main > div > div:empty { --lyrics-color-background: transparent !important; } } @@ -539,4 +561,4 @@ } } } -} \ No newline at end of file +} From 2efe5a490f749aa22978b177bef3cfe9f1206b35 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 01:06:10 +0530 Subject: [PATCH 07/19] chore: lint code --- Comfy/app.scss | 7 +++--- Comfy/assets/_main.scss | 40 ++++++++++++++++++------------- Comfy/assets/_navbar.scss | 10 ++++---- Comfy/assets/_settings.scss | 16 ++++++------- Comfy/assets/_tracklist.scss | 46 +++++++++++++++++------------------- Comfy/user.css | 2 +- 6 files changed, 62 insertions(+), 59 deletions(-) diff --git a/Comfy/app.scss b/Comfy/app.scss index 6d96751..f25b2c2 100644 --- a/Comfy/app.scss +++ b/Comfy/app.scss @@ -99,7 +99,8 @@ } // Base Sets - .encore-dark-theme, .encore-dark-theme .encore-base-set { + .encore-dark-theme, + .encore-dark-theme .encore-base-set { --background-elevated-base: var(--spice-main-elevated); --background-highlight: var(--spice-highlight); } @@ -179,7 +180,7 @@ overflow: hidden; .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before { - border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), .1); + border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); content: ""; left: 0; pointer-events: none; @@ -235,4 +236,4 @@ } } } -} \ No newline at end of file +} diff --git a/Comfy/assets/_main.scss b/Comfy/assets/_main.scss index b2910ec..bbcb20c 100644 --- a/Comfy/assets/_main.scss +++ b/Comfy/assets/_main.scss @@ -31,28 +31,35 @@ } } - .main-entityHeader-backgroundColor { background: none !important; } // gradient noise gets stretched vertically with this approach - but no black lines &.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) { - .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px - 12px) !important; + min-height: calc( + 100vh - + min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - + 128px - 12px + ) !important; } } .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - background-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, - var(--spice-main) var(--tracklist-gradient-height)), + background-image: linear-gradient( + rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, + var(--spice-main) var(--tracklist-gradient-height) + ), var(--tracklist-gradient-noise) !important; background-color: transparent !important; height: calc(100% - 250px); - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px); + min-height: calc( + 100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - + 128px + ); background-size: auto 100%, 300px var(--tracklist-gradient-height); background-repeat: repeat-x; } @@ -100,7 +107,6 @@ } .main-view-container { - // Main Page Tweaks main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) { position: sticky; @@ -116,7 +122,7 @@ } // Radio Button Coloring - input:checked~.x-toggle-indicatorWrapper { + input:checked ~ .x-toggle-indicatorWrapper { background-color: var(--spice-radio-btn-active); } @@ -156,7 +162,7 @@ // Headers .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc, .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4, - .main-home-filterChipsContainer>div:first-child { + .main-home-filterChipsContainer > div:first-child { &:after { background-color: var(--spice-main); } @@ -170,13 +176,13 @@ padding: 32px; justify-content: center; - &>div:nth-last-of-type(2), - &>div.contentSpacing, + & > div:nth-last-of-type(2), + & > div.contentSpacing, .main-entityHeader-imageContainer { align-self: center; justify-content: center; - &+.main-entityHeader-headerText { + & + .main-entityHeader-headerText { flex: unset; justify-content: center; @@ -193,16 +199,16 @@ .main-actionBar-ActionBarRow { &:first-of-type { - >div:first-child { + > div:first-child { margin-top: -24px; } } - >div:first-child { + > div:first-child { margin-left: calc(var(--content-spacing) + 3px); } - >:first-child:not(:only-child) { + > :first-child:not(:only-child) { margin-right: calc(var(--content-spacing) + 4px); } @@ -214,7 +220,7 @@ } // Artist Page - .artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer { + .artist-artistOverview-artistOverviewContent .contentSpacing > .main-gridContainer-gridContainer { padding-bottom: var(--grid-gap); } @@ -272,4 +278,4 @@ } } } -} \ No newline at end of file +} diff --git a/Comfy/assets/_navbar.scss b/Comfy/assets/_navbar.scss index 289232e..0142a2c 100644 --- a/Comfy/assets/_navbar.scss +++ b/Comfy/assets/_navbar.scss @@ -1,12 +1,12 @@ :root .Root__nav-bar { .main-rootlist-wrapper { div:nth-child(2) { - >li { + > li { .main-yourLibraryX-listRowEntityImage { border-radius: var(--border-radius) !important; } - >div { + > div { &:active::after { background-color: var(--spice-highlight-elevated); top: 0; @@ -18,8 +18,8 @@ } } - [role="presentation"]>li>div>div>div>div>div>.x-entityImage-imageContainer { - box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), .0) !important; + [role="presentation"] > li > div > div > div > div > div > .x-entityImage-imageContainer { + box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important; } } @@ -32,4 +32,4 @@ .os-scrollbar { display: none; } -} \ No newline at end of file +} diff --git a/Comfy/assets/_settings.scss b/Comfy/assets/_settings.scss index 03110d3..bafcc59 100644 --- a/Comfy/assets/_settings.scss +++ b/Comfy/assets/_settings.scss @@ -8,7 +8,7 @@ } // Comfy settings -#main.Settings-Open~generic-modal .GenericModal__overlay { +#main.Settings-Open ~ generic-modal .GenericModal__overlay { // Failsafe incase spotify's variables are not present --background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07); --background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1); @@ -68,7 +68,7 @@ min-height: calc(100% - 60px); &::after { - content: ''; + content: ""; position: absolute; bottom: 0; width: calc(100% - 12px); @@ -101,7 +101,6 @@ // Main Section Styling .comfy-settings { - // Carousel Styling .search-searchCategory-SearchCategory { background: var(--spice-player); @@ -151,12 +150,12 @@ outline: none; text-decoration: none; - &>* { + & > * { outline: 5px auto #3673d4; } } - &>* { + & > * { margin-inline-end: 8px; margin-block-end: 0 !important; } @@ -244,11 +243,11 @@ --spice-button-disabled: var(--background-tinted-base); } - input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper { + input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { background-color: var(--background-tinted-highlight); } - input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper { + input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { background-color: var(--spice-button-active); } } @@ -518,5 +517,4 @@ filter: brightness(0.8); } } - -} \ No newline at end of file +} diff --git a/Comfy/assets/_tracklist.scss b/Comfy/assets/_tracklist.scss index 81f1ca3..a3302f4 100644 --- a/Comfy/assets/_tracklist.scss +++ b/Comfy/assets/_tracklist.scss @@ -1,5 +1,4 @@ :root { - // Tracklist .main-trackList-active .main-trackList-rowTitle { color: var(--spice-text) !important; @@ -14,7 +13,6 @@ } &:not(._2ajKWDiy6YvJu5wo8I1g) { - .main-trackList-trackListRow, .main-trackList-trackListHeaderRow { &:hover { @@ -22,7 +20,6 @@ } } } - } .main-trackList-trackListRow, @@ -50,7 +47,6 @@ } #main.Remove-Tracklist-Index { - // Image Tracklist .main-trackList-trackList:has(.main-trackList-rowSectionStart img), .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) { @@ -61,11 +57,9 @@ } .main-trackList-trackListRow { - &:hover, &:focus-within, &.main-trackList-active { - .main-trackList-rowImagePlayPauseButton, .main-trackList-rowSectionIndex { background: rgba(var(--spice-rgb-play-button), 0.5); @@ -85,7 +79,7 @@ transition: 200ms opacity, 200ms background; } - >.main-trackList-rowSectionIndex { + > .main-trackList-rowSectionIndex { position: relative; z-index: 1000; top: 8px; @@ -106,25 +100,29 @@ @if $i ==3 { grid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important; - } - - @else if $i ==4 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important; - } - - @else if $i ==5 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; - } - - @else if $i ==6 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; - } - - @else if $i ==7 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; + } @else if $i ==4 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax( + 120px, + var(--col3, 1fr) + ) !important; + } @else if $i ==5 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( + 120px, + var(--col3, 3fr) + ) [last] minmax(120px, var(--col4, 1fr)) !important; + } @else if $i ==6 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( + 120px, + var(--col3, 3fr) + ) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; + } @else if $i ==7 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( + 120px, + var(--col3, 3fr) + ) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; } } } } } -} \ No newline at end of file +} diff --git a/Comfy/user.css b/Comfy/user.css index b1f5982..f31eade 100644 --- a/Comfy/user.css +++ b/Comfy/user.css @@ -1 +1 @@ -@import url("https://comfy-themes.github.io/Spicetify/Comfy/app.css"); +@import url("https://comfy-themes.github.io/Spicetify/Comfy/app.css"); \ No newline at end of file From 40aeb438ffa7e61f1e8ee240c818b361137b8187 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 01:06:43 +0530 Subject: [PATCH 08/19] chore: compile app.css --- Comfy/app.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Comfy/app.css b/Comfy/app.css index 0fd7506..90b8ccd 100644 --- a/Comfy/app.css +++ b/Comfy/app.css @@ -1344,7 +1344,8 @@ filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important; border-radius: 0 !important; } -:root .encore-dark-theme, :root .encore-dark-theme .encore-base-set { +:root .encore-dark-theme, +:root .encore-dark-theme .encore-base-set { --background-elevated-base: var(--spice-main-elevated); --background-highlight: var(--spice-highlight); } From 0e494781f8d1405df0987bcbc99e10f26f8f26fd Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Sat, 14 Sep 2024 01:11:39 +0530 Subject: [PATCH 09/19] feat: add compact connect bar toggle --- Comfy/theme.script.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 422c400..2ccf832 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -1341,6 +1341,13 @@ todo: title: "Hoverable Playback Timers", defaultVal: false }, + { + type: Toggle, + name: "Compact-Connect-Bar-Snippet", + title: "Compact Connect Bar", + desc: "Makes the connect bar compact.", + defaultVal: false + }, { type: Toggle, name: "Remove-Connect-Bar-Snippet", From d9d81f92b9831dde0afaea1db0fd6652435ddec1 Mon Sep 17 00:00:00 2001 From: Thomas Fitzpatrick <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:01:39 +0100 Subject: [PATCH 10/19] revert --- Comfy/app.css | 1460 +------------------------------------------------ 1 file changed, 1 insertion(+), 1459 deletions(-) diff --git a/Comfy/app.css b/Comfy/app.css index 90b8ccd..90b6075 100644 --- a/Comfy/app.css +++ b/Comfy/app.css @@ -1,1459 +1 @@ -:root .global-nav .Root__main-view .main-view-container .main-entityHeader-container { - padding: 32px; - align-items: center; - margin-top: 64px; -} - -:root #main.Banner-Enabled .comfy-banner-frame { - display: block; -} -:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-size: cover; - background-position: top; - background-image: var(--image-url); - filter: blur(var(--image-blur)); - -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); - mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); - transition: background 0.5s ease; -} -:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image:last-of-type { - display: none; -} -:root #main.Banner-Enabled .main-entityHeader-backgroundColor { - background: none !important; -} -:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) .artist-artistOverview-artistOverviewContent, -:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) .main-actionBarBackground-background { - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 128px - 12px) !important; -} -:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent, -:root #main.Banner-Enabled .main-actionBarBackground-background { - background-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, var(--spice-main) var(--tracklist-gradient-height)), var(--tracklist-gradient-noise) !important; - background-color: transparent !important; - height: calc(100% - 250px); - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 128px); - background-size: auto 100%, 300px var(--tracklist-gradient-height); - background-repeat: repeat-x; -} -:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent { - position: relative !important; -} -:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent .main-actionBarBackground-background { - background-image: none !important; - background-color: unset !important; -} -:root #main.Banner-Enabled .playlist-playlist-playlistContent, -:root #main.Banner-Enabled .dTKw7B8X1ybw7SHebMH3, -:root #main.Banner-Enabled .xcTrtCsYOPtSElbX9inq, -:root #main.Banner-Enabled .EmeHQXR87mUskYK6xEde, -:root #main.Banner-Enabled .N_8iI7NKHP0iG2jp3g0R { - background: none; -} -:root #main.Banner-Enabled .main-entityHeader-background { - height: calc(clamp(340px, 30vh, 400px) + var(--tracklist-gradient-height)); - max-height: 100%; -} -:root #main.Banner-Enabled .main-entityHeader-background.main-entityHeader-overlay { - --bgColor: unset !important; -} -:root #main.Banner-Enabled .main-entityHeader-withBackgroundImage { - height: clamp(340px, 30vh, 400px) !important; -} - -:root .Root__main-view .comfy-banner-frame { - display: none; -} -:root .Root__main-view .main-leaderboardComponent-container, -:root .Root__main-view .sponsor-container { - display: none !important; -} -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) { - position: sticky; - padding-bottom: 32px; -} -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-host-overflow, -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-padding, -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-viewport, -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) div[data-overlayscrollbars~=host], -:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) [data-overlayscrollbars-viewport~=scrollbarHidden] { - overflow: visible !important; -} -:root .Root__main-view .main-view-container input:checked ~ .x-toggle-indicatorWrapper { - background-color: var(--spice-radio-btn-active); -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card { - background: var(--spice-sidebar); - border-radius: var(--border-radius); - padding: 0; - overflow: hidden; -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card:hover { - background: var(--spice-card); -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-PlayButtonContainer { - right: 12px !important; -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer { - margin-bottom: -4px; -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-circular, -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer img { - border-radius: 0 !important; -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-imageWrapper { - box-shadow: none !important; -} -:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-cardMetadata { - padding: 16px; -} -:root .Root__main-view .main-view-container .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc:after, -:root .Root__main-view .main-view-container .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4:after, -:root .Root__main-view .main-view-container .main-home-filterChipsContainer > div:first-child:after { - background-color: var(--spice-main); -} -:root .Root__main-view .main-view-container .main-home-homeHeader { - display: none; -} -:root .Root__main-view .main-view-container .main-entityHeader-container { - padding: 32px; - justify-content: center; -} -:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2), :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing, -:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer { - align-self: center; - justify-content: center; -} -:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2) + .main-entityHeader-headerText, :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing + .main-entityHeader-headerText, -:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer + .main-entityHeader-headerText { - flex: unset; - justify-content: center; -} -:root .Root__main-view .main-view-container .main-entityHeader-container > div:nth-last-of-type(2) + .main-entityHeader-headerText .main-entityHeader-title h1, :root .Root__main-view .main-view-container .main-entityHeader-container > div.contentSpacing + .main-entityHeader-headerText .main-entityHeader-title h1, -:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer + .main-entityHeader-headerText .main-entityHeader-title h1 { - font-size: 3rem !important; -} -:root .Root__main-view .main-view-container .main-actionBar-ActionBar { - padding: 8px 16px 16px 16px; -} -:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow:first-of-type > div:first-child { - margin-top: -24px; -} -:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow > div:first-child { - margin-left: calc(var(--content-spacing) + 3px); -} -:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow > :first-child:not(:only-child) { - margin-right: calc(var(--content-spacing) + 4px); -} -:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow [class*=Button] { - min-block-size: 32px; - padding-block: 0; -} -:root .Root__main-view .main-view-container .artist-artistOverview-artistOverviewContent .contentSpacing > .main-gridContainer-gridContainer { - padding-bottom: var(--grid-gap); -} -:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut { - border-radius: var(--border-radius); -} -:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper { - border-radius: calc(var(--border-radius) + 15px); -} -:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .main-playButton-PlayButton { - background: none !important; -} -:root .Root__main-view .main-view-container .lyrics-lyricsContainer-Provider { - font-size: 0; -} -:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar { - width: 0 !important; - height: 0 !important; -} -:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer .lyrics-lyricsContainer-LyricsBackground { - z-index: -1; - background-repeat: no-repeat; - background-size: cover; - -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); - mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); -} -:root .Root__main-view .main-view-container section[data-testid=your-episodes-page] .main-actionBarBackground-background { - height: calc(100vh - 494px) !important; -} -:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar { - flex-direction: column-reverse; -} -:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow { - margin-top: 0 !important; -} -:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow:nth-child(1) { - padding-top: 2rem; -} - -:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li .main-yourLibraryX-listRowEntityImage { - border-radius: var(--border-radius) !important; -} -:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2) > li > div:active::after { - background-color: var(--spice-highlight-elevated); - top: 0; - bottom: 0; - left: 0; - right: 0; -} -:root .Root__nav-bar .main-rootlist-wrapper [role=presentation] > li > div > div > div > div > div > .x-entityImage-imageContainer { - box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important; -} -:root .Root__nav-bar .main-yourLibraryX-isScrolled { - box-shadow: none !important; -} -:root .Root__nav-bar .os-scrollbar { - display: none; -} - -:root .Root__top-container .main-nowPlayingWidget-nowPlaying { - height: 0; - z-index: 1; - left: var(--cover-art-left); -} -:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container { - bottom: var(--cover-art-bottom); - border-radius: var(--cover-art-radius); -} -:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > div button { - border-radius: var(--cover-art-radius) !important; - background: none; -} -:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .cover-art, -:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .VideoPlayer__container video { - width: var(--cover-art-width) !important; - height: var(--cover-art-height) !important; - border-radius: var(--cover-art-radius); - overflow: hidden; - object-fit: cover; - max-height: none; - max-width: none; -} -:root .Root__top-container .main-nowPlayingBar-container .main-connectBar-connectBar { - margin-left: auto; - width: 92vw; -} - -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container { - position: relative; - border-top: none; - flex-direction: column-reverse !important; - background-clip: text; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container::before { - z-index: auto !important; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container:has(.main-connectBar-connectBar)::before { - height: calc(100% - 40px); - top: 40px; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar { - margin-bottom: 12px; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .player-controls__buttons--new-icons { - margin-bottom: 0px !important; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar { - position: fixed; - display: grid; - grid-template-columns: auto auto; - grid-template-areas: "time-left time-right" "bar bar"; - bottom: 0; - right: 0; - gap: 0; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .saber-hilt { - height: 0; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container) { - text-align: center; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container):first-of-type { - grid-area: time-left; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar > div:not(.playback-progressbar-container):last-of-type { - grid-area: time-right; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar-container { - display: contents; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar { - grid-column: 1/3; - grid-area: bar; - height: 11px; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar { - --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); - --fg-color: var(--spice-progress-fg); - --progress-bar-height: 12px; - --progress-bar-radius: 0; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .x-progressBar-fillColor { - width: 107%; - background-color: transparent; - background-image: linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%); -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .progress-bar__slider { - display: none; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-volumeBar .progress-bar { - --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive) { - color: rgba(var(--spice-rgb-selected-row), 0.7); -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive):hover { - color: var(--spice-text) !important; -} -:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls .main-devicePicker-indicator { - display: none; -} - -.x-settings-container { - max-width: unset; -} - -.x-toggle-indicatorWrapper { - border-radius: var(--button-radius); -} - -#main.Settings-Open ~ generic-modal .GenericModal__overlay { - --background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07); - --background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1); -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header { - padding: 12px 12px 12px 16px; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-type-alto { - font-size: 25px; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn { - background-color: var(--background-tinted-base); - height: 34px; - cursor: pointer; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:hover { - transform: scale(1.04) !important; - color: var(--spice-text); -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:focus { - transform: scale(1); -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:active { - transform: scale(0.98) !important; - color: var(--spice-text); -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:first-of-type { - margin-left: auto; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:not(:last-of-type) { - margin-right: 8px; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:last-of-type svg { - scale: 0.8; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-embedWidgetGenerator-container { - max-height: 75vh !important; - width: 550px !important; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection { - padding: 0px 16px 0; - scrollbar-width: thin; - min-height: calc(100% - 60px); -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection::after { - content: ""; - position: absolute; - bottom: 0; - width: calc(100% - 12px); - left: 0; - height: 25px; - background: linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5)); - pointer-events: none; - border-radius: 8px; - z-index: 0; - border-bottom-right-radius: 0; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar, -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar, -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar { - width: 8px !important; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar-thumb, -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb, -#main.Settings-Open ~ generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb { - border-radius: 1em !important; -} -#main.Settings-Open ~ generic-modal .GenericModal__overlay .GenericModal { - border-radius: 10px; -} - -.comfy-settings .search-searchCategory-SearchCategory { - background: var(--spice-player); - grid-column: 1/-1; - height: 48px; - padding-top: 7px; - position: sticky; - top: 0px; - z-index: 1; -} -.comfy-settings .search-searchCategory-SearchCategory { - height: unset; - padding-bottom: 12px; - padding-top: 12px; - top: 0; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - overflow: hidden; - width: 100%; - padding-inline: 0px; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGrid { - overflow-y: hidden; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem { - cursor: pointer; - padding: 2px; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem button::after { - border: none !important; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:active, .comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus, .comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:hover { - text-decoration: none; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible { - outline: none; - text-decoration: none; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible > * { - outline: 5px auto #3673d4; -} -.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem > * { - margin-inline-end: 8px; - margin-block-end: 0 !important; -} -.comfy-settings .setting-header { - text-align: center; - padding: 5px 0; -} -.comfy-settings .setting-card { - background-color: var(--background-tinted-base); - border-radius: 10px; - margin: 8px 0; -} -.comfy-settings .setting-card .setting-container { - padding: 12px 16px; - display: flex; - flex-direction: column; -} -.comfy-settings .setting-card .setting-container .setting-item { - display: flex; - flex-direction: row; - justify-content: space-between; -} -.comfy-settings .setting-card .setting-container .setting-item .setting-title { - padding-right: 15px; - font-weight: 600; -} -.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip { - cursor: help !important; -} -.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper { - padding: 0px 8px 0px 8px !important; -} -.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper svg { - fill: var(--spice-subtext); - transition: fill 0.2s; -} -.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:focus-within svg, .comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:hover svg { - fill: var(--spice-text) !important; -} -.comfy-settings .setting-card .setting-container .setting-action, -.comfy-settings .setting-card .setting-container .setting-title { - display: flex; - align-items: center; - padding: 8px 0; -} -.comfy-settings .setting-card .setting-description { - font-size: 0.9rem; - color: var(--spice-subtext); -} -.comfy-settings .setting-card .setting-description-spacer { - height: 0.9rem; -} -.comfy-settings .setting-card .setting-action { - text-align: right; -} -.comfy-settings .setting-card .setting-action .x-toggle-wrapper { - cursor: pointer; -} -.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-input { - width: 100%; -} -.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-indicatorWrapper { - transition: background-color 0.2s; - --spice-button-disabled: var(--background-tinted-base); -} -.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { - background-color: var(--background-tinted-highlight); -} -.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { - background-color: var(--spice-button-active); -} -.comfy-settings .setting-card .setting-action button.switch { - border: 0px; - background-color: var(--background-tinted-base); - cursor: pointer; - display: flex; - padding: 8px; - margin-inline-end: 12px; -} -.comfy-settings .setting-card .setting-action button.switch:hover { - transform: scale(1.04); - color: var(--spice-text); -} -.comfy-settings .setting-card .setting-action button.switch:active { - transform: scale(0.98); - color: var(--spice-text); -} -.comfy-settings .setting-card .setting-action input { - padding-inline: 10px; - text-align: center; - background-color: var(--background-tinted-base); - color: var(--spice-text); - border: none; - height: 32px; - width: 120px; -} -.comfy-settings .setting-card .setting-action input::placeholder { - color: rgba(var(--spice-rgb-text), 0.3); -} -.comfy-settings .setting-card .setting-action input[type=number] { - width: 50px; - transition: width 0.2s; -} -.comfy-settings .setting-card .setting-action input[type=number]::-webkit-inner-spin-button, .comfy-settings .setting-card .setting-action input[type=number]::-webkit-outer-spin-button { - display: none; -} -.comfy-settings .setting-card .setting-action input[type=number]:hover { - width: 60px; -} -.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-inner-spin-button, .comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-outer-spin-button { - display: block; -} -.comfy-settings .setting-card .setting-action input[type=color] { - width: 32px; - padding: 3px; - transition: all 0.2s ease; - cursor: pointer; - margin-left: 8px; -} -.comfy-settings .setting-card .setting-action input[type=color]:hover, .comfy-settings .setting-card .setting-action input[type=color]:focus, .comfy-settings .setting-card .setting-action input[type=color]:active { - scale: 1.04; - background-color: var(--background-tinted-highlight); -} -.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch-wrapper { - padding: 0; - margin: 0; -} -.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch { - border: none; - border-radius: var(--button-radius); -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper { - position: relative; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-button { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-arrow { - border-color: transparent transparent rgba(var(--spice-rgb-text), 0.7); - border-width: 0 5px 5px; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-menu { - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button { - position: relative; - background-color: var(--background-tinted-base); - border: 0; - border-radius: var(--button-radius); - box-sizing: border-box; - color: rgba(var(--spice-rgb-text), 0.7); - cursor: default; - outline: 0; - padding: 0 36px 0 16px; - transition: all 0.2s ease; - height: 32px; - cursor: pointer !important; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button:hover { - color: var(--spice-rgb-text); - background-color: var(--background-tinted-highlight); -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button .dropdown-selection { - display: flex; - align-items: center; - height: 32px; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-arrow { - border-color: rgba(var(--spice-rgb-text), 0.7) transparent transparent; - border-style: solid; - border-width: 5px 5px 0; - content: " "; - display: block; - height: 0; - margin-top: -ceil(2.5); - position: absolute; - right: 16px; - top: 14px; - width: 0; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-menu { - scrollbar-width: thin; - background-color: var(--spice-card); - opacity: 1; - border: 0; - border-radius: 8px; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); - box-sizing: border-box; - margin-top: -1px; - max-height: 200px; - overflow-y: auto; - overflow-x: hidden; - position: absolute; - top: 100%; - width: 100%; - z-index: 1000; - -webkit-overflow-scrolling: touch; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option { - box-sizing: border-box; - color: rgba(var(--spice-rgb-text), 0.7); - background-color: var(--background-tinted-highlight); - cursor: pointer; - display: block; - padding: 8px 10px; - text-align: center; -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option.selected { - background-color: rgba(var(--spice-rgb-text), 0.7); - color: var(--spice-sidebar); -} -.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option:hover { - background-color: rgb(var(--spice-rgb-text)); - color: var(--spice-sidebar); -} -.comfy-settings .setting-subSection#enabled .setting-card { - border-radius: 0; - margin: 0; -} -.comfy-settings .setting-subSection#enabled .setting-card:first-child { - border-radius: 10px 10px 0px 0px; - background-color: var(--spice-sidebar); - margin-top: 8px; - transition: 0.2s; -} -.comfy-settings .setting-subSection#enabled .setting-card:first-child:hover { - background-color: var(--spice-button-disabled); - transition: background-color 0.2s; - cursor: pointer; -} -.comfy-settings .setting-subSection#enabled .setting-card:first-child .setting-title { - cursor: pointer !important; -} -.comfy-settings .setting-subSection#enabled .setting-card:last-child { - border-radius: 0 0 10px 10px; - margin-bottom: 8px; -} -.comfy-settings .setting-subSection#collapsed .setting-card { - background-color: var(--spice-sidebar); - transition: background-color 0.2s; - cursor: pointer; -} -.comfy-settings .setting-subSection#collapsed .setting-card:hover { - background-color: var(--spice-button-disabled); -} -.comfy-settings .setting-subSection#collapsed .setting-card .setting-title { - cursor: pointer !important; -} -.comfy-settings .setting-button-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px; -} -.comfy-settings .main-buttons-button { - background-color: transparent; - color: var(--spice-button); - border: 2px solid var(--spice-button) !important; - margin: 5px 10px; - border: 2px solid transparent; - border-radius: 10px; - cursor: pointer; - display: inline-block; - font-size: 12px; - font-weight: 700; - letter-spacing: 1.76px; - line-height: 18px; - padding: 8px 8%; - text-align: center; - text-transform: uppercase; - transition: all 33ms cubic-bezier(0.3, 0, 0, 1); - white-space: nowrap; - will-change: transform; -} -.comfy-settings .main-buttons-button:hover { - transform: scale(1.02); - filter: brightness(1.2); -} -.comfy-settings .main-buttons-button:active { - transform: scale(0.98); - filter: brightness(0.8); -} - -:root .main-topBar-container .main-topBar-topbarContent *, -:root .main-topBar-container .main-topBar-topbarContentWrapper * { - justify-content: center; - text-align: center; -} -:root .main-topBar-container .main-topBar-searchBar > form input { - height: 32px; - background-color: rgba(var(--spice-rgb-shadow), 0.7); -} -:root .main-topBar-container .main-topBar-searchBar > form input ::placeholder { - color: rgba(var(--spice-rgb-selected-row), 0.7); -} -:root .main-topBar-container .main-topBar-historyButtons button:hover { - transform: scale(1.1); -} -:root .main-topBar-container .main-topBar-topbarContent > div:has([data-encore-id=buttonPrimary]):first-child { - display: none !important; -} -:root .main-topBar-container .main-topBar-background { - background-color: var(--spice-main) !important; -} -:root .main-topBar-container .main-topBar-overlay { - background-color: transparent !important; -} -:root .main-topBar-container .main-topBar-UpgradeButton { - font-size: 0; - overflow: hidden; - background: url("https://i.imgur.com/nzAfcIL.png") 50%/contain no-repeat; - border: none; - padding: 5px; - box-sizing: content-box; - width: 12px; -} - -:root.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { - padding-inline: 60px 150px !important; -} -:root.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { - padding-inline: 0px 150px !important; -} -:root.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container { - padding-inline: 72px 0px !important; -} -:root.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top { - height: calc(var(--comfy-topbar-height, 40px) + 8px) !important; -} -:root:has(#main.Flatten-Colors-normal) { - --spice-main: var(--spice-sidebar); - --spice-main-transition: var(--spice-sidebar); - --spice-rgb-main: var(--spice-rgb-sidebar); - --spice-rgb-main-transition: var(--spice-rgb-sidebar); -} -:root:has(#main.Flatten-Colors-reverse) { - --spice-sidebar: var(--spice-main); - --spice-rgb-sidebar: var(--spice-rgb-main); -} -:root:has(#main.Comfy-Dark-Modals-Snippet) .ABD0FGjBGqGZG33bP7Lc, -:root:has(#main.Comfy-Dark-Modals-Snippet) .main-duplicateTrackModal-container { - background-color: var(--spice-main); - color: var(--spice-text); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX { - --cover-ambience-background: var(--spice-player, var(--spice-sidebar)); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar { - margin-bottom: 8px; -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar { - padding: 0 8px 6px 0 !important; - margin-bottom: 0 !important; - background: var(--bg-img, var(--spice-player)); - border-radius: var(--border-radius); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar { - position: absolute !important; -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text { - position: fixed; - bottom: 14px; - right: 8px; -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type { - transform: translateX(calc(-100% - 20px)); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after { - position: absolute; - left: calc(100% + 10px); - font-weight: bold; - color: rgba(var(--spice-rgb-custom-subdued), 0.8); - content: "/"; - transform: translateX(-50%); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea { - border-radius: 0 0 8px 8px !important; - height: 6px !important; -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after { - content: ""; - padding: 8px; - position: absolute; - top: -6px; - width: calc(100% - 16px); -} -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar, -:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor, :root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar, -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor { - height: 6px !important; - border-radius: 50px !important; -} -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__now-playing-bar.LibraryX { - --cover-ambience-background: var(--spice-main) !important; -} -:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .main-nowPlayingBar-nowPlayingBar { - background: var(--bg-img, var(--spice-main)); -} -:root #main.Comfy-kitty-Snippet .Root__main-view { - background-image: url("https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif") !important; - background-position-x: center !important; - background-position-y: center !important; - background-size: 610px !important; - background-repeat: no-repeat !important; -} -:root #main.Remove-Column-Bar-Snippet .main-trackList-trackListHeader { - display: none; -} -:root #main.Home-Header-Snippet .main-home-homeHeader { - display: block !important; -} -:root #main.Home-Header-Color .main-home-homeHeader { - background-color: var(--home-header-color) !important; -} -:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list { - justify-content: center; - align-items: center; - display: flex; - flex-wrap: wrap; -} -:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list span { - display: none; -} -:root #main.Horizontal-pageLinks-Snippet .main-yourLibraryX-navItem { - padding: 4px 8px !important; -} -:root #main.Playbar-Above-Right-Panel-Snippet .artist-artistOverview-artistOverviewContent, -:root #main.Playbar-Above-Right-Panel-Snippet .main-actionBarBackground-background { - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container { - grid-template-areas: "left-sidebar main-view now-playing-bar" "left-sidebar main-view right-sidebar"; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container[data-right-sidebar-hidden] .Root__main-view { - grid-area: main-view/main-view/main-view/span 1; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__main-view, -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__nav-bar { - margin-bottom: 8px; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__right-sidebar { - height: calc(100vh - 450px); - width: min-content; - padding-bottom: 8px; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar { - width: var(--comfy-panel-width); - background-color: var(--spice-main); - border-radius: 8px; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container { - flex-direction: column; - min-width: 280px; - max-width: 420px; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar { - flex-direction: column; - padding: 8px; - min-height: 400px; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center, -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-left { - width: 100%; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .player-controls__buttons.player-controls__buttons--new-icons { - order: 2; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .playback-bar, -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS { - order: 1; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right { - width: calc(var(--comfy-panel-width) - 16px); -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls { - width: calc(var(--comfy-panel-width) - 16px); - justify-content: space-evenly; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying { - width: 100%; - height: auto; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container { - width: 100%; - height: 100%; - bottom: 0; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > :first-child { - width: 100%; - height: 100%; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container > :first-child > :first-child { - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0); -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .main-coverSlotCollapsed-expandButton { - top: 3%; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx { - background-color: rgba(0, 0, 0, 0); - margin: auto; - width: 100%; -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt { - width: 100%; - height: 100%; - padding-bottom: 5px; - background-color: rgba(0, 0, 0, 0); -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art { - height: 220px !important; - width: 220px !important; - margin: auto; - background-color: rgba(0, 0, 0, 0); -} -:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art img { - background-color: rgba(0, 0, 0, 0); - box-shadow: 0 0 5px 5px var(--spice-text); -} -:root #main.Smooth-Progress-Bar-Snippet .playback-bar > div, -:root #main.Smooth-Progress-Bar-Snippet .playback-bar ~ div, -:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea > div, -:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea ~ div { - -webkit-transition-delay: 0s; - transition-delay: 0s; - -webkit-transition-duration: 1000ms; - transition-duration: 1000ms; - -webkit-transition-property: left, -webkit-transform; - transition-property: left, -webkit-transform; - transition-property: transform, left; - transition-property: transform, left, -webkit-transform; - -webkit-transition-timing-function: linear; - transition-timing-function: linear; -} -:root #main.Remove-Progress-Bar-Gradient-Snippet .x-progressBar-fillColor { - background-color: var(--fg-color) !important; - border-radius: var(--progress-bar-radius) !important; - height: var(--progress-bar-height) !important; - transform: translateX(calc(-100% + var(--progress-bar-transform))) !important; - width: 100% !important; -} -:root #main.Remove-Connect-Bar-Snippet .main-connectBar-connectBar, -:root #main.Remove-Connect-Bar-Snippet .main-devicePicker-indicator { - display: none !important; -} -:root #main.Compact-Connect-Bar-Snippet .main-nowPlayingBar-container .main-connectBar-connectBar { - position: absolute; - margin-left: auto; - padding: 0.75rem 1rem; - top: -45%; - right: 0; -} -:root #main.Remove-Lyrics-Button-Snippet .main-nowPlayingBar-lyricsButton { - display: none !important; -} -:root #main.Hoverable-Timers-Snippet .playback-bar > div, -:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS > div { - transition: all 0.3s ease; - opacity: 0; -} -:root #main.Hoverable-Timers-Snippet .playback-bar:hover > div, -:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS:hover > div { - transition: all 0.3s ease; - opacity: 1 !important; -} -:root #main.Hoverable-Timers-Snippet .playback-bar .playback-progressbar, -:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .playback-progressbar { - opacity: 1 !important; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container { - grid-template-areas: "top-bar top-bar top-bar" "left-sidebar main-view right-sidebar" "now-playing-bar now-playing-bar now-playing-bar" !important; - grid-template-rows: 0 1fr auto !important; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container { - pointer-events: none; - grid-area: top-bar; - contain: unset; - top: calc(var(--comfy-topbar-height, 40px) * -1 + 1px); - height: calc(var(--comfy-topbar-height, 40px) + 8px); - padding-block: 8px; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper > *:not(.main-topBar-searchBar):not(:has(ul)) { - justify-content: center; - display: flex; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper ul { - text-align: center !important; - justify-content: center; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper .queue-tabBar-headerItemLink { - padding: 5px 16px; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent { - app-region: drag !important; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent .main-entityHeader-topbarTitle { - height: 100%; -} -:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-background { - display: none; -} -:root #main.Topbar-Inside-Titlebar-Snippet main:not(:has(.main-home-filterChipsContainer)), -:root #main.Topbar-Inside-Titlebar-Snippet .queue-queuePage-queuePage, -:root #main.Topbar-Inside-Titlebar-Snippet .search-searchCategory-SearchCategory, -:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar, -:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header, -:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI, -:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91, -:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer { - margin-top: -64px !important; - top: 0 !important; -} -:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header, -:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI, -:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91 { - padding-top: 15px !important; -} -:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer { - padding-top: 8px; -} -:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar { - height: 64px !important; - box-shadow: none; -} -:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum { - padding-top: 32px; -} -:root #main.Topbar-Inside-Titlebar-Snippet .main-view-container .search-searchCategory-SearchCategory { - height: 64px; - padding-top: 17px; -} -:root #main.Collapse-Topbar-Snippet .main-topBar-topbarContentWrapper nav { - justify-content: center; - display: flex; -} -:root #main.Header-Background .main-entityHeader-imageContainerNew { - align-self: center; - left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 24px + var(--content-spacing)); - position: relative; - z-index: 1; -} -:root #main.Header-Background .main-entityHeader-headerText { - background-color: rgba(var(--spice-rgb-main-transition), var(--header-opacity)); - padding: 24px 32px; - border-radius: var(--border-radius); - min-width: fit-content; - box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1); - justify-content: space-evenly !important; - height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 48px); -} -:root #main.Header-Background .main-entityHeader-imageContainerNew + .main-entityHeader-headerText { - padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing)); - margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing)); -} -:root #main.Header-Background:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn > * { - opacity: var(--top-bar-opacity) !important; -} -:root #main.AM-Gradient-Include-Existing-Snippet.Banner-Enabled .under-main-view > div:not(.comfy-banner-frame), :root #main.Replace-Existing-Banners.Banner-Enabled .under-main-view > div:not(.comfy-banner-frame) { - display: none !important; -} -:root #main.Lyrics main > div > div:empty { - --lyrics-color-background: transparent !important; -} -:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame { - position: absolute; - width: 100%; - height: 100%; - z-index: 0; - filter: blur(calc(var(--image-blur) * 10)); - background-image: var(--gradient-background-image); -} -:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image { - position: absolute !important; - width: var(--gradient-width) !important; - aspect-ratio: 1; - animation: rotate var(--gradient-speed) linear infinite; - border-radius: var(--gradient-radius) !important; - mix-blend-mode: var(--gradient-blend-mode); - background-size: cover !important; -} -:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:first-of-type { - height: revert; - left: unset; - background-size: unset; - background-position: unset; - filter: none; - -webkit-mask-image: none; - mask-image: none; - right: 0; - top: 0; - z-index: 10; -} -:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:last-of-type { - display: revert; - left: 0; - bottom: 0; - animation-direction: reverse; -} -@keyframes rotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -:root .main-trackList-active .main-trackList-rowTitle { - color: var(--spice-text) !important; - text-shadow: 0px 0px 6px var(--spice-text); - -webkit-text-stroke: thin; -} -:root .main-trackList-trackListHeader._2ajKWDiy6YvJu5wo8I1g { - background: var(--spice-main) !important; - top: 0 !important; -} -:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListRow:hover, -:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListHeaderRow:hover { - background-color: rgba(var(--spice-rgb-selected-row), 0.05); -} -:root .main-trackList-trackListRow, -:root .main-trackList-trackListHeaderRow { - border-radius: var(--border-radius); - border: none; - transition: 200ms background-color; -} -:root .main-trackList-trackListRow.main-trackList-selected, -:root .main-trackList-trackListHeaderRow.main-trackList-selected { - background-color: rgba(var(--spice-rgb-selected-row), 0.1); -} -:root .main-trackList-trackListRow.main-trackList-selected:hover, -:root .main-trackList-trackListHeaderRow.main-trackList-selected:hover { - background-color: rgba(var(--spice-rgb-selected-row), 0.15); -} -:root .main-trackList-trackListRow .main-type-mesto, -:root .main-trackList-trackListRow .main-type-ballad, -:root .main-trackList-trackListHeaderRow .main-type-mesto, -:root .main-trackList-trackListHeaderRow .main-type-ballad { - transition: 300ms color; -} -:root .main-trackList-trackListRow .main-trackList-rowImageFallback, -:root .main-trackList-trackListHeaderRow .main-trackList-rowImageFallback { - border-radius: var(--border-radius) !important; -} -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListHeader .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListHeader .main-trackList-rowSectionIndex { - opacity: 0; -} -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex { - background: rgba(var(--spice-rgb-play-button), 0.5); -} -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, :root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton { - opacity: 1; -} -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowSectionIndex { - color: var(--spice-sidebar); - border-radius: var(--border-radius); - transition: 200ms opacity, 200ms background; -} -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow > .main-trackList-rowSectionIndex, -:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow > .main-trackList-rowSectionIndex { - position: relative; - z-index: 1000; - top: 8px; - left: 56px; - width: 40px; - height: 40px; - justify-content: center; - text-indent: -1000px; -} -:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="3"] .main-trackList-trackListRowGrid { - padding-left: 2px; - grid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important; -} -:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="4"] .main-trackList-trackListRowGrid { - padding-left: 2px; - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important; -} -:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="5"] .main-trackList-trackListRowGrid { - padding-left: 2px; - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; -} -:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="6"] .main-trackList-trackListRowGrid { - padding-left: 2px; - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; -} - -:root { - --border-radius: 8px; - --button-radius: 8px; - --image-blur: 4px; - --gradient-speed: 50s; - --gradient-width: 150%; - --gradient-blend-mode: luminosity; - --gradient-background-image: none; - --gradient-radius: 50%; - --cover-art-width: 84px; - --cover-art-height: 84px; - --cover-art-radius: 8px; - --cover-art-left: 0px; - --cover-art-bottom: 20px; - --header-opacity: 0.6; - --tracklist-gradient-height: 232px; - --tracklist-gradient-opacity: 0.6; - --tracklist-gradient-noise: var(--background-noise); - --image-url: none; -} -:root button, -:root button span, -:root input, -:root select, -:root img, -:root .x-entityImage-xsmall, -:root div[style*=background-image]:has(img), -:root .profile-userEditDetails-image div:nth-child(2), -:root [data-encore-id=buttonSecondary] { - border-radius: var(--border-radius) !important; -} -:root button:not(.main-editImageButton-overlay):not([style*=background-image]):not(.main-buddyFeed-overlay), -:root button span:not(.Lyric.Synced.Line):not([data-encore-id=text]), -:root button figure img, -:root button:has(span:empty), -:root input:not([style*=background-image]), -:root select, -:root [data-encore-id=buttonSecondary] { - border-radius: var(--button-radius) !important; -} -:root .Root__top-container { - overflow: hidden; -} -:root:not(:has(.global-nav)) .Root__top-container { - padding-top: max(var(--comfy-topbar-height, 40px) / var(--zoom, 1), 8px) !important; -} -:root .global-nav .Root__top-container { - grid-template-rows: calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1) - 16px) 1fr auto; -} -:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav) body::after { - height: calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1)) !important; -} -:root.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav { - padding-block: calc(var(--comfy-topbar-height, 64px) / 2 - 8px); -} -:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after { - content: ""; - position: absolute; - right: 0; - z-index: 999; - backdrop-filter: brightness(2.12); - width: calc(135px / var(--zoom, 1)); - height: calc(var(--comfy-topbar-height, 40px) / var(--zoom, 1)); -} -:root .main-trackList-playingIcon, -:root .view-homeShortcutsGrid-playingIcon, -:root [src*=equaliser] { - -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); - background: var(--spice-button-active); - content-visibility: hidden; - -webkit-mask-repeat: no-repeat; - border-radius: 0 !important; -} -:root .x-settings-equalizerPanelCanvas { - filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important; - border-radius: 0 !important; -} -:root .encore-dark-theme, -:root .encore-dark-theme .encore-base-set { - --background-elevated-base: var(--spice-main-elevated); - --background-highlight: var(--spice-highlight); -} -:root .encore-bright-accent-set { - --background-base: var(--spice-play-button); - --background-highlight: var(--spice-play-button-active); - --background-press: var(--spice-play-button-active); -} -:root .encore-inverted-light-set { - --background-highlight: var(--spice-text); - --background-press: var(--spice-subtext); -} -:root .npv-background-image__overlay { - background: linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%), var(--background-noise); - background-color: unset; -} -:root .Root__main-view .main-view-container__scroll-node-child { - padding-bottom: 0; -} -:root aside#Desktop_PanelContainer_Id .os-scrollbar-vertical, -:root .os-scrollbar-horizontal { - display: none !important; -} -:root .os-scrollbar-track, -:root ::-webkit-scrollbar { - width: 8px; -} -:root .os-scrollbar-handle, -:root ::-webkit-scrollbar-thumb { - border-radius: 1em; - --os-handle-perpendicular-size-active: 8px; - --os-handle-perpendicular-size-hover: 8px; - --os-handle-perpendicular-size: 8px; -} -:root .os-scrollbar { - --os-padding-perpendicular: 4px; -} -:root ::-webkit-scrollbar-track { - margin-bottom: 10px; -} -:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle, -:root .main-addButton-active { - color: var(--spice-heart); -} -:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover, -:root .main-addButton-active:hover { - color: rgba(var(--spice-rgb-heart), 0.7); -} -:root #_R_G *:not([stroke=none]) { - stroke: var(--spice-heart); -} -:root .main-trackList-rowHeartButton *:not([fill=none]), -:root .control-button-heart *:not([fill=none]), -:root #_R_G *:not([fill=none]) { - fill: var(--spice-heart) !important; -} -:root #context-menu { - overflow: hidden; -} -:root #context-menu .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before { - border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); - content: ""; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: 0; -} -:root #context-menu .main-popper-arrow, -:root #context-menu .main-popper-arrow::before { - background-color: var(--spice-player) !important; -} -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) { - background-color: var(--spice-player); -} -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button, -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a { - border-radius: 2px !important; -} -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):focus, :root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):hover, :root #context-menu ul:not([aria-labelledby~=device-picker-header]) button[aria-expanded=true], -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):focus, -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):hover, -:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a[aria-expanded=true] { - background-color: rgba(var(--spice-rgb-pagelink-active), 0.15); - transition: 150ms background-color; -} -:root #bookmark-menu { - background-color: var(--spice-player); - border-radius: var(--border-radius); -} -:root #bookmark-menu .bookmark-filter { - background-color: var(--spice-player); -} -:root #bookmark-menu button, -:root #bookmark-menu a { - border-radius: 0; -} -:root #bookmark-menu button::before, :root #bookmark-menu button::after, -:root #bookmark-menu a::before, -:root #bookmark-menu a::after { - content: none; -} -:root #bookmark-menu button:not(.main-contextMenu-disabled):focus, :root #bookmark-menu button:not(.main-contextMenu-disabled):hover, :root #bookmark-menu button[aria-expanded=true], -:root #bookmark-menu a:not(.main-contextMenu-disabled):focus, -:root #bookmark-menu a:not(.main-contextMenu-disabled):hover, -:root #bookmark-menu a[aria-expanded=true] { - background-color: rgba(var(--spice-rgb-pagelink-active), 0.15); - transition: 150ms background-color; -} - -/*# sourceMappingURL=app.css.map */ +:root .global-nav .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;align-items:center;margin-top:64px}:root #main.Banner-Enabled .comfy-banner-frame{display:block}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:top;background-image:var(--image-url);filter:blur(var(--image-blur));-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));transition:background .5s ease}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image:last-of-type{display:none}:root #main.Banner-Enabled .main-entityHeader-backgroundColor{background:none !important}:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px - 12px) !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled .main-actionBarBackground-background{background-image:linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, var(--spice-main) var(--tracklist-gradient-height)),var(--tracklist-gradient-noise) !important;background-color:rgba(0,0,0,0) !important;height:calc(100% - 250px);min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px);background-size:auto 100%,300px var(--tracklist-gradient-height);background-repeat:repeat-x}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent{position:relative !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent .main-actionBarBackground-background{background-image:none !important;background-color:unset !important}:root #main.Banner-Enabled .playlist-playlist-playlistContent,:root #main.Banner-Enabled .dTKw7B8X1ybw7SHebMH3,:root #main.Banner-Enabled .xcTrtCsYOPtSElbX9inq,:root #main.Banner-Enabled .EmeHQXR87mUskYK6xEde,:root #main.Banner-Enabled .N_8iI7NKHP0iG2jp3g0R{background:none}:root #main.Banner-Enabled .main-entityHeader-background{height:calc(clamp(340px,30vh,400px) + var(--tracklist-gradient-height));max-height:100%}:root #main.Banner-Enabled .main-entityHeader-background.main-entityHeader-overlay{--bgColor: unset !important}:root #main.Banner-Enabled .main-entityHeader-withBackgroundImage{height:clamp(340px,30vh,400px) !important}:root .Root__main-view .comfy-banner-frame{display:none}:root .Root__main-view .main-leaderboardComponent-container,:root .Root__main-view .sponsor-container{display:none !important}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)){position:sticky;padding-bottom:32px}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-host-overflow,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-padding,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) .os-viewport,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) div[data-overlayscrollbars~=host],:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) [data-overlayscrollbars-viewport~=scrollbarHidden]{overflow:visible !important}:root .Root__main-view .main-view-container input:checked~.x-toggle-indicatorWrapper{background-color:var(--spice-radio-btn-active)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card{background:var(--spice-sidebar);border-radius:var(--border-radius);padding:0;overflow:hidden}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card:hover{background:var(--spice-card)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-PlayButtonContainer{right:12px !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer{margin-bottom:-4px}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-circular,:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer img{border-radius:0 !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-imageWrapper{box-shadow:none !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-cardMetadata{padding:16px}:root .Root__main-view .main-view-container .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc:after,:root .Root__main-view .main-view-container .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4:after,:root .Root__main-view .main-view-container .main-home-filterChipsContainer>div:first-child:after{background-color:var(--spice-main)}:root .Root__main-view .main-view-container .main-home-homeHeader{display:none}:root .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2),:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer{align-self:center;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText{flex:unset;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText .main-entityHeader-title h1{font-size:3rem !important}:root .Root__main-view .main-view-container .main-actionBar-ActionBar{padding:8px 16px 16px 16px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow:first-of-type>div:first-child{margin-top:-24px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>div:first-child{margin-left:calc(var(--content-spacing) + 3px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>:first-child:not(:only-child){margin-right:calc(var(--content-spacing) + 4px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow [class*=Button]{min-block-size:32px;padding-block:0}:root .Root__main-view .main-view-container .artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer{padding-bottom:var(--grid-gap)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut{border-radius:var(--border-radius)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper{border-radius:calc(var(--border-radius) + 15px)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .main-playButton-PlayButton{background:none !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-Provider{font-size:0}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar{width:0 !important;height:0 !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer .lyrics-lyricsContainer-LyricsBackground{z-index:-1;background-repeat:no-repeat;background-size:cover;-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6))}:root .Root__main-view .main-view-container section[data-testid=your-episodes-page] .main-actionBarBackground-background{height:calc(100vh - 494px) !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar{flex-direction:column-reverse}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow{margin-top:0 !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow:nth-child(1){padding-top:2rem}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li .main-yourLibraryX-listRowEntityImage{border-radius:var(--border-radius) !important}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li>div:active::after{background-color:var(--spice-highlight-elevated);top:0;bottom:0;left:0;right:0}:root .Root__nav-bar .main-rootlist-wrapper [role=presentation]>li>div>div>div>div>div>.x-entityImage-imageContainer{box-shadow:0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important}:root .Root__nav-bar .main-yourLibraryX-isScrolled{box-shadow:none !important}:root .Root__nav-bar .os-scrollbar{display:none}:root .Root__top-container .main-nowPlayingWidget-nowPlaying{height:0;z-index:1;left:var(--cover-art-left)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{bottom:var(--cover-art-bottom);border-radius:var(--cover-art-radius)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>div button{border-radius:var(--cover-art-radius) !important;background:none}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .cover-art,:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .VideoPlayer__container video{width:var(--cover-art-width) !important;height:var(--cover-art-height) !important;border-radius:var(--cover-art-radius);overflow:hidden;object-fit:cover;max-height:none;max-width:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{position:relative;border-top:none;flex-direction:column-reverse !important;background-clip:text}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container::before{z-index:auto !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container:has(.main-connectBar-connectBar)::before{height:calc(100% - 40px);top:40px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{margin-bottom:12px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .player-controls__buttons--new-icons{margin-bottom:0px !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar{position:fixed;display:grid;grid-template-columns:auto auto;grid-template-areas:"time-left time-right" "bar bar";bottom:0;right:0;gap:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .saber-hilt{height:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container){text-align:center}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):first-of-type{grid-area:time-left}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):last-of-type{grid-area:time-right}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar-container{display:contents}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar{grid-column:1/3;grid-area:bar;height:11px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);--fg-color: var(--spice-progress-fg);--progress-bar-height: 12px;--progress-bar-radius: 0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .x-progressBar-fillColor{width:107%;background-color:rgba(0,0,0,0);background-image:linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .progress-bar__slider{display:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-volumeBar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive){color:rgba(var(--spice-rgb-selected-row), 0.7)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive):hover{color:var(--spice-text) !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls .main-devicePicker-indicator{display:none}.x-settings-container{max-width:unset}.x-toggle-indicatorWrapper{border-radius:var(--button-radius)}#main.Settings-Open~generic-modal .GenericModal__overlay{--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header{padding:12px 12px 12px 16px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-type-alto{font-size:25px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn{background-color:var(--background-tinted-base);height:34px;cursor:pointer}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:hover{transform:scale(1.04) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:focus{transform:scale(1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:active{transform:scale(0.98) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:first-of-type{margin-left:auto}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:not(:last-of-type){margin-right:8px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:last-of-type svg{scale:.8}#main.Settings-Open~generic-modal .GenericModal__overlay .main-embedWidgetGenerator-container{max-height:75vh !important;width:550px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection{padding:0px 16px 0;scrollbar-width:thin;min-height:calc(100% - 60px)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection::after{content:"";position:absolute;bottom:0;width:calc(100% - 12px);left:0;height:25px;background:linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5));pointer-events:none;border-radius:8px;z-index:0;border-bottom-right-radius:0}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar{width:8px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb{border-radius:1em !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal{border-radius:10px}.comfy-settings .search-searchCategory-SearchCategory{background:var(--spice-player);grid-column:1/-1;height:48px;padding-top:7px;position:sticky;top:0px;z-index:1}.comfy-settings .search-searchCategory-SearchCategory{height:unset;padding-bottom:12px;padding-top:12px;top:0}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%;padding-inline:0px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGrid{overflow-y:hidden}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem{cursor:pointer;padding:2px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem button::after{border:none !important}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:active,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:hover{text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible{outline:none;text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem:focus-visible>*{outline:5px auto #3673d4}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-categoryGridItem>*{margin-inline-end:8px;margin-block-end:0 !important}.comfy-settings .setting-header{text-align:center;padding:5px 0}.comfy-settings .setting-card{background-color:var(--background-tinted-base);border-radius:10px;margin:8px 0}.comfy-settings .setting-card .setting-container{padding:12px 16px;display:flex;flex-direction:column}.comfy-settings .setting-card .setting-container .setting-item{display:flex;flex-direction:row;justify-content:space-between}.comfy-settings .setting-card .setting-container .setting-item .setting-title{padding-right:15px;font-weight:600}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip{cursor:help !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper{padding:0px 8px 0px 8px !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper svg{fill:var(--spice-subtext);transition:fill .2s}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:focus-within svg,.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:hover svg{fill:var(--spice-text) !important}.comfy-settings .setting-card .setting-container .setting-action,.comfy-settings .setting-card .setting-container .setting-title{display:flex;align-items:center;padding:8px 0}.comfy-settings .setting-card .setting-description{font-size:.9rem;color:var(--spice-subtext)}.comfy-settings .setting-card .setting-description-spacer{height:.9rem}.comfy-settings .setting-card .setting-action{text-align:right}.comfy-settings .setting-card .setting-action .x-toggle-wrapper{cursor:pointer}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-input{width:100%}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-indicatorWrapper{transition:background-color .2s;--spice-button-disabled: var(--background-tinted-base)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:checked:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--spice-button-active)}.comfy-settings .setting-card .setting-action button.switch{border:0px;background-color:var(--background-tinted-base);cursor:pointer;display:flex;padding:8px;margin-inline-end:12px}.comfy-settings .setting-card .setting-action button.switch:hover{transform:scale(1.04);color:var(--spice-text)}.comfy-settings .setting-card .setting-action button.switch:active{transform:scale(0.98);color:var(--spice-text)}.comfy-settings .setting-card .setting-action input{padding-inline:10px;text-align:center;background-color:var(--background-tinted-base);color:var(--spice-text);border:none;height:32px;width:120px}.comfy-settings .setting-card .setting-action input::placeholder{color:rgba(var(--spice-rgb-text), 0.3)}.comfy-settings .setting-card .setting-action input[type=number]{width:50px;transition:width .2s}.comfy-settings .setting-card .setting-action input[type=number]::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]::-webkit-outer-spin-button{display:none}.comfy-settings .setting-card .setting-action input[type=number]:hover{width:60px}.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-outer-spin-button{display:block}.comfy-settings .setting-card .setting-action input[type=color]{width:32px;padding:3px;transition:all .2s ease;cursor:pointer;margin-left:8px}.comfy-settings .setting-card .setting-action input[type=color]:hover,.comfy-settings .setting-card .setting-action input[type=color]:focus,.comfy-settings .setting-card .setting-action input[type=color]:active{scale:1.04;background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch-wrapper{padding:0;margin:0}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--button-radius)}.comfy-settings .setting-card .setting-action .dropdown-wrapper{position:relative}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-button{border-bottom-left-radius:0;border-bottom-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(var(--spice-rgb-text), 0.7);border-width:0 5px 5px}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button{position:relative;background-color:var(--background-tinted-base);border:0;border-radius:var(--button-radius);box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);cursor:default;outline:0;padding:0 36px 0 16px;transition:all .2s ease;height:32px;cursor:pointer !important}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button:hover{color:var(--spice-rgb-text);background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button .dropdown-selection{display:flex;align-items:center;height:32px}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-arrow{border-color:rgba(var(--spice-rgb-text), 0.7) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-ceil(2.5);position:absolute;right:16px;top:14px;width:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-menu{scrollbar-width:thin;background-color:var(--spice-card);opacity:1;border:0;border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option{box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);background-color:var(--background-tinted-highlight);cursor:pointer;display:block;padding:8px 10px;text-align:center}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option.selected{background-color:rgba(var(--spice-rgb-text), 0.7);color:var(--spice-sidebar)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option:hover{background-color:rgb(var(--spice-rgb-text));color:var(--spice-sidebar)}.comfy-settings .setting-subSection#enabled .setting-card{border-radius:0;margin:0}.comfy-settings .setting-subSection#enabled .setting-card:first-child{border-radius:10px 10px 0px 0px;background-color:var(--spice-sidebar);margin-top:8px;transition:.2s}.comfy-settings .setting-subSection#enabled .setting-card:first-child:hover{background-color:var(--spice-button-disabled);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#enabled .setting-card:first-child .setting-title{cursor:pointer !important}.comfy-settings .setting-subSection#enabled .setting-card:last-child{border-radius:0 0 10px 10px;margin-bottom:8px}.comfy-settings .setting-subSection#collapsed .setting-card{background-color:var(--spice-sidebar);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#collapsed .setting-card:hover{background-color:var(--spice-button-disabled)}.comfy-settings .setting-subSection#collapsed .setting-card .setting-title{cursor:pointer !important}.comfy-settings .setting-button-row{display:flex;align-items:center;justify-content:space-between;padding:8px}.comfy-settings .main-buttons-button{background-color:rgba(0,0,0,0);color:var(--spice-button);border:2px solid var(--spice-button) !important;margin:5px 10px;border:2px solid rgba(0,0,0,0);border-radius:10px;cursor:pointer;display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.76px;line-height:18px;padding:8px 8%;text-align:center;text-transform:uppercase;transition:all 33ms cubic-bezier(0.3, 0, 0, 1);white-space:nowrap;will-change:transform}.comfy-settings .main-buttons-button:hover{transform:scale(1.02);filter:brightness(1.2)}.comfy-settings .main-buttons-button:active{transform:scale(0.98);filter:brightness(0.8)}:root .main-topBar-container .main-topBar-topbarContent *,:root .main-topBar-container .main-topBar-topbarContentWrapper *{justify-content:center;text-align:center}:root .main-topBar-container .main-topBar-searchBar>form input{height:32px;background-color:rgba(var(--spice-rgb-shadow), 0.7)}:root .main-topBar-container .main-topBar-searchBar>form input::placeholder{color:rgba(var(--spice-rgb-selected-row), 0.7)}:root .main-topBar-container .main-topBar-historyButtons button:hover{transform:scale(1.1)}:root .main-topBar-container .main-topBar-topbarContent>div:has([data-encore-id=buttonPrimary]):first-child{display:none !important}:root .main-topBar-container .main-topBar-background{background-color:var(--spice-main) !important}:root .main-topBar-container .main-topBar-overlay{background-color:rgba(0,0,0,0) !important}:root .main-topBar-container .main-topBar-UpgradeButton{font-size:0;overflow:hidden;background:url("https://i.imgur.com/nzAfcIL.png") 50%/contain no-repeat;border:none;padding:5px;box-sizing:content-box;width:12px}:root.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:60px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:0px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:72px 0px !important}:root.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top{height:calc(var(--comfy-topbar-height, 40px) + 8px) !important}:root:has(#main.Flatten-Colors-normal){--spice-main: var(--spice-sidebar);--spice-main-transition: var(--spice-sidebar);--spice-rgb-main: var(--spice-rgb-sidebar);--spice-rgb-main-transition: var(--spice-rgb-sidebar)}:root:has(#main.Flatten-Colors-reverse){--spice-sidebar: var(--spice-main);--spice-rgb-sidebar: var(--spice-rgb-main)}:root:has(#main.Comfy-Dark-Modals-Snippet) .ABD0FGjBGqGZG33bP7Lc,:root:has(#main.Comfy-Dark-Modals-Snippet) .main-duplicateTrackModal-container{background-color:var(--spice-main);color:var(--spice-text)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-player, var(--spice-sidebar))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar{margin-bottom:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar{padding:0 8px 6px 0 !important;margin-bottom:0 !important;background:var(--bg-img, var(--spice-player));border-radius:var(--border-radius)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar{position:absolute !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text{position:fixed;bottom:14px;right:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type{transform:translateX(calc(-100% - 20px))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after{position:absolute;left:calc(100% + 10px);font-weight:bold;color:rgba(var(--spice-rgb-custom-subdued), 0.8);content:"/";transform:translateX(-50%)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea{border-radius:0 0 8px 8px !important;height:6px !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after{content:"";padding:8px;position:absolute;top:-6px;width:calc(100% - 16px)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor{height:6px !important;border-radius:50px !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-main) !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .main-nowPlayingBar-nowPlayingBar{background:var(--bg-img, var(--spice-main))}:root #main.Comfy-kitty-Snippet .Root__main-view{background-image:url("https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif") !important;background-position-x:center !important;background-position-y:center !important;background-size:610px !important;background-repeat:no-repeat !important}:root #main.Remove-Column-Bar-Snippet .main-trackList-trackListHeader{display:none}:root #main.Home-Header-Snippet .main-home-homeHeader{display:block !important}:root #main.Home-Header-Color .main-home-homeHeader{background-color:var(--home-header-color) !important}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list{justify-content:center;align-items:center;display:flex;flex-wrap:wrap}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list span{display:none}:root #main.Horizontal-pageLinks-Snippet .main-yourLibraryX-navItem{padding:4px 8px !important}:root #main.Playbar-Above-Right-Panel-Snippet .artist-artistOverview-artistOverviewContent,:root #main.Playbar-Above-Right-Panel-Snippet .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 50px) !important}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container{grid-template-areas:"left-sidebar main-view now-playing-bar" "left-sidebar main-view right-sidebar"}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container[data-right-sidebar-hidden] .Root__main-view{grid-area:main-view/main-view/main-view/span 1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__main-view,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__nav-bar{margin-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__right-sidebar{height:calc(100vh - 450px);width:min-content;padding-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar{width:var(--comfy-panel-width);background-color:var(--spice-main);border-radius:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{flex-direction:column;min-width:280px;max-width:420px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{flex-direction:column;padding:8px;min-height:400px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-left{width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .player-controls__buttons.player-controls__buttons--new-icons{order:2}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS{order:1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right{width:calc(var(--comfy-panel-width) - 16px)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls{width:calc(var(--comfy-panel-width) - 16px);justify-content:space-evenly}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{width:100%;height:100%;bottom:0}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child{width:100%;height:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child>:first-child{width:100%;height:100%;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .main-coverSlotCollapsed-expandButton{top:3%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx{background-color:rgba(0,0,0,0);margin:auto;width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt{width:100%;height:100%;padding-bottom:5px;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art{height:220px !important;width:220px !important;margin:auto;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art img{background-color:rgba(0,0,0,0);box-shadow:0 0 5px 5px var(--spice-text)}:root #main.Smooth-Progress-Bar-Snippet .playback-bar>div,:root #main.Smooth-Progress-Bar-Snippet .playback-bar~div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea>div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea~div{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:1000ms;transition-duration:1000ms;-webkit-transition-property:left,-webkit-transform;transition-property:left,-webkit-transform;transition-property:transform,left;transition-property:transform,left,-webkit-transform;-webkit-transition-timing-function:linear;transition-timing-function:linear}:root #main.Remove-Progress-Bar-Gradient-Snippet .x-progressBar-fillColor{background-color:var(--fg-color) !important;border-radius:var(--progress-bar-radius) !important;height:var(--progress-bar-height) !important;transform:translateX(calc(-100% + var(--progress-bar-transform))) !important;width:100% !important}:root #main.Remove-Connect-Bar-Snippet .main-connectBar-connectBar,:root #main.Remove-Connect-Bar-Snippet .main-devicePicker-indicator{display:none !important}:root #main.Remove-Lyrics-Button-Snippet .main-nowPlayingBar-lyricsButton{display:none !important}:root #main.Hoverable-Timers-Snippet .playback-bar>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS>div{transition:all .3s ease;opacity:0}:root #main.Hoverable-Timers-Snippet .playback-bar:hover>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS:hover>div{transition:all .3s ease;opacity:1 !important}:root #main.Hoverable-Timers-Snippet .playback-bar .playback-progressbar,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .playback-progressbar{opacity:1 !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container{grid-template-areas:"top-bar top-bar top-bar" "left-sidebar main-view right-sidebar" "now-playing-bar now-playing-bar now-playing-bar" !important;grid-template-rows:0 1fr auto !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container{pointer-events:none;grid-area:top-bar;contain:unset;top:calc(var(--comfy-topbar-height, 40px)*-1 + 1px);height:calc(var(--comfy-topbar-height, 40px) + 8px);padding-block:8px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper>*:not(.main-topBar-searchBar):not(:has(ul)){justify-content:center;display:flex}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper ul{text-align:center !important;justify-content:center}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper .queue-tabBar-headerItemLink{padding:5px 16px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent{app-region:drag !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent .main-entityHeader-topbarTitle{height:100%}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-background{display:none}:root #main.Topbar-Inside-Titlebar-Snippet main:not(:has(.main-home-filterChipsContainer)),:root #main.Topbar-Inside-Titlebar-Snippet .queue-queuePage-queuePage,:root #main.Topbar-Inside-Titlebar-Snippet .search-searchCategory-SearchCategory,:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar,:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91,:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{margin-top:-64px !important;top:0 !important}:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91{padding-top:15px !important}:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{padding-top:8px}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar{height:64px !important;box-shadow:none}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum{padding-top:32px}:root #main.Topbar-Inside-Titlebar-Snippet .main-view-container .search-searchCategory-SearchCategory{height:64px;padding-top:17px}:root #main.Collapse-Topbar-Snippet .main-topBar-topbarContentWrapper nav{justify-content:center;display:flex}:root #main.Header-Background .main-entityHeader-imageContainerNew{align-self:center;left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 24px + var(--content-spacing));position:relative;z-index:1}:root #main.Header-Background .main-entityHeader-headerText{background-color:rgba(var(--spice-rgb-main-transition), var(--header-opacity));padding:24px 32px;border-radius:var(--border-radius);min-width:fit-content;box-shadow:0 2px 4px rgba(var(--spice-rgb-shadow), 0.1);justify-content:space-evenly !important;height:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 48px)}:root #main.Header-Background .main-entityHeader-imageContainerNew+.main-entityHeader-headerText{padding-left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 32px + var(--content-spacing));margin-right:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + var(--content-spacing))}:root #main.Header-Background:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>*{opacity:var(--top-bar-opacity) !important}:root #main.AM-Gradient-Include-Existing-Snippet.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame),:root #main.Replace-Existing-Banners.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame){display:none !important}:root #main.Lyrics main>div>div:empty{--lyrics-color-background: transparent !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame{position:absolute;width:100%;height:100%;z-index:0;filter:blur(calc(var(--image-blur) * 10));background-image:var(--gradient-background-image)}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image{position:absolute !important;width:var(--gradient-width) !important;aspect-ratio:1;animation:rotate var(--gradient-speed) linear infinite;border-radius:var(--gradient-radius) !important;mix-blend-mode:var(--gradient-blend-mode);background-size:cover !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:first-of-type{height:revert;left:unset;background-size:unset;background-position:unset;filter:none;-webkit-mask-image:none;mask-image:none;right:0;top:0;z-index:10}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:last-of-type{display:revert;left:0;bottom:0;animation-direction:reverse}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}:root .main-trackList-active .main-trackList-rowTitle{color:var(--spice-text) !important;text-shadow:0px 0px 6px var(--spice-text);-webkit-text-stroke:thin}:root .main-trackList-trackListHeader._2ajKWDiy6YvJu5wo8I1g{background:var(--spice-main) !important;top:0 !important}:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListRow:hover,:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListHeaderRow:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.05)}:root .main-trackList-trackListRow,:root .main-trackList-trackListHeaderRow{border-radius:var(--border-radius);border:none;transition:200ms background-color}:root .main-trackList-trackListRow.main-trackList-selected,:root .main-trackList-trackListHeaderRow.main-trackList-selected{background-color:rgba(var(--spice-rgb-selected-row), 0.1)}:root .main-trackList-trackListRow.main-trackList-selected:hover,:root .main-trackList-trackListHeaderRow.main-trackList-selected:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.15)}:root .main-trackList-trackListRow .main-type-mesto,:root .main-trackList-trackListRow .main-type-ballad,:root .main-trackList-trackListHeaderRow .main-type-mesto,:root .main-trackList-trackListHeaderRow .main-type-ballad{transition:300ms color}:root .main-trackList-trackListRow .main-trackList-rowImageFallback,:root .main-trackList-trackListHeaderRow .main-trackList-rowImageFallback{border-radius:var(--border-radius) !important}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListHeader .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListHeader .main-trackList-rowSectionIndex{opacity:0}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex{background:rgba(var(--spice-rgb-play-button), 0.5)}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton{opacity:1}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowSectionIndex{color:var(--spice-sidebar);border-radius:var(--border-radius);transition:200ms opacity,200ms background}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow>.main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow>.main-trackList-rowSectionIndex{position:relative;z-index:1000;top:8px;left:56px;width:40px;height:40px;justify-content:center;text-indent:-1000px}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="3"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="4"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="5"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount="6"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important}:root{--border-radius: 8px;--button-radius: 8px;--image-blur: 4px;--gradient-speed: 50s;--gradient-width: 150%;--gradient-blend-mode: luminosity;--gradient-background-image: none;--gradient-radius: 50%;--cover-art-width: 84px;--cover-art-height: 84px;--cover-art-radius: 8px;--cover-art-left: 0px;--cover-art-bottom: 20px;--header-opacity: 0.6;--tracklist-gradient-height: 232px;--tracklist-gradient-opacity: 0.6;--tracklist-gradient-noise: var(--background-noise);--image-url: none}:root button,:root button span,:root input,:root select,:root img,:root .x-entityImage-xsmall,:root div[style*=background-image]:has(img),:root .profile-userEditDetails-image div:nth-child(2),:root [data-encore-id=buttonSecondary]{border-radius:var(--border-radius) !important}:root button:not(.main-editImageButton-overlay):not([style*=background-image]):not(.main-buddyFeed-overlay),:root button span:not(.Lyric.Synced.Line):not([data-encore-id=text]),:root button figure img,:root button:has(span:empty),:root input:not([style*=background-image]),:root select,:root [data-encore-id=buttonSecondary]{border-radius:var(--button-radius) !important}:root .Root__top-container{overflow:hidden}:root:not(:has(.global-nav)) .Root__top-container{padding-top:max(var(--comfy-topbar-height, 40px)/var(--zoom, 1),8px) !important}:root .global-nav .Root__top-container{grid-template-rows:calc(var(--comfy-topbar-height, 64px)/var(--zoom, 1) - 16px) 1fr auto}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav) body::after{height:calc(var(--comfy-topbar-height, 64px)/var(--zoom, 1)) !important}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav-centered) body::after{height:min(32px/var(--zoom, 1),var(--comfy-topbar-height, 64px)/var(--zoom, 1)) !important;top:calc((var(--comfy-topbar-height, 64px)/var(--zoom, 1) - min(32px/var(--zoom, 1),var(--comfy-topbar-height, 64px)))/2)}:root.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav{padding-block:calc(var(--comfy-topbar-height, 64px)/2 - 8px)}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after{content:"";position:absolute;right:0;z-index:999;backdrop-filter:brightness(2.12);width:calc(135px/var(--zoom, 1));height:calc(var(--comfy-topbar-height, 40px)/var(--zoom, 1))}:root .main-trackList-playingIcon,:root .view-homeShortcutsGrid-playingIcon,:root [src*=equaliser]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");background:var(--spice-button-active);content-visibility:hidden;-webkit-mask-repeat:no-repeat;border-radius:0 !important}:root .x-settings-equalizerPanelCanvas{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;border-radius:0 !important}:root .encore-dark-theme,:root .encore-dark-theme .encore-base-set{--background-elevated-base: var(--spice-main-elevated);--background-highlight: var(--spice-highlight)}:root .encore-bright-accent-set{--background-base: var(--spice-play-button);--background-highlight: var(--spice-play-button-active);--background-press: var(--spice-play-button-active)}:root .encore-inverted-light-set{--background-highlight: var(--spice-text);--background-press: var(--spice-subtext)}:root .npv-background-image__overlay{background:linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%),var(--background-noise);background-color:unset}:root .Root__main-view .main-view-container__scroll-node-child{padding-bottom:0}:root aside#Desktop_PanelContainer_Id .os-scrollbar-vertical,:root .os-scrollbar-horizontal{display:none !important}:root .os-scrollbar-track,:root ::-webkit-scrollbar{width:8px}:root .os-scrollbar-handle,:root ::-webkit-scrollbar-thumb{border-radius:1em;--os-handle-perpendicular-size-active: 8px;--os-handle-perpendicular-size-hover: 8px;--os-handle-perpendicular-size: 8px}:root .os-scrollbar{--os-padding-perpendicular: 4px}:root ::-webkit-scrollbar-track{margin-bottom:10px}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,:root .main-addButton-active{color:var(--spice-heart)}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover,:root .main-addButton-active:hover{color:rgba(var(--spice-rgb-heart), 0.7)}:root #_R_G *:not([stroke=none]){stroke:var(--spice-heart)}:root .main-trackList-rowHeartButton *:not([fill=none]),:root .control-button-heart *:not([fill=none]),:root #_R_G *:not([fill=none]){fill:var(--spice-heart) !important}:root #context-menu{overflow:hidden}:root #context-menu .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span+svg)::before{border-bottom:1px solid rgba(var(--spice-rgb-selected-row), 0.1);content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:root #context-menu .main-popper-arrow,:root #context-menu .main-popper-arrow::before{background-color:var(--spice-player) !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]){background-color:var(--spice-player)}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a{border-radius:2px !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button[aria-expanded=true],:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color}:root #bookmark-menu{background-color:var(--spice-player);border-radius:var(--border-radius)}:root #bookmark-menu .bookmark-filter{background-color:var(--spice-player)}:root #bookmark-menu button,:root #bookmark-menu a{border-radius:0}:root #bookmark-menu button::before,:root #bookmark-menu button::after,:root #bookmark-menu a::before,:root #bookmark-menu a::after{content:none}:root #bookmark-menu button:not(.main-contextMenu-disabled):focus,:root #bookmark-menu button:not(.main-contextMenu-disabled):hover,:root #bookmark-menu button[aria-expanded=true],:root #bookmark-menu a:not(.main-contextMenu-disabled):focus,:root #bookmark-menu a:not(.main-contextMenu-disabled):hover,:root #bookmark-menu a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color} From bf531ecf299c6f6b621890b0ff4713732656f932 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:10:37 +0100 Subject: [PATCH 11/19] reformat --- Comfy/app.scss | 2 +- Comfy/assets/_main.scss | 37 ++++++++++-------------- Comfy/assets/_navbar.scss | 8 +++--- Comfy/assets/_now_playing.scss | 9 ++++-- Comfy/assets/_settings.scss | 13 +++++---- Comfy/assets/_snippets.scss | 52 ++++++++++++++-------------------- Comfy/assets/_top_bar.scss | 7 +++-- Comfy/assets/_tracklist.scss | 49 ++++++++++++++++++-------------- 8 files changed, 86 insertions(+), 91 deletions(-) diff --git a/Comfy/app.scss b/Comfy/app.scss index 3e2f7fa..2aef9dc 100644 --- a/Comfy/app.scss +++ b/Comfy/app.scss @@ -244,4 +244,4 @@ } } } -} +} \ No newline at end of file diff --git a/Comfy/assets/_main.scss b/Comfy/assets/_main.scss index e0219b7..5ef2ff3 100644 --- a/Comfy/assets/_main.scss +++ b/Comfy/assets/_main.scss @@ -37,29 +37,21 @@ // gradient noise gets stretched vertically with this approach - but no black lines &.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) { + .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - min-height: calc( - 100vh - - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - - 128px - 12px - ) !important; + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - 128px - 12px) !important; } } .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - background-image: linear-gradient( - rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, - var(--spice-main) var(--tracklist-gradient-height) - ), + background-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, + var(--spice-main) var(--tracklist-gradient-height)), var(--tracklist-gradient-noise) !important; background-color: transparent !important; height: calc(100% - 250px); - min-height: calc( - 100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - - 128px - ); + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - 128px); background-size: auto 100%, 300px var(--tracklist-gradient-height); background-repeat: repeat-x; } @@ -107,6 +99,7 @@ } .main-view-container { + // Main Page Tweaks main:not(:has(.lyrics-lyricsContainer-LyricsContainer)) { position: sticky; @@ -122,7 +115,7 @@ } // Radio Button Coloring - input:checked ~ .x-toggle-indicatorWrapper { + input:checked~.x-toggle-indicatorWrapper { background-color: var(--spice-radio-btn-active); } @@ -162,7 +155,7 @@ // Headers .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc, .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4, - .main-home-filterChipsContainer > div:first-child { + .main-home-filterChipsContainer>div:first-child { &:after { background-color: var(--spice-main); } @@ -176,13 +169,13 @@ padding: 32px; justify-content: center; - & > div:nth-last-of-type(2), - & > div.contentSpacing, + &>div:nth-last-of-type(2), + &>div.contentSpacing, .main-entityHeader-imageContainer { align-self: center; justify-content: center; - & + .main-entityHeader-headerText { + &+.main-entityHeader-headerText { flex: unset; justify-content: center; @@ -199,12 +192,12 @@ .main-actionBar-ActionBarRow { &:first-of-type { - > div:first-child { + >div:first-child { margin-top: -24px; } } - > div:first-child { + >div:first-child { margin-left: calc(var(--content-spacing) + 3px); } @@ -220,7 +213,7 @@ } // Artist Page - .artist-artistOverview-artistOverviewContent .contentSpacing > .main-gridContainer-gridContainer { + .artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer { padding-bottom: var(--grid-gap); } @@ -278,4 +271,4 @@ } } } -} +} \ No newline at end of file diff --git a/Comfy/assets/_navbar.scss b/Comfy/assets/_navbar.scss index 0142a2c..0189dbd 100644 --- a/Comfy/assets/_navbar.scss +++ b/Comfy/assets/_navbar.scss @@ -1,12 +1,12 @@ :root .Root__nav-bar { .main-rootlist-wrapper { div:nth-child(2) { - > li { + >li { .main-yourLibraryX-listRowEntityImage { border-radius: var(--border-radius) !important; } - > div { + >div { &:active::after { background-color: var(--spice-highlight-elevated); top: 0; @@ -18,7 +18,7 @@ } } - [role="presentation"] > li > div > div > div > div > div > .x-entityImage-imageContainer { + [role="presentation"]>li>div>div>div>div>div>.x-entityImage-imageContainer { box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important; } } @@ -32,4 +32,4 @@ .os-scrollbar { display: none; } -} +} \ No newline at end of file diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index c24d517..dd224f4 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -1,4 +1,5 @@ :root .Root__top-container { + // Cover-art .main-nowPlayingWidget-nowPlaying { height: 0; @@ -9,7 +10,7 @@ bottom: var(--cover-art-bottom); border-radius: var(--cover-art-radius); - > div button { + >div button { border-radius: var(--cover-art-radius) !important; background: none; } @@ -58,6 +59,7 @@ // Center .main-nowPlayingBar-center { + // Player Controls .player-controls__buttons--new-icons { margin-bottom: 0px !important; @@ -80,7 +82,7 @@ } // Timers - & > div:not(.playback-progressbar-container) { + &>div:not(.playback-progressbar-container) { text-align: center; &:first-of-type { @@ -124,6 +126,7 @@ // Right .main-nowPlayingBar-right { + // Volume Bar .main-nowPlayingBar-volumeBar .progress-bar { --bg-color: rgba(var(--spice-rgb-progress-bg), 0.5); @@ -147,4 +150,4 @@ } } } -} +} \ No newline at end of file diff --git a/Comfy/assets/_settings.scss b/Comfy/assets/_settings.scss index bafcc59..e4ff8d9 100644 --- a/Comfy/assets/_settings.scss +++ b/Comfy/assets/_settings.scss @@ -8,7 +8,7 @@ } // Comfy settings -#main.Settings-Open ~ generic-modal .GenericModal__overlay { +#main.Settings-Open~generic-modal .GenericModal__overlay { // Failsafe incase spotify's variables are not present --background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07); --background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1); @@ -101,6 +101,7 @@ // Main Section Styling .comfy-settings { + // Carousel Styling .search-searchCategory-SearchCategory { background: var(--spice-player); @@ -150,12 +151,12 @@ outline: none; text-decoration: none; - & > * { + &>* { outline: 5px auto #3673d4; } } - & > * { + &>* { margin-inline-end: 8px; margin-block-end: 0 !important; } @@ -243,11 +244,11 @@ --spice-button-disabled: var(--background-tinted-base); } - input:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { + input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper { background-color: var(--background-tinted-highlight); } - input:checked:hover:not([disabled], :active) ~ .x-toggle-indicatorWrapper { + input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper { background-color: var(--spice-button-active); } } @@ -517,4 +518,4 @@ filter: brightness(0.8); } } -} +} \ No newline at end of file diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss index f33a26b..726db37 100644 --- a/Comfy/assets/_snippets.scss +++ b/Comfy/assets/_snippets.scss @@ -34,6 +34,7 @@ } &:has(#main.Comfy-Dark-Modals-Snippet) { + .ABD0FGjBGqGZG33bP7Lc, .main-duplicateTrackModal-container { background-color: var(--spice-main); @@ -42,6 +43,7 @@ } #main { + &.Comfy-nord-Snippet.Custom-Playbar-Snippet, &.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet { .Root__top-container { @@ -167,13 +169,10 @@ } &.Playbar-Above-Right-Panel-Snippet { + .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - min-height: calc( - 100vh - - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - - 50px - ) !important; + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important; } .Root__top-container { @@ -294,10 +293,12 @@ } &.Smooth-Progress-Bar-Snippet { + .playback-bar, .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea { - > div, - ~ div { + + >div, + ~div { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 1000ms; @@ -323,6 +324,7 @@ } &.Remove-Connect-Bar-Snippet { + .main-connectBar-connectBar, .main-devicePicker-indicator { display: none !important; @@ -350,14 +352,15 @@ } &.Hoverable-Timers-Snippet { + .playback-bar, .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS { - > div { + >div { transition: all 0.3s ease; opacity: 0; } - &:hover > div { + &:hover>div { transition: all 0.3s ease; opacity: 1 !important; } @@ -385,7 +388,7 @@ padding-block: 8px; .main-topBar-topbarContentWrapper { - > *:not(.main-topBar-searchBar):not(:has(ul)) { + >*:not(.main-topBar-searchBar):not(:has(ul)) { justify-content: center; display: flex; } @@ -461,10 +464,7 @@ &.Header-Background { .main-entityHeader-imageContainerNew { align-self: center; - left: calc( - clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 24px + - var(--content-spacing) - ); + left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 24px + var(--content-spacing)); position: relative; z-index: 1; } @@ -476,36 +476,28 @@ min-width: fit-content; box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1); justify-content: space-evenly !important; - height: calc( - clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 48px - ); + height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 48px); } - .main-entityHeader-imageContainerNew + .main-entityHeader-headerText { - padding-left: calc( - clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + - var(--content-spacing) - ); - margin-right: calc( - clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + - var(--content-spacing) - ); + .main-entityHeader-imageContainerNew+.main-entityHeader-headerText { + padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing)); + margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing)); } - &:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn > * { + &:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>* { opacity: var(--top-bar-opacity) !important; } } &.AM-Gradient-Include-Existing-Snippet.Banner-Enabled, &.Replace-Existing-Banners.Banner-Enabled { - .under-main-view > div:not(.comfy-banner-frame) { + .under-main-view>div:not(.comfy-banner-frame) { display: none !important; } } &.Lyrics { - main > div > div:empty { + main>div>div:empty { --lyrics-color-background: transparent !important; } } @@ -561,4 +553,4 @@ } } } -} +} \ No newline at end of file diff --git a/Comfy/assets/_top_bar.scss b/Comfy/assets/_top_bar.scss index ee5cc5c..365faa0 100644 --- a/Comfy/assets/_top_bar.scss +++ b/Comfy/assets/_top_bar.scss @@ -1,4 +1,5 @@ :root .main-topBar-container { + .main-topBar-topbarContent *, .main-topBar-topbarContentWrapper * { justify-content: center; @@ -6,7 +7,7 @@ } .main-topBar-searchBar { - > form input { + >form input { height: 32px; background-color: rgba(var(--spice-rgb-shadow), 0.7); @@ -22,7 +23,7 @@ transform: scale(1.1); } - .main-topBar-topbarContent > div:has([data-encore-id="buttonPrimary"]):first-child { + .main-topBar-topbarContent>div:has([data-encore-id="buttonPrimary"]):first-child { display: none !important; } @@ -43,4 +44,4 @@ box-sizing: content-box; width: 12px; } -} +} \ No newline at end of file diff --git a/Comfy/assets/_tracklist.scss b/Comfy/assets/_tracklist.scss index a3302f4..7210f7c 100644 --- a/Comfy/assets/_tracklist.scss +++ b/Comfy/assets/_tracklist.scss @@ -1,4 +1,5 @@ :root { + // Tracklist .main-trackList-active .main-trackList-rowTitle { color: var(--spice-text) !important; @@ -13,6 +14,7 @@ } &:not(._2ajKWDiy6YvJu5wo8I1g) { + .main-trackList-trackListRow, .main-trackList-trackListHeaderRow { &:hover { @@ -47,6 +49,7 @@ } #main.Remove-Tracklist-Index { + // Image Tracklist .main-trackList-trackList:has(.main-trackList-rowSectionStart img), .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) { @@ -57,9 +60,11 @@ } .main-trackList-trackListRow { + &:hover, &:focus-within, &.main-trackList-active { + .main-trackList-rowImagePlayPauseButton, .main-trackList-rowSectionIndex { background: rgba(var(--spice-rgb-play-button), 0.5); @@ -79,7 +84,7 @@ transition: 200ms opacity, 200ms background; } - > .main-trackList-rowSectionIndex { + >.main-trackList-rowSectionIndex { position: relative; z-index: 1000; top: 8px; @@ -100,29 +105,29 @@ @if $i ==3 { grid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important; - } @else if $i ==4 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax( - 120px, - var(--col3, 1fr) - ) !important; - } @else if $i ==5 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( - 120px, - var(--col3, 3fr) - ) [last] minmax(120px, var(--col4, 1fr)) !important; - } @else if $i ==6 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( - 120px, - var(--col3, 3fr) - ) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; - } @else if $i ==7 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax( - 120px, - var(--col3, 3fr) - ) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; + } + + @else if $i ==4 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, + var(--col3, 1fr)) !important; + } + + @else if $i ==5 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, + var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; + } + + @else if $i ==6 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, + var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; + } + + @else if $i ==7 { + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, + var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; } } } } } -} +} \ No newline at end of file From f15ee37ff25a47bfeaa1009ee3cce0907a47683f Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:18:56 +0100 Subject: [PATCH 12/19] Refactor now playing bar width calculation --- Comfy/assets/_now_playing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index dd224f4..49594b1 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -32,7 +32,7 @@ .main-nowPlayingBar-container { .main-connectBar-connectBar { margin-left: auto; - width: 92vw; + width: calc(100vw - var(--cover-art-width) - 32px); } } } From a69399ef6d87391ac09c0eaa65f7cbdf8805dffa Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:19:23 +0100 Subject: [PATCH 13/19] Remove unused connect bar description --- Comfy/theme.script.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 10fb419..7d923a5 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -1359,7 +1359,6 @@ todo: type: Toggle, name: "Compact-Connect-Bar-Snippet", title: "Compact Connect Bar", - desc: "Makes the connect bar compact.", defaultVal: false }, { From 8110b3fb83be1fffc692f69eb41a01da94ea3cac Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:26:11 +0100 Subject: [PATCH 14/19] fix width issue on 47 --- Comfy/assets/_snippets.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss index 726db37..f76056b 100644 --- a/Comfy/assets/_snippets.scss +++ b/Comfy/assets/_snippets.scss @@ -338,9 +338,9 @@ position: absolute; margin-left: auto; padding: 0.75rem 1rem; - top: -45%; - // bottom: calc(100% + 0.75rem); // can use this too + top: -40%; right: 0; + width: auto; } } } From c53dc9a2d1980885a77f9302ffb3199eeb409ee9 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:32:18 +0100 Subject: [PATCH 15/19] remove unneeded changes --- Comfy/assets/_snippets.scss | 1 - Comfy/assets/_top_bar.scss | 6 ++---- Comfy/assets/_tracklist.scss | 13 +++++-------- Comfy/package.json | 9 +++------ 4 files changed, 10 insertions(+), 19 deletions(-) diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss index f76056b..2e6f8a1 100644 --- a/Comfy/assets/_snippets.scss +++ b/Comfy/assets/_snippets.scss @@ -331,7 +331,6 @@ } } - // Connect bar &.Compact-Connect-Bar-Snippet { .main-nowPlayingBar-container { .main-connectBar-connectBar { diff --git a/Comfy/assets/_top_bar.scss b/Comfy/assets/_top_bar.scss index 365faa0..cf32bcf 100644 --- a/Comfy/assets/_top_bar.scss +++ b/Comfy/assets/_top_bar.scss @@ -11,10 +11,8 @@ height: 32px; background-color: rgba(var(--spice-rgb-shadow), 0.7); - & { - ::placeholder { - color: rgba(var(--spice-rgb-selected-row), 0.7); - } + &::placeholder { + color: rgba(var(--spice-rgb-selected-row), 0.7); } } } diff --git a/Comfy/assets/_tracklist.scss b/Comfy/assets/_tracklist.scss index 7210f7c..81f1ca3 100644 --- a/Comfy/assets/_tracklist.scss +++ b/Comfy/assets/_tracklist.scss @@ -22,6 +22,7 @@ } } } + } .main-trackList-trackListRow, @@ -108,23 +109,19 @@ } @else if $i ==4 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, - var(--col3, 1fr)) !important; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important; } @else if $i ==5 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, - var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important; } @else if $i ==6 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, - var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important; } @else if $i ==7 { - grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, - var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; + grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important; } } } diff --git a/Comfy/package.json b/Comfy/package.json index 05d2b27..6f436b4 100644 --- a/Comfy/package.json +++ b/Comfy/package.json @@ -11,10 +11,7 @@ "type": "git", "url": "git+https://github.com/Comfy-Themes/Spicetify.git" }, - "keywords": [ - "comfy", - "spicetify" - ], + "keywords": ["comfy", "spicetify"], "author": "Comfy-Themes", "license": "WTFPL", "bugs": { @@ -22,6 +19,6 @@ }, "homepage": "https://github.com/Comfy-Themes/Spicetify#readme", "dependencies": { - "sass": "^1.78.0" + "node-sass": "^7.0.3" } -} +} \ No newline at end of file From b4630fcda973865b982aa009945b96d3eafc0528 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:44:12 +0100 Subject: [PATCH 16/19] Update package.json and user.css --- Comfy/package.json | 2 +- Comfy/theme.script.js | 40 ++++++++-------------------------------- Comfy/user.css | 2 +- 3 files changed, 10 insertions(+), 34 deletions(-) diff --git a/Comfy/package.json b/Comfy/package.json index 6f436b4..58f63b0 100644 --- a/Comfy/package.json +++ b/Comfy/package.json @@ -21,4 +21,4 @@ "dependencies": { "node-sass": "^7.0.3" } -} \ No newline at end of file +} diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 7d923a5..0d6201e 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -128,41 +128,17 @@ todo: // Banner Image(s) const channels = { Lyrics: { regex: /^\/lyrics$/, enabled: getConfig("Lyrics") ?? false }, - Playlist: { - regex: /^\/playlist\//, - enabled: getConfig("Playlist") ?? true - }, - Station: { - regex: /^\/station\/playlist\//, - enabled: getConfig("Station") ?? true - }, - Artist: { - regex: /^\/artist\/(?!artists\b)\w+$/, - enabled: getConfig("Artist") ?? true - }, + Playlist: { regex: /^\/playlist\//, enabled: getConfig("Playlist") ?? true }, + Station: { regex: /^\/station\/playlist\//, enabled: getConfig("Station") ?? true }, + Artist: { regex: /^\/artist\/(?!artists\b)\w+$/, enabled: getConfig("Artist") ?? true }, Album: { regex: /^\/album\//, enabled: getConfig("Album") ?? true }, - Collection: { - regex: /^\/collection\/tracks$/, - enabled: getConfig("Collection") ?? true - }, - "Your-Episodes": { - regex: /^\/collection\/your-episodes$/, - enabled: getConfig("Your-Episodes") ?? true - }, - "Local-Files": { - regex: /^\/collection\/local-files$/, - enabled: getConfig("Local-Files") ?? true - }, + Collection: { regex: /^\/collection\/tracks$/, enabled: getConfig("Collection") ?? true }, + "Your-Episodes": { regex: /^\/collection\/your-episodes$/, enabled: getConfig("Your-Episodes") ?? true }, + "Local-Files": { regex: /^\/collection\/local-files$/, enabled: getConfig("Local-Files") ?? true }, Show: { regex: /^\/show\//, enabled: getConfig("Show") ?? true }, Episode: { regex: /^\/episode\//, enabled: getConfig("Episode") ?? true }, - "Lyrics-Plus": { - regex: /^\/lyrics-plus$/, - enabled: getConfig("Lyrics-Plus") ?? true - }, - User: { - regex: /^\/user\/(?!users\b)\w+$/, - enabled: getConfig("User") ?? true - }, + "Lyrics-Plus": { regex: /^\/lyrics-plus$/, enabled: getConfig("Lyrics-Plus") ?? true }, + User: { regex: /^\/user\/(?!users\b)\w+$/, enabled: getConfig("User") ?? true }, Genre: { regex: /^\/genre\//, enabled: getConfig("Genre") ?? true } }; diff --git a/Comfy/user.css b/Comfy/user.css index f31eade..b1f5982 100644 --- a/Comfy/user.css +++ b/Comfy/user.css @@ -1 +1 @@ -@import url("https://comfy-themes.github.io/Spicetify/Comfy/app.css"); \ No newline at end of file +@import url("https://comfy-themes.github.io/Spicetify/Comfy/app.css"); From fa797974d03e027f6c5a3d000703bcaecc1a4287 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Wed, 25 Sep 2024 23:59:26 +0530 Subject: [PATCH 17/19] Chore: remove unused template literals --- Comfy/theme.script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index eb90d47..1fb9d2e 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -805,7 +805,7 @@ todo: Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft`, + className: "search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft", tabIndex: -1, onClick: () => handleButtonClick("LEFT"), inert: true @@ -821,7 +821,7 @@ todo: Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonRight`, + className: "search-searchCategory-carouselButton search-searchCategory-carouselButtonRight", tabIndex: -1, onClick: () => handleButtonClick("RIGHT"), inert: true From 807f16106362d01d9237295bd6ce5cb69acd9a86 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Thu, 26 Sep 2024 00:05:12 +0530 Subject: [PATCH 18/19] fix: broken color scheme --- Comfy/theme.script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 1fb9d2e..55ef376 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -2039,13 +2039,13 @@ todo: for (const line of lines) { if (regex.comment.test(line)) { - return; + continue; } if (regex.param.test(line)) { if (line.includes("xrdb")) { delete value[section || ""]; section = null; - return; + continue; } const match = line.match(regex.param); From 62d0ae9d73bb15755243ace21f667606062266e6 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Thu, 26 Sep 2024 00:55:40 +0530 Subject: [PATCH 19/19] fix: getting panel width from local storage --- Comfy/theme.script.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 55ef376..76f122a 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -1295,7 +1295,11 @@ todo: if (entry.target === rightbar) { let newWidth = entry.contentRect.width; if (newWidth === 0) { - const localStorageWidth = localStorage.getItem("223ni6f2epqcidhx5etjafeai:panel-width-saved"); + const localStorageWidth = + Spicetify.Platform?.LocalStorageAPI?.getItem("panel-width") || + localStorage.getItem( + `${Spicetify.Platform?.LocalStorageAPI?.namespace || Spicetify.Platform?.username || ""}:panel-width-saved` + ); if (localStorageWidth) { newWidth = localStorageWidth; } else {