diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
new file mode 100644
index 0000000..b6f481a
--- /dev/null
+++ b/.github/workflows/prettier.yml
@@ -0,0 +1,26 @@
+name: Prettier
+
+on: 
+  pull_request:
+  push:
+    branches:
+    - master
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        # Make sure the actual branch is checked out when running on pull requests
+        ref: ${{ github.head_ref }}
+        # This is important to fetch the changes to the previous commit
+        fetch-depth: 0
+
+    - name: Prettify code
+      uses: creyD/prettier_action@v4.0
+      with:
+        prettier_options: --write **/*.{js,css}
+        same_commit: True
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..c3d3691
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+Vibrant.min.js
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..a7d3ebf
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "endOfLine": "crlf",
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "printWidth": 999999
+}
diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index b067afa..9a64aed 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -1,469 +1,475 @@
-let current = '2.6.0'
-
-/* css is injected so this works with untouched user.css from Dribbblish */
-/* progressbar tooltip text color */
-document.styleSheets[0].insertRule(`
-    .playback-bar .prog-tooltip {
-        color: var(--spice-sidebar-text) !important;
-    }`)
-
-/* edit button of CustomApps */
-document.styleSheets[0].insertRule(`
-    .reddit-sort-container button.switch,
-    .new-releases-header button.switch,
-    .lyrics-tabBar-header button.switch {
-        background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
-        color: var(--spice-text);
-    }`)
-
-document.styleSheets[0].insertRule(`
-    .reddit-sort-container button.switch:hover,
-    .new-releases-header button.switch:hover,
-    .lyrics-tabBar-header button.switch:hover {
-        background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
-    }`)
-
-document.styleSheets[0].insertRule(`
-    .lyrics-lyricsContainer-LyricsBackground {
-        background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
-    }`)
-
-/* big cover opacity on hover */
-document.styleSheets[0].insertRule(`
-    .main-coverSlotExpanded-container:hover .cover-art,
-    .main-coverSlotExpanded-container:hover img {
-        opacity: 0.5;
-    }`)
-
-document.styleSheets[0].insertRule(`
-    .main-navBar-navBar a:hover,
-    .main-navBar-navBar a:hover span,
-    .main-buddyFeed-activityMetadata a:hover {
-        color: var(--spice-shadow) !important;
-    }`)
-
-document.styleSheets[0].insertRule(`
-    .collection-collectionEntityHeroCard-likedSongs,
-    .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link,
-    .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer,
-    .x-heroCategoryCard-heroTitle,
-    .main-rootlist-expandArrow:focus,
-    .main-rootlist-expandArrow:hover,
-    .main-rootlist-textWrapper:focus,
-    .main-rootlist-textWrapper:hover,
-    .main-contextMenu-menuHeading,
-    .main-contextMenu-menuItemButton,
-    .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
-    .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
-        color: var(--spice-sidebar-text) !important;
-    }`)
-
-/* Config settings */
-
-DribbblishShared.config.register({
-    area: "Animations & Transitions",
-    type: "slider",
-    key: "fadeDuration",
-    name: "Color Fade Duration",
-    description: "Select the duration of the color fading transition",
-    defaultValue: 0.5,
-    data: {
-        min: 0,
-        max: 10,
-        step: 0.1,
-        suffix: "s"
-    },
-    onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s")
-});
-
-// waitForElement because Spicetify is not initialized at startup
-waitForElement(["#main"], () => {
-    DribbblishShared.config.register({
-        area: { name: "About", order: 999 },
-        type: "button",
-        key: "aboutDribbblish",
-        name: "Info",
-        description: `
-            OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
-            Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
-            Dribbblish: v${current}
-        `,
-        data: "Copy",
-        onChange: (val) => {
-            copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description);
-            Spicetify.showNotification("Copied Versions");
-        }
-    });
-});
-
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-  }
-
-function copyToClipboard(text) {
-    var input = document.createElement('textarea');
-    input.style.display = "fixed";
-    input.innerHTML = text;
-    document.body.appendChild(input);
-    input.select();
-    var result = document.execCommand('copy');
-    document.body.removeChild(input);
-    return result;
-}
-
-/* js */
-function getAlbumInfo(uri) {
-    return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`)
-}
-
-function isLight(hex) {
-    var [r,g,b] = hexToRgb(hex).map(Number)
-    const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000
-    return brightness > 128
-}
-
-function hexToRgb(hex) {
-    var bigint = parseInt(hex.replace("#",""), 16)
-    var r = (bigint >> 16) & 255
-    var g = (bigint >> 8) & 255
-    var b = bigint & 255
-    return [r, g, b]
-}
-
-function rgbToHex([r, g, b]) {
-    const rgb = (r << 16) | (g << 8) | (b << 0)
-    return '#' + (0x1000000 + rgb).toString(16).slice(1)
-}
-
-const LightenDarkenColor = (h, p) => '#' + [1, 3, 5].map(s => parseInt(h.substr(s, 2), 16)).map(c => parseInt((c * (100 + p)) / 100)).map(c => (c < 255 ? c : 255)).map(c => c.toString(16).padStart(2, '0')).join('')
-
-function rgbToHsl([r, g, b]) {
-    r /= 255, g /= 255, b /= 255
-    var max = Math.max(r, g, b), min = Math.min(r, g, b)
-    var h, s, l = (max + min) / 2
-    if (max == min) {
-        h = s = 0 // achromatic
-    } else {
-        var d = max - min
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-        switch (max) {
-            case r: h = (g - b) / d + (g < b ? 6 : 0)
-                    break
-            case g: h = (b - r) / d + 2
-                    break
-            case b: h = (r - g) / d + 4
-                    break
-        }
-        h /= 6
-    }
-    return [h, s, l]
-}
-
-function hslToRgb([h, s, l]) {
-    var r, g, b
-    if (s == 0) {
-        r = g = b = l // achromatic
-    } else {
-        function hue2rgb(p, q, t) {
-            if (t < 0) t += 1
-            if (t > 1) t -= 1
-            if (t < 1/6) return p + (q - p) * 6 * t
-            if (t < 1/2) return q
-            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
-            return p
-        }
-        var q = l < 0.5 ? l * (1 + s) : l + s - l * s
-        var p = 2 * l - q
-        r = hue2rgb(p, q, h + 1/3)
-        g = hue2rgb(p, q, h)
-        b = hue2rgb(p, q, h - 1/3)
-    }
-    return [r * 255, g * 255, b * 255]
-}
-
-function setLightness(hex, lightness) {
-    hsl = rgbToHsl(hexToRgb(hex))
-    hsl[2] = lightness
-    return rgbToHex(hslToRgb(hsl))
-}
-
-let textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text')
-let textColorBg = getComputedStyle(document.documentElement).getPropertyValue('--spice-main')
-let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-sidebar')
-
-function setRootColor(name, colHex) {
-    let root = document.documentElement
-    if (root===null) return
-    root.style.setProperty('--spice-' + name, colHex)
-    root.style.setProperty('--spice-rgb-' + name, hexToRgb(colHex).join(','))
-}
-
-function toggleDark(setDark) {
-    if (setDark===undefined) setDark = isLight(textColorBg)
-
-    document.documentElement.style.setProperty('--is_light', setDark ? 0 : 1)
-    textColorBg = setDark ? "#0A0A0A" : "#FAFAFA"
-
-    setRootColor('main', textColorBg)
-    setRootColor('player', textColorBg)
-    setRootColor('card', setDark ? "#040404" : "#ECECEC")
-    setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
-    setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
-
-    updateColors(textColor, sidebarColor)
-}
-
-function checkDarkLightMode() {
-    if (DribbblishShared.config.get("theme") != 2) return;
-
-    const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0])
-                     + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1])
-    const end =   60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0])
-                     + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1])
-
-    const now = new Date()
-    const time = 60 * now.getHours() + now.getMinutes()
-
-    if (end < start)
-        dark = start <= time || time < end
-    else
-        dark = start <= time && time < end
-    toggleDark(dark);
-}
-// Run every Minute to check time and set dark / light mode
-setInterval(checkDarkLightMode, 60000);
-
-DribbblishShared.config.register({
-    area: "Theme",
-    type: "select",
-    data: ["Dark", "Light", "Based on Time"],
-    key: "theme",
-    name: "Theme",
-    description: "Select Dark / Bright mode",
-    defaultValue: 0,
-    showChildren: (val) => {
-        return val == 2;
-    },
-    onChange: (val) => {
-        switch (val) {
-            case 0:
-                toggleDark(true);
-                break;
-            case 1:
-                toggleDark(false);
-                break;
-            case 2:
-                checkDarkLightMode();
-                break;
-        }
-    },
-    children: [
-        {
-            type: "time",
-            key: "darkModeOnTime",
-            name: "Dark Mode On Time",
-            description: "Beginning of Dark mode time",
-            defaultValue: "20:00",
-            fireInitialChange: false,
-            onChange: checkDarkLightMode
-        },
-        {
-            type: "time",
-            key: "darkModeOffTime",
-            name: "Dark Mode Off Time",
-            description: "End of Dark mode time",
-            defaultValue: "06:00",
-            fireInitialChange: false,
-            onChange: checkDarkLightMode
-        }
-    ]
-});
-
-var currentColor;
-var currentSideColor;
-var colorFadeInterval = false;
-
-function updateColors(textColHex, sideColHex) {
-    let isLightBg = isLight(textColorBg)
-    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
-
-    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
-    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
-    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
-    setRootColor('text', textColHex)
-    setRootColor('button', darkerColHex)
-    setRootColor('button-active', darkColHex)
-    setRootColor('selected-row', darkerColHex)
-    setRootColor('tab-active', buttonBgColHex)
-    setRootColor('button-disabled', buttonBgColHex)
-    setRootColor('sidebar', sideColHex)
-}
-
-let nearArtistSpanText = ""
-let coverListenerInstalled = true
-async function songchange() {
-    try {
-        // warning popup
-        if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`);
-    } catch (err) {
-        console.error(err);
-    }
-
-    let album_uri = Spicetify.Player.data.track.metadata.album_uri
-    let bgImage = Spicetify.Player.data.track.metadata.image_url
-    if (bgImage === undefined) {
-        bgImage = "/images/tracklist-row-song-fallback.svg"
-        textColor = "#509bf5"
-        updateColors(textColor, textColor)
-        coverListenerInstalled = false
-    }
-    if (!coverListenerInstalled)
-        hookCoverChange(true)
-
-    if (album_uri !== undefined && !album_uri.includes('spotify:show')) {
-        const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""))
-
-        let album_date = new Date(albumInfo.year, (albumInfo.month || 1)-1, albumInfo.day|| 0)
-        let recent_date = new Date()
-        recent_date.setMonth(recent_date.getMonth() - 6)
-        album_date = album_date.toLocaleString('default', album_date>recent_date ? { year: 'numeric', month: 'short' } : { year: 'numeric' })
-        album_link = "<a title=\""+Spicetify.Player.data.track.metadata.album_title+"\" href=\""+album_uri+"\" data-uri=\""+album_uri+"\" data-interaction-target=\"album-name\" class=\"tl-cell__content\">"+Spicetify.Player.data.track.metadata.album_title+"</a>"
-
-        nearArtistSpanText = album_link + " • " + album_date
-    } else if (Spicetify.Player.data.track.uri.includes('spotify:episode')) {
-        // podcast
-        bgImage = bgImage.replace('spotify:image:', 'https://i.scdn.co/image/')
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title
-    } else if (Spicetify.Player.data.track.metadata.is_local=="true") {
-        // local file
-        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title
-    } else if (Spicetify.Player.data.track.provider=="ad") {
-        // ad
-        nearArtistSpanText = "advertisement"
-        coverListenerInstalled = false
-        return
-    } else {
-        // When clicking a song from the homepage, songChange is fired with half empty metadata
-        // todo: retry only once?
-        setTimeout(songchange, 200)
-    }
-
-    if( document.querySelector("#main-trackInfo-year")===null ) {
-        waitForElement([".main-trackInfo-container"], (queries) => {
-            nearArtistSpan = document.createElement("div")
-            nearArtistSpan.id = 'main-trackInfo-year'
-            nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale")
-            nearArtistSpan.innerHTML = nearArtistSpanText
-            queries[0].append(nearArtistSpan)
-        })
-    } else {
-        nearArtistSpan.innerHTML = nearArtistSpanText
-    }
-    document.documentElement.style.setProperty('--image_url', 'url("' + bgImage + '")')
-}
-
-Spicetify.Player.addEventListener("songchange", songchange)
-
-function pickCoverColor(img) {
-    if (!img.currentSrc.startsWith('spotify:'))
-        return
-    var swatches = new Vibrant(img, 5).swatches()
-    lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]
-    darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"]
-
-    mainCols = isLight(textColorBg) ? lightCols : darkCols
-    textColor = "#509bf5"
-    for (var col in mainCols)
-        if (swatches[mainCols[col]]) {
-            textColor = swatches[mainCols[col]].getHex()
-            break
-        }
-
-    sidebarColor = "#509bf5"
-    for (var col in lightCols)
-        if (swatches[lightCols[col]]) {
-            sidebarColor = swatches[lightCols[col]].getHex()
-            break
-        }
-    updateColors(textColor, sidebarColor)
-}
-
-waitForElement([".main-nowPlayingBar-left"], (queries) => {
-    var observer = new MutationObserver(function(mutations) {
-        mutations.forEach(function(mutation) {
-            if (mutation.removedNodes.length>0)
-                coverListenerInstalled = false
-        });
-    });
-    observer.observe(queries[0], { childList: true })
-});
-
-function hookCoverChange(pick) {
-    waitForElement([".cover-art-image"], (queries) => {
-        coverListenerInstalled = true
-        if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
-        queries[0].addEventListener("load", function () {
-            try {
-                pickCoverColor(queries[0])
-            } catch (error) {
-                console.error(error)
-                setTimeout(pickCoverColor, 300, queries[0])
-            }
-        });
-    });
-}
-
-hookCoverChange(false);
-
-(function Startup() {
-    if (!Spicetify.showNotification) {
-        setTimeout(Startup, 300);
-        return;
-    }
-    // Check latest release
-    fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
-        .then((response) => {
-            return response.json();
-        })
-        .then((data) => {
-            if (data.tag_name > current) {
-                upd = document.createElement("div");
-                upd.innerText = `Theme UPD v${data.tag_name} avail.`;
-                upd.classList.add("ellipsis-one-line", "main-type-finale");
-                upd.setAttribute("title", `Changes: ${data.name}`);
-                upd.style.setProperty("color", "var(--spice-button-active)");
-                document.querySelector(".main-userWidget-box").append(upd);
-                document.querySelector(".main-userWidget-box").classList.add("update-avail");
-                new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
-            }
-        })
-        .catch((err) => {
-            // Do something for an error here
-            console.error(err);
-        });
-})();
-
-/* translucid background cover */
-document.styleSheets[0].insertRule(`
-    .Root__top-container::before {
-        content: '';
-        background-image: var(--image_url);
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center center;
-        position: fixed;
-        display: block;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        filter: blur(15px);
-        pointer-events: none;
-        backface-visibility: hidden;
-        will-change: transform;
-        opacity: calc(0.07 + 0.03 * var(--is_light, 0));
-        z-index: +3;
-        transition: background-image var(--song-transition-speed) linear;
-    }`)
-
-document.documentElement.style.setProperty('--warning_message', ' ');
+let current = "2.6.0";
+
+/* css is injected so this works with untouched user.css from Dribbblish */
+/* progressbar tooltip text color */
+document.styleSheets[0].insertRule(`
+    .playback-bar .prog-tooltip {
+        color: var(--spice-sidebar-text) !important;
+    }`);
+
+/* edit button of CustomApps */
+document.styleSheets[0].insertRule(`
+    .reddit-sort-container button.switch,
+    .new-releases-header button.switch,
+    .lyrics-tabBar-header button.switch {
+        background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
+        color: var(--spice-text);
+    }`);
+
+document.styleSheets[0].insertRule(`
+    .reddit-sort-container button.switch:hover,
+    .new-releases-header button.switch:hover,
+    .lyrics-tabBar-header button.switch:hover {
+        background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
+    }`);
+
+document.styleSheets[0].insertRule(`
+    .lyrics-lyricsContainer-LyricsBackground {
+        background: linear-gradient(180deg, transparent 0px, transparent 60px, var(--lyrics-color-background) 61px) !important;
+    }`);
+
+/* big cover opacity on hover */
+document.styleSheets[0].insertRule(`
+    .main-coverSlotExpanded-container:hover .cover-art,
+    .main-coverSlotExpanded-container:hover img {
+        opacity: 0.5;
+    }`);
+
+document.styleSheets[0].insertRule(`
+    .main-navBar-navBar a:hover,
+    .main-navBar-navBar a:hover span,
+    .main-buddyFeed-activityMetadata a:hover {
+        color: var(--spice-shadow) !important;
+    }`);
+
+document.styleSheets[0].insertRule(`
+    .collection-collectionEntityHeroCard-likedSongs,
+    .collection-collectionEntityHeroCard-likedSongs .main-cardHeader-link,
+    .collection-collectionEntityHeroCard-likedSongs .collection-collectionEntityHeroCard-descriptionContainer,
+    .x-heroCategoryCard-heroTitle,
+    .main-rootlist-expandArrow:focus,
+    .main-rootlist-expandArrow:hover,
+    .main-rootlist-textWrapper:focus,
+    .main-rootlist-textWrapper:hover,
+    .main-contextMenu-menuHeading,
+    .main-contextMenu-menuItemButton,
+    .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+    .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+        color: var(--spice-sidebar-text) !important;
+    }`);
+
+/* Config settings */
+
+DribbblishShared.config.register({
+    area: "Animations & Transitions",
+    type: "slider",
+    key: "fadeDuration",
+    name: "Color Fade Duration",
+    description: "Select the duration of the color fading transition",
+    defaultValue: 0.5,
+    data: {
+        min: 0,
+        max: 10,
+        step: 0.1,
+        suffix: "s"
+    },
+    onChange: (val) => document.documentElement.style.setProperty("--song-transition-speed", val + "s")
+});
+
+// waitForElement because Spicetify is not initialized at startup
+waitForElement(["#main"], () => {
+    DribbblishShared.config.register({
+        area: { name: "About", order: 999 },
+        type: "button",
+        key: "aboutDribbblish",
+        name: "Info",
+        description: `
+            OS: ${capitalizeFirstLetter(Spicetify.Platform.PlatformData.os_name)} v${Spicetify.Platform.PlatformData.os_version}
+            Spotify: v${Spicetify.Platform.PlatformData.event_sender_context_information?.client_version_string ?? Spicetify.Platform.PlatformData.client_version_triple}
+            Dribbblish: v${current}
+        `,
+        data: "Copy",
+        onChange: (val) => {
+            copyToClipboard(DribbblishShared.config.getOptions("aboutDribbblish").description);
+            Spicetify.showNotification("Copied Versions");
+        }
+    });
+});
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function copyToClipboard(text) {
+    var input = document.createElement("textarea");
+    input.style.display = "fixed";
+    input.innerHTML = text;
+    document.body.appendChild(input);
+    input.select();
+    var result = document.execCommand("copy");
+    document.body.removeChild(input);
+    return result;
+}
+
+/* js */
+function getAlbumInfo(uri) {
+    return Spicetify.CosmosAsync.get(`hm://album/v1/album-app/album/${uri}/desktop`);
+}
+
+function isLight(hex) {
+    var [r, g, b] = hexToRgb(hex).map(Number);
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness > 128;
+}
+
+function hexToRgb(hex) {
+    var bigint = parseInt(hex.replace("#", ""), 16);
+    var r = (bigint >> 16) & 255;
+    var g = (bigint >> 8) & 255;
+    var b = bigint & 255;
+    return [r, g, b];
+}
+
+function rgbToHex([r, g, b]) {
+    const rgb = (r << 16) | (g << 8) | (b << 0);
+    return "#" + (0x1000000 + rgb).toString(16).slice(1);
+}
+
+const LightenDarkenColor = (h, p) =>
+    "#" +
+    [1, 3, 5]
+        .map((s) => parseInt(h.substr(s, 2), 16))
+        .map((c) => parseInt((c * (100 + p)) / 100))
+        .map((c) => (c < 255 ? c : 255))
+        .map((c) => c.toString(16).padStart(2, "0"))
+        .join("");
+
+function rgbToHsl([r, g, b]) {
+    (r /= 255), (g /= 255), (b /= 255);
+    var max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+    var h,
+        s,
+        l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0; // achromatic
+    } else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [h, s, l];
+}
+
+function hslToRgb([h, s, l]) {
+    var r, g, b;
+    if (s == 0) {
+        r = g = b = l; // achromatic
+    } else {
+        function hue2rgb(p, q, t) {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        }
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return [r * 255, g * 255, b * 255];
+}
+
+function setLightness(hex, lightness) {
+    hsl = rgbToHsl(hexToRgb(hex));
+    hsl[2] = lightness;
+    return rgbToHex(hslToRgb(hsl));
+}
+
+let textColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-text");
+let textColorBg = getComputedStyle(document.documentElement).getPropertyValue("--spice-main");
+let sidebarColor = getComputedStyle(document.documentElement).getPropertyValue("--spice-sidebar");
+
+function setRootColor(name, colHex) {
+    let root = document.documentElement;
+    if (root === null) return;
+    root.style.setProperty("--spice-" + name, colHex);
+    root.style.setProperty("--spice-rgb-" + name, hexToRgb(colHex).join(","));
+}
+
+function toggleDark(setDark) {
+    if (setDark === undefined) setDark = isLight(textColorBg);
+
+    document.documentElement.style.setProperty("--is_light", setDark ? 0 : 1);
+    textColorBg = setDark ? "#0A0A0A" : "#FAFAFA";
+
+    setRootColor("main", textColorBg);
+    setRootColor("player", textColorBg);
+    setRootColor("card", setDark ? "#040404" : "#ECECEC");
+    setRootColor("subtext", setDark ? "#EAEAEA" : "#3D3D3D");
+    setRootColor("notification", setDark ? "#303030" : "#DDDDDD");
+
+    updateColors(textColor, sidebarColor);
+}
+
+function checkDarkLightMode() {
+    if (DribbblishShared.config.get("theme") != 2) return;
+
+    const start = 60 * parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOnTime").split(":")[1]);
+    const end = 60 * parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[0]) + parseInt(DribbblishShared.config.get("darkModeOffTime").split(":")[1]);
+
+    const now = new Date();
+    const time = 60 * now.getHours() + now.getMinutes();
+
+    if (end < start) dark = start <= time || time < end;
+    else dark = start <= time && time < end;
+    toggleDark(dark);
+}
+// Run every Minute to check time and set dark / light mode
+setInterval(checkDarkLightMode, 60000);
+
+DribbblishShared.config.register({
+    area: "Theme",
+    type: "select",
+    data: ["Dark", "Light", "Based on Time"],
+    key: "theme",
+    name: "Theme",
+    description: "Select Dark / Bright mode",
+    defaultValue: 0,
+    showChildren: (val) => {
+        return val == 2;
+    },
+    onChange: (val) => {
+        switch (val) {
+            case 0:
+                toggleDark(true);
+                break;
+            case 1:
+                toggleDark(false);
+                break;
+            case 2:
+                checkDarkLightMode();
+                break;
+        }
+    },
+    children: [
+        {
+            type: "time",
+            key: "darkModeOnTime",
+            name: "Dark Mode On Time",
+            description: "Beginning of Dark mode time",
+            defaultValue: "20:00",
+            fireInitialChange: false,
+            onChange: checkDarkLightMode
+        },
+        {
+            type: "time",
+            key: "darkModeOffTime",
+            name: "Dark Mode Off Time",
+            description: "End of Dark mode time",
+            defaultValue: "06:00",
+            fireInitialChange: false,
+            onChange: checkDarkLightMode
+        }
+    ]
+});
+
+var currentColor;
+var currentSideColor;
+var colorFadeInterval = false;
+
+function updateColors(textColHex, sideColHex) {
+    let isLightBg = isLight(textColorBg);
+    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15); // vibrant color is always too bright for white bg mode
+
+    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20);
+    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40);
+    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.9 : 0.14);
+    setRootColor("text", textColHex);
+    setRootColor("button", darkerColHex);
+    setRootColor("button-active", darkColHex);
+    setRootColor("selected-row", darkerColHex);
+    setRootColor("tab-active", buttonBgColHex);
+    setRootColor("button-disabled", buttonBgColHex);
+    setRootColor("sidebar", sideColHex);
+}
+
+let nearArtistSpanText = "";
+let coverListenerInstalled = true;
+async function songchange() {
+    try {
+        // warning popup
+        if (Spicetify.Platform.PlatformData.client_version_triple < "1.1.68") Spicetify.showNotification(`Your version of Spotify ${Spicetify.Platform.PlatformData.client_version_triple}) is un-supported`);
+    } catch (err) {
+        console.error(err);
+    }
+
+    let album_uri = Spicetify.Player.data.track.metadata.album_uri;
+    let bgImage = Spicetify.Player.data.track.metadata.image_url;
+    if (bgImage === undefined) {
+        bgImage = "/images/tracklist-row-song-fallback.svg";
+        textColor = "#509bf5";
+        updateColors(textColor, textColor);
+        coverListenerInstalled = false;
+    }
+    if (!coverListenerInstalled) hookCoverChange(true);
+
+    if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
+        const albumInfo = await getAlbumInfo(album_uri.replace("spotify:album:", ""));
+
+        let album_date = new Date(albumInfo.year, (albumInfo.month || 1) - 1, albumInfo.day || 0);
+        let recent_date = new Date();
+        recent_date.setMonth(recent_date.getMonth() - 6);
+        album_date = album_date.toLocaleString("default", album_date > recent_date ? { year: "numeric", month: "short" } : { year: "numeric" });
+        album_link = '<a title="' + Spicetify.Player.data.track.metadata.album_title + '" href="' + album_uri + '" data-uri="' + album_uri + '" data-interaction-target="album-name" class="tl-cell__content">' + Spicetify.Player.data.track.metadata.album_title + "</a>";
+
+        nearArtistSpanText = album_link + " • " + album_date;
+    } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
+        // podcast
+        bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");
+        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
+    } else if (Spicetify.Player.data.track.metadata.is_local == "true") {
+        // local file
+        nearArtistSpanText = Spicetify.Player.data.track.metadata.album_title;
+    } else if (Spicetify.Player.data.track.provider == "ad") {
+        // ad
+        nearArtistSpanText = "advertisement";
+        coverListenerInstalled = false;
+        return;
+    } else {
+        // When clicking a song from the homepage, songChange is fired with half empty metadata
+        // todo: retry only once?
+        setTimeout(songchange, 200);
+    }
+
+    if (document.querySelector("#main-trackInfo-year") === null) {
+        waitForElement([".main-trackInfo-container"], (queries) => {
+            nearArtistSpan = document.createElement("div");
+            nearArtistSpan.id = "main-trackInfo-year";
+            nearArtistSpan.classList.add("main-trackInfo-artists", "ellipsis-one-line", "main-type-finale");
+            nearArtistSpan.innerHTML = nearArtistSpanText;
+            queries[0].append(nearArtistSpan);
+        });
+    } else {
+        nearArtistSpan.innerHTML = nearArtistSpanText;
+    }
+    document.documentElement.style.setProperty("--image_url", 'url("' + bgImage + '")');
+}
+
+Spicetify.Player.addEventListener("songchange", songchange);
+
+function pickCoverColor(img) {
+    if (!img.currentSrc.startsWith("spotify:")) return;
+    var swatches = new Vibrant(img, 5).swatches();
+    lightCols = ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"];
+    darkCols = ["Vibrant", "LightVibrant", "Muted", "DarkVibrant"];
+
+    mainCols = isLight(textColorBg) ? lightCols : darkCols;
+    textColor = "#509bf5";
+    for (var col in mainCols)
+        if (swatches[mainCols[col]]) {
+            textColor = swatches[mainCols[col]].getHex();
+            break;
+        }
+
+    sidebarColor = "#509bf5";
+    for (var col in lightCols)
+        if (swatches[lightCols[col]]) {
+            sidebarColor = swatches[lightCols[col]].getHex();
+            break;
+        }
+    updateColors(textColor, sidebarColor);
+}
+
+waitForElement([".main-nowPlayingBar-left"], (queries) => {
+    var observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            if (mutation.removedNodes.length > 0) coverListenerInstalled = false;
+        });
+    });
+    observer.observe(queries[0], { childList: true });
+});
+
+function hookCoverChange(pick) {
+    waitForElement([".cover-art-image"], (queries) => {
+        coverListenerInstalled = true;
+        if (pick && queries[0].complete && queries[0].naturalHeight !== 0) pickCoverColor(queries[0]);
+        queries[0].addEventListener("load", function () {
+            try {
+                pickCoverColor(queries[0]);
+            } catch (error) {
+                console.error(error);
+                setTimeout(pickCoverColor, 300, queries[0]);
+            }
+        });
+    });
+}
+
+hookCoverChange(false);
+
+(function Startup() {
+    if (!Spicetify.showNotification) {
+        setTimeout(Startup, 300);
+        return;
+    }
+    // Check latest release
+    fetch("https://api.github.com/repos/JulienMaille/dribbblish-dynamic-theme/releases/latest")
+        .then((response) => {
+            return response.json();
+        })
+        .then((data) => {
+            if (data.tag_name > current) {
+                upd = document.createElement("div");
+                upd.innerText = `Theme UPD v${data.tag_name} avail.`;
+                upd.classList.add("ellipsis-one-line", "main-type-finale");
+                upd.setAttribute("title", `Changes: ${data.name}`);
+                upd.style.setProperty("color", "var(--spice-button-active)");
+                document.querySelector(".main-userWidget-box").append(upd);
+                document.querySelector(".main-userWidget-box").classList.add("update-avail");
+                new Spicetify.Menu.Item("Update Dribbblish", false, () => window.open("https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/README.md#install--update", "_blank")).register();
+            }
+        })
+        .catch((err) => {
+            // Do something for an error here
+            console.error(err);
+        });
+})();
+
+/* translucid background cover */
+document.styleSheets[0].insertRule(`
+    .Root__top-container::before {
+        content: '';
+        background-image: var(--image_url);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        filter: blur(15px);
+        pointer-events: none;
+        backface-visibility: hidden;
+        will-change: transform;
+        opacity: calc(0.07 + 0.03 * var(--is_light, 0));
+        z-index: +3;
+        transition: background-image var(--song-transition-speed) linear;
+    }`);
+
+document.documentElement.style.setProperty("--warning_message", " ");
diff --git a/dribbblish.js b/dribbblish.js
index d05933a..8574685 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -567,11 +567,9 @@ waitForElement([".Root__main-view"], ([mainView]) => {
     mainView.prepend(shadow);
 });
 
