diff --git a/README.md b/README.md
index 6023831..5b233cb 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ Right click at folder and choose images for your playlist folder. Every image fo
### Left/Right expanded cover
In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
-## Install
+## Install / Update
Make sure you are using spicetify >= v2.6.0 and Spotify >= v1.1.67.
Run these commands:
diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index 4c5713c..17fad56 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -1,4 +1,4 @@
-let current = '2.3'
+let current = '2.4.3'
/* css is injected so this works with untouched user.css from Dribbblish */
/* dark theme */
@@ -71,6 +71,25 @@ document.styleSheets[0].insertRule(`
color: var(--spice-sidebar-text) !important;
}`)
+/* Config settings */
+
+DribbblishShared.config.register({
+ type: "slider",
+ data: {
+ "min": 0,
+ "max": 10,
+ "step": 0.1,
+ "suffix": "s"
+ },
+ key: "fadeDuration",
+ name: "Color Fade Duration",
+ description: "Select the duration of the color fading transition",
+ defaultValue: 0.5,
+ onChange: (val) => {
+ document.documentElement.style.setProperty("--song-transition-speed", val+"s");
+ }
+});
+
/* js */
function getAlbumInfo(uri) {
return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`)
@@ -170,7 +189,7 @@ function toggleDark(setDark) {
setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
- updateColors(textColor, sidebarColor)
+ updateColors(textColor, sidebarColor, false)
}
/* Init with current system light/dark mode */
@@ -178,7 +197,7 @@ let systemDark = parseInt(getComputedStyle(document.documentElement).getProperty
DribbblishShared.config.register({
type: "select",
- options: ["System", "Dark", "Light"],
+ data: ["System", "Dark", "Light"],
key: "theme",
name: "Theme",
description: "Select Dark / Bright mode",
@@ -198,20 +217,69 @@ DribbblishShared.config.register({
}
});
-function updateColors(textColHex, sideColHex) {
- let isLightBg = isLight(textColorBg)
- if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
+var currentColor;
+var currentSideColor;
+var colorFadeInterval = false;
- let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
- let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
- let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
- setRootColor('text', textColHex)
- setRootColor('button', darkerColHex)
- setRootColor('button-active', darkColHex)
- setRootColor('selected-row', darkerColHex)
- setRootColor('tab-active', buttonBgColHex)
- setRootColor('button-disabled', buttonBgColHex)
- setRootColor('sidebar', sideColHex)
+function updateColors(textColHex, sideColHex, animate=false) {
+ let update = (textColHex, sideColHex) => {
+ currentColor = textColHex;
+ currentSideColor = sideColHex;
+
+ let isLightBg = isLight(textColorBg)
+ if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
+
+ let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
+ let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
+ let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
+ setRootColor('text', textColHex)
+ setRootColor('button', darkerColHex)
+ setRootColor('button-active', darkColHex)
+ setRootColor('selected-row', darkerColHex)
+ setRootColor('tab-active', buttonBgColHex)
+ setRootColor('button-disabled', buttonBgColHex)
+ setRootColor('sidebar', sideColHex)
+ };
+
+ clearInterval(colorFadeInterval); // clear any interval that might be running
+
+ if(!animate) {
+ update(textColHex, sideColHex);
+ return;
+ }
+
+ let clamp = (num,min,max) => Math.min(Math.max(num, min), max);
+ let lerp = (a,b,u) => (1-u) * a + u * b;
+ let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1);
+
+ let interval = 10; // 10 ms between each call
+ var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed"));
+ if(duration < 1) duration = 1;
+ let startC1 = hexToRgb(currentColor);
+ let startC2 = hexToRgb(currentSideColor);
+
+ let endC1 = hexToRgb(textColHex);
+ let endC2 = hexToRgb(sideColHex);
+
+ var start;
+
+ colorFadeInterval = setInterval(function(){
+ if(!start) { start = performance.now() }
+ let elapsed = performance.now()-start;
+ let ratio = clamp(elapsed/duration, 0, 1)
+
+ let currentC1 = [];
+ let currentC2 = [];
+ for(var i = 0; i < 3; i++){
+ currentC1[i] = lerp(startC1[i], endC1[i], ratio);
+ currentC2[i] = lerp(startC2[i], endC2[i], ratio);
+ }
+
+ update(rgbToHex(currentC1), rgbToHex(currentC2));
+
+ if (elapsed>duration){ clearInterval(colorFadeInterval) }
+
+ }, interval);
}
let nearArtistSpanText = ""
@@ -244,7 +312,7 @@ async function songchange() {
recent_date.setMonth(recent_date.getMonth() - 6)
album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' })
album_link = ""+Spicetify.Player.data.track.metadata.album_title+""
-
+
nearArtistSpanText = album_link + " • " + album_date
} else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) {
// podcast
@@ -294,7 +362,7 @@ function pickCoverColor(img) {
sidebarColor = swatches[lightCols[col]].getHex()
break
}
- updateColors(textColor, sidebarColor)
+ updateColors(textColor, sidebarColor, true)
}
function hookCoverChange(pick) {
@@ -325,19 +393,13 @@ hookCoverChange(false);
}).then(data => {
if (data.tag_name > current) {
upd = document.createElement("div")
+ upd.innerText = `Theme UPD v${data.tag_name} avail.`
upd.classList.add("ellipsis-one-line", "main-type-finale")
- document.querySelector(".main-userWidget-box").append(upd)
- upd.append(`Theme UPD v${data.tag_name} avail.`)
upd.setAttribute("title", `Changes: ${data.name}`)
- DribbblishShared.config.register({
- insertOnTop: true,
- type: "button",
- name: "Update",
- description: "Open the GitHub Page with Installation instructions / Commands.",
- onChange: () => {
- window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme#install", "_blank");
- }
- });
+ upd.style.setProperty("color", "var(--spice-button-active)");
+ document.querySelector(".main-userWidget-box").append(upd)
+ document.querySelector(".main-userWidget-box").classList.add("update-avail")
+ new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
}
}).catch(err => {
// Do something for an error here
@@ -346,23 +408,26 @@ hookCoverChange(false);
})()
/* translucid background cover */
-document.styleSheets[0].addRule('.Root__top-container::before',
-` content: '';
- background-image: var(--image_url);
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
- position: fixed;
- display: block;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- filter: blur(15px);
- pointer-events: none;
- backface-visibility: hidden;
- will-change: transform;
- opacity: calc(0.07 + 0.03 * var(--is_light, 0));
- z-index: +3;`)
+document.styleSheets[0].insertRule(`
+ .Root__top-container::before {
+ content: '';
+ background-image: var(--image_url);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ position: fixed;
+ display: block;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ filter: blur(15px);
+ pointer-events: none;
+ backface-visibility: hidden;
+ will-change: transform;
+ opacity: calc(0.07 + 0.03 * var(--is_light, 0));
+ z-index: +3;
+ transition: background-image var(--song-transition-speed) linear;
+ }`)
document.documentElement.style.setProperty('--warning_message', ' ');
diff --git a/dribbblish.js b/dribbblish.js
index 9c57af4..631d465 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -1,6 +1,20 @@
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
class ConfigMenu {
+ /**
+ * @typedef {Object} DribbblishConfigOptions
+ * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text"} type
+ * @property {String?} area
+ * @property {any?} data
+ * @property {String?} key
+ * @property {String?} name
+ * @property {String?} description
+ * @property {any?} defaultValue
+ * @property {Boolean?} insertOnTop
+ * @property {Function?} onAppended
+ * @property {Function?} onChange
+ */
+
constructor() {
this.config = {};
this.configButton = new Spicetify.Menu.Item("Dribbblish config", false, () => DribbblishShared.config.open());
@@ -14,6 +28,7 @@ class ConfigMenu {
Dribbblish Settings
+
`;
@@ -31,79 +46,164 @@ class ConfigMenu {
document.getElementById("dribbblish-config").removeAttribute("active");
}
- /** @private */
- addInputHTML({ type, key, name, description, input, insertOnTop }) {
+ /**
+ * @private
+ * @param {DribbblishConfigOptions} options
+ */
+ addInputHTML(options) {
+ let parent;
+ if (options.area != null) {
+ if (!document.querySelector(`.dribbblish-config-area[name="${options.area}"]`)) {
+ const areaElem = document.createElement("div");
+ areaElem.classList.add("dribbblish-config-area");
+ areaElem.setAttribute("name", options.area);
+ areaElem.innerHTML = `${options.area}
`;
+ document.querySelector(".dribbblish-config-items").appendChild(areaElem);
+ }
+ parent = document.querySelector(`.dribbblish-config-area[name="${options.area}"]`);
+ } else {
+ parent = document.querySelector(".dribbblish-config-items");
+ }
+
const elem = document.createElement("div");
elem.classList.add("dribbblish-config-item");
- elem.setAttribute("key", `dribbblish:config:${key}`);
- elem.setAttribute("type", type);
+ elem.setAttribute("key", `dribbblish:config:${options.key}`);
+ elem.setAttribute("type", options.type);
elem.innerHTML = /* html */ `
- ${name}
-
+ ${options.name}
+
`;
- if (insertOnTop && document.querySelector(".dribbblish-config-item")) {
- console.log("before");
- document.querySelector(".dribbblish-config-container").insertBefore(elem, document.querySelector(".dribbblish-config-item:first-of-type"));
+
+ if (options.insertOnTop && parent.children.length > 0) {
+ parent.insertBefore(elem, parent.children[0]);
} else {
- document.querySelector(".dribbblish-config-container").appendChild(elem);
+ parent.appendChild(elem);
}
}
- register({ type, options, key, name, description, defaultValue, insertOnTop, onChange }) {
- if (!key) key = cyrb53Hash(name);
+ /**
+ * @param {DribbblishConfigOptions} options
+ */
+ register(options) {
+ options = {
+ ...{
+ area: "Main Settings",
+ data: {},
+ key: cyrb53Hash(options.name ?? ""),
+ name: "",
+ description: "",
+ insertOnTop: false,
+ onAppended: () => {},
+ onChange: () => {}
+ },
+ ...options
+ };
var fireChange = true;
- if (type == "checkbox") {
+ if (options.type == "checkbox") {
const input = /* html */ `
-
+
`;
- this.addInputHTML({ type, key, name, description, input, insertOnTop });
+ this.addInputHTML({ ...options, input });
- document.getElementById(`dribbblish-config-input-${key}`).addEventListener("change", (e) => {
- this.set(key, e.target.checked);
- onChange(this.get(key));
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => {
+ this.set(options.key, e.target.checked);
+ options.onChange(this.get(options.key));
});
- } else if (type == "select") {
+ } else if (options.type == "select") {
const input = /* html */ `
-
-
-
+
`;
- this.addInputHTML({ type, key, name, description, input, insertOnTop });
+ this.addInputHTML({ ...options, input });
- document.getElementById(`dribbblish-config-input-${key}`).addEventListener("change", (e) => {
- this.set(key, e.target.value);
- onChange(this.get(key));
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("change", (e) => {
+ this.set(options.key, e.target.value);
+ options.onChange(this.get(options.key));
});
- } else if (type == "button") {
+ } else if (options.type == "button") {
const input = /* html */ `
-
-
-
+
`;
- this.addInputHTML({ type, key, name, description, input, insertOnTop });
+ this.addInputHTML({ ...options, input });
- document.getElementById(`dribbblish-config-input-${key}`).addEventListener("click", (e) => {
- onChange(true);
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("click", (e) => {
+ options.onChange(true);
});
fireChange = false;
+ } else if (options.type == "number") {
+ if (options.defaultValue == null) options.defaultValue = 0;
+
+ const input = /* html */ `
+
+ `;
+ this.addInputHTML({ ...options, input });
+
+ // Prevent inputting +, - and e. Why is it even possible in the first place?
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("keypress", (e) => {
+ if (["+", "-", "e"].includes(e.key)) e.preventDefault();
+ });
+
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
+ if (options.data.min != null && e.target.value < options.data.min) e.target.value = options.data.min;
+ if (options.data.max != null && e.target.value > options.data.max) e.target.value = options.data.max;
+
+ this.set(options.key, e.target.value);
+ options.onChange(this.get(options.key));
+ });
+ } else if (options.type == "text") {
+ if (options.defaultValue == null) options.defaultValue = "";
+
+ const input = /* html */ `
+
+ `;
+ this.addInputHTML({ ...options, input });
+
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
+ // TODO: maybe add an validation function via `data.validate`
+ this.set(options.key, e.target.value);
+ options.onChange(this.get(options.key));
+ });
+ } else if (options.type == "slider") {
+ if (options.defaultValue == null) options.defaultValue = 0;
+
+ const input = /* html */ `
+
+ `;
+ this.addInputHTML({ ...options, input });
+
+ document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
+ document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
+ document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("value", e.target.value);
+ this.set(options.key, e.target.value);
+ options.onChange(e.target.value);
+ });
} else {
- throw new Error(`Config Type "${type}" invalid`);
+ throw new Error(`Config Type "${options.type}" invalid`);
}
- if (fireChange) onChange(this.get(key, defaultValue));
+ options.onAppended();
+ if (fireChange) options.onChange(this.get(options.key, options.defaultValue));
}
get(key, defaultValue) {
@@ -111,7 +211,8 @@ class ConfigMenu {
if (val == null) return defaultValue;
if (val == "true" || val == "false") return val == "true"; // Boolean
- if (!isNaN(val) && !isNaN(parseInt(val))) return parseInt(val); // Number
+ if (!isNaN(val) && /\d+\.\d+/.test(val) && !isNaN(parseFloat(val))) return parseFloat(val); // Float
+ if (!isNaN(val) && /\d+/.test(val) && !isNaN(parseInt(val))) return parseInt(val); // Int
return val; // String
}
@@ -131,7 +232,7 @@ DribbblishShared.config.register({
type: "checkbox",
key: "rightBigCover",
name: "Right expanded cover",
- description: "Have the expanded cover Image on the right instead of onn the left.",
+ description: "Have the expanded cover Image on the right instead of on the left",
defaultValue: true,
onChange: (val) => {
if (val) {
@@ -146,7 +247,7 @@ DribbblishShared.config.register({
type: "checkbox",
key: "roundSidebarIcons",
name: "Round Sidebar Icons",
- description: "If the Sidebar Iconns should be round instead of square",
+ description: "If the Sidebar Icons should be round instead of square",
defaultValue: false,
onChange: (val) => {
if (val) {
@@ -160,10 +261,10 @@ DribbblishShared.config.register({
waitForElement(["#main"], () => {
DribbblishShared.config.register({
type: "select",
- options: ["None", "None (With Top Padding)", "Solid", "Transparent"],
+ data: ["None", "None (With Top Padding)", "Solid", "Transparent"],
key: "winTopBar",
name: "Windows Top Bar",
- description: "Have differennt top Bars (Ore none at all)",
+ description: "Have different top Bars (or none at all)",
defaultValue: 0,
onChange: (val) => {
switch (val) {
@@ -206,10 +307,7 @@ function cyrb53Hash(str, seed = 0) {
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
}
-waitForElement([
- `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`,
- `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"] li`
-], ([root, firstItem]) => {
+waitForElement([`.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"]`, `.main-rootlist-rootlistPlaylistsScrollNode ul[tabindex="0"] li`], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
@@ -219,7 +317,7 @@ waitForElement([
let link = item.querySelector("a");
if (!link) continue;
- let [_, app, uid ] = link.pathname.split("/");
+ let [_, app, uid] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = Spicetify.URI.playlistV2URI(uid);
@@ -231,14 +329,11 @@ waitForElement([
img.classList.add("playlist-picture");
link.prepend(img);
}
- img.src = base64 || "/images/tracklist-row-song-fallback.svg";
+ img.src = base64 || "/images/tracklist-row-song-fallback.svg";
continue;
}
- Spicetify.CosmosAsync.get(
- `sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
- { policy: { picture: true } }
- ).then(res => {
+ Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`, { policy: { picture: true } }).then((res) => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
@@ -254,13 +349,12 @@ waitForElement([
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
- new MutationObserver(loadPlaylistImage)
- .observe(listElem, {childList: true});
+ new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
});
-waitForElement([".main-rootlist-rootlist", ".main-rootlist-wrapper > :nth-child(2) > :first-child"], ([rootlist]) => {
+waitForElement([".main-rootlist-rootlist", ".main-rootlist-wrapper > :nth-child(2) > :first-child", "#spicetify-show-list"], ([rootlist]) => {
function checkSidebarPlaylistScroll() {
- const topDist = rootlist.getBoundingClientRect().top - document.querySelector(".main-rootlist-wrapper > :nth-child(2) > :first-child").getBoundingClientRect().top;
+ const topDist = rootlist.getBoundingClientRect().top - document.querySelector("#spicetify-show-list:not(:empty), .main-rootlist-wrapper > :nth-child(2) > :first-child").getBoundingClientRect().top;
const bottomDist = document.querySelector(".main-rootlist-wrapper > :nth-child(2) > :last-child").getBoundingClientRect().bottom - rootlist.getBoundingClientRect().bottom;
rootlist.classList.remove("no-top-shadow", "no-bottom-shadow");
diff --git a/user.css b/user.css
index cef55aa..d166bb6 100644
--- a/user.css
+++ b/user.css
@@ -1,1083 +1,1239 @@
-:root {
- --bar-height: 70px;
- --bar-cover-art-size: 40px;
- --main-gap: 10px;
- --main-corner-radius: 10px;
- --scrollbar-vertical-size: 8px;
- --cover-border-radius: 8px;
- --playbar-movement-anim-speed: 0.5s;
- --image-radius: 10px;
- --sidebar-icons-border-radius: 50%;
-}
-
-@font-face {
- font-family: "Google Sans Display";
- src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
- font-style: normal;
- font-weight: 400;
-}
-
-@font-face {
- font-family: "Google Sans Display";
- src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
- font-style: normal;
- font-weight: 500;
-}
-
-@font-face {
- font-family: "Roboto";
- src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
- font-style: normal;
- font-weight: 400;
-}
-
-@font-face {
- font-family: "Roboto";
- src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
- font-style: normal;
- font-weight: 500;
-}
-
-body {
- --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
- --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
- font-family: var(--glue-font-family);
- letter-spacing: normal;
-}
-
-.os-scrollbar-handle {
- background-color: var(--spice-text) !important;
- border-radius: calc(var(--scrollbar-vertical-size) / 2);
-}
-
-.os-scrollbar-handle:hover {
- filter: brightness(80%);
-}
-
-::-webkit-scrollbar {
- width: var(--scrollbar-vertical-size);
-}
-
-::-webkit-scrollbar-thumb {
- background-color: var(--spice-text) !important;
- border-radius: calc(var(--scrollbar-vertical-size) / 2);
-}
-
-::-webkit-scrollbar-thumb:hover {
- filter: brightness(80%);
-}
-
-.main-type-mesto,
-.main-type-mestoBold,
-.main-type-ballad,
-.main-type-balladBold,
-.main-type-canon {
- font-family: var(--info-font-family);
- letter-spacing: normal;
-}
-
-.main-type-ballad {
- font-weight: 500;
-}
-
-.lyrics-lyricsContainer-LyricsLine {
- font-family: var(--glue-font-family);
- letter-spacing: -.03em !important;
-}
-
-.main-rootlist-rootlistDivider {
- display: none;
-}
-
-input {
- background-color: unset !important;
- border-bottom: solid 1px var(--spice-text) !important;
- border-radius: 0 !important;
- padding: 6px 10px 6px 48px;
- color: var(--spice-text) !important;
-}
-
-.x-searchInput-searchInputSearchIcon,
-.x-searchInput-searchInputClearButton {
- color: var(--spice-text) !important;
-}
-
-.main-home-homeHeader,
-.x-entityHeader-overlay,
-.x-actionBarBackground-background,
-.main-actionBarBackground-background,
-.main-entityHeader-overlay,
-.main-entityHeader-backgroundColor
-{
- background-color: unset !important;
- background-image: unset !important;
-}
-
-.main-playButton-PlayButton.main-playButton-primary {
- color: white;
-}
-
-.connect-title, .connect-header {
- display: none;
-}
-
-.connect-device-list {
- margin: 0px -5px;
-}
-
-/* Remove Topbar background colour */
-.main-topBar-background {
- background-color: unset !important;
-}
-.main-topBar-overlay {
- background-color: var(--spice-main);
-}
-
-.main-entityHeader-shadow,
-.main-contextMenu-menu,
-.connect-device-list-container {
- box-shadow: 0 4px 20px #21212130;
-}
-
-.main-trackList-playingIcon {
- filter: grayscale(1);
-}
-
-span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
- fill: var(--spice-button);
-}
-span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
- fill: var(--spice-text);
-}
-
-/* Full window artist background */
-.main-entityHeader-background.main-entityHeader-gradient {
- opacity: 0.3;
-}
-
-.main-entityHeader-container.main-entityHeader-withBackgroundImage,
-.main-entityHeader-background,
-.main-entityHeader-background.main-entityHeader-overlay:after {
- height: 100vh;
-}
-
-.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
- justify-content: center;
-}
-
-.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
- padding-left: 9%;
-}
-
-.main-entityHeader-background.main-entityHeader-overlay:after {
- background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
-}
-
-.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
- font-size: 120px !important;
- line-height: 120px !important;
-}
-
-.main-contextMenu-menu {
- background-color: var(--spice-button);
-}
-
-.main-contextMenu-menuHeading,
-.main-contextMenu-menuItemButton,
-.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
-.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
- color: var(--spice-main);
-}
-
-.main-playPauseButton-button {
- background-color: var(--spice-button);
- color: white;
-}
-
-/** Queue page header */
-.queue-queue-title,
-.queue-playHistory-title {
- color: var(--spice-text) !important;
-}
-
-/** Artist page */
-.artist-artistOverview-heading {
- color: var(--spice-text) !important;
-}
-.artist-artistAbout-content .artist-artistAbout-cityBlock div,
-.artist-artistAbout-content .artist-artistAbout-stats div {
- color: var(--spice-text) !important;
-}
-.artist-artistAbout-content div {
- color: var(--spice-text) !important;
-}
-
-/** Cards */
-.main-cardImage-imageWrapper {
- background-color: transparent;
- box-shadow: unset;
- -webkit-box-shadow: unset;
-}
-
-.main-cardImage-imagePlaceholder, .main-cardImage-image {
- border-radius: var(--cover-border-radius);
-}
-
-.main-rootlist-rootlistDivider {
- background-color: unset;
-}
-
-.main-nowPlayingBar-nowPlayingBar {
- height: var(--bar-height);
-}
-
-.Root__top-bar {
- border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
-}
-
-.main-topBar-background {
- border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
-}
-
-.Root__main-view {
- background-color: var(--spice-main);
- border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
- overflow: hidden;
-}
-
-.main-buddyFeed-buddyFeed {
- box-shadow: unset;
- -webkit-box-shadow: unset;
- z-index: 0;
-}
-
-.main-buddyFeed-headerTitle,
-.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
- color: var(--spice-sidebar-text);
-}
-
-.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
-.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
-.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
-.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
- color: rgba(var(--spice-rgb-sidebar-text), 0.8);
-}
-
-.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
-.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
- width: 32px !important;
- height: 32px !important;
-}
-
-.view-homeShortcutsGrid-shortcut {
- overflow: hidden;
-}
-
-.cover-art,
-.main-userWidget-box,
-.view-homeShortcutsGrid-shortcut,
-:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
- border-radius: var(--image-radius) !important;
-}
-
-.main-avatar-image,
-.main-avatar-userIcon,
-.view-homeShortcutsGrid-shortcutLink {
- border-radius: var(--sidebar-icons-border-radius) !important;
-}
-
-.main-avatar-avatar.main-avatar-withBadge:after {
- box-shadow: 0 0 0 2px var(--spice-sidebar);
- background-color: var(--spice-notification);
- right: 0;
-}
-
-.Root__now-playing-bar {
- border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
- background-color: unset;
-}
-
-.main-nowPlayingBar-container {
- border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
- background-color: unset;
- background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
- border-top: 0;
- min-width: 518px;
-}
-
-.main-connectBar-connectBar {
- border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
- border: 2px solid var(--spice-main);
- border-top: 0;
- color: var(--spice-sidebar-text);
-}
-
-.Root__nav-bar {
- height: 100%;
- z-index: 1;
- width: var(--sidebar-width) !important;
-}
-
-.main-buddyFeed-buddyFeedRoot {
- height: 100%;
-}
-
-.main-buddyFeed-buddyFeedRoot .os-content {
- padding-top: 0 !important;
-}
-
-html,
-.Root__nav-bar,
-.main-buddyFeed-buddyFeed {
- background-color: var(--spice-sidebar) !important;
-}
-
-html {
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.Root__nav-bar .link-subtle,
-.main-rootlist-rootlistItemLink:link,
-.main-rootlist-rootlistItemLink:visited,
-.main-rootlist-rootlistContent span,
-.main-navBar-entryPoints span {
- color: var(--spice-sidebar-text)
-}
-
-.main-navBar-navBarItem svg {
- width: 24px !important;
- height: 24px !important;
-}
-
-.main-navBar-navBarItem {
- position: relative;
- padding: 0px;
-}
-
-#spicetify-show-list >* {
- padding: 0 8px;
-}
-
-.main-rootlist-statusIcons {
- color: var(--spice-sidebar-text);
- padding-right: 16px;
-}
-
-.main-rootlist-statusIcons .main-playButton-button {
- color: var(--spice-sidebar-text);
-}
-
-.main-rootlist-expandArrow {
- position: absolute;
- top: 20px;
- right: 12px;
- width: 16px;
- height: 16px;
- color: var(--spice-sidebar-text) !important;
- background-color: var(--spice-button);
- border-radius: 50%;
- box-shadow: 0 0 0 2px var(--spice-sidebar);
- opacity: 0;
-}
-
-li.GlueDropTarget:hover .main-rootlist-expandArrow {
- opacity: 1;
-}
-
-html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
- opacity: 1;
-}
-
-.main-rootlist-expandArrow::before {
- font-size: 10px;
- padding-bottom: 3px;
-}
-
-html.sidebar-hide-text .main-rootlist-expandArrow {
- right: 4px;
-}
-
-html.sidebar-hide-text .main-navBar-navBarItem span,
-html.sidebar-hide-text .main-rootlist-rootlistContent span,
-html.sidebar-hide-text .main-rootlist-rootlistItem span,
-html.sidebar-hide-text .main-rootlist-statusIcons,
-html.sidebar-hide-text .GlueDropTarget span {
- display: none;
-}
-
-.main-rootlist-rootlist {
- margin-top: 0;
-}
-
-.main-rootlist-rootlist::before,
-.main-rootlist-rootlist::after {
- z-index: 10;
- position: absolute;
- content: "";
- left: 0px;
- right: 0px;
- pointer-events: none;
- transition: height 0.5s ease;
-}
-
-.main-rootlist-rootlist.no-top-shadow::before {
- height: 0px;
-}
-
-.main-rootlist-rootlist.no-bottom-shadow::after {
- height: 0px;
-}
-
-.main-rootlist-rootlist::before {
- top: 0px;
- height: 5%;
- background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
-}
-
-.main-rootlist-rootlist::after {
- bottom: 0px;
- height: 15%;
- background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
-}
-
-.Root__nav-bar .os-scrollbar-vertical,
-.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
- display: none;
-}
-
-/** */
-.main-topBar-historyButtons .main-topBar-button {
- background-color: unset;
- width: 24px;
- height: 24px;
-}
-
-.main-topBar-historyButtons svg {
- color: var(--spice-button);
- fill: var(--spice-button);
-}
-
-.playback-bar__progress-time,
-.playback-bar__progress-time-elapsed,
-.main-playbackBarRemainingTime-container {
- display: none;
-}
-
-.playback-bar {
- position: absolute;
- width: var(--main-view-width);
- left: var(--sidebar-width);
- bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
-}
-
-.Root.is-connectBarVisible .playback-bar {
- bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
-}
-
-.main-nowPlayingWidget-coverArt .cover-art {
- width: var(--bar-cover-art-size) !important;
- height: var(--bar-cover-art-size) !important;
-}
-
-.player-controls__buttons {
- margin-bottom: 0;
- width: 192px;
-}
-
-.progress-bar {
- --progress-bar-height: 2px;
- --fg-color: var(--spice-button);
- --bg-color: rgba(var(--spice-rgb-text), .2);
-}
-
-.progress-bar__slider {
- display: block !important;
- opacity: 0;
- transition: opacity 0.2s ease;
-}
-
-.progress-bar:hover .progress-bar__slider,
-.progress-bar:active .progress-bar__slider {
- opacity: 1;
-}
-
-.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
- transition: transform var(--playbar-movement-anim-speed) ease;
-}
-
-.progress-bar:not(:active) .progress-bar__slider {
- transition-property: left,opacity;
-}
-
-.playback-bar .prog-tooltip {
- position: absolute;
- min-width: 100px;
- top: -35px;
- left: 50%;
- transform: translateX(calc(-50%));
- padding: 0 5px;
- border-radius: 4px;
- text-align: center;
- color: var(--spice-text);
- background-color: var(--spice-button);
-}
-
-.playback-bar:not(:active) .prog-tooltip {
- transition: transform var(--playbar-movement-anim-speed) ease;
-}
-
-.minimal-player .player-controls__buttons {
- width: 120px;
- gap: 0px;
-}
-
-.minimal-player .player-controls__left,
-.minimal-player .player-controls__right {
- --button-size: 16px !important;
- gap: 0px;
-}
-
-.minimal-player .volume-bar {
- flex: 0 1 70px;
-}
-.extra-minimal-player .player-controls__buttons {
- width: 64px;
-}
-.extra-minimal-player .main-shuffleButton-button,
-.extra-minimal-player .main-repeatButton-button,
-.extra-minimal-player .ExtraControls__connect-device-picker,
-.extra-minimal-player .volume-bar .progress-bar-wrapper {
- display: none;
-}
-.extra-minimal-player .volume-bar {
- flex: 0 0 32px;
-}
-
-.main-trackInfo-name {
- font-weight: 500;
-}
-
-.main-topBar-topbarContent .main-playButton-PlayButton {
- --size: 35px !important;
-}
-
-.main-entityHeader-image {
- border-radius: 5px;
-}
-
-.main-entityHeader-metaDataText,
-.main-duration-container {
- color: var(--spice-subtext);
-}
-
-/** Sidebar */
-.main-rootlist-rootlist .os-content {
- padding: 0 0 8px 0 !important;
-}
-
-.main-rootlist-rootlistDividerContainer {
- display: none;
-}
-
-.main-rootlist-rootlistItem a {
- align-items: center;
- border-radius: 4px;
- display: flex;
- height: 56px;
- padding: 0 12px;
-}
-
-img.playlist-picture {
- width: 32px;
- height: 32px;
- flex: 0 0 32px;
- background-size: cover;
- background-position: center;
- border-radius: var(--sidebar-icons-border-radius);
-}
-
-.main-rootlist-rootlistItem a span {
- margin-left: 24px;
-}
-
-.main-rootlist-rootlistItem {
- padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width));
- padding-right: 0;
- transition: padding-left .5s ease;
-}
-
-html.sidebar-hide-text .main-rootlist-rootlistItem {
- padding: 0;
-}
-
-.main-rootlist-dropIndicator {
- background: var(--spice-selected-row);
- height: 2px;
-}
-
-.main-navBar-navBarLink {
- height: 56px;
-}
-
-.main-navBar-navBarLink .icon,
-.main-collectionLinkButton-icon,
-.main-createPlaylistButton-icon,
-.main-collectionLinkButton-icon {
- margin-right: 24px;
-}
-
-li.GlueDropTarget {
- padding: 0 8px;
-}
-
-/** OS-specific window controls dodge */
-#main:not([top-bar^="none"]) .main-topBar-background {
- -webkit-app-region: no-drag;
-}
-
-#main:not([top-bar="none-padding"]) .main-navBar-navBar,
-#main:not([top-bar="none-padding"]) .main-buddyFeed-header,
-#main:not([top-bar="none-padding"]) .main-navBar-entryPoints {
- padding-top: 8px !important;
-}
-
-#main:not([top-bar^="none"]) {
- padding-top: 31px;
-}
-
-#main:not([top-bar^="none"])::before {
- z-index: 999;
- content: "";
- position: absolute;
- top: 0px;
- left: 0px;
- right: 135px;
- height: 31px;
- background-color: rgba(0, 0, 0, 0.53);
- -webkit-app-region: drag;
- pointer-events: none;
-}
-
-#main[top-bar="solid"]::before {
- right: 0px;
- background-color: black;
-}
-
-#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar {
- padding-top: 24px;
-}
-
-#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
- padding-top: 22px;
-}
-
-#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header {
- padding-top: 32px;
-}
-
-#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
- padding-right: 167px;
-}
-
-.main-topBar-container {
- max-width: unset;
-}
-
-/** Custom elements */
-.dribs-playlist-list {
- padding-bottom: 86px;
-}
-
-#dribbblish-back-shadow {
- position: fixed;
- width: var(--main-view-width);
- height: calc(var(--main-view-height) + var(--bar-height));
- box-shadow: 0 0 10px 3px #0000003b;
- border-radius: var(--main-corner-radius);
- z-index: 2;
- pointer-events: none;
-}
-
-#dribbblish-config {
- display: none;
- z-index: 99999;
- position: absolute;
- inset: 0px;
- align-items: center;
- justify-content: center;
- color: var(--spice-text);
-}
-
-#dribbblish-config[active] {
- display: flex;
-}
-
-#dribbblish-config .dribbblish-config-container {
- z-index: 1;
- position: relative;
- max-width: 80%;
- background-color: rgba(var(--spice-rgb-main), 0.85);
- backdrop-filter: blur(3px);
- padding: 20px 15px;
- border-radius: var(--main-corner-radius);
- display: flex;
- gap: 5px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-
-#dribbblish-config .dribbblish-config-item {
- position: relative;
- width: 100%;
- padding: 0px 50px;
- display: grid;
- grid-template-columns: 1fr auto;
- grid-template-rows: 1fr 1fr;
- gap: 0px 10px;
- grid-template-areas:
- "header input"
- "description input";
-}
-
-#dribbblish-config .dribbblish-config-item > .x-settings-title {
- grid-area: header;
-}
-
-#dribbblish-config .dribbblish-config-item > .main-type-mesto {
- grid-area: description;
-}
-
-#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn {
- grid-area: input;
-}
-
-#dribbblish-config .dribbblish-config-close {
- position: absolute;
- top: 15px;
- right: 15px;
-}
-
-#dribbblish-config .dribbblish-config-backdrop {
- position: absolute;
- content: "";
- inset: 0px;
- backdrop-filter: blur(3px) brightness(60%);
-}
-
-/** Rearrange player bar */
-.main-nowPlayingBar-left {
- order: 1;
- flex: 1;
- width: auto;
- min-width: 0 !important;
-}
-
-.main-nowPlayingBar-center {
- order: 0;
- flex: 1;
- width: auto;
- min-width: unset !important;
-}
-
-.main-nowPlayingBar-right {
- order: 2;
- flex: 1;
- width: auto;
- min-width: unset !important;
-}
-
-.main-nowPlayingWidget-nowPlaying {
- justify-content: center;
-}
-
-.player-controls {
- justify-content: flex-start;
- flex-direction: row;
-}
-
-.main-playPauseButton-button {
- background-color: transparent;
-}
-
-.main-playPauseButton-button svg {
- width: 32px !important;
- height: 32px !important;
- color: var(--spice-button);
-}
-
-/** Main container */
-.contentSpacing,
-.artist-artistDiscography-headerContainer {
- padding-left: 64px;
- padding-right: 64px;
-}
-
-@media (min-width: 1024px) {
- .contentSpacing,
- .artist-artistDiscography-headerContainer {
- padding-left: 128px;
- padding-right: 128px;
- }
-}
-
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
-.main-createPlaylistButton-button {
- opacity: 1;
-}
-
-.main-likedSongsButton-likedSongsIcon,
-.main-yourEpisodesButton-yourEpisodesIcon,
-.main-createPlaylistButton-createPlaylistIcon {
- background: unset !important;
-}
-
-.main-createPlaylistButton-icon,
-.main-collectionLinkButton-icon,
-.main-createPlaylistButton-icon {
- height: 40px;
-}
-
-.main-likedSongsButton-likedSongsIcon svg,
-.main-yourEpisodesButton-yourEpisodesIcon svg,
-.main-createPlaylistButton-createPlaylistIcon svg {
- fill: var(--spice-sidebar-text);
- width: 32px;
- height: 32px;
-}
-.main-yourEpisodesButton-yourEpisodesIcon svg path {
- fill: var(--spice-sidebar-text);
-}
-
-/** Grid */
-.Root__top-container {
- grid-template-areas:
- "nav-bar main-view buddy-feed"
- "nav-bar now-playing-bar buddy-feed";
- padding: var(--main-gap) 0;
-}
-
-html:not(.buddyfeed-visible) .Root__top-container {
- padding-right: var(--main-gap);
-}
-
-/** Minimal profile button */
-span.main-userWidget-displayName,
-.main-userWidget-box svg {
- display: none;
-}
-
-/** Sidebar config */
-#dribs-hidden-list {
- background-color: rgba(var(--spice-rgb-main), .3);
-}
-
-#dribs-sidebar-config {
- position: relative;
- width: 100%;
- height: 0;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- top: -30px;
- left: 0;
-}
-
-#dribs-sidebar-config button {
- min-width: 60px;
- border-radius: 3px;
- background-color: var(--spice-main);
- color: var(--spice-text);
- border: 1px solid var(--spice-text);
-}
-#dribs-sidebar-config button:disabled {
- color: var(--spice-button-disabled);
-}
-
-.main-navBar-entryPoints {
- --left-sidebar-padding-left: 24px;
- --left-sidebar-padding-right: 24px;
-
- padding: 0px 8px;
-}
-
-.main-navBar-navBar,
-.main-rootlist-wrapper > div:nth-child(2),
-.main-navBar-entryPoints {
- display: flex;
- flex-direction: column;
- gap: 5px;
-}
-
-.main-rootlist-wrapper > div:nth-child(2) > li img,
-.main-navBar-navBarLink > .icon {
- z-index: 100;
-}
-
-.main-navBar-navBarItem:hover::before,
-.main-rootlist-rootlistItem:hover::before,
-.main-rootlist-rootlistItemLinkActive::before {
- content: "";
- position: absolute;
- inset: 0px;
- background-color: rgba(var(--spice-rgb-main), 0.4);
- border-radius: var(--image-radius);
- pointer-events: none;
-}
-
-.main-navBar-navBarLinkActive {
- border-radius: var(--image-radius);
- background-color: rgba(var(--spice-rgb-main), 0.4);
-}
-
-.main-navBar-navBar a:hover, .main-navBar-navBar a:hover span {
- color: unset !important;
-}
-
-div.GlueDropTarget.personal-library {
- padding: 0 8px;
-}
-div.GlueDropTarget.personal-library >* {
- padding: 0 16px;
- height: 56px;
- border-radius: 4px;
-}
-
-div.GlueDropTarget.personal-library >*.active {
- background: var(--spice-button);
-}
-
-/** Big cover, small cover */
-.main-coverSlotExpanded-container {
- position: fixed;
- z-index: 2;
- width: 250px;
- height: 250px;
- bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
- left: calc(var(--sidebar-width) + 10px);
-}
-
-.Root.is-connectBarVisible .main-coverSlotExpanded-container {
- bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
-}
-
-html.right-expanded-cover .main-coverSlotExpanded-container {
- right: calc(var(--main-gap) + 10px);
- left: unset;
-}
-
-html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
- right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
- left: unset;
-}
-
-.main-coverSlotExpanded-container img {
- border-radius: 4px;
-}
-
-.cover-art {
- border-radius: 4px;
-}
-
-.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
- opacity: 0;
-}
-
-.main-nowPlayingWidget-coverExpanded {
- transform: translateX(-27px);
-}
-
-/** Mini dribbblish */
-.x-categoryCard-CategoryCard > div {
- background-color: var(--spice-main);
- width: calc(100% - 14px);
- height: calc(100% - 6px);
- margin: 3px 10px;
- border-radius: 5px;
-}
-
-.x-categoryCard-CategoryCard {
- height: 100px;
-}
-
-.x-categoryCard-image {
- width: 50px !important;
- height: 50px !important;
-}
-
-.x-heroCategoryCard-HeroCategoryCard > div {
- background-color: var(--spice-main);
- width: calc(100% - 20px);
- height: calc(100% - 6px);
- margin: 3px 16px;
- border-radius: 5px;
-}
-
-.main-dropDown-dropDown,
-.x-sortBox-sortDropdown {
- background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
-}
-
-.connect-device-list-item:focus,
-.connect-device-list-item:hover {
- background-color: rgba(var(--spice-rgb-selected-row), .3);
-}
-
-.bookmark-filter {
- color: var(--spice-main) !important;
-}
-
-/* 1.1.56 */
-.main-navBar-navBar {
- width: var(--sidebar-width) !important;
-}
-
-.main-entityHeader-container.main-entityHeader-nonWrapped {
- padding-left: 64px;
- padding-right: 64px;
-}
-
-@media (min-width: 1024px) {
- .main-entityHeader-container.main-entityHeader-nonWrapped {
- padding-left: 128px;
- padding-right: 128px;
- }
-}
-
-.main-userWidget-dropDownMenu > li > button {
- color: rgba(var(--spice-rgb-selected-row), .7);
- padding-left: 8px;
- text-decoration: none;
-}
-.main-userWidget-dropDownMenu > li > button:hover,
-.main-userWidget-dropDownMenu > li > button:focus {
- color: var(--spice-text);
-}
-
-.main-userWidget-dropDownMenu svg {
- position: unset;
-}
-.main-userWidget-dropDownMenu > li svg {
- position: absolute;
-}
-.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
- z-index: 4;
-}
-
-.main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
- color: var(--spice-subtext);
-}
-/* Remove upgrade button*/
-.main-topBar-UpgradeButton {
- display: none
-}
-/* Remove upgrade to premium button in user menu */
-.main-contextMenu-menuItemButton[href="https://www.spotify.com/premium/"] {
- display: none
-}
-/* Remove ad placeholder in main screen */
-.main-leaderboardComponent-container {
- display: none
-}
+:root {
+ --bar-height: 70px;
+ --bar-cover-art-size: 40px;
+ --main-gap: 10px;
+ --main-corner-radius: 10px;
+ --scrollbar-vertical-size: 8px;
+ --cover-border-radius: 8px;
+ --playbar-movement-anim-speed: 0.5s;
+ --image-radius: 10px;
+ --sidebar-icons-border-radius: 50%;
+ --song-transition-speed: 3s;
+}
+
+@font-face {
+ font-family: "Google Sans Display";
+ src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
+ font-style: normal;
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: "Google Sans Display";
+ src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
+ font-style: normal;
+ font-weight: 500;
+}
+
+@font-face {
+ font-family: "Roboto";
+ src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
+ font-style: normal;
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: "Roboto";
+ src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
+ font-style: normal;
+ font-weight: 500;
+}
+
+body {
+ --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+ --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+ font-family: var(--glue-font-family);
+ letter-spacing: normal;
+}
+
+.os-scrollbar-handle {
+ background-color: var(--spice-text) !important;
+ border-radius: calc(var(--scrollbar-vertical-size) / 2);
+}
+
+.os-scrollbar-handle:hover {
+ filter: brightness(80%);
+}
+
+::-webkit-scrollbar {
+ width: var(--scrollbar-vertical-size);
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: var(--spice-text) !important;
+ border-radius: calc(var(--scrollbar-vertical-size) / 2);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ filter: brightness(80%);
+}
+
+.main-type-mesto,
+.main-type-mestoBold,
+.main-type-ballad,
+.main-type-balladBold,
+.main-type-canon {
+ font-family: var(--info-font-family);
+ letter-spacing: normal;
+}
+
+.main-type-ballad {
+ font-weight: 500;
+}
+
+.lyrics-lyricsContainer-LyricsLine {
+ font-family: var(--glue-font-family);
+ letter-spacing: -.03em !important;
+}
+
+.main-rootlist-rootlistDivider {
+ display: none;
+}
+
+input {
+ background-color: unset !important;
+ border-radius: 0 !important;
+ padding: 6px 10px 6px 48px;
+ color: var(--spice-text) !important;
+}
+
+input[type=range] {
+ -webkit-appearance: none;
+ background: transparent;
+ padding: 0px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 16px;
+ height: 16px;
+ margin-top: -4px;
+ border-radius: 50%;
+ background-color: var(--spice-text);
+}
+
+input[type=range]::-webkit-slider-thumb:hover,
+input[type=range]::-webkit-slider-thumb:active {
+ filter: brightness(80%);
+}
+
+input[type=range]::after {
+ z-index: 9999;
+ content: attr(tooltip);
+ position: absolute;
+ min-width: 50px;
+ top: -10px;
+ left: 50%;
+ transform: translateX(calc(-50%));
+ padding: 0 5px;
+ border-radius: 4px;
+ text-align: center;
+ color: var(--spice-sidebar-text);
+ background-color: var(--spice-button);
+ transition: opacity 0.25s ease;
+ opacity: 0;
+}
+
+input[type=range]:hover::after,
+input[type=range]:active::after {
+ opacity: 1;
+}
+
+input[type=range]:focus {
+ outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+ width: 100%;
+ height: 8px;
+ background-color: rgba(var(--spice-rgb-text), .2);
+ border-radius: 50vw;
+}
+
+input[type=number],
+input[type=text] {
+ height: 32px;
+ border: none;
+ border-radius: 4px !important;
+ padding: 0px 10px;
+ background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
+ color: var(--spice-subtext) !important;
+}
+
+input[type=number]:hover,
+input[type=number]:active,
+input[type=text]:hover,
+input[type=text]:active {
+ background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
+}
+
+.x-searchInput-searchInputSearchIcon,
+.x-searchInput-searchInputClearButton {
+ color: var(--spice-text) !important;
+}
+
+.main-home-homeHeader,
+.x-entityHeader-overlay,
+.x-actionBarBackground-background,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor
+{
+ background-color: unset !important;
+ background-image: unset !important;
+}
+
+.main-playButton-PlayButton.main-playButton-primary {
+ color: white;
+}
+
+.connect-title, .connect-header {
+ display: none;
+}
+
+.connect-device-list {
+ margin: 0px -5px;
+}
+
+/* Remove Topbar background colour */
+.main-topBar-background {
+ background-color: unset !important;
+}
+.main-topBar-overlay {
+ background-color: var(--spice-main);
+}
+
+.main-entityHeader-shadow,
+.main-contextMenu-menu,
+.connect-device-list-container {
+ box-shadow: 0 4px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+ filter: grayscale(1);
+}
+
+span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
+ fill: var(--spice-button);
+}
+span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
+ fill: var(--spice-text);
+}
+
+/* Full window artist background */
+.main-entityHeader-background.main-entityHeader-gradient {
+ opacity: 0.3;
+}
+
+.main-entityHeader-container.main-entityHeader-withBackgroundImage,
+.main-entityHeader-background,
+.main-entityHeader-background.main-entityHeader-overlay:after {
+ height: 100vh;
+}
+
+.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
+ justify-content: center;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
+ padding-left: 9%;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+ background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
+}
+
+.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
+ font-size: 120px !important;
+ line-height: 120px !important;
+}
+
+.main-contextMenu-menu {
+ background-color: var(--spice-button);
+}
+
+.main-contextMenu-menuHeading,
+.main-contextMenu-menuItemButton,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+ color: var(--spice-main);
+}
+
+.main-playPauseButton-button {
+ background-color: var(--spice-button);
+ color: white;
+}
+
+/** Queue page header */
+.queue-queue-title,
+.queue-playHistory-title {
+ color: var(--spice-text) !important;
+}
+
+/** Artist page */
+.artist-artistOverview-heading {
+ color: var(--spice-text) !important;
+}
+.artist-artistAbout-content .artist-artistAbout-cityBlock div,
+.artist-artistAbout-content .artist-artistAbout-stats div {
+ color: var(--spice-text) !important;
+}
+.artist-artistAbout-content div {
+ color: var(--spice-text) !important;
+}
+
+/** Cards */
+.main-cardImage-imageWrapper {
+ background-color: transparent;
+ box-shadow: unset;
+ -webkit-box-shadow: unset;
+}
+
+.main-cardImage-imagePlaceholder, .main-cardImage-image {
+ border-radius: var(--cover-border-radius);
+}
+
+.main-rootlist-rootlistDivider {
+ background-color: unset;
+}
+
+.main-nowPlayingBar-nowPlayingBar {
+ height: var(--bar-height);
+}
+
+.Root__top-bar {
+ border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.main-topBar-background {
+ border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.Root__main-view {
+ background-color: var(--spice-main);
+ border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+ overflow: hidden;
+}
+
+.main-buddyFeed-buddyFeed {
+ box-shadow: unset;
+ -webkit-box-shadow: unset;
+ z-index: 0;
+}
+
+.main-buddyFeed-headerTitle,
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
+ color: var(--spice-sidebar-text);
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
+.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
+ color: rgba(var(--spice-rgb-sidebar-text), 0.8);
+}
+
+.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
+.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
+ width: 32px !important;
+ height: 32px !important;
+}
+
+.view-homeShortcutsGrid-shortcut {
+ overflow: hidden;
+ background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+}
+
+.view-homeShortcutsGrid-shortcut:hover {
+ background-color: rgba(var(--spice-rgb-selected-row), 0.6);
+}
+
+.cover-art,
+.main-userWidget-box.upd-avail,
+.view-homeShortcutsGrid-shortcut,
+:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
+ border-radius: var(--image-radius) !important;
+}
+
+.main-avatar-image,
+.main-userWidget-box:not(.upd-avail),
+.main-avatar-userIcon,
+.view-homeShortcutsGrid-shortcutLink {
+ border-radius: var(--sidebar-icons-border-radius) !important;
+}
+
+.main-userWidget-box {
+ background-color: transparent;
+}
+
+.main-avatar-avatar.main-avatar-withBadge:after {
+ box-shadow: 0 0 0 2px var(--spice-sidebar);
+ background-color: var(--spice-notification);
+ right: 0;
+}
+
+.Root__now-playing-bar {
+ border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+ background-color: unset;
+}
+
+.main-nowPlayingBar-container {
+ border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+ background-color: unset;
+ background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
+ border-top: 0;
+ min-width: 518px;
+}
+
+.main-buddyFeed-findFriendsButton {
+ color: var(--spice-sidebar-text);
+}
+
+.main-connectBar-connectBar {
+ border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+ border: 2px solid var(--spice-main);
+ border-top: 0;
+ background-color: var(--spice-button) !important;
+ color: var(--spice-text) !important;
+}
+
+.Root__nav-bar {
+ height: 100%;
+ z-index: 1;
+ width: var(--sidebar-width) !important;
+}
+
+.main-buddyFeed-buddyFeedRoot {
+ height: 100%;
+}
+
+.main-buddyFeed-buddyFeedRoot .os-content {
+ padding-top: 0 !important;
+}
+
+html,
+.Root__nav-bar,
+.main-buddyFeed-buddyFeed {
+ background-color: var(--spice-sidebar) !important;
+}
+
+html {
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.Root__nav-bar .link-subtle,
+.main-rootlist-rootlistItemLink:link,
+.main-rootlist-rootlistItemLink:visited,
+.main-rootlist-rootlistContent span,
+.main-navBar-entryPoints span {
+ color: var(--spice-sidebar-text)
+}
+
+.main-navBar-navBarItem svg {
+ width: 24px !important;
+ height: 24px !important;
+}
+
+.main-navBar-navBarItem {
+ position: relative;
+ padding: 0px;
+}
+
+#spicetify-show-list >* {
+ padding: 0 8px;
+}
+
+.main-rootlist-statusIcons {
+ color: var(--spice-sidebar-text);
+ padding-right: 16px;
+}
+
+.main-rootlist-statusIcons .main-playButton-button {
+ color: var(--spice-sidebar-text);
+}
+
+.main-rootlist-expandArrow {
+ position: absolute;
+ top: 20px;
+ right: 12px;
+ width: 16px;
+ height: 16px;
+ color: var(--spice-sidebar-text) !important;
+ background-color: var(--spice-button);
+ border-radius: 50%;
+ box-shadow: 0 0 0 2px var(--spice-sidebar);
+ opacity: 0;
+}
+
+li.GlueDropTarget:hover .main-rootlist-expandArrow {
+ opacity: 1;
+}
+
+html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
+ opacity: 1;
+}
+
+.main-rootlist-expandArrow::before {
+ font-size: 10px;
+ padding-bottom: 3px;
+}
+
+html.sidebar-hide-text .main-rootlist-expandArrow {
+ right: 4px;
+}
+
+html.sidebar-hide-text .main-navBar-navBarItem span,
+html.sidebar-hide-text .main-rootlist-rootlistContent span,
+html.sidebar-hide-text .main-rootlist-rootlistItem span,
+html.sidebar-hide-text .main-rootlist-statusIcons,
+html.sidebar-hide-text .GlueDropTarget span {
+ display: none;
+}
+
+.main-rootlist-rootlist {
+ margin-top: 0;
+}
+
+.main-rootlist-rootlist::before,
+.main-rootlist-rootlist::after {
+ z-index: 10;
+ position: absolute;
+ content: "";
+ left: 0px;
+ right: 0px;
+ pointer-events: none;
+ transition: height 0.5s ease;
+}
+
+.main-rootlist-rootlist.no-top-shadow::before {
+ height: 0px;
+}
+
+.main-rootlist-rootlist.no-bottom-shadow::after {
+ height: 0px;
+}
+
+.main-rootlist-rootlist::before {
+ top: 0px;
+ height: 5%;
+ background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
+}
+
+.main-rootlist-rootlist::after {
+ bottom: 0px;
+ height: 15%;
+ background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
+}
+
+.Root__nav-bar .os-scrollbar-vertical,
+.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
+ display: none;
+}
+
+.x-toggle-indicatorWrapper {
+ background-color: var(--spice-shadow);
+}
+
+input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
+ background-color: var(--spice-button-active);
+}
+
+/** */
+.main-topBar-historyButtons .main-topBar-button {
+ background-color: unset;
+ width: 24px;
+ height: 24px;
+}
+
+.main-topBar-historyButtons svg {
+ color: var(--spice-button);
+ fill: var(--spice-button);
+}
+
+.playback-bar__progress-time,
+.playback-bar__progress-time-elapsed,
+.main-playbackBarRemainingTime-container {
+ display: none;
+}
+
+.playback-bar {
+ position: absolute;
+ width: var(--main-view-width);
+ left: var(--sidebar-width);
+ bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
+}
+
+.Root.is-connectBarVisible .playback-bar {
+ bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
+}
+
+.main-nowPlayingWidget-coverArt .cover-art {
+ width: var(--bar-cover-art-size) !important;
+ height: var(--bar-cover-art-size) !important;
+}
+
+.player-controls__buttons {
+ margin-bottom: 0;
+ width: 192px;
+}
+
+.progress-bar {
+ --progress-bar-height: 2px;
+ --fg-color: var(--spice-button);
+ --bg-color: rgba(var(--spice-rgb-text), .2);
+}
+
+.progress-bar__slider {
+ display: block !important;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.progress-bar:hover .progress-bar__slider,
+.progress-bar:active .progress-bar__slider {
+ opacity: 1;
+}
+
+.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
+ transition: transform var(--playbar-movement-anim-speed) ease;
+}
+
+.progress-bar:not(:active) .progress-bar__slider {
+ transition-property: left,opacity;
+}
+
+.playback-bar .prog-tooltip {
+ position: absolute;
+ min-width: 100px;
+ top: -35px;
+ left: 50%;
+ transform: translateX(calc(-50%));
+ padding: 0 5px;
+ border-radius: 4px;
+ text-align: center;
+ color: var(--spice-text);
+ background-color: var(--spice-button);
+}
+
+.playback-bar:not(:active) .prog-tooltip {
+ transition: transform var(--playbar-movement-anim-speed) ease;
+}
+
+.minimal-player .player-controls__buttons {
+ width: 120px;
+ gap: 0px;
+}
+
+.minimal-player .player-controls__left,
+.minimal-player .player-controls__right {
+ --button-size: 16px !important;
+ gap: 0px;
+}
+
+.minimal-player .volume-bar {
+ flex: 0 1 70px;
+}
+.extra-minimal-player .player-controls__buttons {
+ width: 64px;
+}
+.extra-minimal-player .main-shuffleButton-button,
+.extra-minimal-player .main-repeatButton-button,
+.extra-minimal-player .ExtraControls__connect-device-picker,
+.extra-minimal-player .volume-bar .progress-bar-wrapper {
+ display: none;
+}
+.extra-minimal-player .volume-bar {
+ flex: 0 0 32px;
+}
+
+.main-trackInfo-name {
+ font-weight: 500;
+}
+
+.main-topBar-topbarContent .main-playButton-PlayButton {
+ --size: 35px !important;
+}
+
+.main-entityHeader-image {
+ border-radius: 5px;
+}
+
+.main-entityHeader-metaDataText,
+.main-duration-container {
+ color: var(--spice-subtext);
+}
+
+/** Sidebar */
+.main-rootlist-rootlist .os-content {
+ padding: 0 0 8px 0 !important;
+}
+
+.main-rootlist-rootlistDividerContainer {
+ display: none;
+}
+
+.main-rootlist-rootlistItem a {
+ align-items: center;
+ border-radius: 4px;
+ display: flex;
+ height: 56px;
+ padding: 0 12px;
+}
+
+img.playlist-picture {
+ width: 32px;
+ height: 32px;
+ flex: 0 0 32px;
+ background-size: cover;
+ background-position: center;
+ border-radius: var(--sidebar-icons-border-radius);
+}
+
+.main-rootlist-rootlistItem a span {
+ margin-left: 24px;
+}
+
+.main-rootlist-rootlistItem {
+ padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width));
+ padding-right: 0;
+ transition: padding-left .5s ease;
+}
+
+html.sidebar-hide-text .main-rootlist-rootlistItem {
+ padding: 0;
+}
+
+.main-rootlist-dropIndicator {
+ background: var(--spice-selected-row);
+ height: 2px;
+}
+
+.main-rootlist-rootlistPlaylistsScrollNode {
+ padding: 0px;
+}
+
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon {
+ margin: 0px;
+}
+
+.main-navBar-navBarLink,
+.main-collectionLinkButton-collectionLinkButton,
+.main-createPlaylistButton-button {
+ gap: 24px;
+ height: 56px;
+}
+
+li.GlueDropTarget {
+ padding: 0 8px;
+}
+
+/** OS-specific window controls dodge */
+#main:not([top-bar^="none"]) .main-topBar-background {
+ -webkit-app-region: no-drag;
+}
+
+#main:not([top-bar="none-padding"]) .main-navBar-navBar,
+#main:not([top-bar="none-padding"]) .main-buddyFeed-header,
+#main:not([top-bar="none-padding"]) .main-navBar-entryPoints {
+ padding-top: 8px !important;
+}
+
+#main:not([top-bar^="none"]) {
+ padding-top: 31px;
+}
+
+#main:not([top-bar^="none"])::before {
+ z-index: 999;
+ content: "";
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 135px;
+ height: 31px;
+ background-color: rgba(0, 0, 0, 0.53);
+ -webkit-app-region: drag;
+ pointer-events: none;
+}
+
+#main[top-bar="solid"]::before {
+ right: 0px;
+ background-color: black;
+}
+
+#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar {
+ padding-top: 24px;
+}
+
+#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
+ padding-top: 22px;
+}
+
+#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header {
+ padding-top: 32px;
+}
+
+#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
+ padding-right: 167px;
+}
+
+.main-topBar-container {
+ max-width: unset;
+}
+
+/** Custom elements */
+.dribs-playlist-list {
+ padding-bottom: 86px;
+}
+
+#dribbblish-back-shadow {
+ position: fixed;
+ width: var(--main-view-width);
+ height: calc(var(--main-view-height) + var(--bar-height));
+ box-shadow: 0 0 10px 3px #0000003b;
+ border-radius: var(--main-corner-radius);
+ z-index: 2;
+ pointer-events: none;
+}
+
+#dribbblish-config {
+ display: none;
+ z-index: 99999;
+ position: absolute;
+ inset: 0px;
+ align-items: center;
+ justify-content: center;
+ color: var(--spice-text);
+}
+
+#dribbblish-config[active] {
+ display: flex;
+}
+
+#dribbblish-config .dribbblish-config-container {
+ z-index: 1;
+ position: relative;
+ max-width: 80%;
+ background-color: rgba(var(--spice-rgb-main), 0.9);
+ backdrop-filter: blur(3px);
+ padding: 20px 15px;
+ border-radius: var(--main-corner-radius);
+ box-shadow: 0 0 10px 3px #0000003b;
+ display: flex;
+ gap: 5px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+#dribbblish-config .dribbblish-config-items {
+ max-height: 60vh;
+ overflow-y: auto;
+ padding: 0px 50px;
+}
+
+.dribbblish-config-area > h2 {
+ text-align: center;
+}
+
+#dribbblish-config .dribbblish-config-item {
+ position: relative;
+ width: 100%;
+ padding: 5px 0px;
+ height: min-content;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: 1fr 1fr;
+ gap: 0px 10px;
+ grid-template-areas:
+ "header input"
+ "description input";
+}
+
+#dribbblish-config .dribbblish-config-item > .x-settings-title {
+ grid-area: header;
+ margin: 0px;
+ height: min-content;
+ position: relative;
+ bottom: 0px;
+}
+
+#dribbblish-config .dribbblish-config-item > .x-settings-title.no-desc {
+ bottom: -10px;
+}
+
+#dribbblish-config .dribbblish-config-item > .main-type-mesto {
+ grid-area: description;
+ height: min-content;
+}
+
+#dribbblish-config .dribbblish-config-item > .x-settings-secondColumn {
+ grid-area: input;
+}
+
+#dribbblish-config .dribbblish-config-close {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+}
+
+#dribbblish-config .dribbblish-config-backdrop {
+ position: absolute;
+ content: "";
+ inset: 0px;
+ backdrop-filter: blur(3px) brightness(60%);
+}
+
+/** Rearrange player bar */
+.main-nowPlayingBar-left {
+ order: 1;
+ flex: 1;
+ width: auto;
+ min-width: 0 !important;
+}
+
+.main-nowPlayingBar-center {
+ order: 0;
+ flex: 1;
+ width: auto;
+ min-width: unset !important;
+}
+
+.main-nowPlayingBar-right {
+ order: 2;
+ flex: 1;
+ width: auto;
+ min-width: unset !important;
+}
+
+.main-nowPlayingWidget-nowPlaying {
+ justify-content: center;
+}
+
+.player-controls {
+ justify-content: flex-start;
+ flex-direction: row;
+}
+
+.main-playPauseButton-button {
+ background-color: transparent;
+}
+
+.main-playPauseButton-button svg {
+ width: 32px !important;
+ height: 32px !important;
+ color: var(--spice-button);
+}
+
+/** Main container */
+.contentSpacing,
+.artist-artistDiscography-headerContainer {
+ padding-left: 64px;
+ padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+ .contentSpacing,
+ .artist-artistDiscography-headerContainer {
+ padding-left: 128px;
+ padding-right: 128px;
+ }
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button {
+ opacity: 1;
+}
+
+.main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-text,
+.main-navBar-navBarLink > span {
+ font-size: 14px;
+ font-weight: 400;
+ letter-spacing: normal;
+ line-height: 20px;
+ text-transform: none;
+}
+
+.main-likedSongsButton-likedSongsIcon,
+.main-yourEpisodesButton-yourEpisodesIcon,
+.main-createPlaylistButton-createPlaylistIcon {
+ background: unset !important;
+}
+
+.main-createPlaylistButton-icon,
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon {
+ height: 40px;
+}
+
+.main-likedSongsButton-likedSongsIcon svg,
+.main-yourEpisodesButton-yourEpisodesIcon svg,
+.main-createPlaylistButton-createPlaylistIcon svg {
+ fill: var(--spice-sidebar-text);
+ width: 32px;
+ height: 32px;
+}
+.main-yourEpisodesButton-yourEpisodesIcon svg path {
+ fill: var(--spice-sidebar-text);
+}
+
+/** Grid */
+.Root__top-container {
+ grid-template-areas:
+ "nav-bar main-view buddy-feed"
+ "nav-bar now-playing-bar buddy-feed";
+ padding: var(--main-gap) 0;
+}
+
+html:not(.buddyfeed-visible) .Root__top-container {
+ padding-right: var(--main-gap);
+}
+
+/** Minimal profile button */
+span.main-userWidget-displayName,
+.main-userWidget-box svg {
+ display: none;
+}
+
+/** Sidebar config */
+#dribs-hidden-list {
+ background-color: rgba(var(--spice-rgb-main), .3);
+}
+
+#dribs-sidebar-config {
+ position: relative;
+ width: 100%;
+ height: 0;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ top: -30px;
+ left: 0;
+}
+
+#dribs-sidebar-config button {
+ min-width: 60px;
+ border-radius: 3px;
+ background-color: var(--spice-main);
+ color: var(--spice-text);
+ border: 1px solid var(--spice-text);
+}
+#dribs-sidebar-config button:disabled {
+ color: var(--spice-button-disabled);
+}
+
+.main-navBar-entryPoints {
+ --left-sidebar-padding-left: 24px;
+ --left-sidebar-padding-right: 24px;
+
+ padding: 0px 8px;
+}
+
+.main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2),
+.main-navBar-entryPoints,
+#spicetify-show-list,
+.main-rootlist-rootlistContent .os-content {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+#spicetify-show-list:empty {
+ display: none;
+}
+
+.main-rootlist-wrapper > div:nth-child(2) > li img,
+.main-navBar-navBarLink > .icon {
+ z-index: 100;
+}
+
+.main-collectionLinkButton-collectionLinkButton,
+.main-createPlaylistButton-button {
+ position: relative;
+}
+
+.main-navBar-navBarItem:hover::before,
+.main-rootlist-rootlistItem:hover::before,
+.main-rootlist-rootlistItemLinkActive::before,
+.main-collectionLinkButton-collectionLinkButton:hover::before,
+.main-collectionLinkButton-selected::before,
+.main-createPlaylistButton-button:hover::before {
+ content: "";
+ position: absolute;
+ inset: 0px;
+ background-color: rgba(var(--spice-rgb-main), 0.4);
+ border-radius: var(--image-radius);
+ pointer-events: none;
+}
+
+.main-navBar-navBarLinkActive,
+.main-collectionLinkButton-selected {
+ border-radius: var(--image-radius);
+ background-color: rgba(var(--spice-rgb-main), 0.4);
+}
+
+.main-navBar-navBar a:hover, .main-navBar-navBar a:hover span {
+ color: unset !important;
+}
+
+div.GlueDropTarget.personal-library {
+ padding: 0 8px;
+}
+div.GlueDropTarget.personal-library >* {
+ padding: 0 16px;
+ height: 56px;
+ border-radius: 4px;
+}
+
+div.GlueDropTarget.personal-library >*.active {
+ background: transparent;
+}
+
+/** Big cover, small cover */
+.main-coverSlotExpanded-container {
+ position: fixed;
+ z-index: 2;
+ width: 250px;
+ height: 250px;
+ bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
+ left: calc(var(--sidebar-width) + 10px);
+}
+
+.Root.is-connectBarVisible .main-coverSlotExpanded-container {
+ bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
+}
+
+html.right-expanded-cover .main-coverSlotExpanded-container {
+ right: calc(var(--main-gap) + 10px);
+ left: unset;
+}
+
+html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
+ right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
+ left: unset;
+}
+
+.main-coverSlotExpanded-container img {
+ border-radius: 4px;
+}
+
+.cover-art {
+ border-radius: 4px;
+}
+
+.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
+ opacity: 0;
+}
+
+.main-nowPlayingWidget-coverExpanded {
+ transform: translateX(-27px);
+}
+
+/** Mini dribbblish */
+.x-categoryCard-CategoryCard > div {
+ background-color: var(--spice-main);
+ width: calc(100% - 14px);
+ height: calc(100% - 6px);
+ margin: 3px 10px;
+ border-radius: 5px;
+}
+
+.x-categoryCard-CategoryCard {
+ height: 100px;
+}
+
+.x-categoryCard-image {
+ width: 50px !important;
+ height: 50px !important;
+}
+
+.x-heroCategoryCard-HeroCategoryCard > div {
+ background-color: var(--spice-main);
+ width: calc(100% - 20px);
+ height: calc(100% - 6px);
+ margin: 3px 16px;
+ border-radius: 5px;
+}
+
+.main-buttons-button:not(.main-entityHeader-titleButton) {
+ color: var(--spice-main);
+}
+
+.main-dropDown-dropDown,
+.x-sortBox-sortDropdown {
+ background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
+ color: var(--spice-subtext);
+}
+
+.main-dropDown-dropDown:hover,
+.x-sortBox-sortDropdown:hover {
+ background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
+}
+
+.connect-device-list-item:focus,
+.connect-device-list-item:hover {
+ background-color: rgba(var(--spice-rgb-selected-row), .3);
+}
+
+.bookmark-filter {
+ color: var(--spice-main) !important;
+}
+
+/* 1.1.56 */
+.main-navBar-navBar {
+ width: var(--sidebar-width) !important;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped {
+ padding-left: 64px;
+ padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+ .main-entityHeader-container.main-entityHeader-nonWrapped {
+ padding-left: 128px;
+ padding-right: 128px;
+ }
+}
+
+.main-userWidget-dropDownMenu > li > button {
+ color: rgba(var(--spice-rgb-selected-row), .7);
+ padding-left: 8px;
+ text-decoration: none;
+}
+.main-userWidget-dropDownMenu > li > button:hover,
+.main-userWidget-dropDownMenu > li > button:focus {
+ color: var(--spice-text);
+}
+
+.main-userWidget-dropDownMenu svg {
+ position: unset;
+}
+.main-userWidget-dropDownMenu > li svg {
+ position: absolute;
+}
+.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
+ z-index: 4;
+}
+
+.main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
+ color: var(--spice-subtext);
+}
+
+/* Remove upgrade button*/
+.main-topBar-UpgradeButton {
+ display: none;
+}
+
+/* Remove upgrade to premium button in user menu */
+.main-contextMenu-menuItemButton[href="https://www.spotify.com/premium/"] {
+ display: none;
+}
+
+/* Remove ad placeholder in main screen */
+.main-leaderboardComponent-container {
+ display: none;
+}