-waitForElement([
-    ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
-], ([resizer]) => {
+waitForElement([".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"], ([resizer]) => {
     const observer = new MutationObserver(updateVariable);
-    observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
     function updateVariable() {
         let value = resizer.value;
         if (value < 121) {
@@ -580,8 +578,7 @@ waitForElement([
         } else {
             document.documentElement.classList.remove("sidebar-hide-text");
         }
-        document.documentElement.style.setProperty(
-            "--sidebar-width", value + "px");
+        document.documentElement.style.setProperty("--sidebar-width", value + "px");
     }
     updateVariable();
 });
@@ -589,11 +586,9 @@ waitForElement([
 waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
     const observer = new ResizeObserver(updateVariable);
     observer.observe(resizeHost);
-    function updateVariable([ event ]) {
-        document.documentElement.style.setProperty(
-            "--main-view-width", event.contentRect.width + "px");
-        document.documentElement.style.setProperty(
-            "--main-view-height", event.contentRect.height + "px");
+    function updateVariable([event]) {
+        document.documentElement.style.setProperty("--main-view-width", event.contentRect.width + "px");
+        document.documentElement.style.setProperty("--main-view-height", event.contentRect.height + "px");
         if (event.contentRect.width < 700) {
             document.documentElement.classList.add("minimal-player");
         } else {
@@ -639,7 +634,7 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
     updateProgTime();
 
     Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
-        const isExternal = state.devices.some(a => a.is_active);
+        const isExternal = state.devices.some((a) => a.is_active);
         if (isExternal) {
             root.classList.add("is-connectBarVisible");
         } else {
@@ -653,53 +648,44 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
     document.body.appendChild(filePickerForm);
     /** @type {HTMLInputElement} */
     const filePickerInput = filePickerForm.childNodes[0];
-    filePickerInput.accept = [
-        "image/jpeg",
-        "image/apng",
-        "image/avif",
-        "image/gif",
-        "image/png",
-        "image/svg+xml",
-        "image/webp"
-    ].join(",");
+    filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
 
     filePickerInput.onchange = () => {
         if (!filePickerInput.files.length) return;
 
         const file = filePickerInput.files[0];
-        const reader = new FileReader;
+        const reader = new FileReader();
         reader.onload = (event) => {
             const result = event.target.result;
             const id = Spicetify.URI.from(filePickerInput.uri).id;
             try {
-                localStorage.setItem(
-                    "dribbblish:folder-image:" + id,
-                    result
-                );
+                localStorage.setItem("dribbblish:folder-image:" + id, result);
             } catch {
                 Spicetify.showNotification("File too large");
             }
             DribbblishShared.loadPlaylistImage?.call();
-        }
+        };
         reader.readAsDataURL(file);
-    }
+    };
 
-    new Spicetify.ContextMenu.Item("Remove folder image",
+    new Spicetify.ContextMenu.Item(
+        "Remove folder image",
         ([uri]) => {
             const id = Spicetify.URI.from(uri).id;
             localStorage.removeItem("dribbblish:folder-image:" + id);
             DribbblishShared.loadPlaylistImage?.call();
         },
         ([uri]) => Spicetify.URI.isFolder(uri),
-        "x",
+        "x"
     ).register();
-    new Spicetify.ContextMenu.Item("Choose folder image",
+    new Spicetify.ContextMenu.Item(
+        "Choose folder image",
         ([uri]) => {
             filePickerInput.uri = uri;
             filePickerForm.reset();
             filePickerInput.click();
         },
         ([uri]) => Spicetify.URI.isFolder(uri),
-        "edit",
+        "edit"
     ).register();
 })();
diff --git a/user.css b/user.css
index 0a131a7..6cf8142 100644
--- a/user.css
+++ b/user.css
@@ -1,1384 +1,1384 @@
-:root {
-    --bar-height: 70px;
-    --bar-cover-art-size: 40px;
-    --main-gap: 10px;
-    --main-corner-radius: 10px;
-    --scrollbar-vertical-size: 8px;
-    --cover-border-radius: 8px;
-    --playbar-movement-anim-speed: 0.5s;
-    --image-radius: 10px;
-    --sidebar-icons-border-radius: 50%;
-    --song-transition-speed: 3s;
-}
-
-@font-face {
-    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 400;
-}
-
-@font-face {
-    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: "Roboto";
-    src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 400;
-}
-
-@font-face {
-    font-family: "Roboto";
-    src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 500;
-}
-
-
-/* smooth color transitions */
-@property --spice-sidebar {
-  syntax: '<color>';
-  initial-value: magenta;
-  inherits: true;
-}
-
-@property --spice-main {
-  syntax: '<color>';
-  initial-value: magenta;
-  inherits: true;
-}
-
-@property --spice-text {
-  syntax: '<color>';
-  initial-value: magenta;
-  inherits: true;
-}
-
-@property --spice-button {
-  syntax: '<color>';
-  initial-value: magenta;
-  inherits: true;
-}
-
-:root {
-    transition: all var(--song-transition-speed) linear;
-    transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
-}
-
-body {
-    --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
-    --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
-    font-family: var(--glue-font-family);
-    letter-spacing: normal;
-}
-
-.os-scrollbar-handle {
-    background-color: var(--spice-text) !important;
-    border-radius: calc(var(--scrollbar-vertical-size) / 2);
-}
-
-.os-scrollbar-handle:hover {
-    filter: brightness(80%);
-}
-
-::-webkit-scrollbar {
-    width: var(--scrollbar-vertical-size);
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: var(--spice-text) !important;
-    border-radius: calc(var(--scrollbar-vertical-size) / 2);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    filter: brightness(80%);
-}
-
-.main-type-mesto,
-.main-type-mestoBold,
-.main-type-ballad,
-.main-type-balladBold,
-.main-type-canon {
-    font-family: var(--info-font-family);
-    letter-spacing: normal;
-}
-
-.main-type-ballad {
-    font-weight: 500;
-}
-
-.lyrics-lyricsContainer-LyricsLine {
-    font-family: var(--glue-font-family);
-    letter-spacing: -.03em !important;
-}
-
-.main-rootlist-rootlistDivider {
-    display: none;
-}
-
-input {
-    background-color: unset !important;
-    border-radius: 0 !important;
-    padding: 6px 10px 6px 48px;
-    color: var(--spice-text) !important;
-}
-
-input[type=range] {
-    -webkit-appearance: none;
-    background: transparent;
-    padding: 0px;
-}
-
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    margin-top: -4px;
-    border-radius: 50%;
-    background-color: var(--spice-text);
-}
-
-input[type=range]::-webkit-slider-thumb:hover,
-input[type=range]::-webkit-slider-thumb:active {
-    filter: brightness(80%);
-}
-
-input[type=range]::after {
-    z-index: 9999;
-    content: attr(tooltip);
-    position: absolute;
-    min-width: 50px;
-    top: -10px;
-    left: 50%;
-    transform: translateX(calc(-50%));
-    padding: 0 5px;
-    border-radius: 4px;
-    text-align: center;
-    color: var(--spice-sidebar-text);
-    background-color: var(--spice-button);
-    transition: opacity 0.25s ease;
-    opacity: 0;
-}
-
-input[type=range]:hover::after,
-input[type=range]:active::after {
-    opacity: 1;
-}
-
-input[type=range]:focus {
-    outline: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    background-color: rgba(var(--spice-rgb-text), .2);
-    border-radius: 50vw;
-}
-
-input[type=number],
-input[type=text],
-input[type=time] {
-    height: 32px;
-    border: none;
-    border-radius: 4px !important;
-    padding: 0px 10px;
-    background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
-    color: var(--spice-subtext) !important;
-}
-
-input[type=number]:hover,
-input[type=number]:active,
-input[type=text]:hover,
-input[type=text]:active,
-input[type=time]:hover,
-input[type=time]:active {
-    background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
-}
-
-input[type="time"]::-webkit-calendar-picker-indicator {
-    filter: invert(calc(1 - var(--is_light)));
-}
-
-input[type=color] {
-    position: relative;
-    padding: 0px;
-    border: none;
-}
-
-input[type=color]::before {
-    z-index: -1;
-    content: "";
-    position: absolute;
-    inset: -5px;
-    border-radius: 4px;
-    background-color: rgba(var(--spice-rgb-selected-row), .4);
-}
-
-input[type=color]:hover::before,
-input[type=color]:active::before {
-    background-color: rgba(var(--spice-rgb-selected-row), .6);
-}
-
-.x-searchInput-searchInputSearchIcon,
-.x-searchInput-searchInputClearButton {
-    color: var(--spice-text) !important;
-}
-
-.main-home-homeHeader,
-.x-entityHeader-overlay,
-.x-actionBarBackground-background,
-.main-actionBarBackground-background,
-.main-entityHeader-overlay,
-.main-entityHeader-backgroundColor
-{
-    background-color: unset !important;
-    background-image: unset !important;
-}
-
-.main-playButton-PlayButton.main-playButton-primary {
-    color: white;
-}
-
-.connect-title, .connect-header {
-    display: none;
-}
-
-.connect-device-list {
-    margin: 0px -5px;
-}
-
-/* Remove Topbar background colour */
-.main-topBar-background {
-    background-color: unset !important;
-}
-.main-topBar-overlay {
-    background-color: var(--spice-main);
-}
-
-.main-entityHeader-shadow,
-.main-contextMenu-menu,
-.connect-device-list-container {
-    box-shadow: 0 4px 20px #21212130;
-}
-
-.main-trackList-playingIcon {
-    filter: grayscale(1);
-}
-
-span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
-    fill: var(--spice-button);
-}
-span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
-    fill: var(--spice-text);
-}
-
-/* Full window artist background */
-.main-entityHeader-background.main-entityHeader-gradient {
-    opacity: 0.3;
-}
-
-.main-entityHeader-container.main-entityHeader-withBackgroundImage,
-.main-entityHeader-background,
-.main-entityHeader-background.main-entityHeader-overlay:after {
-    height: 100vh;
-}
-
-.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
-    justify-content: center;
-}
-
-.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
-    padding-left: 9%;
-}
-
-.main-entityHeader-background.main-entityHeader-overlay:after {
-    background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
-}
-
-.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
-    font-size: 120px !important;
-    line-height: 120px !important;
-}
-
-.main-contextMenu-menu {
-    background-color: var(--spice-button);
-}
-
-.main-contextMenu-menuHeading,
-.main-contextMenu-menuItemButton,
-.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
-.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
-    color: var(--spice-main);
-}
-
-.main-playPauseButton-button {
-    background-color: var(--spice-button);
-    color: white;
-}
-
-/** Queue page header */
-.queue-queue-title,
-.queue-playHistory-title {
-    color: var(--spice-text) !important;
-}
-
-/** Artist page */
-.artist-artistOverview-heading {
-    color: var(--spice-text) !important;
-}
-.artist-artistAbout-content .artist-artistAbout-cityBlock div,
-.artist-artistAbout-content .artist-artistAbout-stats div {
-    color: var(--spice-text) !important;
-}
-.artist-artistAbout-content div {
-    color: var(--spice-text) !important;
-}
-
-/** Cards */
-.main-cardImage-imageWrapper {
-    background-color: transparent;
-    box-shadow: unset;
-    -webkit-box-shadow: unset;
-}
-
-.main-cardImage-imagePlaceholder, .main-cardImage-image {
-    border-radius: var(--cover-border-radius);
-}
-
-.main-rootlist-rootlistDivider {
-    background-color: unset;
-}
-
-.main-nowPlayingBar-nowPlayingBar {
-    height: var(--bar-height);
-}
-
-.Root__top-bar {
-    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
-}
-
-.main-topBar-background {
-    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
-}
-
-.Root__main-view {
-    background-color: var(--spice-main);
-    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
-    overflow: hidden;
-}
-
-.main-buddyFeed-buddyFeed {
-    box-shadow: unset;
-    -webkit-box-shadow: unset;
-    z-index: 0;
-}
-
-.main-buddyFeed-headerTitle,
-.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
-    color: var(--spice-sidebar-text);
-}
-
-.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
-.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
-.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
-.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
-    color: rgba(var(--spice-rgb-sidebar-text), 0.8);
-}
-
-.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
-.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: var(--sidebar-icons-border-radius);
-}
-
-.view-homeShortcutsGrid-shortcut {
-    overflow: hidden;
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4);
-}
-
-.view-homeShortcutsGrid-shortcut:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.6);
-}
-
-.cover-art,
-.main-userWidget-box.update-avail,
-.view-homeShortcutsGrid-shortcut,
-:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
-    border-radius: var(--image-radius) !important;
-}
-
-.main-avatar-image,
-.main-userWidget-box:not(.update-avail),
-.main-avatar-userIcon,
-.view-homeShortcutsGrid-shortcutLink {
-    border-radius: var(--sidebar-icons-border-radius) !important;
-}
-
-.main-userWidget-box {
-    background-color: transparent !important;
-}
-
-.main-userWidget-box.update-avail {
-    backdrop-filter: invert(0.1);
-}
-
-.main-avatar-avatar.main-avatar-withBadge:after {
-    box-shadow: 0 0 0 2px var(--spice-sidebar);
-    background-color: var(--spice-notification);
-    right: 0;
-}
-
-.Root__now-playing-bar {
-    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
-    background-color: unset;
-}
-
-.main-nowPlayingBar-container {
-    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
-    background-color: unset;
-    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
-    border-top: 0;
-    min-width: 518px;
-}
-
-.main-buddyFeed-findFriendsButton {
-    color: var(--spice-sidebar-text);
-}
-
-.main-connectBar-connectBar {
-    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
-    border: 2px solid var(--spice-main);
-    border-top: 0;
-    background-color: var(--spice-button) !important;
-    color: var(--spice-text) !important;
-}
-
-.Root__nav-bar {
-    height: 100%;
-    z-index: 1;
-    width: var(--sidebar-width) !important;
-}
-
-.main-buddyFeed-buddyFeedRoot {
-    height: 100%;
-}
-
-.main-buddyFeed-buddyFeedRoot .os-content {
-    padding-top: 0 !important;
-}
-
-html,
-.Root__nav-bar,
-.main-buddyFeed-buddyFeed {
-    background-color: var(--spice-sidebar) !important;
-}
-
-html {
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.Root__nav-bar .link-subtle,
-.main-rootlist-rootlistItemLink:link,
-.main-rootlist-rootlistItemLink:visited,
-.main-rootlist-rootlistContent span,
-.main-navBar-entryPoints span {
-    z-index: 999;
-    color: var(--spice-sidebar-text)
-}
-
-.main-navBar-navBarItem svg {
-    width: 24px !important;
-    height: 24px !important;
-}
-
-.main-navBar-navBarItem {
-    position: relative;
-    padding: 0px;
-}
-
-#spicetify-show-list >* {
-    padding: 0 8px;
-}
-
-.main-rootlist-statusIcons {
-    color: var(--spice-sidebar-text);
-    padding-right: 16px;
-}
-
-.main-rootlist-statusIcons .main-playButton-button {
-    color: var(--spice-sidebar-text);
-}
-
-.main-rootlist-expandArrow {
-    position: absolute;
-    top: 20px;
-    right: 12px;
-    width: 16px;
-    height: 16px;
-    color: var(--spice-sidebar-text) !important;
-    background-color: var(--spice-button);
-    border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--spice-sidebar);
-    opacity: 0;
-}
-
-li.GlueDropTarget:hover .main-rootlist-expandArrow {
-    opacity: 1;
-}
-
-html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
-    opacity: 1;
-}
-
-.main-rootlist-expandArrow::before {
-    font-size: 10px;
-    padding-bottom: 3px;
-}
-
-html.sidebar-hide-text .main-rootlist-expandArrow {
-    right: 4px;
-}
-
-html.sidebar-hide-text .main-navBar-navBarItem span,
-html.sidebar-hide-text .main-rootlist-rootlistContent span,
-html.sidebar-hide-text .main-rootlist-rootlistItem span,
-html.sidebar-hide-text .main-rootlist-statusIcons,
-html.sidebar-hide-text .GlueDropTarget span {
-    display: none;
-}
-
-.main-rootlist-rootlist {
-    margin-top: 0;
-}
-
-.main-rootlist-rootlist::before,
-.main-rootlist-rootlist::after {
-    z-index: 10;
-    position: absolute;
-    content: "";
-    left: 0px;
-    right: 0px;
-    pointer-events: none;
-    transition: height 0.5s ease;
-}
-
-.main-rootlist-rootlist.no-top-shadow::before {
-    height: 0px;
-}
-
-.main-rootlist-rootlist.no-bottom-shadow::after {
-    height: 0px;
-}
-
-.main-rootlist-rootlist::before {
-    top: 0px;
-    height: 5%;
-    background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
-}
-
-.main-rootlist-rootlist::after {
-    bottom: 0px;
-    height: 15%;
-    background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
-}
-
-.Root__nav-bar .os-scrollbar-vertical,
-.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
-    display: none;
-}
-
-.x-toggle-indicatorWrapper {
-    background-color: transparent;
-    backdrop-filter: invert(0.25);
-}
-
-input:checked~.x-toggle-indicatorWrapper {
-    background-color: rgba(var(--spice-rgb-button), 0.4);
-}
-
-input:hover:checked~.x-toggle-indicatorWrapper {
-    background-color: rgba(var(--spice-rgb-button), 0.5) !important;
-}
-
-input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
-    background-color: transparent;
-    backdrop-filter: invert(0.4);
-}
-
-/** */
-.main-topBar-historyButtons .main-topBar-button {
-    background-color: unset;
-    width: 24px;
-    height: 24px;
-}
-
-.main-topBar-historyButtons svg {
-    color: var(--spice-button);
-    fill: var(--spice-button);
-}
-
-.playback-bar__progress-time,
-.playback-bar__progress-time-elapsed,
-.main-playbackBarRemainingTime-container {
-    display: none;
-}
-
-.playback-bar {
-    position: absolute;
-    width: var(--main-view-width);
-    left: var(--sidebar-width);
-    bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
-}
-
-.Root.is-connectBarVisible .playback-bar {
-    bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
-}
-
-.main-nowPlayingWidget-coverArt .cover-art {
-    width: var(--bar-cover-art-size) !important;
-    height: var(--bar-cover-art-size) !important;
-}
-
-.player-controls__buttons {
-    margin-bottom: 0;
-    width: 192px;
-}
-
-.progress-bar {
-    --progress-bar-height: 2px;
-    --fg-color: var(--spice-button);
-    --bg-color: rgba(var(--spice-rgb-text), .2);
-}
-
-.progress-bar__slider {
-    display: block !important;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.progress-bar:hover .progress-bar__slider,
-.progress-bar:active .progress-bar__slider {
-    opacity: 1;
-}
-
-.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
-    transition: transform var(--playbar-movement-anim-speed) ease;
-}
-
-.progress-bar:not(:active) .progress-bar__slider {
-    transition-property: left,opacity;
-}
-
-.playback-bar .prog-tooltip {
-    position: absolute;
-    min-width: 100px;
-    top: -35px;
-    left: 50%;
-    transform: translateX(calc(-50%));
-    padding: 0 5px;
-    border-radius: 4px;
-    text-align: center;
-    color: var(--spice-text);
-    background-color: var(--spice-button);
-    pointer-events: none;
-}
-
-.playback-bar:not(:active) .prog-tooltip {
-    transition: transform var(--playbar-movement-anim-speed) ease;
-}
-
-.minimal-player .player-controls__buttons {
-    width: 120px;
-    gap: 0px;
-}
-
-.minimal-player .player-controls__left,
-.minimal-player .player-controls__right {
-    --button-size: 16px !important;
-    gap: 0px;
-}
-
-.minimal-player .volume-bar {
-    flex: 0 1 70px;
-}
-.extra-minimal-player .player-controls__buttons {
-    width: 64px;
-}
-.extra-minimal-player .main-shuffleButton-button,
-.extra-minimal-player .main-repeatButton-button,
-.extra-minimal-player .ExtraControls__connect-device-picker,
-.extra-minimal-player .volume-bar .progress-bar-wrapper {
-    display: none;
-}
-.extra-minimal-player .volume-bar {
-    flex: 0 0 32px;
-}
-
-.main-trackInfo-name {
-    font-weight: 500;
-}
-
-.main-topBar-topbarContent .main-playButton-PlayButton {
-    --size: 35px !important;
-}
-
-.main-entityHeader-image {
-    border-radius: 5px;
-}
-
-.main-entityHeader-metaDataText,
-.main-duration-container {
-    color: var(--spice-subtext);
-}
-
-/** Sidebar */
-.main-rootlist-rootlist .os-content {
-    padding: 0 0 8px 0 !important;
-}
-
-.main-rootlist-rootlistDividerContainer {
-    display: none;
-}
-
-.main-rootlist-rootlistItem a {
-    align-items: center;
-    border-radius: 4px;
-    display: flex;
-    height: 56px;
-    padding: 0 12px;
-}
-
-img.playlist-picture {
-    width: 32px;
-    height: 32px;
-    flex: 0 0 32px;
-    background-size: cover;
-    background-position: center;
-    border-radius: var(--sidebar-icons-border-radius);
-}
-
-.main-rootlist-rootlistItem a span {
-    margin-left: 24px;
-}
-
-.main-rootlist-rootlistItem {
-    padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width));
-    padding-right: 0;
-    transition: padding-left .5s ease;
-}
-
-html.sidebar-hide-text .main-rootlist-rootlistItem {
-    padding: 0;
-}
-
-.main-rootlist-dropIndicator {
-    background: var(--spice-selected-row);
-    height: 2px;
-}
-
-.main-rootlist-rootlistPlaylistsScrollNode {
-    padding: 0px;
-}
-
-.main-collectionLinkButton-icon,
-.main-createPlaylistButton-icon {
-    margin: 0px;
-}
-
-.main-navBar-navBarLink,
-.main-collectionLinkButton-collectionLinkButton,
-.main-createPlaylistButton-button {
-    gap: 24px;
-    height: 56px;
-}
-
-li.GlueDropTarget {
-    padding: 0 8px;
-}
-
-/** OS-specific window controls dodge */
-#main:not([top-bar^="none"]) .main-topBar-background {
-    -webkit-app-region: no-drag;
-}
-
-#main:not([top-bar="none-padding"]) .main-navBar-navBar,
-#main:not([top-bar="none-padding"]) .main-buddyFeed-header,
-#main:not([top-bar="none-padding"]) .main-navBar-entryPoints {
-    padding-top: 8px !important;
-}
-
-#main:not([top-bar^="none"]) {
-    padding-top: 31px;
-}
-
-#main:not([top-bar^="none"])::before {
-    z-index: 999;
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 135px;
-    height: 31px;
-    background-color: rgba(0, 0, 0, 0.53);
-    -webkit-app-region: drag;
-    pointer-events: none;
-}
-
-#main[top-bar="solid"]::before {
-    right: 0px;
-    background-color: black;
-}
-
-#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar {
-    padding-top: 24px;
-}
-
-#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
-    padding-top: 22px;
-}
-
-#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header {
-    padding-top: 32px;
-}
-
-#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
-    padding-right: 167px;
-}
-
-.main-topBar-container {
-    max-width: unset;
-}
-
-/** Custom elements */
-.dribs-playlist-list {
-    padding-bottom: 86px;
-}
-
-#dribbblish-back-shadow {
-    position: fixed;
-    width: var(--main-view-width);
-    height: calc(var(--main-view-height) + var(--bar-height));
-    box-shadow: 0 0 10px 3px #0000003b;
-    border-radius: var(--main-corner-radius);
-    z-index: 2;
-    pointer-events: none;
-}
-
-#dribbblish-config {
-    display: none;
-    z-index: 99999;
-    position: absolute;
-    inset: 0px;
-    align-items: center;
-    justify-content: center;
-    color: var(--spice-text);
-}
-
-#dribbblish-config[active] {
-    display: flex;
-}
-
-.dribbblish-config-container {
-    z-index: 1;
-    position: relative;
-    width: clamp(500px, 50%, 650px);
-    background-color: rgba(var(--spice-rgb-main), 0.9);
-    backdrop-filter: blur(3px);
-    padding: 20px 15px;
-    border-radius: var(--main-corner-radius);
-    box-shadow: 0 0 10px 3px #0000003b;
-    display: flex;
-    gap: 5px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.dribbblish-config-areas {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: 16px;
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 0px 50px;
-}
-
-.dribbblish-config-area,
-.dribbblish-config-area-items {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.dribbblish-config-area[collapsed] {
-    overflow: hidden;
-    min-height: 38px; /* for some reason height alone isn't enough */
-    height: 38px;
-}
-
-.dribbblish-config-area:empty {
-    display: none
-}
-
-.dribbblish-config-area > h2 {
-    position: relative;
-    text-align: center;
-    height: 38px;
-}
-
-.dribbblish-config-area > h2 svg {
-    position: absolute;
-    margin-left: 10px;
-    bottom: -2px;
-    color: var(--spice-text);
-    padding: 0px;
-    height: 100%;
-    stroke-width: 2px;
-    transform: rotate(90deg);
-}
-
-.dribbblish-config-area[collapsed] > h2 svg {
-    transform: rotate(270deg);
-}
-
-.dribbblish-config-item {
-    position: relative;
-    width: 100%;
-    height: min-content;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto auto;
-    gap: 5px 10px;
-    grid-template-areas:
-        "header input"
-        "description input";
-}
-
-.dribbblish-config-item[parent] {
-    padding-left: 16px;
-}
-
-.dribbblish-config-item[hidden=true] {
-    display: none;
-}
-
-.dribbblish-config-item > .x-settings-title {
-    grid-area: header;
-    margin: 0px;
-    height: min-content;
-    position: relative;
-    bottom: 0px;
-}
-
-.dribbblish-config-item > .x-settings-title.no-desc {
-    bottom: -10px;
-}
-
-.dribbblish-config-item > .main-type-mesto {
-    grid-area: description;
-    height: min-content;
-    color: var(--spice-subtext);
-}
-
-.dribbblish-config-item > .x-settings-secondColumn {
-    grid-area: input;
-}
-
-.dribbblish-config-close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-}
-
-.dribbblish-config-backdrop {
-    position: absolute;
-    content: "";
-    inset: 0px;
-    backdrop-filter: blur(3px) brightness(60%);
-}
-
-/** Rearrange player bar */
-.main-nowPlayingBar-left {
-    order: 1;
-    flex: 1;
-    width: auto;
-    min-width: 0 !important;
-}
-
-.main-nowPlayingBar-center {
-    order: 0;
-    flex: 1;
-    width: auto;
-    min-width: unset !important;
-}
-
-.main-nowPlayingBar-right {
-    order: 2;
-    flex: 1;
-    width: auto;
-    min-width: unset !important;
-}
-
-.main-nowPlayingWidget-nowPlaying {
-    justify-content: center;
-}
-
-.player-controls {
-    justify-content: flex-start;
-    flex-direction: row;
-}
-
-.main-playPauseButton-button {
-    background-color: transparent;
-}
-
-.main-playPauseButton-button svg {
-    width: 32px !important;
-    height: 32px !important;
-    color: var(--spice-button);
-}
-
-/* Spotify style player bar */
-#main[player-controls=spotify] .main-nowPlayingBar-left {
-    order: 0;
-}
-
-#main[player-controls=spotify] .main-nowPlayingBar-center {
-    order: 1;
-}
-
-#main[player-controls=spotify] .main-nowPlayingWidget-nowPlaying {
-    justify-content: left;
-}
-
-#main[player-controls=spotify] .player-controls {
-    justify-content: center;
-}
-
-/** Main container */
-.contentSpacing,
-.artist-artistDiscography-headerContainer {
-    padding-left: 64px;
-    padding-right: 64px;
-}
-
-@media (min-width: 1024px) {
-    .contentSpacing,
-    .artist-artistDiscography-headerContainer {
-        padding-left: 128px;
-        padding-right: 128px;
-    }
-}
-
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
-.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
-.main-createPlaylistButton-button {
-    opacity: 1;
-}
-
-.main-collectionLinkButton-collectionLinkText,
-.main-createPlaylistButton-text,
-.main-navBar-navBarLink > span {
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: normal;
-    line-height: 20px;
-    text-transform: none;
-}
-
-.main-likedSongsButton-likedSongsIcon,
-.main-yourEpisodesButton-yourEpisodesIcon,
-.main-createPlaylistButton-createPlaylistIcon {
-    background: unset !important;
-}
-
-.main-createPlaylistButton-icon,
-.main-collectionLinkButton-icon,
-.main-createPlaylistButton-icon {
-    height: 40px;
-}
-
-.main-likedSongsButton-likedSongsIcon svg,
-.main-yourEpisodesButton-yourEpisodesIcon svg,
-.main-createPlaylistButton-createPlaylistIcon svg {
-    fill: var(--spice-sidebar-text);
-    width: 32px;
-    height: 32px;
-}
-.main-yourEpisodesButton-yourEpisodesIcon svg path {
-    fill: var(--spice-sidebar-text);
-}
-
-/** Grid */
-.Root__top-container {
-    grid-template-areas:
-        "nav-bar main-view buddy-feed"
-        "nav-bar now-playing-bar buddy-feed";
-    padding: var(--main-gap) 0;
-}
-
-html:not(.buddyfeed-visible) .Root__top-container {
-    padding-right: var(--main-gap);
-}
-
-/** Minimal profile button */
-span.main-userWidget-displayName,
-.main-userWidget-box svg {
-    display: none;
-}
-
-/** Sidebar config */
-#dribs-hidden-list {
-    background-color: rgba(var(--spice-rgb-main), .3);
-}
-
-#dribs-sidebar-config {
-    position: relative;
-    width: 100%;
-    height: 0;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    top: -30px;
-    left: 0;
-}
-
-#dribs-sidebar-config button {
-    min-width: 60px;
-    border-radius: 3px;
-    background-color: var(--spice-main);
-    color: var(--spice-text);
-    border: 1px solid var(--spice-text);
-}
-#dribs-sidebar-config button:disabled {
-    color: var(--spice-button-disabled);
-}
-
-.main-navBar-entryPoints {
-    --left-sidebar-padding-left: 24px;
-    --left-sidebar-padding-right: 24px;
-
-    padding: 0px 8px;
-}
-
-.main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2),
-.main-navBar-entryPoints,
-#spicetify-show-list,
-.main-rootlist-rootlistContent .os-content {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-#spicetify-show-list:empty {
-    display: none;
-}
-
-.main-rootlist-wrapper > div:nth-child(2) > li img,
-.main-navBar-navBarLink > .icon {
-    z-index: 100;
-}
-
-.main-collectionLinkButton-collectionLinkButton,
-.main-createPlaylistButton-button {
-    position: relative;
-}
-
-.main-navBar-navBarLink::before,
-.main-collectionLinkButton-collectionLinkButton::before,
-.main-createPlaylistButton-button::before,
-.main-rootlist-rootlistItemLink::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    inset: 0px;
-    left: -200%;
-    opacity: 0.4;
-    background-color: black;
-    border-radius: var(--image-radius);
-    pointer-events: none;
-    transition: all calc(var(--sidebar-icons-hover-animation) * 0.2s) ease;
-    transition-property: left, opacity;
-}
-
-.main-navBar-navBarLink:hover::before,
-.main-collectionLinkButton-collectionLinkButton:hover::before,
-.main-createPlaylistButton-button:hover::before,
-.main-rootlist-rootlistItemLink:hover::before,
-.main-navBar-navBarLinkActive::before,
-.main-collectionLinkButton-selected::before {
-    left: 0px;
-}
-
-.main-navBar-navBarLinkActive:hover::before,
-.main-collectionLinkButton-selected:hover::before {
-    opacity: 0.6;
-}
-
-.main-rootlist-rootlist .main-navBar-navBarItem:hover::before {
-    margin: 0 8px;
-}
-
-.main-navBar-navBarLinkActive,
-.main-collectionLinkButton-selected {
-    background-color: transparent;
-}
-
-.main-navBar-navBar a:hover,
-.main-navBar-navBar a:hover span {
-    color: var(--spice-sidebar-text) !important;
-}
-
-div.GlueDropTarget.personal-library  {
-    padding: 0px;
-}
-div.GlueDropTarget.personal-library >* {
-    padding: 0 16px;
-    height: 56px;
-    border-radius: 4px;
-}
-
-div.GlueDropTarget.personal-library >*.active {
-    background: transparent;
-}
-
-/** Big cover, small cover */
-.main-coverSlotExpanded-container {
-    position: fixed;
-    z-index: 2;
-    width: 250px;
-    height: 250px;
-    bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
-    left: calc(var(--sidebar-width) + 10px);
-}
-
-.Root.is-connectBarVisible .main-coverSlotExpanded-container {
-    bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
-}
-
-html.right-expanded-cover .main-coverSlotExpanded-container {
-    right: calc(var(--main-gap) + 10px);
-    left: unset;
-}
-
-html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
-    right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
-    left: unset;
-}
-
-.main-coverSlotExpanded-container img {
-    border-radius: 4px;
-}
-
-.cover-art {
-    border-radius: 4px;
-}
-
-.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
-    opacity: 0;
-}
-
-.main-nowPlayingWidget-coverExpanded {
-    transform: translateX(-27px);
-}
-
-/** Mini dribbblish */
-.x-categoryCard-CategoryCard > div {
-    background-color: var(--spice-main);
-    width: calc(100% - 14px);
-    height: calc(100% - 6px);
-    margin: 3px 10px;
-    border-radius: 5px;
-}
-
-.x-categoryCard-CategoryCard {
-    height: 100px;
-}
-
-.x-categoryCard-image {
-    width: 50px !important;
-    height: 50px !important;
-}
-
-.x-heroCategoryCard-HeroCategoryCard > div {
-    background-color: var(--spice-main);
-    width: calc(100% - 20px);
-    height: calc(100% - 6px);
-    margin: 3px 16px;
-    border-radius: 5px;
-}
-
-.main-dropDown-dropDown,
-.x-sortBox-sortDropdown {
-    background-color: rgba(var(--spice-rgb-selected-row), .4) !important;
-    color: var(--spice-subtext);
-}
-
-.main-dropDown-dropDown:hover,
-.x-sortBox-sortDropdown:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
-}
-
-.connect-device-list-item:focus,
-.connect-device-list-item:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), .3);
-}
-
-.bookmark-filter {
-    color: var(--spice-main) !important;
-}
-
-/* 1.1.56 */
-.main-navBar-navBar {
-    width: var(--sidebar-width) !important;
-}
-
-.main-entityHeader-container.main-entityHeader-nonWrapped {
-    padding-left: 64px;
-    padding-right: 64px;
-}
-
-@media (min-width: 1024px) {
-    .main-entityHeader-container.main-entityHeader-nonWrapped {
-        padding-left: 128px;
-        padding-right: 128px;
-    }
-}
-
-.main-userWidget-dropDownMenu > li > button {
-    color: rgba(var(--spice-rgb-selected-row), .7);
-    padding-left: 8px;
-    text-decoration: none;
-}
-.main-userWidget-dropDownMenu > li > button:hover,
-.main-userWidget-dropDownMenu > li > button:focus {
-    color: var(--spice-text);
-}
-
-.main-userWidget-dropDownMenu svg {
-    position: unset;
-}
-.main-userWidget-dropDownMenu > li svg {
-    position: absolute;
-}
-.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
-    z-index: 4;
-}
-
-.main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
-  color: var(--spice-subtext);
-}
-
-/* explicit icon */
-.main-tag-container {
-    background-color: var(--spice-text);
-}
+:root {
+    --bar-height: 70px;
+    --bar-cover-art-size: 40px;
+    --main-gap: 10px;
+    --main-corner-radius: 10px;
+    --scrollbar-vertical-size: 8px;
+    --cover-border-radius: 8px;
+    --playbar-movement-anim-speed: 0.5s;
+    --image-radius: 10px;
+    --sidebar-icons-border-radius: 50%;
+    --song-transition-speed: 3s;
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+}
+
+/* smooth color transitions */
+@property --spice-sidebar {
+    syntax: "<color>";
+    initial-value: magenta;
+    inherits: true;
+}
+
+@property --spice-main {
+    syntax: "<color>";
+    initial-value: magenta;
+    inherits: true;
+}
+
+@property --spice-text {
+    syntax: "<color>";
+    initial-value: magenta;
+    inherits: true;
+}
+
+@property --spice-button {
+    syntax: "<color>";
+    initial-value: magenta;
+    inherits: true;
+}
+
+:root {
+    transition: all var(--song-transition-speed) linear;
+    transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
+}
+
+body {
+    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
+    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
+    font-family: var(--glue-font-family);
+    letter-spacing: normal;
+}
+
+.os-scrollbar-handle {
+    background-color: var(--spice-text) !important;
+    border-radius: calc(var(--scrollbar-vertical-size) / 2);
+}
+
+.os-scrollbar-handle:hover {
+    filter: brightness(80%);
+}
+
+::-webkit-scrollbar {
+    width: var(--scrollbar-vertical-size);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--spice-text) !important;
+    border-radius: calc(var(--scrollbar-vertical-size) / 2);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    filter: brightness(80%);
+}
+
+.main-type-mesto,
+.main-type-mestoBold,
+.main-type-ballad,
+.main-type-balladBold,
+.main-type-canon {
+    font-family: var(--info-font-family);
+    letter-spacing: normal;
+}
+
+.main-type-ballad {
+    font-weight: 500;
+}
+
+.lyrics-lyricsContainer-LyricsLine {
+    font-family: var(--glue-font-family);
+    letter-spacing: -0.03em !important;
+}
+
+.main-rootlist-rootlistDivider {
+    display: none;
+}
+
+input {
+    background-color: unset !important;
+    border-radius: 0 !important;
+    padding: 6px 10px 6px 48px;
+    color: var(--spice-text) !important;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    background: transparent;
+    padding: 0px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    margin-top: -4px;
+    border-radius: 50%;
+    background-color: var(--spice-text);
+}
+
+input[type="range"]::-webkit-slider-thumb:hover,
+input[type="range"]::-webkit-slider-thumb:active {
+    filter: brightness(80%);
+}
+
+input[type="range"]::after {
+    z-index: 9999;
+    content: attr(tooltip);
+    position: absolute;
+    min-width: 50px;
+    top: -10px;
+    left: 50%;
+    transform: translateX(calc(-50%));
+    padding: 0 5px;
+    border-radius: 4px;
+    text-align: center;
+    color: var(--spice-sidebar-text);
+    background-color: var(--spice-button);
+    transition: opacity 0.25s ease;
+    opacity: 0;
+}
+
+input[type="range"]:hover::after,
+input[type="range"]:active::after {
+    opacity: 1;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    background-color: rgba(var(--spice-rgb-text), 0.2);
+    border-radius: 50vw;
+}
+
+input[type="number"],
+input[type="text"],
+input[type="time"] {
+    height: 32px;
+    border: none;
+    border-radius: 4px !important;
+    padding: 0px 10px;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+    color: var(--spice-subtext) !important;
+}
+
+input[type="number"]:hover,
+input[type="number"]:active,
+input[type="text"]:hover,
+input[type="text"]:active,
+input[type="time"]:hover,
+input[type="time"]:active {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+}
+
+input[type="time"]::-webkit-calendar-picker-indicator {
+    filter: invert(calc(1 - var(--is_light)));
+}
+
+input[type="color"] {
+    position: relative;
+    padding: 0px;
+    border: none;
+}
+
+input[type="color"]::before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    inset: -5px;
+    border-radius: 4px;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+}
+
+input[type="color"]:hover::before,
+input[type="color"]:active::before {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6);
+}
+
+.x-searchInput-searchInputSearchIcon,
+.x-searchInput-searchInputClearButton {
+    color: var(--spice-text) !important;
+}
+
+.main-home-homeHeader,
+.x-entityHeader-overlay,
+.x-actionBarBackground-background,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor {
+    background-color: unset !important;
+    background-image: unset !important;
+}
+
+.main-playButton-PlayButton.main-playButton-primary {
+    color: white;
+}
+
+.connect-title,
+.connect-header {
+    display: none;
+}
+
+.connect-device-list {
+    margin: 0px -5px;
+}
+
+/* Remove Topbar background colour */
+.main-topBar-background {
+    background-color: unset !important;
+}
+.main-topBar-overlay {
+    background-color: var(--spice-main);
+}
+
+.main-entityHeader-shadow,
+.main-contextMenu-menu,
+.connect-device-list-container {
+    box-shadow: 0 4px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+    filter: grayscale(1);
+}
+
+span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
+    fill: var(--spice-button);
+}
+span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
+    fill: var(--spice-text);
+}
+
+/* Full window artist background */
+.main-entityHeader-background.main-entityHeader-gradient {
+    opacity: 0.3;
+}
+
+.main-entityHeader-container.main-entityHeader-withBackgroundImage,
+.main-entityHeader-background,
+.main-entityHeader-background.main-entityHeader-overlay:after {
+    height: 100vh;
+}
+
+.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
+    justify-content: center;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
+    padding-left: 9%;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
+}
+
+.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
+    font-size: 120px !important;
+    line-height: 120px !important;
+}
+
+.main-contextMenu-menu {
+    background-color: var(--spice-button);
+}
+
+.main-contextMenu-menuHeading,
+.main-contextMenu-menuItemButton,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+    color: var(--spice-main);
+}
+
+.main-playPauseButton-button {
+    background-color: var(--spice-button);
+    color: white;
+}
+
+/** Queue page header */
+.queue-queue-title,
+.queue-playHistory-title {
+    color: var(--spice-text) !important;
+}
+
+/** Artist page */
+.artist-artistOverview-heading {
+    color: var(--spice-text) !important;
+}
+.artist-artistAbout-content .artist-artistAbout-cityBlock div,
+.artist-artistAbout-content .artist-artistAbout-stats div {
+    color: var(--spice-text) !important;
+}
+.artist-artistAbout-content div {
+    color: var(--spice-text) !important;
+}
+
+/** Cards */
+.main-cardImage-imageWrapper {
+    background-color: transparent;
+    box-shadow: unset;
+    -webkit-box-shadow: unset;
+}
+
+.main-cardImage-imagePlaceholder,
+.main-cardImage-image {
+    border-radius: var(--cover-border-radius);
+}
+
+.main-rootlist-rootlistDivider {
+    background-color: unset;
+}
+
+.main-nowPlayingBar-nowPlayingBar {
+    height: var(--bar-height);
+}
+
+.Root__top-bar {
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.main-topBar-background {
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.Root__main-view {
+    background-color: var(--spice-main);
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+    overflow: hidden;
+}
+
+.main-buddyFeed-buddyFeed {
+    box-shadow: unset;
+    -webkit-box-shadow: unset;
+    z-index: 0;
+}
+
+.main-buddyFeed-headerTitle,
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
+    color: var(--spice-sidebar-text);
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
+.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
+    color: rgba(var(--spice-rgb-sidebar-text), 0.8);
+}
+
+.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
+.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: var(--sidebar-icons-border-radius);
+}
+
+.view-homeShortcutsGrid-shortcut {
+    overflow: hidden;
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+}
+
+.view-homeShortcutsGrid-shortcut:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6);
+}
+
+.cover-art,
+.main-userWidget-box.update-avail,
+.view-homeShortcutsGrid-shortcut,
+:not(.view-homeShortcutsGrid-imageWrapper) > .main-image-image:not(.main-avatar-image) {
+    border-radius: var(--image-radius) !important;
+}
+
+.main-avatar-image,
+.main-userWidget-box:not(.update-avail),
+.main-avatar-userIcon,
+.view-homeShortcutsGrid-shortcutLink {
+    border-radius: var(--sidebar-icons-border-radius) !important;
+}
+
+.main-userWidget-box {
+    background-color: transparent !important;
+}
+
+.main-userWidget-box.update-avail {
+    backdrop-filter: invert(0.1);
+}
+
+.main-avatar-avatar.main-avatar-withBadge:after {
+    box-shadow: 0 0 0 2px var(--spice-sidebar);
+    background-color: var(--spice-notification);
+    right: 0;
+}
+
+.Root__now-playing-bar {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    background-color: unset;
+}
+
+.main-nowPlayingBar-container {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    background-color: unset;
+    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
+    border-top: 0;
+    min-width: 518px;
+}
+
+.main-buddyFeed-findFriendsButton {
+    color: var(--spice-sidebar-text);
+}
+
+.main-connectBar-connectBar {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    border: 2px solid var(--spice-main);
+    border-top: 0;
+    background-color: var(--spice-button) !important;
+    color: var(--spice-text) !important;
+}
+
+.Root__nav-bar {
+    height: 100%;
+    z-index: 1;
+    width: var(--sidebar-width) !important;
+}
+
+.main-buddyFeed-buddyFeedRoot {
+    height: 100%;
+}
+
+.main-buddyFeed-buddyFeedRoot .os-content {
+    padding-top: 0 !important;
+}
+
+html,
+.Root__nav-bar,
+.main-buddyFeed-buddyFeed {
+    background-color: var(--spice-sidebar) !important;
+}
+
+html {
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.Root__nav-bar .link-subtle,
+.main-rootlist-rootlistItemLink:link,
+.main-rootlist-rootlistItemLink:visited,
+.main-rootlist-rootlistContent span,
+.main-navBar-entryPoints span {
+    z-index: 999;
+    color: var(--spice-sidebar-text);
+}
+
+.main-navBar-navBarItem svg {
+    width: 24px !important;
+    height: 24px !important;
+}
+
+.main-navBar-navBarItem {
+    position: relative;
+    padding: 0px;
+}
+
+#spicetify-show-list > * {
+    padding: 0 8px;
+}
+
+.main-rootlist-statusIcons {
+    color: var(--spice-sidebar-text);
+    padding-right: 16px;
+}
+
+.main-rootlist-statusIcons .main-playButton-button {
+    color: var(--spice-sidebar-text);
+}
+
+.main-rootlist-expandArrow {
+    position: absolute;
+    top: 20px;
+    right: 12px;
+    width: 16px;
+    height: 16px;
+    color: var(--spice-sidebar-text) !important;
+    background-color: var(--spice-button);
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--spice-sidebar);
+    opacity: 0;
+}
+
+li.GlueDropTarget:hover .main-rootlist-expandArrow {
+    opacity: 1;
+}
+
+html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
+    opacity: 1;
+}
+
+.main-rootlist-expandArrow::before {
+    font-size: 10px;
+    padding-bottom: 3px;
+}
+
+html.sidebar-hide-text .main-rootlist-expandArrow {
+    right: 4px;
+}
+
+html.sidebar-hide-text .main-navBar-navBarItem span,
+html.sidebar-hide-text .main-rootlist-rootlistContent span,
+html.sidebar-hide-text .main-rootlist-rootlistItem span,
+html.sidebar-hide-text .main-rootlist-statusIcons,
+html.sidebar-hide-text .GlueDropTarget span {
+    display: none;
+}
+
+.main-rootlist-rootlist {
+    margin-top: 0;
+}
+
+.main-rootlist-rootlist::before,
+.main-rootlist-rootlist::after {
+    z-index: 10;
+    position: absolute;
+    content: "";
+    left: 0px;
+    right: 0px;
+    pointer-events: none;
+    transition: height 0.5s ease;
+}
+
+.main-rootlist-rootlist.no-top-shadow::before {
+    height: 0px;
+}
+
+.main-rootlist-rootlist.no-bottom-shadow::after {
+    height: 0px;
+}
+
+.main-rootlist-rootlist::before {
+    top: 0px;
+    height: 5%;
+    background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
+}
+
+.main-rootlist-rootlist::after {
+    bottom: 0px;
+    height: 15%;
+    background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
+}
+
+.Root__nav-bar .os-scrollbar-vertical,
+.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
+    display: none;
+}
+
+.x-toggle-indicatorWrapper {
+    background-color: transparent;
+    backdrop-filter: invert(0.25);
+}
+
+input:checked ~ .x-toggle-indicatorWrapper {
+    background-color: rgba(var(--spice-rgb-button), 0.4);
+}
+
+input:hover:checked ~ .x-toggle-indicatorWrapper {
+    background-color: rgba(var(--spice-rgb-button), 0.5) !important;
+}
+
+input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
+    background-color: transparent;
+    backdrop-filter: invert(0.4);
+}
+
+/** */
+.main-topBar-historyButtons .main-topBar-button {
+    background-color: unset;
+    width: 24px;
+    height: 24px;
+}
+
+.main-topBar-historyButtons svg {
+    color: var(--spice-button);
+    fill: var(--spice-button);
+}
+
+.playback-bar__progress-time,
+.playback-bar__progress-time-elapsed,
+.main-playbackBarRemainingTime-container {
+    display: none;
+}
+
+.playback-bar {
+    position: absolute;
+    width: var(--main-view-width);
+    left: var(--sidebar-width);
+    bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
+}
+
+.Root.is-connectBarVisible .playback-bar {
+    bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
+}
+
+.main-nowPlayingWidget-coverArt .cover-art {
+    width: var(--bar-cover-art-size) !important;
+    height: var(--bar-cover-art-size) !important;
+}
+
+.player-controls__buttons {
+    margin-bottom: 0;
+    width: 192px;
+}
+
+.progress-bar {
+    --progress-bar-height: 2px;
+    --fg-color: var(--spice-button);
+    --bg-color: rgba(var(--spice-rgb-text), 0.2);
+}
+
+.progress-bar__slider {
+    display: block !important;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.progress-bar:hover .progress-bar__slider,
+.progress-bar:active .progress-bar__slider {
+    opacity: 1;
+}
+
+.progress-bar:not(:active) .x-progressBar-progressBarBg > div:first-child > div {
+    transition: transform var(--playbar-movement-anim-speed) ease;
+}
+
+.progress-bar:not(:active) .progress-bar__slider {
+    transition-property: left, opacity;
+}
+
+.playback-bar .prog-tooltip {
+    position: absolute;
+    min-width: 100px;
+    top: -35px;
+    left: 50%;
+    transform: translateX(calc(-50%));
+    padding: 0 5px;
+    border-radius: 4px;
+    text-align: center;
+    color: var(--spice-text);
+    background-color: var(--spice-button);
+    pointer-events: none;
+}
+
+.playback-bar:not(:active) .prog-tooltip {
+    transition: transform var(--playbar-movement-anim-speed) ease;
+}
+
+.minimal-player .player-controls__buttons {
+    width: 120px;
+    gap: 0px;
+}
+
+.minimal-player .player-controls__left,
+.minimal-player .player-controls__right {
+    --button-size: 16px !important;
+    gap: 0px;
+}
+
+.minimal-player .volume-bar {
+    flex: 0 1 70px;
+}
+.extra-minimal-player .player-controls__buttons {
+    width: 64px;
+}
+.extra-minimal-player .main-shuffleButton-button,
+.extra-minimal-player .main-repeatButton-button,
+.extra-minimal-player .ExtraControls__connect-device-picker,
+.extra-minimal-player .volume-bar .progress-bar-wrapper {
+    display: none;
+}
+.extra-minimal-player .volume-bar {
+    flex: 0 0 32px;
+}
+
+.main-trackInfo-name {
+    font-weight: 500;
+}
+
+.main-topBar-topbarContent .main-playButton-PlayButton {
+    --size: 35px !important;
+}
+
+.main-entityHeader-image {
+    border-radius: 5px;
+}
+
+.main-entityHeader-metaDataText,
+.main-duration-container {
+    color: var(--spice-subtext);
+}
+
+/** Sidebar */
+.main-rootlist-rootlist .os-content {
+    padding: 0 0 8px 0 !important;
+}
+
+.main-rootlist-rootlistDividerContainer {
+    display: none;
+}
+
+.main-rootlist-rootlistItem a {
+    align-items: center;
+    border-radius: 4px;
+    display: flex;
+    height: 56px;
+    padding: 0 12px;
+}
+
+img.playlist-picture {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 32px;
+    background-size: cover;
+    background-position: center;
+    border-radius: var(--sidebar-icons-border-radius);
+}
+
+.main-rootlist-rootlistItem a span {
+    margin-left: 24px;
+}
+
+.main-rootlist-rootlistItem {
+    padding-left: calc(var(--indentation) * var(--left-sidebar-item-indentation-width));
+    padding-right: 0;
+    transition: padding-left 0.5s ease;
+}
+
+html.sidebar-hide-text .main-rootlist-rootlistItem {
+    padding: 0;
+}
+
+.main-rootlist-dropIndicator {
+    background: var(--spice-selected-row);
+    height: 2px;
+}
+
+.main-rootlist-rootlistPlaylistsScrollNode {
+    padding: 0px;
+}
+
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon {
+    margin: 0px;
+}
+
+.main-navBar-navBarLink,
+.main-collectionLinkButton-collectionLinkButton,
+.main-createPlaylistButton-button {
+    gap: 24px;
+    height: 56px;
+}
+
+li.GlueDropTarget {
+    padding: 0 8px;
+}
+
+/** OS-specific window controls dodge */
+#main:not([top-bar^="none"]) .main-topBar-background {
+    -webkit-app-region: no-drag;
+}
+
+#main:not([top-bar="none-padding"]) .main-navBar-navBar,
+#main:not([top-bar="none-padding"]) .main-buddyFeed-header,
+#main:not([top-bar="none-padding"]) .main-navBar-entryPoints {
+    padding-top: 8px !important;
+}
+
+#main:not([top-bar^="none"]) {
+    padding-top: 31px;
+}
+
+#main:not([top-bar^="none"])::before {
+    z-index: 999;
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 135px;
+    height: 31px;
+    background-color: rgba(0, 0, 0, 0.53);
+    -webkit-app-region: drag;
+    pointer-events: none;
+}
+
+#main[top-bar="solid"]::before {
+    right: 0px;
+    background-color: black;
+}
+
+#main[top-bar="none-padding"] .spotify__os--is-windows .main-navBar-navBar {
+    padding-top: 24px;
+}
+
+#main[top-bar="none-padding"] .spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
+    padding-top: 22px;
+}
+
+#main[top-bar="none-padding"] .spotify__os--is-windows .main-buddyFeed-header {
+    padding-top: 32px;
+}
+
+#main[top-bar="none-padding"] .spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .Root__top-bar + .main-buddyFeed-buddyFeedRoot .main-topBar-container {
+    padding-right: 167px;
+}
+
+.main-topBar-container {
+    max-width: unset;
+}
+
+/** Custom elements */
+.dribs-playlist-list {
+    padding-bottom: 86px;
+}
+
+#dribbblish-back-shadow {
+    position: fixed;
+    width: var(--main-view-width);
+    height: calc(var(--main-view-height) + var(--bar-height));
+    box-shadow: 0 0 10px 3px #0000003b;
+    border-radius: var(--main-corner-radius);
+    z-index: 2;
+    pointer-events: none;
+}
+
+#dribbblish-config {
+    display: none;
+    z-index: 99999;
+    position: absolute;
+    inset: 0px;
+    align-items: center;
+    justify-content: center;
+    color: var(--spice-text);
+}
+
+#dribbblish-config[active] {
+    display: flex;
+}
+
+.dribbblish-config-container {
+    z-index: 1;
+    position: relative;
+    width: clamp(500px, 50%, 650px);
+    background-color: rgba(var(--spice-rgb-main), 0.9);
+    backdrop-filter: blur(3px);
+    padding: 20px 15px;
+    border-radius: var(--main-corner-radius);
+    box-shadow: 0 0 10px 3px #0000003b;
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.dribbblish-config-areas {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 16px;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 0px 50px;
+}
+
+.dribbblish-config-area,
+.dribbblish-config-area-items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.dribbblish-config-area[collapsed] {
+    overflow: hidden;
+    min-height: 38px; /* for some reason height alone isn't enough */
+    height: 38px;
+}
+
+.dribbblish-config-area:empty {
+    display: none;
+}
+
+.dribbblish-config-area > h2 {
+    position: relative;
+    text-align: center;
+    height: 38px;
+}
+
+.dribbblish-config-area > h2 svg {
+    position: absolute;
+    margin-left: 10px;
+    bottom: -2px;
+    color: var(--spice-text);
+    padding: 0px;
+    height: 100%;
+    stroke-width: 2px;
+    transform: rotate(90deg);
+}
+
+.dribbblish-config-area[collapsed] > h2 svg {
+    transform: rotate(270deg);
+}
+
+.dribbblish-config-item {
+    position: relative;
+    width: 100%;
+    height: min-content;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    gap: 5px 10px;
+    grid-template-areas:
+        "header input"
+        "description input";
+}
+
+.dribbblish-config-item[parent] {
+    padding-left: 16px;
+}
+
+.dribbblish-config-item[hidden="true"] {
+    display: none;
+}
+
+.dribbblish-config-item > .x-settings-title {
+    grid-area: header;
+    margin: 0px;
+    height: min-content;
+    position: relative;
+    bottom: 0px;
+}
+
+.dribbblish-config-item > .x-settings-title.no-desc {
+    bottom: -10px;
+}
+
+.dribbblish-config-item > .main-type-mesto {
+    grid-area: description;
+    height: min-content;
+    color: var(--spice-subtext);
+}
+
+.dribbblish-config-item > .x-settings-secondColumn {
+    grid-area: input;
+}
+
+.dribbblish-config-close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+.dribbblish-config-backdrop {
+    position: absolute;
+    content: "";
+    inset: 0px;
+    backdrop-filter: blur(3px) brightness(60%);
+}
+
+/** Rearrange player bar */
+.main-nowPlayingBar-left {
+    order: 1;
+    flex: 1;
+    width: auto;
+    min-width: 0 !important;
+}
+
+.main-nowPlayingBar-center {
+    order: 0;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingBar-right {
+    order: 2;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingWidget-nowPlaying {
+    justify-content: center;
+}
+
+.player-controls {
+    justify-content: flex-start;
+    flex-direction: row;
+}
+
+.main-playPauseButton-button {
+    background-color: transparent;
+}
+
+.main-playPauseButton-button svg {
+    width: 32px !important;
+    height: 32px !important;
+    color: var(--spice-button);
+}
+
+/* Spotify style player bar */
+#main[player-controls="spotify"] .main-nowPlayingBar-left {
+    order: 0;
+}
+
+#main[player-controls="spotify"] .main-nowPlayingBar-center {
+    order: 1;
+}
+
+#main[player-controls="spotify"] .main-nowPlayingWidget-nowPlaying {
+    justify-content: left;
+}
+
+#main[player-controls="spotify"] .player-controls {
+    justify-content: center;
+}
+
+/** Main container */
+.contentSpacing,
+.artist-artistDiscography-headerContainer {
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+    .contentSpacing,
+    .artist-artistDiscography-headerContainer {
+        padding-left: 128px;
+        padding-right: 128px;
+    }
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button {
+    opacity: 1;
+}
+
+.main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-text,
+.main-navBar-navBarLink > span {
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 20px;
+    text-transform: none;
+}
+
+.main-likedSongsButton-likedSongsIcon,
+.main-yourEpisodesButton-yourEpisodesIcon,
+.main-createPlaylistButton-createPlaylistIcon {
+    background: unset !important;
+}
+
+.main-createPlaylistButton-icon,
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon {
+    height: 40px;
+}
+
+.main-likedSongsButton-likedSongsIcon svg,
+.main-yourEpisodesButton-yourEpisodesIcon svg,
+.main-createPlaylistButton-createPlaylistIcon svg {
+    fill: var(--spice-sidebar-text);
+    width: 32px;
+    height: 32px;
+}
+.main-yourEpisodesButton-yourEpisodesIcon svg path {
+    fill: var(--spice-sidebar-text);
+}
+
+/** Grid */
+.Root__top-container {
+    grid-template-areas:
+        "nav-bar main-view buddy-feed"
+        "nav-bar now-playing-bar buddy-feed";
+    padding: var(--main-gap) 0;
+}
+
+html:not(.buddyfeed-visible) .Root__top-container {
+    padding-right: var(--main-gap);
+}
+
+/** Minimal profile button */
+span.main-userWidget-displayName,
+.main-userWidget-box svg {
+    display: none;
+}
+
+/** Sidebar config */
+#dribs-hidden-list {
+    background-color: rgba(var(--spice-rgb-main), 0.3);
+}
+
+#dribs-sidebar-config {
+    position: relative;
+    width: 100%;
+    height: 0;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    top: -30px;
+    left: 0;
+}
+
+#dribs-sidebar-config button {
+    min-width: 60px;
+    border-radius: 3px;
+    background-color: var(--spice-main);
+    color: var(--spice-text);
+    border: 1px solid var(--spice-text);
+}
+#dribs-sidebar-config button:disabled {
+    color: var(--spice-button-disabled);
+}
+
+.main-navBar-entryPoints {
+    --left-sidebar-padding-left: 24px;
+    --left-sidebar-padding-right: 24px;
+
+    padding: 0px 8px;
+}
+
+.main-navBar-navBar .main-rootlist-wrapper > div:nth-child(2),
+.main-navBar-entryPoints,
+#spicetify-show-list,
+.main-rootlist-rootlistContent .os-content {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+#spicetify-show-list:empty {
+    display: none;
+}
+
+.main-rootlist-wrapper > div:nth-child(2) > li img,
+.main-navBar-navBarLink > .icon {
+    z-index: 100;
+}
+
+.main-collectionLinkButton-collectionLinkButton,
+.main-createPlaylistButton-button {
+    position: relative;
+}
+
+.main-navBar-navBarLink::before,
+.main-collectionLinkButton-collectionLinkButton::before,
+.main-createPlaylistButton-button::before,
+.main-rootlist-rootlistItemLink::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    inset: 0px;
+    left: -200%;
+    opacity: 0.4;
+    background-color: black;
+    border-radius: var(--image-radius);
+    pointer-events: none;
+    transition: all calc(var(--sidebar-icons-hover-animation) * 0.2s) ease;
+    transition-property: left, opacity;
+}
+
+.main-navBar-navBarLink:hover::before,
+.main-collectionLinkButton-collectionLinkButton:hover::before,
+.main-createPlaylistButton-button:hover::before,
+.main-rootlist-rootlistItemLink:hover::before,
+.main-navBar-navBarLinkActive::before,
+.main-collectionLinkButton-selected::before {
+    left: 0px;
+}
+
+.main-navBar-navBarLinkActive:hover::before,
+.main-collectionLinkButton-selected:hover::before {
+    opacity: 0.6;
+}
+
+.main-rootlist-rootlist .main-navBar-navBarItem:hover::before {
+    margin: 0 8px;
+}
+
+.main-navBar-navBarLinkActive,
+.main-collectionLinkButton-selected {
+    background-color: transparent;
+}
+
+.main-navBar-navBar a:hover,
+.main-navBar-navBar a:hover span {
+    color: var(--spice-sidebar-text) !important;
+}
+
+div.GlueDropTarget.personal-library {
+    padding: 0px;
+}
+div.GlueDropTarget.personal-library > * {
+    padding: 0 16px;
+    height: 56px;
+    border-radius: 4px;
+}
+
+div.GlueDropTarget.personal-library > *.active {
+    background: transparent;
+}
+
+/** Big cover, small cover */
+.main-coverSlotExpanded-container {
+    position: fixed;
+    z-index: 2;
+    width: 250px;
+    height: 250px;
+    bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
+    left: calc(var(--sidebar-width) + 10px);
+}
+
+.Root.is-connectBarVisible .main-coverSlotExpanded-container {
+    bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
+}
+
+html.right-expanded-cover .main-coverSlotExpanded-container {
+    right: calc(var(--main-gap) + 10px);
+    left: unset;
+}
+
+html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
+    right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
+    left: unset;
+}
+
+.main-coverSlotExpanded-container img {
+    border-radius: 4px;
+}
+
+.cover-art {
+    border-radius: 4px;
+}
+
+.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
+    opacity: 0;
+}
+
+.main-nowPlayingWidget-coverExpanded {
+    transform: translateX(-27px);
+}
+
+/** Mini dribbblish */
+.x-categoryCard-CategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 14px);
+    height: calc(100% - 6px);
+    margin: 3px 10px;
+    border-radius: 5px;
+}
+
+.x-categoryCard-CategoryCard {
+    height: 100px;
+}
+
+.x-categoryCard-image {
+    width: 50px !important;
+    height: 50px !important;
+}
+
+.x-heroCategoryCard-HeroCategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 20px);
+    height: calc(100% - 6px);
+    margin: 3px 16px;
+    border-radius: 5px;
+}
+
+.main-dropDown-dropDown,
+.x-sortBox-sortDropdown {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+    color: var(--spice-subtext);
+}
+
+.main-dropDown-dropDown:hover,
+.x-sortBox-sortDropdown:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+}
+
+.connect-device-list-item:focus,
+.connect-device-list-item:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), 0.3);
+}
+
+.bookmark-filter {
+    color: var(--spice-main) !important;
+}
+
+/* 1.1.56 */
+.main-navBar-navBar {
+    width: var(--sidebar-width) !important;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped {
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+    .main-entityHeader-container.main-entityHeader-nonWrapped {
+        padding-left: 128px;
+        padding-right: 128px;
+    }
+}
+
+.main-userWidget-dropDownMenu > li > button {
+    color: rgba(var(--spice-rgb-selected-row), 0.7);
+    padding-left: 8px;
+    text-decoration: none;
+}
+.main-userWidget-dropDownMenu > li > button:hover,
+.main-userWidget-dropDownMenu > li > button:focus {
+    color: var(--spice-text);
+}
+
+.main-userWidget-dropDownMenu svg {
+    position: unset;
+}
+.main-userWidget-dropDownMenu > li svg {
+    position: absolute;
+}
+.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
+    z-index: 4;
+}
+
+.main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
+    color: var(--spice-subtext);
+}
+
+/* explicit icon */
+.main-tag-container {
+    background-color: var(--spice-text);
+}