[ { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\nko_fi: OhItsTom\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Please provide as much information as possible!\ntitle: ''\nlabels: bug\nassignees: ohitstom\n\n---\n\n**Environment**\n- Spotify Version: `placeholder`\n- Spicetify Version: `placeholder`\n- Platform (WIN, MAC, LINUX): `placeholder`\n\n**Addons**\n*`[name1, name2]` or `[]` if none*\n- Extensions: `placeholder`\n- Custom Apps: `placeholder`\n- Snippets: `placeholder`\n\n**Spicetify Config**\n*Screenshot / File Upload*\n- spicetify config-dir in terminal\n- config-xpui.ini\n\n**Theme Information**\n- Export Of Comfy Settings: `placeholder`\n- Installed via Marketplace Or CLI: `placeholder`\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\nPlease also provide devtools errors/debug messages if possible:\n- Spicetify enable-devtools\n- open devtools (ctrl+shift+i on windows)\n- enable verbose -> https://imgur.com/a/0NIAiuP\n- press ctrl + r to reload\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/build.yml", "content": "on:\n push:\n branches: [main, beta]\n\nname: Build\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v3\n - uses: actions/setup-node@v3\n with:\n node-version: \"lts/*\"\n\n - name: Compile Sass\n run: npx sass Comfy/app.scss:Comfy/app.css --no-source-map --style=compressed\n\n - name: Push Changes\n uses: stefanzweifel/git-auto-commit-action@v4\n if: ${{ github.repository == 'Comfy-Themes/Spicetify' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') }}\n with:\n commit_message: \"chore: compile sass\"\n commit_author: \"github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>\"\n branch: ${{ github.ref }}\n" }, { "path": ".gitignore", "content": "CHECKUP.txt\n/.vscode/\n.prettierignore\nComfy/node_modules\nComfy/package-lock.json\nComfy/app.css.map\n" }, { "path": ".prettierrc", "content": "{\n\t\"printWidth\": 150,\n\t\"tabWidth\": 2,\n\t\"useTabs\": true,\n\t\"trailingComma\": \"none\",\n\t\"arrowParens\": \"avoid\"\n}\n" }, { "path": "Comfy/README.md", "content": "![banner](../images/banner.png)\n\n### 🎨 Color Schemes\n\n#### Collection\n\n
Catppuccin\n
🌻 Latte\n\n![png](../images/color-schemes/catppuccin/latte.png)\n\n
\n
🍨 Frappé\n\n![png](../images/color-schemes/catppuccin/frappe.png)\n\n
\n
🌺 Macchiato\n\n![png](../images/color-schemes/catppuccin/macchiato.png)\n\n
\n
🌿 Mocha\n\n![png](../images/color-schemes/catppuccin/mocha.png)\n\n
\n\n
Rosé Pine\n
Original\n\n![png](../images/color-schemes/rose-pine/original.png)\n\n
\n
Moon\n\n![png](../images/color-schemes/rose-pine/moon.png)\n\n
\n
Dawn\n\n![png](../images/color-schemes/rose-pine/dawn.png)\n\n
\n\n
Mono\n
Original\n\n![png](../images/color-schemes/mono/mono.png)\n\n
\n
Forest\n\n![png](../images/color-schemes/mono/forest.png)\n\n
\n
Neon\n\n![png](../images/color-schemes/mono/neon.png)\n\n
\n
Sakura\n\n![png](../images/color-schemes/mono/sakura.png)\n\n
\n
Sunset\n\n![png](../images/color-schemes/mono/sunset.png)\n\n
\n
Vaporwave\n\n![png](../images/color-schemes/mono/vaporwave.png)\n\n
\n\n#### Individual\n\n
Comfy\n\n![png](../images/color-schemes/comfy.png)\n\n
\n
Spotify\n\n![png](../images/color-schemes/spotify.png)\n\n
\n
Nord\n\n![png](../images/color-schemes/nord.png)\n\n
\n
Everforest\n\n![png](../images/color-schemes/everforest.png)\n\n
\n
Kanagawa\n\n![png](../images/color-schemes/kanagawa.png)\n\n
\n
Houjicha\n\n![png](../images/color-schemes/houjicha.png)\n\n
\n
Kitty\n\n![png](../images/color-schemes/kitty.png)\n\n
\n
Lunar\n\n![png](../images/color-schemes/lunar.png)\n\n
\n
Deep\n\n![png](../images/color-schemes/deep.png)\n\n
\n
Velvet\n\n![png](../images/color-schemes/velvet.png)\n\n
\n
Yami\n\n![png](../images/color-schemes/yami.png)\n\n
\n
Hikari\n\n![png](../images/color-schemes/hikari.png)\n\n
\n\n### 📑 Pages\n\n
Album\n\n![png](../images/pages/album.png)\n\n
\n\n
Artist\n\n![png](../images/pages/artist.png)\n\n
\n\n
Browse\n\n![png](../images/pages/browse.png)\n\n
\n\n
Discography\n\n![png](../images/pages/discography.png)\n\n
\n\n
Home\n\n![png](../images/pages/home.png)\n\n
\n\n
Lyrics Plus\n\n![png](../images/pages/lyrics-plus.png)\n\n
\n\n
Marketplace\n\n![png](../images/pages/marketplace.png)\n\n
\n\n
New Releases\n\n![png](../images/pages/new-releases.png)\n\n
\n\n
Playlist\n\n![png](../images/pages/playlist.png)\n\n
\n\n
Podcasts\n\n![png](../images/pages/podcasts.png)\n\n
\n\n
Profile\n\n![png](../images/pages/profile.png)\n\n
\n\n
Radio\n\n![png](../images/pages/radio.png)\n\n
\n\n
Search\n\n![png](../images/pages/search.png)\n\n
\n\n
Search Results\n\n![png](../images/pages/search-results.png)\n\n
\n\n### 📳 Panels\n\n
Friends\n\n![png](../images/panels/friends.png)\n\n
\n\n
Library\n\n![png](../images/panels/library.png)\n\n
\n\n
Library Expanded\n\n![png](../images/panels/library-expanded.png)\n\n
\n\n
Library Closed\n\n![png](../images/panels/library-closed.png)\n\n
\n\n
Library Compact\n\n![png](../images/panels/library-compact.png)\n\n
\n\n
Now Playing View\n\n![png](../images/panels/npv.png)\n\n
\n\n
Queue\n\n![png](../images/panels/queue.png)\n\n
\n\n### ⚙️ Settings\n\n
Apple Music Gradient\n\n![png](../images/settings/am-blur.png)\n![png](../images/settings/am-blur.png)\n\n
\n\n
Application Title\n\n![png](../images/settings/application-title.png)\n\n
\n\n
Blur\n\n![png](../images/settings/blur.png)\n\n
\n\n
Button Radius\n\n![png](../images/settings/button-radius.png)\n\n
\n\n
Custom Image\n\n![png](../images/settings/custom-image.png)\n\n
\n\n
Flatten Colors\n\n![png](../images/settings/flatten-colors.png)\n\n
\n\n
Horizontal Page Links\n\n![png](../images/settings/horizontal-pagelinks.png)\n\n
\n\n
Oblong Cover Art\n\n![png](../images/settings/oblong-cover-art.png)\n\n
\n\n
Topbar in Titlebar\n\n![png](../images/settings/topbar-in-titlebar.png)\n\n
\n" }, { "path": "Comfy/app.css", "content": ":root .global-nav .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;align-items:center;margin-top:64px}:root #main.Banner-Enabled .comfy-banner-frame{display:block}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:top;background-image:var(--image-url);filter:blur(var(--image-blur));-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));transition:background .5s ease}:root #main.Banner-Enabled .comfy-banner-frame .comfy-banner-image:last-of-type{display:none}:root #main.Banner-Enabled .main-entityHeader-backgroundColor{background:none !important}:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet,.Comfy-nord-flat-Snippet,.Playbar-Above-Right-Panel-Snippet) .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px - 12px) !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent,:root #main.Banner-Enabled .main-actionBarBackground-background{background-image:linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0, var(--spice-main) var(--tracklist-gradient-height)),var(--tracklist-gradient-noise) !important;background-color:rgba(0,0,0,0) !important;height:calc(100% - 250px);min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 128px);background-size:auto 100%,300px var(--tracklist-gradient-height);background-repeat:repeat-x}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent{position:relative !important}:root #main.Banner-Enabled .artist-artistOverview-artistOverviewContent .main-actionBarBackground-background{background-image:none !important;background-color:unset !important}:root #main.Banner-Enabled .playlist-playlist-playlistContent,:root #main.Banner-Enabled .dTKw7B8X1ybw7SHebMH3,:root #main.Banner-Enabled .xcTrtCsYOPtSElbX9inq,:root #main.Banner-Enabled .EmeHQXR87mUskYK6xEde,:root #main.Banner-Enabled .N_8iI7NKHP0iG2jp3g0R{background:none}:root #main.Banner-Enabled .main-entityHeader-background{height:calc(40vh + var(--tracklist-gradient-height));max-height:100%}:root #main.Banner-Enabled .main-entityHeader-background.main-entityHeader-overlay{--bgColor: unset !important}:root .Root__main-view .comfy-banner-frame{display:none}:root .Root__main-view .main-entityHeader-withBackgroundImage{height:40vh !important}:root .Root__main-view .main-leaderboardComponent-container,:root .Root__main-view .sponsor-container{display:none !important}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)){position:sticky;padding-bottom:32px}:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)) .os-host-overflow,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)) .os-padding,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)) .os-viewport,:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)) div[data-overlayscrollbars~=host],:root .Root__main-view .main-view-container main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(>.visualizer-container)) [data-overlayscrollbars-viewport~=scrollbarHidden]{overflow:visible !important}:root .Root__main-view .main-view-container input:checked~.x-toggle-indicatorWrapper{background-color:var(--spice-radio-btn-active)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card{background:var(--spice-sidebar);border-radius:var(--border-radius);padding:0;overflow:hidden}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card:hover{background:var(--spice-card)}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-PlayButtonContainer{right:12px !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer{margin-bottom:-4px}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-circular,:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer img{border-radius:0 !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-imageContainer .main-cardImage-imageWrapper{box-shadow:none !important}:root .Root__main-view .main-view-container:not(:has(#stats-app)) .main-card-card .main-card-cardMetadata{padding:16px}:root .Root__main-view .main-view-container .rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc:after,:root .Root__main-view .main-view-container .hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4:after,:root .Root__main-view .main-view-container .main-home-filterChipsContainer>div:first-child:after{background-color:var(--spice-main)}:root .Root__main-view .main-view-container .main-home-homeHeader{display:none}:root .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2),:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer{align-self:center;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText{flex:unset;justify-content:center}:root .Root__main-view .main-view-container .main-entityHeader-container>div:nth-last-of-type(2)+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container>div.contentSpacing+.main-entityHeader-headerText .main-entityHeader-title h1,:root .Root__main-view .main-view-container .main-entityHeader-container .main-entityHeader-imageContainer+.main-entityHeader-headerText .main-entityHeader-title h1{font-size:3rem !important}:root .Root__main-view .main-view-container .main-actionBar-ActionBar{padding:8px 16px 16px 16px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow:first-of-type>*:first-child{margin-top:-24px}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>*:first-child{margin-left:calc(var(--content-spacing) + 3px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow>:first-child:not(:only-child){margin-right:calc(var(--content-spacing) + 4px)}:root .Root__main-view .main-view-container .main-actionBar-ActionBar .main-actionBar-ActionBarRow [class*=Button]{min-block-size:32px;padding-block:0}:root .Root__main-view .main-view-container .artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer{padding-bottom:var(--grid-gap)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut{border-radius:var(--border-radius)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper{border-radius:calc(var(--border-radius) + 15px)}:root .Root__main-view .main-view-container .view-homeShortcutsGrid-shortcut .main-playButton-PlayButton{background:none !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-Provider{font-size:0}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer::-webkit-scrollbar{width:0 !important;height:0 !important}:root .Root__main-view .main-view-container .lyrics-lyricsContainer-LyricsContainer .lyrics-lyricsContainer-LyricsBackground{z-index:-1;background-repeat:no-repeat;background-size:cover;-webkit-mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));mask-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6))}:root .Root__main-view .main-view-container section[data-testid=your-episodes-page] .main-actionBarBackground-background{height:calc(100vh - 494px) !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar{flex-direction:column-reverse}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow{margin-top:0 !important}:root .Root__main-view .main-view-container section[data-testid=episode] .main-actionBar-ActionBar .main-actionBar-ActionBarRow:nth-child(1){padding-top:2rem}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li .main-yourLibraryX-listRowEntityImage{border-radius:var(--border-radius) !important}:root .Root__nav-bar .main-rootlist-wrapper div:nth-child(2)>li>div:active::after{background-color:var(--spice-highlight-elevated);top:0;bottom:0;left:0;right:0}:root .Root__nav-bar .main-rootlist-wrapper [role=presentation]>li>div>div>div>div>div>.x-entityImage-imageContainer{box-shadow:0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important}:root .Root__nav-bar .main-yourLibraryX-isScrolled{box-shadow:none !important}:root .Root__nav-bar .os-scrollbar{display:none}:root .Root__nav-bar #Desktop_LeftSidebar_Id .main-yourLibraryX-entryPoints span.LineClamp{-webkit-line-clamp:1 !important;line-clamp:1 !important}:root .Root__top-container .main-nowPlayingWidget-nowPlaying{height:0;z-index:1;left:var(--cover-art-left)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{bottom:var(--cover-art-bottom);border-radius:var(--cover-art-radius)}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>div button{border-radius:var(--cover-art-radius) !important;background:none}:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .cover-art,:root .Root__top-container .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .VideoPlayer__container video{width:var(--cover-art-width) !important;height:var(--cover-art-height) !important;border-radius:var(--cover-art-radius);overflow:hidden;object-fit:cover;max-height:none;max-width:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{position:relative;border-top:none;flex-direction:column-reverse !important;background-clip:text}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container::before{z-index:auto !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container:has(.main-connectBar-connectBar)::before{height:calc(100% - 40px);top:40px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{margin-bottom:12px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .player-controls__buttons--new-icons{margin-bottom:0px !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar{position:fixed;display:grid;grid-template-columns:auto auto;grid-template-areas:\"time-left time-right\" \"bar bar\";bottom:0;right:0;gap:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .saber-hilt{height:0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container){text-align:center}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):first-of-type{grid-area:time-left}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar>div:not(.playback-progressbar-container):last-of-type{grid-area:time-right}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar-container{display:contents}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar{grid-column:1/3;grid-area:bar;height:11px}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);--fg-color: var(--spice-progress-fg);--progress-bar-height: 12px;--progress-bar-radius: 0}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .x-progressBar-fillColor{width:107%;background-color:rgba(0,0,0,0);background-image:linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center .playback-bar .playback-progressbar .progress-bar .progress-bar__slider{display:none}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-volumeBar .progress-bar{--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive){color:rgba(var(--spice-rgb-selected-row), 0.7)}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls button:not(.main-genericButton-buttonActive):hover{color:var(--spice-text) !important}:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls .main-devicePicker-indicator{display:none}.x-settings-container{max-width:unset}.x-toggle-indicatorWrapper{border-radius:var(--button-radius)}#main.Settings-Open~generic-modal .GenericModal__overlay{--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header{padding:12px 12px 12px 16px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-type-alto{font-size:25px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn{background-color:var(--background-tinted-base);height:34px;cursor:pointer}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:hover{transform:scale(1.04) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:focus{transform:scale(1)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:active{transform:scale(0.98) !important;color:var(--spice-text)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:first-of-type{margin-left:auto}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:not(:last-of-type){margin-right:8px}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-header .main-trackCreditsModal-closeBtn:last-of-type svg{scale:.8}#main.Settings-Open~generic-modal .GenericModal__overlay .main-embedWidgetGenerator-container{max-height:75vh !important;width:550px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection{padding:0px 16px 0;scrollbar-width:thin;min-height:calc(100% - 60px)}#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection::after{content:\"\";position:absolute;bottom:0;width:calc(100% - 12px);left:0;height:25px;background:linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5));pointer-events:none;border-radius:8px;z-index:0;border-bottom-right-radius:0}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar{width:8px !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,#main.Settings-Open~generic-modal .GenericModal__overlay .main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb{border-radius:1em !important}#main.Settings-Open~generic-modal .GenericModal__overlay .GenericModal{border-radius:10px}.comfy-settings .search-searchCategory-SearchCategory{background:var(--spice-player);grid-column:1/-1;height:48px;padding-top:7px;position:sticky;top:0px;z-index:1}.comfy-settings .search-searchCategory-SearchCategory{height:unset;padding-bottom:12px;padding-top:12px;top:0}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%;padding-inline:0px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea.search-searchCategory-showLeftButton .search-searchCategory-categoryGrid{-webkit-mask-image:linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);mask-image:linear-gradient(90deg, transparent, var(--spice-sidebar) 120px)}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea.search-searchCategory-showRightButton .search-searchCategory-categoryGrid{-webkit-mask-image:linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);mask-image:linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent)}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea.search-searchCategory-showLeftButton.search-searchCategory-showRightButton .search-searchCategory-categoryGrid{-webkit-mask-image:linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);mask-image:linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent)}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGrid{overflow-y:hidden}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem{cursor:pointer;padding:2px}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem button::after{border:none !important}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem:active,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem:focus,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem:hover{text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem:focus-visible{outline:none;text-decoration:none}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem:focus-visible>*{outline:5px auto #3673d4}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-wrapper .search-searchCategory-contentArea .search-searchCategory-categoryGridItem>*{margin-inline-end:8px;margin-block-end:0 !important}.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-showRightButton .search-searchCategory-carouselButtonRight,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-showRightButton:hover .search-searchCategory-carouselButtonRight,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-showLeftButton .search-searchCategory-carouselButtonLeft,.comfy-settings .search-searchCategory-SearchCategory .search-searchCategory-showLeftButton:hover .search-searchCategory-carouselButtonLeft{cursor:pointer;opacity:1;pointer-events:auto}.comfy-settings .setting-header{text-align:center;padding:5px 0}.comfy-settings .setting-card{background-color:var(--background-tinted-base);border-radius:10px;margin:8px 0}.comfy-settings .setting-card .setting-container{padding:12px 16px;display:flex;flex-direction:column}.comfy-settings .setting-card .setting-container .setting-item{display:flex;flex-direction:row;justify-content:space-between}.comfy-settings .setting-card .setting-container .setting-item .setting-title{padding-right:15px;font-weight:600}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip{cursor:help !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper{padding:0px 8px 0px 8px !important}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper svg{fill:var(--spice-subtext);transition:fill .2s}.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:focus-within svg,.comfy-settings .setting-card .setting-container .setting-item .x-settings-tooltip .x-settings-tooltipIconWrapper:hover svg{fill:var(--spice-text) !important}.comfy-settings .setting-card .setting-container .setting-action,.comfy-settings .setting-card .setting-container .setting-title{display:flex;align-items:center;padding:8px 0}.comfy-settings .setting-card .setting-description{font-size:.9rem;color:var(--spice-subtext)}.comfy-settings .setting-card .setting-description-spacer{height:.9rem}.comfy-settings .setting-card .setting-action{text-align:right}.comfy-settings .setting-card .setting-action .x-toggle-wrapper{cursor:pointer}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-input{width:100%}.comfy-settings .setting-card .setting-action .x-toggle-wrapper .x-toggle-indicatorWrapper{transition:background-color .2s;--spice-button-disabled: var(--background-tinted-base)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .x-toggle-wrapper input:checked:hover:not([disabled],:active)~.x-toggle-indicatorWrapper{background-color:var(--spice-button-active)}.comfy-settings .setting-card .setting-action button.switch{border:0px;background-color:var(--background-tinted-base);cursor:pointer;display:flex;padding:8px;margin-inline-end:12px}.comfy-settings .setting-card .setting-action button.switch:hover{transform:scale(1.04);color:var(--spice-text)}.comfy-settings .setting-card .setting-action button.switch:active{transform:scale(0.98);color:var(--spice-text)}.comfy-settings .setting-card .setting-action input{padding-inline:10px;text-align:center;background-color:var(--background-tinted-base);color:var(--spice-text);border:none;height:32px;width:120px}.comfy-settings .setting-card .setting-action input::placeholder{color:rgba(var(--spice-rgb-text), 0.3)}.comfy-settings .setting-card .setting-action input[type=number]{width:50px;transition:width .2s}.comfy-settings .setting-card .setting-action input[type=number]::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]::-webkit-outer-spin-button{display:none}.comfy-settings .setting-card .setting-action input[type=number]:hover{width:60px}.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-inner-spin-button,.comfy-settings .setting-card .setting-action input[type=number]:hover::-webkit-outer-spin-button{display:block}.comfy-settings .setting-card .setting-action input[type=color]{width:32px;padding:3px;transition:all .2s ease;cursor:pointer;margin-left:8px}.comfy-settings .setting-card .setting-action input[type=color]:hover,.comfy-settings .setting-card .setting-action input[type=color]:focus,.comfy-settings .setting-card .setting-action input[type=color]:active{scale:1.04;background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch-wrapper{padding:0;margin:0}.comfy-settings .setting-card .setting-action input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--button-radius)}.comfy-settings .setting-card .setting-action .dropdown-wrapper{position:relative}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-button{border-bottom-left-radius:0;border-bottom-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-arrow{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(var(--spice-rgb-text), 0.7);border-width:0 5px 5px}.comfy-settings .setting-card .setting-action .dropdown-wrapper.menu-open .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button{position:relative;background-color:var(--background-tinted-base);border:0;border-radius:var(--button-radius);box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);cursor:default;outline:0;padding:0 36px 0 16px;transition:all .2s ease;height:32px;cursor:pointer !important}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button:hover{color:var(--spice-rgb-text);background-color:var(--background-tinted-highlight)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-button .dropdown-selection{display:flex;align-items:center;height:32px}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-arrow{border-color:rgba(var(--spice-rgb-text), 0.7) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:5px 5px 0;content:\" \";display:block;height:0;margin-top:-ceil(2.5);position:absolute;right:16px;top:14px;width:0}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-menu{scrollbar-width:thin;background-color:var(--spice-card);opacity:1;border:0;border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;overflow-y:auto;overflow-x:hidden;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option{box-sizing:border-box;color:rgba(var(--spice-rgb-text), 0.7);background-color:var(--background-tinted-highlight);cursor:pointer;display:block;padding:8px 10px;text-align:center}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option.selected{background-color:rgba(var(--spice-rgb-text), 0.7);color:var(--spice-sidebar)}.comfy-settings .setting-card .setting-action .dropdown-wrapper .dropdown-option:hover{background-color:rgb(var(--spice-rgb-text));color:var(--spice-sidebar)}.comfy-settings .setting-subSection#enabled .setting-card{border-radius:0;margin:0}.comfy-settings .setting-subSection#enabled .setting-card:first-child{border-radius:10px 10px 0px 0px;background-color:var(--spice-sidebar);margin-top:8px;transition:.2s}.comfy-settings .setting-subSection#enabled .setting-card:first-child:hover{background-color:var(--spice-button-disabled);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#enabled .setting-card:first-child .setting-title{cursor:pointer !important}.comfy-settings .setting-subSection#enabled .setting-card:last-child{border-radius:0 0 10px 10px;margin-bottom:8px}.comfy-settings .setting-subSection#collapsed .setting-card{background-color:var(--spice-sidebar);transition:background-color .2s;cursor:pointer}.comfy-settings .setting-subSection#collapsed .setting-card:hover{background-color:var(--spice-button-disabled)}.comfy-settings .setting-subSection#collapsed .setting-card .setting-title{cursor:pointer !important}.comfy-settings .setting-button-row{display:flex;align-items:center;justify-content:space-between;padding:8px}.comfy-settings .main-buttons-button{background-color:rgba(0,0,0,0);color:var(--spice-button);border:2px solid var(--spice-button) !important;margin:5px 10px;border:2px solid rgba(0,0,0,0);border-radius:10px;cursor:pointer;display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.76px;line-height:18px;padding:8px 8%;text-align:center;text-transform:uppercase;transition:all 33ms cubic-bezier(0.3, 0, 0, 1);white-space:nowrap;will-change:transform}.comfy-settings .main-buttons-button:hover{transform:scale(1.02);filter:brightness(1.2)}.comfy-settings .main-buttons-button:active{transform:scale(0.98);filter:brightness(0.8)}:root .main-topBar-container .main-topBar-topbarContent *,:root .main-topBar-container .main-topBar-topbarContentWrapper *{justify-content:center;text-align:center}:root .main-topBar-container .main-topBar-searchBar>form input::placeholder{color:rgba(var(--spice-rgb-selected-row), 0.7)}:root .main-topBar-container .main-topBar-searchBar>form input{height:32px;background-color:rgba(var(--spice-rgb-shadow), 0.7)}:root .main-topBar-container .main-topBar-historyButtons button:hover{transform:scale(1.1)}:root .main-topBar-container .main-topBar-topbarContent>div:has([data-encore-id=buttonPrimary]):first-child{display:none !important}:root .main-topBar-container .main-topBar-background{background-color:var(--spice-main) !important}:root .main-topBar-container .main-topBar-overlay{background-color:rgba(0,0,0,0) !important}:root .main-topBar-container .main-topBar-UpgradeButton{font-size:0;overflow:hidden;background:url(\"https://i.imgur.com/nzAfcIL.png\") 50%/contain no-repeat;border:none;padding:5px;box-sizing:content-box;width:12px}:root.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:60px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:0px 150px !important}:root.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet .main-topBar-container{padding-inline:72px 0px !important}:root.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top{height:calc(var(--comfy-topbar-height, 40px) + 8px) !important}:root:has(#main.Flatten-Colors-normal){--spice-main: var(--spice-sidebar);--spice-main-transition: var(--spice-sidebar);--spice-rgb-main: var(--spice-rgb-sidebar);--spice-rgb-main-transition: var(--spice-rgb-sidebar)}:root:has(#main.Flatten-Colors-reverse){--spice-sidebar: var(--spice-main);--spice-rgb-sidebar: var(--spice-rgb-main)}:root:has(#main.Comfy-Dark-Modals-Snippet) .ABD0FGjBGqGZG33bP7Lc,:root:has(#main.Comfy-Dark-Modals-Snippet) .main-duplicateTrackModal-container{background-color:var(--spice-main);color:var(--spice-text)}:root:has(#main.Remove-DJ-Prompt) ._EFIA9HjgZxxgTSZzQcg>*:not(:first-child){display:none}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menu .main-popper-arrow{width:13px !important;height:13px !important;z-index:0 !important;border-right:1px solid var(--spice-button-disabled) !important;border-bottom:1px solid var(--spice-button-disabled) !important}:root:has(#main.Compact-Context-Menu) .main-rootlist-rootlistDivider,:root:has(#main.Compact-Context-Menu) .main-contextMenu-dividerBefore::before,:root:has(#main.Compact-Context-Menu) .main-contextMenu-dividerAfter::after,:root:has(#main.Compact-Context-Menu) .show-episodeList-divider,:root:has(#main.Compact-Context-Menu) .main-rootlist-rootlistDividerContainer{display:none}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menuItemButton,:root:has(#main.Compact-Context-Menu) .main-userWidget-dropDownMenuItemButton{border-radius:8px !important;color:var(--spice-text);height:32px;padding-left:8px}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menuItem,:root:has(#main.Compact-Context-Menu) ._60cb742e518d084c3c959007b9463b51-scss>li{margin:2px 6px}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menuItem:first-child,:root:has(#main.Compact-Context-Menu) ._60cb742e518d084c3c959007b9463b51-scss>:first-child{margin:6px 6px 2px}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menuItem:last-child{margin:2px 6px 6px}:root:has(#main.Compact-Context-Menu) ._60cb742e518d084c3c959007b9463b51-scss>:last-child{margin:2px 6px 8px}:root:has(#main.Compact-Context-Menu) .main-contextMenu-menu,:root:has(#main.Compact-Context-Menu) ._60cb742e518d084c3c959007b9463b51-scss{border-radius:8px;border:1px solid var(--spice-button-disabled)}:root:has(#main.Compact-Context-Menu) .main-userWidget-dropDownMenu li.main-contextMenu-menuItem>div{left:410px !important;width:225px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-player, var(--spice-sidebar))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-connectBar-connectBar{margin-bottom:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar{padding:0 8px 6px 0 !important;margin-bottom:0 !important;background:var(--bg-img, var(--spice-player));border-radius:var(--border-radius)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar{position:absolute !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .main-playbackBarRemainingTime-container,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text{position:fixed;bottom:14px;right:8px}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type{transform:translateX(calc(-100% - 20px))}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-bar__progress-time-elapsed::after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .encore-text:first-of-type::after{position:absolute;left:calc(100% + 10px);font-weight:bold;color:rgba(var(--spice-rgb-custom-subdued), 0.8);content:\"/\";transform:translateX(-50%)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-sliderArea{border-radius:0 0 8px 8px !important;height:6px !important}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-progressBarBg:after{content:\"\";padding:8px;position:absolute;top:-6px;width:calc(100% - 16px)}:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .playback-progressbar,:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__top-container .main-nowPlayingBar-nowPlayingBar .playback-bar .x-progressBar-fillColor{height:6px !important;border-radius:50px !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .Root__now-playing-bar.LibraryX{--cover-ambience-background: var(--spice-main) !important}:root #main.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet .main-nowPlayingBar-nowPlayingBar{background:var(--bg-img, var(--spice-main))}:root #main.Comfy-kitty-Snippet .Root__main-view{background-image:url(\"https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif\") !important;background-position-x:center !important;background-position-y:center !important;background-size:610px !important;background-repeat:no-repeat !important}:root #main.Remove-Column-Bar-Snippet .main-trackList-trackListHeader{display:none}:root #main.Home-Header-Snippet .main-home-homeHeader{display:block !important}:root #main.Home-Header-Color .main-home-homeHeader{background-color:var(--home-header-color) !important}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list{justify-content:center;align-items:center;display:flex;flex-wrap:wrap}:root #main.Horizontal-pageLinks-Snippet ul#spicetify-sticky-list span{display:none}:root #main.Horizontal-pageLinks-Snippet .main-yourLibraryX-navItem{padding:4px 8px !important}:root #main.Playbar-Above-Right-Panel-Snippet .artist-artistOverview-artistOverviewContent,:root #main.Playbar-Above-Right-Panel-Snippet .main-actionBarBackground-background{min-height:calc(100vh - min(30vh,clamp(250px,250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150,400px)) - 50px) !important}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container{grid-template-areas:\"left-sidebar main-view now-playing-bar\" \"left-sidebar main-view right-sidebar\"}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container[data-right-sidebar-hidden] .Root__main-view{grid-area:main-view/main-view/main-view/span 1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__main-view,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__nav-bar{margin-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__right-sidebar{height:calc(100vh - 450px);width:min-content;padding-bottom:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar{width:var(--comfy-panel-width);background-color:var(--spice-main);border-radius:8px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container{flex-direction:column;min-width:280px;max-width:420px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar{flex-direction:column;padding:8px;min-height:400px}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-center,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-left{width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .player-controls__buttons.player-controls__buttons--new-icons{order:2}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .playback-bar,:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS{order:1}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right{width:calc(var(--comfy-panel-width) - 16px)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingBar-right .main-nowPlayingBar-extraControls{width:calc(var(--comfy-panel-width) - 16px);justify-content:space-evenly}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container{width:100%;height:100%;bottom:0}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child{width:100%;height:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container>:first-child>:first-child{width:100%;height:100%;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .main-coverSlotCollapsed-expandButton{top:3%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx{background-color:rgba(0,0,0,0);margin:auto;width:100%}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt{width:100%;height:100%;padding-bottom:5px;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art{height:220px !important;width:220px !important;margin:auto;background-color:rgba(0,0,0,0)}:root #main.Playbar-Above-Right-Panel-Snippet .Root__top-container .Root__now-playing-bar .main-nowPlayingBar-container .main-nowPlayingBar-nowPlayingBar .main-nowPlayingWidget-nowPlaying .main-coverSlotCollapsed-container .HD9s7U5E1RLSWKpXmrqx .main-nowPlayingWidget-coverArt .cover-art img{background-color:rgba(0,0,0,0);box-shadow:0 0 5px 5px var(--spice-text)}:root #main.Smooth-Progress-Bar-Snippet .playback-bar>div,:root #main.Smooth-Progress-Bar-Snippet .playback-bar~div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea>div,:root #main.Smooth-Progress-Bar-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea~div{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:1000ms;transition-duration:1000ms;-webkit-transition-property:left,-webkit-transform;transition-property:left,-webkit-transform;transition-property:transform,left;transition-property:transform,left,-webkit-transform;-webkit-transition-timing-function:linear;transition-timing-function:linear}:root #main.Remove-Progress-Bar-Gradient-Snippet .x-progressBar-fillColor{background-color:var(--fg-color) !important;border-radius:var(--progress-bar-radius) !important;height:var(--progress-bar-height) !important;transform:translateX(calc(-100% + var(--progress-bar-transform))) !important;width:100% !important}:root #main.Remove-Connect-Bar-Snippet .main-connectBar-connectBar,:root #main.Remove-Connect-Bar-Snippet .main-devicePicker-indicator{display:none !important}:root #main.Remove-Lyrics-Button-Snippet .main-nowPlayingBar-lyricsButton{display:none !important}:root #main.Hoverable-Timers-Snippet .playback-bar>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS>div{transition:all .3s ease;opacity:0}:root #main.Hoverable-Timers-Snippet .playback-bar:hover>div,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS:hover>div{transition:all .3s ease;opacity:1 !important}:root #main.Hoverable-Timers-Snippet .playback-bar .playback-progressbar,:root #main.Hoverable-Timers-Snippet .pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .playback-progressbar{opacity:1 !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container{grid-template-areas:\"top-bar top-bar top-bar\" \"left-sidebar main-view right-sidebar\" \"now-playing-bar now-playing-bar now-playing-bar\" !important;grid-template-rows:0 1fr auto !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container{pointer-events:none;grid-area:top-bar;contain:unset;top:calc(var(--comfy-topbar-height, 40px)*-1 + 1px);height:calc(var(--comfy-topbar-height, 40px) + 8px);padding-block:8px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper>*:not(.main-topBar-searchBar):not(:has(ul)){justify-content:center;display:flex}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper ul{text-align:center !important;justify-content:center}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContentWrapper .queue-tabBar-headerItemLink{padding:5px 16px}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent{app-region:drag !important}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-topbarContent .main-entityHeader-topbarTitle{height:100%}:root #main.Topbar-Inside-Titlebar-Snippet .Root__top-container .main-topBar-container .main-topBar-background{display:none}:root #main.Topbar-Inside-Titlebar-Snippet main:not(:has(.main-home-filterChipsContainer)),:root #main.Topbar-Inside-Titlebar-Snippet .queue-queuePage-queuePage,:root #main.Topbar-Inside-Titlebar-Snippet .search-searchCategory-SearchCategory,:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar,:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91,:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{margin-top:-64px !important;top:0 !important}:root #main.Topbar-Inside-Titlebar-Snippet .marketplace-header,:root #main.Topbar-Inside-Titlebar-Snippet .f59DF4qQ_FphIrVeRYkI,:root #main.Topbar-Inside-Titlebar-Snippet .cj6vRk3nFAi80HSVqX91{padding-top:15px !important}:root #main.Topbar-Inside-Titlebar-Snippet .main-home-filterChipsContainer{padding-top:8px}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-topBar{height:64px !important;box-shadow:none}:root #main.Topbar-Inside-Titlebar-Snippet .artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum{padding-top:32px}:root #main.Topbar-Inside-Titlebar-Snippet .main-view-container .search-searchCategory-SearchCategory{height:64px;padding-top:17px}:root #main.Collapse-Topbar-Snippet .main-topBar-topbarContentWrapper nav{justify-content:center;display:flex}:root #main.Header-Background .main-entityHeader-imageContainerNew{align-self:center;left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 24px + var(--content-spacing));position:relative;z-index:1}:root #main.Header-Background .main-entityHeader-headerText{background-color:rgba(var(--spice-rgb-main-transition), var(--header-opacity));padding:24px 32px;border-radius:var(--border-radius);min-width:fit-content;box-shadow:0 2px 4px rgba(var(--spice-rgb-shadow), 0.1);justify-content:space-evenly !important;height:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 48px)}:root #main.Header-Background .main-entityHeader-imageContainerNew+.main-entityHeader-headerText{padding-left:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + 32px + var(--content-spacing));margin-right:calc(clamp(128px,128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104,232px) + var(--content-spacing))}:root #main.Header-Background:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>*{opacity:var(--top-bar-opacity) !important}:root #main.AM-Gradient-Include-Existing-Snippet.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame),:root #main.Replace-Existing-Banners.Banner-Enabled .under-main-view>div:not(.comfy-banner-frame){display:none !important}:root #main.Lyrics main>div>div:empty{--lyrics-color-background: transparent !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame{position:absolute;width:100%;height:100%;z-index:0;filter:blur(calc(var(--image-blur) * 10));background-image:var(--gradient-background-image)}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image{position:absolute !important;width:var(--gradient-width) !important;aspect-ratio:1;animation:rotate var(--gradient-speed) linear infinite;border-radius:var(--gradient-radius) !important;mix-blend-mode:var(--gradient-blend-mode);background-size:cover !important}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:first-of-type{height:revert;left:unset;background-size:unset;background-position:unset;filter:none;-webkit-mask-image:none;mask-image:none;right:0;top:0;z-index:10}:root #main.Apple-Music-Gradient-Snippet .comfy-banner-frame .comfy-banner-image:last-of-type{display:revert;left:0;bottom:0;animation-direction:reverse}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}:root .main-trackList-active .main-trackList-rowTitle{color:var(--spice-text) !important;text-shadow:0px 0px 6px var(--spice-text);-webkit-text-stroke:thin}:root .main-trackList-trackListHeader._2ajKWDiy6YvJu5wo8I1g{background:var(--spice-main) !important;top:0 !important}:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListRow:hover,:root .main-trackList-trackListHeader:not(._2ajKWDiy6YvJu5wo8I1g) .main-trackList-trackListHeaderRow:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.05)}:root .main-trackList-trackListRow,:root .main-trackList-trackListHeaderRow{border-radius:var(--border-radius);border:none;transition:200ms background-color}:root .main-trackList-trackListRow.main-trackList-selected,:root .main-trackList-trackListHeaderRow.main-trackList-selected{background-color:rgba(var(--spice-rgb-selected-row), 0.1)}:root .main-trackList-trackListRow.main-trackList-selected:hover,:root .main-trackList-trackListHeaderRow.main-trackList-selected:hover{background-color:rgba(var(--spice-rgb-selected-row), 0.15)}:root .main-trackList-trackListRow .main-type-mesto,:root .main-trackList-trackListRow .main-type-ballad,:root .main-trackList-trackListHeaderRow .main-type-mesto,:root .main-trackList-trackListHeaderRow .main-type-ballad{transition:300ms color}:root .main-trackList-trackListRow .main-trackList-rowImageFallback,:root .main-trackList-trackListHeaderRow .main-trackList-rowImageFallback{border-radius:var(--border-radius) !important}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListHeader .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListHeader .main-trackList-rowSectionIndex{opacity:0}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowSectionIndex{background:rgba(var(--spice-rgb-play-button), 0.5)}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:hover .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow:focus-within .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow.main-trackList-active .main-trackList-rowImagePlayPauseButton{opacity:1}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow .main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowImagePlayPauseButton,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow .main-trackList-rowSectionIndex{color:var(--spice-sidebar);border-radius:var(--border-radius);transition:200ms opacity,200ms background}:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart img) .main-trackList-trackListRow>.main-trackList-rowSectionIndex,:root #main.Remove-Tracklist-Index .main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) .main-trackList-trackListRow>.main-trackList-rowSectionIndex{position:relative;z-index:1000;top:8px;left:56px;width:40px;height:40px;justify-content:center;text-indent:-1000px}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount=\"3\"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount=\"4\"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount=\"5\"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important}:root #main.Remove-Tracklist-Index .main-trackList-indexable:has(.main-trackList-rowSectionStart img)[aria-colcount=\"6\"] .main-trackList-trackListRowGrid{padding-left:2px;grid-template-columns:[index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important}:root{--border-radius: 8px;--button-radius: 8px;--image-blur: 4px;--gradient-speed: 50s;--gradient-width: 150%;--gradient-blend-mode: luminosity;--gradient-background-image: none;--gradient-radius: 50%;--cover-art-width: 84px;--cover-art-height: 84px;--cover-art-radius: 8px;--cover-art-left: 0px;--cover-art-bottom: 20px;--header-opacity: 0.6;--tracklist-gradient-height: 232px;--tracklist-gradient-opacity: 0.6;--tracklist-gradient-noise: var(--background-noise);--image-url: none}:root button,:root button span,:root input,:root select,:root img,:root .x-entityImage-xsmall,:root div[style*=background-image]:has(img),:root .profile-userEditDetails-image div:nth-child(2),:root [data-encore-id=buttonSecondary]{border-radius:var(--border-radius) !important}:root button:not(.main-editImageButton-overlay):not([style*=background-image]):not(.main-buddyFeed-overlay),:root button span:not(.Lyric.Synced.Line):not([data-encore-id=text]),:root button figure img,:root button:has(span:empty),:root input:not([style*=background-image]),:root select,:root [data-encore-id=buttonSecondary]{border-radius:var(--button-radius) !important}:root .Card .main-card-imageContainer *{border-radius:var(--border-radius) !important}:root .Root__top-container{overflow:hidden}:root:not(:has(.global-nav)) .Root__top-container{padding-top:max(var(--comfy-topbar-height, 40px)/var(--zoom, 1),8px) !important}:root .global-nav .Root__top-container{grid-template-rows:max(48px,var(--comfy-topbar-height, 64px)/var(--zoom, 1) - 16px) minmax(0, 1fr) auto}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav) body::after{height:calc(var(--comfy-topbar-height, 64px)/var(--zoom, 1)) !important}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen):has(.global-nav-centered) body::after{height:min(32px/var(--zoom, 1),var(--comfy-topbar-height, 64px)/var(--zoom, 1)) !important;top:calc((var(--comfy-topbar-height, 64px)/var(--zoom, 1) - min(32px/var(--zoom, 1),var(--comfy-topbar-height, 64px)))/2)}:root.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav{padding-block:calc(var(--comfy-topbar-height, 64px)/2 - 8px)}:root.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after{content:\"\";position:absolute;right:0;z-index:999;backdrop-filter:brightness(2.12);width:calc(135px/var(--zoom, 1));height:calc(var(--comfy-topbar-height, 40px)/var(--zoom, 1))}:root .main-trackList-playingIcon,:root .view-homeShortcutsGrid-playingIcon,:root [src*=equaliser]{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E\");background:var(--spice-button-active);content-visibility:hidden;-webkit-mask-repeat:no-repeat;border-radius:0 !important}:root .x-settings-equalizerPanelCanvas{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;border-radius:0 !important}:root .encore-dark-theme,:root .encore-dark-theme .encore-base-set{--background-elevated-base: var(--spice-main-elevated);--background-highlight: var(--spice-highlight)}:root .encore-bright-accent-set{--background-base: var(--spice-play-button);--background-highlight: var(--spice-play-button-active);--background-press: var(--spice-play-button-active)}:root .encore-inverted-light-set{--background-highlight: var(--spice-text);--background-press: var(--spice-subtext)}:root .npv-background-image__overlay{background:linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%),var(--background-noise);background-color:unset}:root .Root__main-view .main-view-container__scroll-node-child{padding-bottom:0}:root aside#Desktop_PanelContainer_Id .os-scrollbar-vertical,:root .os-scrollbar-horizontal{display:none !important}:root .os-scrollbar-track,:root ::-webkit-scrollbar{width:8px}:root .os-scrollbar-handle,:root ::-webkit-scrollbar-thumb{border-radius:1em;--os-handle-perpendicular-size-active: 8px;--os-handle-perpendicular-size-hover: 8px;--os-handle-perpendicular-size: 8px}:root .os-scrollbar{--os-padding-perpendicular: 4px}:root ::-webkit-scrollbar-track{margin-bottom:10px}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,:root .main-addButton-active{color:var(--spice-heart)}:root .Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle:hover,:root .main-addButton-active:hover{color:rgba(var(--spice-rgb-heart), 0.7)}:root #_R_G *:not([stroke=none]){stroke:var(--spice-heart)}:root .main-trackList-rowHeartButton *:not([fill=none]),:root .control-button-heart *:not([fill=none]),:root #_R_G *:not([fill=none]){fill:var(--spice-heart) !important}:root .main-contextMenu-tippy.main-contextMenu-tippyEnterActive{box-shadow:none !important}:root #context-menu{overflow:hidden}:root #context-menu .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span+svg)::before{border-bottom:1px solid rgba(var(--spice-rgb-selected-row), 0.1);content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}:root #context-menu .main-popper-arrow,:root #context-menu .main-popper-arrow::before{background-color:var(--spice-player) !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]){background-color:var(--spice-player)}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a{border-radius:2px !important}:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) button[aria-expanded=true],:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):focus,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a:not(.main-contextMenu-disabled):hover,:root #context-menu ul:not([aria-labelledby~=device-picker-header]) a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color}:root #bookmark-menu{background-color:var(--spice-player);border-radius:var(--border-radius)}:root #bookmark-menu .bookmark-filter{background-color:var(--spice-player)}:root #bookmark-menu button,:root #bookmark-menu a{border-radius:0}:root #bookmark-menu button::before,:root #bookmark-menu button::after,:root #bookmark-menu a::before,:root #bookmark-menu a::after{content:none}:root #bookmark-menu button:not(.main-contextMenu-disabled):focus,:root #bookmark-menu button:not(.main-contextMenu-disabled):hover,:root #bookmark-menu button[aria-expanded=true],:root #bookmark-menu a:not(.main-contextMenu-disabled):focus,:root #bookmark-menu a:not(.main-contextMenu-disabled):hover,:root #bookmark-menu a[aria-expanded=true]{background-color:rgba(var(--spice-rgb-pagelink-active), 0.15);transition:150ms background-color}\n" }, { "path": "Comfy/app.scss", "content": "@forward \"assets/main\";\n@forward \"assets/navbar\";\n@forward \"assets/now_playing\";\n@forward \"assets/settings\";\n@forward \"assets/top_bar\";\n@forward \"assets/snippets\";\n@forward \"assets/tracklist\";\n\n:root {\n\t// Variables\n\t--border-radius: 8px;\n\t--button-radius: 8px;\n\t--image-blur: 4px;\n\t--gradient-speed: 50s;\n\t--gradient-width: 150%;\n\t--gradient-blend-mode: luminosity;\n\t--gradient-background-image: none;\n\t--gradient-radius: 50%;\n\t--cover-art-width: 84px;\n\t--cover-art-height: 84px;\n\t--cover-art-radius: 8px;\n\t--cover-art-left: 0px;\n\t--cover-art-bottom: 20px;\n\t--header-opacity: 0.6;\n\t--tracklist-gradient-height: 232px;\n\t--tracklist-gradient-opacity: 0.6;\n\t--tracklist-gradient-noise: var(--background-noise);\n\t--image-url: none;\n\n\t// Custom Radii\n\tbutton,\n\tbutton span,\n\tinput,\n\tselect,\n\timg,\n\t.x-entityImage-xsmall,\n\tdiv[style*=\"background-image\"]:has(img),\n\t.profile-userEditDetails-image div:nth-child(2),\n\t[data-encore-id=\"buttonSecondary\"] {\n\t\tborder-radius: var(--border-radius) !important;\n\t}\n\n\tbutton:not(.main-editImageButton-overlay):not([style*=\"background-image\"]):not(.main-buddyFeed-overlay),\n\tbutton span:not(.Lyric.Synced.Line):not([data-encore-id=\"text\"]),\n\tbutton figure img,\n\tbutton:has(span:empty),\n\tinput:not([style*=\"background-image\"]),\n\tselect,\n\t[data-encore-id=\"buttonSecondary\"] {\n\t\tborder-radius: var(--button-radius) !important;\n\t}\n\n\t.Card .main-card-imageContainer * {\n\t\tborder-radius: var(--border-radius) !important;\n\t}\n\n\t// Remove Overflow\n\t.Root__top-container {\n\t\toverflow: hidden;\n\t}\n\n\t// Custom Topbar Height + Bg Colour Matching\n\t&:not(:has(.global-nav)) .Root__top-container {\n\t\tpadding-top: max(calc(var(--comfy-topbar-height, 40px) / var(--zoom, 1)), 8px) !important;\n\t}\n\t\n\t.global-nav .Root__top-container {\n\t\tgrid-template-rows: max(48px, calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1) - 16px)) minmax(0, 1fr) auto;\n\t}\n\n\t&.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) {\n\t\t&:has(.global-nav) body::after {\n\t\t\theight: calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1)) !important;\n\t\t}\n\n\t\t&:has(.global-nav-centered) body::after {\n\t\t\theight: min(calc(32px / var(--zoom, 1)), calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1))) !important;\n\t\t\ttop: calc((var(--comfy-topbar-height, 64px) / var(--zoom, 1) - min(calc(32px / var(--zoom, 1)), var(--comfy-topbar-height, 64px))) / 2);\n\t\t}\n\t}\n\n\n\t&.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav {\n\t\tpadding-block: calc(var(--comfy-topbar-height, 64px) / 2 - 8px);\n\t}\n\n\t&.spotify__container--is-desktop.spotify__os--is-windows:not(.fullscreen) body::after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tz-index: 999;\n\t\tbackdrop-filter: brightness(2.12);\n\t\twidth: calc(135px / var(--zoom, 1));\n\t\theight: calc(var(--comfy-topbar-height, 40px) / var(--zoom, 1));\n\t}\n\n\t// Filtering\n\t.main-trackList-playingIcon,\n\t.view-homeShortcutsGrid-playingIcon,\n\t[src*=\"equaliser\"] {\n\t\t-webkit-mask-image: url(\"data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E\");\n\t\tbackground: var(--spice-button-active);\n\t\tcontent-visibility: hidden;\n\t\t-webkit-mask-repeat: no-repeat;\n\t\tborder-radius: 0 !important;\n\t}\n\n\t.x-settings-equalizerPanelCanvas {\n\t\tfilter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1181%) hue-rotate(346deg) brightness(101%) contrast(105%) !important;\n\t\tborder-radius: 0 !important;\n\t}\n\n\t// Base Sets\n\t.encore-dark-theme,\n\t.encore-dark-theme .encore-base-set {\n\t\t--background-elevated-base: var(--spice-main-elevated);\n\t\t--background-highlight: var(--spice-highlight);\n\t}\n\n\t.encore-bright-accent-set {\n\t\t--background-base: var(--spice-play-button);\n\t\t--background-highlight: var(--spice-play-button-active);\n\t\t--background-press: var(--spice-play-button-active);\n\t}\n\n\t.encore-inverted-light-set {\n\t\t--background-highlight: var(--spice-text);\n\t\t--background-press: var(--spice-subtext);\n\t}\n\n\t// Premium Fullscreen Overlay\n\t.npv-background-image__overlay {\n\t\tbackground: linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%), var(--background-noise);\n\t\tbackground-color: unset;\n\t}\n\n\t// Scrollbars\n\t.Root__main-view .main-view-container__scroll-node-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\taside#Desktop_PanelContainer_Id .os-scrollbar-vertical,\n\t.os-scrollbar-horizontal {\n\t\tdisplay: none !important;\n\t}\n\n\t.os-scrollbar-track,\n\t::-webkit-scrollbar {\n\t\twidth: 8px;\n\t}\n\n\t.os-scrollbar-handle,\n\t::-webkit-scrollbar-thumb {\n\t\tborder-radius: 1em;\n\t\t--os-handle-perpendicular-size-active: 8px;\n\t\t--os-handle-perpendicular-size-hover: 8px;\n\t\t--os-handle-perpendicular-size: 8px;\n\t}\n\n\t.os-scrollbar {\n\t\t--os-padding-perpendicular: 4px;\n\t}\n\n\t::-webkit-scrollbar-track {\n\t\tmargin-bottom: 10px;\n\t}\n\n\t// Coloured heart\n\t.Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,\n\t.main-addButton-active {\n\t\tcolor: var(--spice-heart);\n\n\t\t&:hover {\n\t\t\tcolor: rgba(var(--spice-rgb-heart), 0.7);\n\t\t}\n\t}\n\n\t#_R_G *:not([stroke=\"none\"]) {\n\t\tstroke: var(--spice-heart);\n\t}\n\n\t.main-trackList-rowHeartButton,\n\t.control-button-heart,\n\t#_R_G {\n\t\t& *:not([fill=\"none\"]) {\n\t\t\tfill: var(--spice-heart) !important;\n\t\t}\n\t}\n\n\t// Menus\n\t.main-contextMenu-tippy.main-contextMenu-tippyEnterActive {\n\t\tbox-shadow: none !important;\n\t}\n\n\t#context-menu {\n\t\toverflow: hidden;\n\n\t\t.main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before {\n\t\t\tborder-bottom: 1px solid rgba(var(--spice-rgb-selected-row), .1);\n\t\t\tcontent: \"\";\n\t\t\tleft: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t.main-popper-arrow,\n\t\t.main-popper-arrow::before {\n\t\t\tbackground-color: var(--spice-player) !important;\n\t\t}\n\n\t\tul:not([aria-labelledby~=\"device-picker-header\"]) {\n\t\t\tbackground-color: var(--spice-player);\n\n\t\t\tbutton,\n\t\t\ta {\n\t\t\t\tborder-radius: 2px !important;\n\n\t\t\t\t&:not(.main-contextMenu-disabled):focus,\n\t\t\t\t&:not(.main-contextMenu-disabled):hover,\n\t\t\t\t&[aria-expanded=\"true\"] {\n\t\t\t\t\tbackground-color: rgba(var(--spice-rgb-pagelink-active), 0.15);\n\t\t\t\t\ttransition: 150ms background-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t#bookmark-menu {\n\t\tbackground-color: var(--spice-player);\n\t\tborder-radius: var(--border-radius);\n\n\t\t.bookmark-filter {\n\t\t\tbackground-color: var(--spice-player);\n\t\t}\n\n\t\tbutton,\n\t\ta {\n\t\t\tborder-radius: 0;\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tcontent: none;\n\t\t\t}\n\n\t\t\t&:not(.main-contextMenu-disabled):focus,\n\t\t\t&:not(.main-contextMenu-disabled):hover,\n\t\t\t&[aria-expanded=\"true\"] {\n\t\t\t\tbackground-color: rgba(var(--spice-rgb-pagelink-active), 0.15);\n\t\t\t\ttransition: 150ms background-color;\n\t\t\t}\n\t\t}\n\t}\n}" }, { "path": "Comfy/assets/_main.scss", "content": "// Global Nav Support\n:root .global-nav {\n\t.Root__main-view .main-view-container .main-entityHeader-container {\n\t\tpadding: 32px;\n\t\talign-items: center;\n\t\tmargin-top: 64px;\n\t}\n}\n\n:root #main.Banner-Enabled {\n\t.comfy-banner-frame {\n\t\tdisplay: block;\n\n\t\t.comfy-banner-image {\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: top;\n\t\t\tbackground-image: var(--image-url);\n\t\t\tfilter: blur(var(--image-blur));\n\t\t\t-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));\n\t\t\tmask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));\n\t\t\ttransition: background 0.5s ease;\n\t\t}\n\n\t\t.comfy-banner-image:last-of-type {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\n\t.main-entityHeader-backgroundColor {\n\t\tbackground: none !important;\n\t}\n\n\t// gradient noise gets stretched vertically with this approach - but no black lines\n\t&.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) {\n\n\t\t.artist-artistOverview-artistOverviewContent,\n\t\t.main-actionBarBackground-background {\n\t\t\tmin-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px - 12px) !important;\n\t\t}\n\t}\n\n\t.artist-artistOverview-artistOverviewContent,\n\t.main-actionBarBackground-background {\n\t\tbackground-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0,\n\t\t\t\tvar(--spice-main) var(--tracklist-gradient-height)),\n\t\t\tvar(--tracklist-gradient-noise) !important;\n\t\tbackground-color: transparent !important;\n\t\theight: calc(100% - 250px);\n\t\tmin-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px);\n\t\tbackground-size: auto 100%, 300px var(--tracklist-gradient-height);\n\t\tbackground-repeat: repeat-x;\n\t}\n\n\t.artist-artistOverview-artistOverviewContent {\n\t\tposition: relative !important;\n\n\t\t.main-actionBarBackground-background {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: unset !important;\n\t\t}\n\t}\n\n\t.playlist-playlist-playlistContent,\n\t.dTKw7B8X1ybw7SHebMH3,\n\t.xcTrtCsYOPtSElbX9inq,\n\t.EmeHQXR87mUskYK6xEde,\n\t.N_8iI7NKHP0iG2jp3g0R {\n\t\tbackground: none; // Remove background\n\t}\n\n\t.main-entityHeader-background {\n\t\theight: calc(40vh + var(--tracklist-gradient-height));\n\t\tmax-height: 100%;\n\t\t&.main-entityHeader-overlay {\n\t\t\t--bgColor: unset !important;\n\t\t}\n\t}\n\n}\n\n:root .Root__main-view {\n\n\t// Banner\n\t.comfy-banner-frame {\n\t\tdisplay: none;\n\t}\n\n\t.main-entityHeader-withBackgroundImage {\n\t\theight: 40vh !important;\n\t}\n\n\t// Ad containers\n\t.main-leaderboardComponent-container,\n\t.sponsor-container {\n\t\tdisplay: none !important;\n\t}\n\n\t.main-view-container {\n\n\t\t// Main Page Tweaks\n\t\tmain:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(> .visualizer-container)) {\n\t\t\tposition: sticky;\n\t\t\tpadding-bottom: 32px;\n\n\t\t\t.os-host-overflow,\n\t\t\t.os-padding,\n\t\t\t.os-viewport,\n\t\t\tdiv[data-overlayscrollbars~=\"host\"],\n\t\t\t[data-overlayscrollbars-viewport~=\"scrollbarHidden\"] {\n\t\t\t\toverflow: visible !important; // Override overflow property\n\t\t\t}\n\t\t}\n\n\t\t// Radio Button Coloring\n\t\tinput:checked~.x-toggle-indicatorWrapper {\n\t\t\tbackground-color: var(--spice-radio-btn-active);\n\t\t}\n\n\t\t// Cards\n\t\t&:not(:has(#stats-app)) .main-card-card {\n\t\t\tbackground: var(--spice-sidebar);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tpadding: 0;\n\t\t\toverflow: hidden;\n\n\t\t\t&:hover {\n\t\t\t\tbackground: var(--spice-card);\n\t\t\t}\n\n\t\t\t.main-card-PlayButtonContainer {\n\t\t\t\tright: 12px !important;\n\t\t\t}\n\n\t\t\t.main-card-imageContainer {\n\t\t\t\tmargin-bottom: -4px;\n\n\t\t\t\t.main-cardImage-circular,\n\t\t\t\timg {\n\t\t\t\t\tborder-radius: 0 !important; // Remove border-radius\n\t\t\t\t}\n\n\t\t\t\t.main-cardImage-imageWrapper {\n\t\t\t\t\tbox-shadow: none !important;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.main-card-cardMetadata {\n\t\t\t\tpadding: 16px;\n\t\t\t}\n\t\t}\n\n\t\t// Headers\n\t\t.rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc,\n\t\t.hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4,\n\t\t.main-home-filterChipsContainer>div:first-child {\n\t\t\t&:after {\n\t\t\t\tbackground-color: var(--spice-main);\n\t\t\t}\n\t\t}\n\n\t\t.main-home-homeHeader {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.main-entityHeader-container {\n\t\t\tpadding: 32px;\n\t\t\tjustify-content: center;\n\n\t\t\t&>div:nth-last-of-type(2),\n\t\t\t&>div.contentSpacing,\n\t\t\t.main-entityHeader-imageContainer {\n\t\t\t\talign-self: center;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\t&+.main-entityHeader-headerText {\n\t\t\t\t\tflex: unset;\n\t\t\t\t\tjustify-content: center;\n\n\t\t\t\t\t.main-entityHeader-title h1 {\n\t\t\t\t\t\tfont-size: 3rem !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Action bar\n\t\t.main-actionBar-ActionBar {\n\t\t\tpadding: 8px 16px 16px 16px; // Adjust padding\n\n\t\t\t.main-actionBar-ActionBarRow {\n\t\t\t\t&:first-of-type {\n\t\t\t\t\t>*:first-child {\n\t\t\t\t\t\tmargin-top: -24px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t>*:first-child {\n\t\t\t\t\tmargin-left: calc(var(--content-spacing) + 3px);\n\t\t\t\t}\n\n\t\t\t\t>:first-child:not(:only-child) {\n\t\t\t\t\tmargin-right: calc(var(--content-spacing) + 4px);\n\t\t\t\t}\n\n\t\t\t\t[class*=\"Button\"] {\n\t\t\t\t\tmin-block-size: 32px;\n\t\t\t\t\tpadding-block: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Artist Page\n\t\t.artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer {\n\t\t\tpadding-bottom: var(--grid-gap);\n\t\t}\n\n\t\t// Home Page\n\t\t.view-homeShortcutsGrid-shortcut {\n\t\t\tborder-radius: var(--border-radius);\n\n\t\t\t.view-homeShortcutsGrid-imageWrapper {\n\t\t\t\tborder-radius: calc(var(--border-radius) + 15px);\n\t\t\t}\n\n\t\t\t.main-playButton-PlayButton {\n\t\t\t\tbackground: none !important;\n\t\t\t}\n\t\t}\n\n\t\t// Lyrics plus\n\t\t.lyrics-lyricsContainer-Provider {\n\t\t\tfont-size: 0;\n\t\t}\n\n\t\t.lyrics-lyricsContainer-LyricsContainer {\n\t\t\t&::-webkit-scrollbar {\n\t\t\t\twidth: 0 !important;\n\t\t\t\theight: 0 !important;\n\t\t\t}\n\n\t\t\t.lyrics-lyricsContainer-LyricsBackground {\n\t\t\t\tz-index: -1;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-size: cover;\n\t\t\t\t-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));\n\t\t\t\tmask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));\n\t\t\t}\n\t\t}\n\n\t\t// Shows\n\t\tsection[data-testid=\"your-episodes-page\"] {\n\t\t\t.main-actionBarBackground-background {\n\t\t\t\theight: calc(100vh - 494px) !important;\n\t\t\t}\n\t\t}\n\n\t\tsection[data-testid=\"episode\"] {\n\t\t\t.main-actionBar-ActionBar {\n\t\t\t\tflex-direction: column-reverse;\n\n\t\t\t\t.main-actionBar-ActionBarRow {\n\t\t\t\t\tmargin-top: 0 !important;\n\n\t\t\t\t\t&:nth-child(1) {\n\t\t\t\t\t\tpadding-top: 2rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}" }, { "path": "Comfy/assets/_navbar.scss", "content": ":root .Root__nav-bar {\n\t.main-rootlist-wrapper {\n\t\tdiv:nth-child(2) {\n\t\t\t>li {\n\t\t\t\t.main-yourLibraryX-listRowEntityImage {\n\t\t\t\t\tborder-radius: var(--border-radius) !important;\n\t\t\t\t}\n\n\t\t\t\t>div {\n\t\t\t\t\t&:active::after {\n\t\t\t\t\t\tbackground-color: var(--spice-highlight-elevated);\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\tbottom: 0;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\tright: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t[role=\"presentation\"]>li>div>div>div>div>div>.x-entityImage-imageContainer {\n\t\t\tbox-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), .0) !important;\n\t\t}\n\t}\n\n\t// Library header shadow\n\t.main-yourLibraryX-isScrolled {\n\t\tbox-shadow: none !important;\n\t}\n\n\t// Scrollbar\n\t.os-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\t// Forcing line-breaking on long text\n\t#Desktop_LeftSidebar_Id {\n\t\t.main-yourLibraryX-entryPoints {\n\t\t\tspan.LineClamp {\n\t\t\t\t-webkit-line-clamp: 1 !important;\n\t\t\t\tline-clamp: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n}" }, { "path": "Comfy/assets/_now_playing.scss", "content": ":root .Root__top-container {\n\n\t// Cover-art\n\t.main-nowPlayingWidget-nowPlaying {\n\t\theight: 0;\n\t\tz-index: 1;\n\t\tleft: var(--cover-art-left);\n\n\t\t.main-coverSlotCollapsed-container {\n\t\t\tbottom: var(--cover-art-bottom);\n\t\t\tborder-radius: var(--cover-art-radius);\n\n\t\t\t>div button {\n\t\t\t\tborder-radius: var(--cover-art-radius) !important;\n\t\t\t\tbackground: none;\n\t\t\t}\n\n\t\t\t.cover-art,\n\t\t\t.VideoPlayer__container video {\n\t\t\t\twidth: var(--cover-art-width) !important;\n\t\t\t\theight: var(--cover-art-height) !important;\n\t\t\t\tborder-radius: var(--cover-art-radius);\n\t\t\t\toverflow: hidden;\n\t\t\t\tobject-fit: cover;\n\t\t\t\tmax-height: none;\n\t\t\t\tmax-width: none;\n\t\t\t}\n\t\t}\n\t}\n}\n\n:root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container {\n\t.Root__now-playing-bar {\n\t\t.main-nowPlayingBar-container {\n\t\t\tposition: relative;\n\t\t\tborder-top: none;\n\t\t\tflex-direction: column-reverse !important;\n\t\t\tbackground-clip: text;\n\n\t\t\t&::before {\n\t\t\t\tz-index: auto !important;\n\t\t\t}\n\n\t\t\t&:has(.main-connectBar-connectBar)::before {\n\t\t\t\theight: calc(100% - 40px);\n\t\t\t\ttop: 40px;\n\t\t\t}\n\n\t\t\t.main-nowPlayingBar-nowPlayingBar {\n\t\t\t\tmargin-bottom: 12px;\n\n\t\t\t\t// Center\n\t\t\t\t.main-nowPlayingBar-center {\n\n\t\t\t\t\t// Player Controls\n\t\t\t\t\t.player-controls__buttons--new-icons {\n\t\t\t\t\t\tmargin-bottom: 0px !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Playback Area\n\t\t\t\t\t.playback-bar {\n\t\t\t\t\t\tposition: fixed;\n\t\t\t\t\t\tdisplay: grid;\n\t\t\t\t\t\tgrid-template-columns: auto auto;\n\t\t\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\t\t\"time-left time-right\"\n\t\t\t\t\t\t\t\"bar bar\";\n\t\t\t\t\t\tbottom: 0;\n\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\tgap: 0;\n\n\t\t\t\t\t\t.saber-hilt {\n\t\t\t\t\t\t\theight: 0;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Timers\n\t\t\t\t\t\t&>div:not(.playback-progressbar-container) {\n\t\t\t\t\t\t\ttext-align: center;\n\n\t\t\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\t\t\tgrid-area: time-left;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:last-of-type {\n\t\t\t\t\t\t\t\tgrid-area: time-right;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Progess Bar\n\t\t\t\t\t\t.playback-progressbar-container {\n\t\t\t\t\t\t\tdisplay: contents;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.playback-progressbar {\n\t\t\t\t\t\t\tgrid-column: 1/3;\n\t\t\t\t\t\t\tgrid-area: bar;\n\t\t\t\t\t\t\theight: 11px;\n\n\t\t\t\t\t\t\t.progress-bar {\n\t\t\t\t\t\t\t\t--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);\n\t\t\t\t\t\t\t\t--fg-color: var(--spice-progress-fg);\n\t\t\t\t\t\t\t\t--progress-bar-height: 12px;\n\t\t\t\t\t\t\t\t--progress-bar-radius: 0;\n\n\t\t\t\t\t\t\t\t.x-progressBar-fillColor {\n\t\t\t\t\t\t\t\t\twidth: 107%;\n\t\t\t\t\t\t\t\t\tbackground-color: transparent;\n\t\t\t\t\t\t\t\t\tbackground-image: linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t.progress-bar__slider {\n\t\t\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Right\n\t\t\t\t.main-nowPlayingBar-right {\n\n\t\t\t\t\t// Volume Bar\n\t\t\t\t\t.main-nowPlayingBar-volumeBar .progress-bar {\n\t\t\t\t\t\t--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Miscolored right side button svgs\n\t\t\t\t\t.main-nowPlayingBar-extraControls {\n\t\t\t\t\t\tbutton:not(.main-genericButton-buttonActive) {\n\t\t\t\t\t\t\tcolor: rgba(var(--spice-rgb-selected-row), 0.7);\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tcolor: var(--spice-text) !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.main-devicePicker-indicator {\n\t\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\t}\n}" }, { "path": "Comfy/assets/_settings.scss", "content": "// Spotify settings\n.x-settings-container {\n\tmax-width: unset;\n}\n\n.x-toggle-indicatorWrapper {\n\tborder-radius: var(--button-radius);\n}\n\n// Comfy settings\n#main.Settings-Open~generic-modal .GenericModal__overlay {\n\t// Failsafe incase spotify's variables are not present\n\t--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);\n\t--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1);\n\n\t// Header Section Styling\n\t.main-trackCreditsModal-header {\n\t\tpadding: 12px 12px 12px 16px;\n\n\t\t.main-type-alto {\n\t\t\tfont-size: 25px;\n\t\t}\n\n\t\t.main-trackCreditsModal-closeBtn {\n\t\t\tbackground-color: var(--background-tinted-base);\n\t\t\theight: 34px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.04) !important;\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\ttransform: scale(1);\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\ttransform: scale(0.98) !important;\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t}\n\n\t\t\t&:first-of-type {\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\n\t\t\t&:not(:last-of-type) {\n\t\t\t\tmargin-right: 8px;\n\t\t\t}\n\n\t\t\t&:last-of-type {\n\t\t\t\tsvg {\n\t\t\t\t\tscale: 0.8;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Scrollbars And Modal Sizing\n\t.main-embedWidgetGenerator-container {\n\t\tmax-height: 75vh !important;\n\t\twidth: 550px !important;\n\t}\n\n\t.main-trackCreditsModal-mainSection {\n\t\tpadding: 0px 16px 0;\n\t\tscrollbar-width: thin;\n\t\tmin-height: calc(100% - 60px);\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\twidth: calc(100% - 12px);\n\t\t\tleft: 0;\n\t\t\theight: 25px;\n\t\t\tbackground: linear-gradient(to bottom, transparent, rgba(var(--spice-rgb-player), 0.5));\n\t\t\tpointer-events: none;\n\t\t\tborder-radius: 8px;\n\t\t\tz-index: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\t}\n\n\t.GenericModal ::-webkit-scrollbar,\n\t.main-trackCreditsModal-mainSection ::-webkit-scrollbar,\n\t.main-trackCreditsModal-originalCredits ::-webkit-scrollbar {\n\t\twidth: 8px !important;\n\t}\n\n\t.GenericModal ::-webkit-scrollbar-thumb,\n\t.main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,\n\t.main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb {\n\t\tborder-radius: 1em !important;\n\t}\n\n\t.GenericModal {\n\t\tborder-radius: 10px;\n\t}\n}\n\n// Main Section Styling\n.comfy-settings {\n\n\t// Carousel Styling\n\t.search-searchCategory-SearchCategory {\n\t\tbackground: var(--spice-player);\n\t\tgrid-column: 1 / -1;\n\t\theight: 48px;\n\t\tpadding-top: 7px;\n\t\tposition: sticky;\n\t\ttop: 0px;\n\t\tz-index: 1;\n\n\t\t& {\n\t\t\theight: unset;\n\t\t\tpadding-bottom: 12px;\n\t\t\tpadding-top: 12px;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t.search-searchCategory-wrapper {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: -ms-flexbox;\n\t\t\tdisplay: flex;\n\t\t\t-webkit-box-align: center;\n\t\t\t-ms-flex-align: center;\n\t\t\talign-items: center;\n\t\t\toverflow: hidden;\n\t\t\twidth: 100%;\n\t\t\tpadding-inline: 0px;\n\n\t\t\t.search-searchCategory-contentArea {\n\n\t\t\t\t&.search-searchCategory-showLeftButton .search-searchCategory-categoryGrid {\n\t\t\t\t\t-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);\n\t\t\t\t\tmask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px);\n\t\t\t\t}\n\n\t\t\t\t&.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {\n\t\t\t\t\t-webkit-mask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);\n\t\t\t\t\tmask-image: linear-gradient(90deg, var(--spice-sidebar) calc(100% - 120px), transparent);\n\t\t\t\t}\n\n\t\t\t\t&.search-searchCategory-showLeftButton.search-searchCategory-showRightButton .search-searchCategory-categoryGrid {\n\t\t\t\t\t-webkit-mask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);\n\t\t\t\t\tmask-image: linear-gradient(90deg, transparent, var(--spice-sidebar) 120px, var(--spice-sidebar) calc(100% - 120px), transparent);\n\t\t\t\t}\n\n\t\t\t\t.search-searchCategory-categoryGrid {\n\t\t\t\t\toverflow-y: hidden;\n\n\t\t\t\t\t&Item {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\tpadding: 2px;\n\n\t\t\t\t\t\tbutton::after {\n\t\t\t\t\t\t\tborder: none !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:active,\n\t\t\t\t\t\t&:focus,\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\t\toutline: none;\n\t\t\t\t\t\t\ttext-decoration: none;\n\n\t\t\t\t\t\t\t&>* {\n\t\t\t\t\t\t\t\toutline: 5px auto #3673d4;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&>* {\n\t\t\t\t\t\t\tmargin-inline-end: 8px;\n\t\t\t\t\t\t\tmargin-block-end: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.search-searchCategory-showRightButton .search-searchCategory-carouselButtonRight,\n\t\t.search-searchCategory-showRightButton:hover .search-searchCategory-carouselButtonRight,\n\t\t.search-searchCategory-showLeftButton .search-searchCategory-carouselButtonLeft,\n\t\t.search-searchCategory-showLeftButton:hover .search-searchCategory-carouselButtonLeft {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: auto;\n\t\t}\n\t}\n\n\n\t// Contents Styling\n\t.setting-header {\n\t\ttext-align: center;\n\t\tpadding: 5px 0;\n\t}\n\n\t.setting-card {\n\t\tbackground-color: var(--background-tinted-base);\n\t\tborder-radius: 10px;\n\t\tmargin: 8px 0;\n\n\t\t.setting-container {\n\t\t\tpadding: 12px 16px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\n\t\t\t.setting-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tjustify-content: space-between;\n\n\t\t\t\t.setting-title {\n\t\t\t\t\tpadding-right: 15px;\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t}\n\n\t\t\t\t.x-settings-tooltip {\n\t\t\t\t\tcursor: help !important;\n\n\t\t\t\t\t.x-settings-tooltipIconWrapper {\n\t\t\t\t\t\tpadding: 0px 8px 0px 8px !important;\n\n\t\t\t\t\t\tsvg {\n\t\t\t\t\t\t\tfill: var(--spice-subtext);\n\t\t\t\t\t\t\ttransition: fill 0.2s;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:focus-within,\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tsvg {\n\t\t\t\t\t\t\t\tfill: var(--spice-text) !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.setting-action,\n\t\t\t.setting-title {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 8px 0;\n\t\t\t}\n\t\t}\n\n\t\t.setting-description {\n\t\t\tfont-size: 0.9rem;\n\t\t\tcolor: var(--spice-subtext);\n\t\t}\n\n\t\t.setting-description-spacer {\n\t\t\theight: 0.9rem;\n\t\t}\n\n\t\t.setting-action {\n\t\t\ttext-align: right;\n\n\t\t\t.x-toggle-wrapper {\n\t\t\t\tcursor: pointer;\n\n\t\t\t\t.x-toggle-input {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\n\t\t\t\t.x-toggle-indicatorWrapper {\n\t\t\t\t\ttransition: background-color 0.2s;\n\t\t\t\t\t--spice-button-disabled: var(--background-tinted-base);\n\t\t\t\t}\n\n\t\t\t\tinput:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {\n\t\t\t\t\tbackground-color: var(--background-tinted-highlight);\n\t\t\t\t}\n\n\t\t\t\tinput:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {\n\t\t\t\t\tbackground-color: var(--spice-button-active);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tbutton.switch {\n\t\t\t\tborder: 0px;\n\t\t\t\tbackground-color: var(--background-tinted-base);\n\t\t\t\tcursor: pointer;\n\t\t\t\tdisplay: flex;\n\t\t\t\tpadding: 8px;\n\t\t\t\tmargin-inline-end: 12px;\n\n\t\t\t\t&:hover {\n\t\t\t\t\ttransform: scale(1.04);\n\t\t\t\t\tcolor: var(--spice-text);\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\ttransform: scale(0.98);\n\t\t\t\t\tcolor: var(--spice-text);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tinput {\n\t\t\t\tpadding-inline: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\tbackground-color: var(--background-tinted-base);\n\t\t\t\tcolor: var(--spice-text);\n\t\t\t\tborder: none;\n\t\t\t\theight: 32px;\n\t\t\t\twidth: 120px;\n\n\t\t\t\t&::placeholder {\n\t\t\t\t\tcolor: rgba(var(--spice-rgb-text), 0.3);\n\t\t\t\t}\n\n\t\t\t\t&[type=\"number\"] {\n\t\t\t\t\twidth: 50px;\n\t\t\t\t\ttransition: width 0.2s;\n\n\t\t\t\t\t&::-webkit-inner-spin-button,\n\t\t\t\t\t&::-webkit-outer-spin-button {\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\twidth: 60px;\n\n\t\t\t\t\t\t&::-webkit-inner-spin-button,\n\t\t\t\t\t\t&::-webkit-outer-spin-button {\n\t\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&[type=\"color\"] {\n\t\t\t\t\twidth: 32px;\n\t\t\t\t\tpadding: 3px;\n\t\t\t\t\ttransition: all 0.2s ease;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tmargin-left: 8px;\n\n\t\t\t\t\t&:hover,\n\t\t\t\t\t&:focus,\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tscale: 1.04;\n\t\t\t\t\t\tbackground-color: var(--background-tinted-highlight);\n\t\t\t\t\t}\n\n\t\t\t\t\t&::-webkit-color-swatch-wrapper {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&::-webkit-color-swatch {\n\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\tborder-radius: var(--button-radius);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.dropdown-wrapper {\n\t\t\t\tposition: relative;\n\n\t\t\t\t&.menu-open {\n\t\t\t\t\t.dropdown-button {\n\t\t\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\t\t\tborder-bottom-right-radius: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t.dropdown-arrow {\n\t\t\t\t\t\tborder-color: transparent transparent rgba(var(--spice-rgb-text), 0.7);\n\t\t\t\t\t\tborder-width: 0 5px 5px;\n\t\t\t\t\t}\n\n\t\t\t\t\t.dropdown-menu {\n\t\t\t\t\t\tborder-top-left-radius: 0;\n\t\t\t\t\t\tborder-top-right-radius: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.dropdown-button {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbackground-color: var(--background-tinted-base);\n\t\t\t\t\tborder: 0;\n\t\t\t\t\tborder-radius: var(--button-radius);\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tcolor: rgba(var(--spice-rgb-text), 0.7);\n\t\t\t\t\tcursor: default;\n\t\t\t\t\toutline: 0;\n\t\t\t\t\tpadding: 0 36px 0 16px;\n\t\t\t\t\ttransition: all 0.2s ease;\n\t\t\t\t\theight: 32px;\n\t\t\t\t\tcursor: pointer !important;\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tcolor: var(--spice-rgb-text);\n\t\t\t\t\t\tbackground-color: var(--background-tinted-highlight);\n\t\t\t\t\t}\n\n\t\t\t\t\t.dropdown-selection {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\theight: 32px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.dropdown-arrow {\n\t\t\t\t\tborder-color: rgba(var(--spice-rgb-text), 0.7) transparent transparent;\n\t\t\t\t\tborder-style: solid;\n\t\t\t\t\tborder-width: 5px 5px 0;\n\t\t\t\t\tcontent: \" \";\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\theight: 0;\n\t\t\t\t\tmargin-top: -ceil(2.5);\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tright: 16px;\n\t\t\t\t\ttop: 14px;\n\t\t\t\t\twidth: 0;\n\t\t\t\t}\n\n\t\t\t\t.dropdown-menu {\n\t\t\t\t\tscrollbar-width: thin;\n\t\t\t\t\tbackground-color: var(--spice-card);\n\t\t\t\t\topacity: 1;\n\t\t\t\t\tborder: 0;\n\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\tbox-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tmargin-top: -1px;\n\t\t\t\t\tmax-height: 200px;\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\toverflow-x: hidden;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 100%;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t\t-webkit-overflow-scrolling: touch;\n\t\t\t\t}\n\n\t\t\t\t.dropdown-option {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tcolor: rgba(var(--spice-rgb-text), 0.7);\n\t\t\t\t\tbackground-color: var(--background-tinted-highlight);\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tpadding: 8px 10px;\n\t\t\t\t\ttext-align: center;\n\n\t\t\t\t\t&.selected {\n\t\t\t\t\t\tbackground-color: rgba(var(--spice-rgb-text), 0.7);\n\t\t\t\t\t\tcolor: var(--spice-sidebar);\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: rgb(var(--spice-rgb-text));\n\t\t\t\t\t\tcolor: var(--spice-sidebar);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Subsection Specific Styling\n\t.setting-subSection {\n\t\t&#enabled {\n\t\t\t.setting-card {\n\t\t\t\tborder-radius: 0;\n\t\t\t\tmargin: 0;\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tborder-radius: 10px 10px 0px 0px;\n\t\t\t\t\tbackground-color: var(--spice-sidebar);\n\t\t\t\t\tmargin-top: 8px;\n\t\t\t\t\ttransition: 0.2s;\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: var(--spice-button-disabled);\n\t\t\t\t\t\ttransition: background-color 0.2s;\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\n\t\t\t\t\t.setting-title {\n\t\t\t\t\t\tcursor: pointer !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:last-child {\n\t\t\t\t\tborder-radius: 0 0 10px 10px;\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&#collapsed {\n\t\t\t.setting-card {\n\t\t\t\tbackground-color: var(--spice-sidebar);\n\t\t\t\ttransition: background-color 0.2s;\n\t\t\t\tcursor: pointer;\n\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: var(--spice-button-disabled);\n\t\t\t\t}\n\n\t\t\t\t.setting-title {\n\t\t\t\t\tcursor: pointer !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// Button and Button Row\n\t.setting-button-row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 8px;\n\t}\n\n\t.main-buttons-button {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--spice-button);\n\t\tborder: 2px solid var(--spice-button) !important;\n\t\tmargin: 5px 10px;\n\t\tborder: 2px solid transparent;\n\t\tborder-radius: 10px;\n\t\tcursor: pointer;\n\t\tdisplay: inline-block;\n\t\tfont-size: 12px;\n\t\tfont-weight: 700;\n\t\tletter-spacing: 1.76px;\n\t\tline-height: 18px;\n\t\tpadding: 8px 8%;\n\t\ttext-align: center;\n\t\ttext-transform: uppercase;\n\t\ttransition: all 33ms cubic-bezier(0.3, 0, 0, 1);\n\t\twhite-space: nowrap;\n\t\twill-change: transform;\n\n\t\t&:hover {\n\t\t\ttransform: scale(1.02);\n\t\t\tfilter: brightness(1.2);\n\t\t}\n\n\t\t&:active {\n\t\t\ttransform: scale(0.98);\n\t\t\tfilter: brightness(0.8);\n\t\t}\n\t}\n\n}" }, { "path": "Comfy/assets/_snippets.scss", "content": ":root {\n\t&.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet {\n\t\t.main-topBar-container {\n\t\t\tpadding-inline: 60px 150px !important;\n\t\t}\n\t}\n\n\t&.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet {\n\t\t.main-topBar-container {\n\t\t\tpadding-inline: 0px 150px !important;\n\t\t}\n\t}\n\n\t&.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet {\n\t\t.main-topBar-container {\n\t\t\tpadding-inline: 72px 0px !important;\n\t\t}\n\t}\n\n\t&.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top {\n\t\theight: calc(var(--comfy-topbar-height, 40px) + 8px) !important;\n\t}\n\n\t&:has(#main.Flatten-Colors-normal) {\n\t\t--spice-main: var(--spice-sidebar);\n\t\t--spice-main-transition: var(--spice-sidebar);\n\t\t--spice-rgb-main: var(--spice-rgb-sidebar);\n\t\t--spice-rgb-main-transition: var(--spice-rgb-sidebar);\n\t}\n\n\t&:has(#main.Flatten-Colors-reverse) {\n\t\t--spice-sidebar: var(--spice-main);\n\t\t--spice-rgb-sidebar: var(--spice-rgb-main);\n\t}\n\n\t&:has(#main.Comfy-Dark-Modals-Snippet) {\n\n\t\t.ABD0FGjBGqGZG33bP7Lc,\n\t\t.main-duplicateTrackModal-container {\n\t\t\tbackground-color: var(--spice-main);\n\t\t\tcolor: var(--spice-text);\n\t\t}\n\t}\n\n\t&:has(#main.Remove-DJ-Prompt) {\n\t\t._EFIA9HjgZxxgTSZzQcg>*:not(:first-child) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&:has(#main.Compact-Context-Menu) {\n\t\t.main-contextMenu-menu .main-popper-arrow {\n\t\t\twidth: 13px !important;\n\t\t\theight: 13px !important;\n\t\t\tz-index: 0 !important;\n\t\t\tborder-right: 1px solid var(--spice-button-disabled) !important;\n\t\t\tborder-bottom: 1px solid var(--spice-button-disabled) !important;\n\t\t}\n\n\t\t.main-rootlist-rootlistDivider,\n\t\t.main-contextMenu-dividerBefore::before,\n\t\t.main-contextMenu-dividerAfter::after,\n\t\t.show-episodeList-divider,\n\t\t.main-rootlist-rootlistDividerContainer {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.main-contextMenu-menuItemButton,\n\t\t.main-userWidget-dropDownMenuItemButton {\n\t\t\tborder-radius: 8px !important;\n\t\t\tcolor: var(--spice-text);\n\t\t\theight: 32px;\n\t\t\tpadding-left: 8px;\n\t\t}\n\n\t\t.main-contextMenu-menuItem,\n\t\t._60cb742e518d084c3c959007b9463b51-scss>li {\n\t\t\tmargin: 2px 6px;\n\t\t}\n\n\t\t.main-contextMenu-menuItem:first-child,\n\t\t._60cb742e518d084c3c959007b9463b51-scss> :first-child {\n\t\t\tmargin: 6px 6px 2px;\n\t\t}\n\n\t\t.main-contextMenu-menuItem:last-child {\n\t\t\tmargin: 2px 6px 6px;\n\t\t}\n\n\t\t._60cb742e518d084c3c959007b9463b51-scss> :last-child {\n\t\t\tmargin: 2px 6px 8px;\n\t\t}\n\n\t\t.main-contextMenu-menu,\n\t\t._60cb742e518d084c3c959007b9463b51-scss {\n\t\t\tborder-radius: 8px;\n\t\t\tborder: 1px solid var(--spice-button-disabled);\n\t\t}\n\n\t\t.main-userWidget-dropDownMenu li.main-contextMenu-menuItem>div {\n\t\t\tleft: calc(225px + 185px) !important;\n\t\t\twidth: 225px;\n\t\t}\n\t}\n\n\t#main {\n\n\t\t&.Comfy-nord-Snippet.Custom-Playbar-Snippet,\n\t\t&.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet {\n\t\t\t.Root__top-container {\n\t\t\t\t.Root__now-playing-bar.LibraryX {\n\t\t\t\t\t--cover-ambience-background: var(--spice-player, var(--spice-sidebar));\n\t\t\t\t}\n\n\t\t\t\t.main-connectBar-connectBar {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t}\n\n\t\t\t\t.main-nowPlayingBar-nowPlayingBar {\n\t\t\t\t\tpadding: 0 8px 6px 0 !important;\n\t\t\t\t\tmargin-bottom: 0 !important;\n\t\t\t\t\tbackground: var(--bg-img, var(--spice-player));\n\t\t\t\t\tborder-radius: var(--border-radius);\n\n\t\t\t\t\t.playback-bar {\n\t\t\t\t\t\tposition: absolute !important;\n\n\t\t\t\t\t\t.playback-bar__progress-time-elapsed,\n\t\t\t\t\t\t.main-playbackBarRemainingTime-container,\n\t\t\t\t\t\t.encore-text {\n\t\t\t\t\t\t\tposition: fixed;\n\t\t\t\t\t\t\tbottom: 14px;\n\t\t\t\t\t\t\tright: 8px;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.playback-bar__progress-time-elapsed,\n\t\t\t\t\t\t.encore-text:first-of-type {\n\t\t\t\t\t\t\ttransform: translateX(calc(-100% - 20px));\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.playback-bar__progress-time-elapsed::after,\n\t\t\t\t\t\t.encore-text:first-of-type::after {\n\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\tleft: calc(100% + 10px);\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t\tcolor: rgba(var(--spice-rgb-custom-subdued), 0.8);\n\t\t\t\t\t\t\tcontent: \"/\";\n\t\t\t\t\t\t\ttransform: translateX(-50%);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.x-progressBar-progressBarBg,\n\t\t\t\t\t\t.x-progressBar-sliderArea {\n\t\t\t\t\t\t\tborder-radius: 0 0 8px 8px !important;\n\t\t\t\t\t\t\theight: 6px !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.x-progressBar-progressBarBg {\n\t\t\t\t\t\t\t&:after {\n\t\t\t\t\t\t\t\tcontent: \"\";\n\t\t\t\t\t\t\t\tpadding: 8px;\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\ttop: -6px;\n\t\t\t\t\t\t\t\twidth: calc(100% - 16px);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.playback-progressbar,\n\t\t\t\t\t\t.x-progressBar-fillColor {\n\t\t\t\t\t\t\theight: 6px !important;\n\t\t\t\t\t\t\tborder-radius: 50px !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet {\n\t\t\t.Root__now-playing-bar.LibraryX {\n\t\t\t\t--cover-ambience-background: var(--spice-main) !important;\n\t\t\t}\n\n\t\t\t.main-nowPlayingBar-nowPlayingBar {\n\t\t\t\tbackground: var(--bg-img, var(--spice-main));\n\t\t\t}\n\t\t}\n\n\t\t&.Comfy-kitty-Snippet {\n\t\t\t.Root__main-view {\n\t\t\t\tbackground-image: url(\"https://media0.giphy.com/media/lVHOm4nZ0yfFXI8cgd/giphy.gif?cid=790b7611hvc1po0u3gn3yrlgmhu5gqhjv9cve7hp84f9aoox&ep=v1_gifs_search&rid=giphy.gif\") !important;\n\t\t\t\tbackground-position-x: center !important;\n\t\t\t\tbackground-position-y: center !important;\n\t\t\t\tbackground-size: 610px !important;\n\t\t\t\tbackground-repeat: no-repeat !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Remove-Column-Bar-Snippet {\n\t\t\t.main-trackList-trackListHeader {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&.Home-Header-Snippet {\n\t\t\t.main-home-homeHeader {\n\t\t\t\tdisplay: block !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Home-Header-Color {\n\t\t\t.main-home-homeHeader {\n\t\t\t\tbackground-color: var(--home-header-color) !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Horizontal-pageLinks-Snippet {\n\t\t\tul#spicetify-sticky-list {\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\n\t\t\t\tspan {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.main-yourLibraryX-navItem {\n\t\t\t\tpadding: 4px 8px !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Playbar-Above-Right-Panel-Snippet {\n\n\t\t\t.artist-artistOverview-artistOverviewContent,\n\t\t\t.main-actionBarBackground-background {\n\t\t\t\tmin-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important;\n\t\t\t}\n\n\t\t\t.Root__top-container {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"left-sidebar main-view now-playing-bar\"\n\t\t\t\t\t\"left-sidebar main-view right-sidebar\";\n\n\t\t\t\t&[data-right-sidebar-hidden] .Root__main-view {\n\t\t\t\t\tgrid-area: main-view/main-view/main-view/span 1;\n\t\t\t\t}\n\n\t\t\t\t.Root__main-view,\n\t\t\t\t.Root__nav-bar {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t}\n\n\t\t\t\t.Root__right-sidebar {\n\t\t\t\t\theight: calc(100vh - 450px);\n\t\t\t\t\twidth: min-content;\n\t\t\t\t\tpadding-bottom: 8px;\n\t\t\t\t}\n\n\t\t\t\t.Root__now-playing-bar {\n\t\t\t\t\twidth: var(--comfy-panel-width);\n\t\t\t\t\tbackground-color: var(--spice-main);\n\t\t\t\t\tborder-radius: 8px;\n\n\t\t\t\t\t.main-nowPlayingBar-container {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t\tmin-width: 280px;\n\t\t\t\t\t\tmax-width: 420px;\n\n\t\t\t\t\t\t.main-nowPlayingBar-nowPlayingBar {\n\t\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t\t\tpadding: 8px;\n\t\t\t\t\t\t\tmin-height: 400px;\n\n\t\t\t\t\t\t\t.main-nowPlayingBar-center,\n\t\t\t\t\t\t\t.main-nowPlayingBar-left {\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.player-controls__buttons.player-controls__buttons--new-icons {\n\t\t\t\t\t\t\t\torder: 2;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.playback-bar,\n\t\t\t\t\t\t\t.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS {\n\t\t\t\t\t\t\t\torder: 1;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.main-nowPlayingBar-right {\n\t\t\t\t\t\t\t\twidth: calc(var(--comfy-panel-width) - 16px);\n\n\t\t\t\t\t\t\t\t.main-nowPlayingBar-extraControls {\n\t\t\t\t\t\t\t\t\twidth: calc(var(--comfy-panel-width) - 16px);\n\t\t\t\t\t\t\t\t\tjustify-content: space-evenly;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t.main-nowPlayingWidget-nowPlaying {\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\theight: auto;\n\t\t\t\t\t\t\t\tflex-direction: row;\n\t\t\t\t\t\t\t\tflex-wrap: wrap;\n\t\t\t\t\t\t\t\tjustify-content: center;\n\n\t\t\t\t\t\t\t\t.main-coverSlotCollapsed-container {\n\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t\t\tbottom: 0;\n\n\t\t\t\t\t\t\t\t\t> :first-child {\n\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\t\theight: 100%;\n\n\t\t\t\t\t\t\t\t\t\t> :first-child {\n\t\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t\t\t\t\tbackground-color: #00000000;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t.main-coverSlotCollapsed-expandButton {\n\t\t\t\t\t\t\t\t\t\ttop: 3%;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t.HD9s7U5E1RLSWKpXmrqx {\n\t\t\t\t\t\t\t\t\t\tbackground-color: #00000000;\n\t\t\t\t\t\t\t\t\t\tmargin: auto;\n\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\n\t\t\t\t\t\t\t\t\t\t.main-nowPlayingWidget-coverArt {\n\t\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t\t\t\t\tpadding-bottom: 5px;\n\t\t\t\t\t\t\t\t\t\t\tbackground-color: #00000000;\n\n\t\t\t\t\t\t\t\t\t\t\t.cover-art {\n\t\t\t\t\t\t\t\t\t\t\t\theight: 220px !important;\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 220px !important;\n\t\t\t\t\t\t\t\t\t\t\t\tmargin: auto;\n\t\t\t\t\t\t\t\t\t\t\t\tbackground-color: #00000000;\n\n\t\t\t\t\t\t\t\t\t\t\t\timg {\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground-color: #00000000;\n\t\t\t\t\t\t\t\t\t\t\t\t\tbox-shadow: 0 0 5px 5px var(--spice-text);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.Smooth-Progress-Bar-Snippet {\n\n\t\t\t.playback-bar,\n\t\t\t.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea {\n\n\t\t\t\t>div,\n\t\t\t\t~div {\n\t\t\t\t\t-webkit-transition-delay: 0s;\n\t\t\t\t\ttransition-delay: 0s;\n\t\t\t\t\t-webkit-transition-duration: 1000ms;\n\t\t\t\t\ttransition-duration: 1000ms;\n\t\t\t\t\t-webkit-transition-property: left, -webkit-transform;\n\t\t\t\t\ttransition-property: left, -webkit-transform;\n\t\t\t\t\ttransition-property: transform, left;\n\t\t\t\t\ttransition-property: transform, left, -webkit-transform;\n\t\t\t\t\t-webkit-transition-timing-function: linear;\n\t\t\t\t\ttransition-timing-function: linear\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.Remove-Progress-Bar-Gradient-Snippet {\n\t\t\t.x-progressBar-fillColor {\n\t\t\t\tbackground-color: var(--fg-color) !important;\n\t\t\t\tborder-radius: var(--progress-bar-radius) !important;\n\t\t\t\theight: var(--progress-bar-height) !important;\n\t\t\t\ttransform: translateX(calc(-100% + var(--progress-bar-transform))) !important;\n\t\t\t\twidth: 100% !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Remove-Connect-Bar-Snippet {\n\n\t\t\t.main-connectBar-connectBar,\n\t\t\t.main-devicePicker-indicator {\n\t\t\t\tdisplay: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Remove-Lyrics-Button-Snippet {\n\t\t\t.main-nowPlayingBar-lyricsButton {\n\t\t\t\tdisplay: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Hoverable-Timers-Snippet {\n\n\t\t\t.playback-bar,\n\t\t\t.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS {\n\t\t\t\t>div {\n\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\n\t\t\t\t&:hover>div {\n\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\topacity: 1 !important;\n\t\t\t\t}\n\n\t\t\t\t.playback-progressbar {\n\t\t\t\t\topacity: 1 !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.Topbar-Inside-Titlebar-Snippet {\n\t\t\t.Root__top-container {\n\t\t\t\tgrid-template-areas:\n\t\t\t\t\t\"top-bar top-bar top-bar\"\n\t\t\t\t\t\"left-sidebar main-view right-sidebar\"\n\t\t\t\t\t\"now-playing-bar now-playing-bar now-playing-bar\" !important;\n\t\t\t\tgrid-template-rows: 0 1fr auto !important;\n\n\t\t\t\t.main-topBar-container {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\tgrid-area: top-bar;\n\t\t\t\t\tcontain: unset;\n\t\t\t\t\ttop: calc(var(--comfy-topbar-height, 40px) * -1 + 1px);\n\t\t\t\t\theight: calc(var(--comfy-topbar-height, 40px) + 8px);\n\t\t\t\t\tpadding-block: 8px;\n\n\t\t\t\t\t.main-topBar-topbarContentWrapper {\n\t\t\t\t\t\t>*:not(.main-topBar-searchBar):not(:has(ul)) {\n\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tul {\n\t\t\t\t\t\t\ttext-align: center !important;\n\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.queue-tabBar-headerItemLink {\n\t\t\t\t\t\t\tpadding: 5px 16px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.main-topBar-topbarContent {\n\t\t\t\t\t\tapp-region: drag !important;\n\n\t\t\t\t\t\t.main-entityHeader-topbarTitle {\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.main-topBar-background {\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tmain:not(:has(.main-home-filterChipsContainer)),\n\t\t\t.queue-queuePage-queuePage,\n\t\t\t.search-searchCategory-SearchCategory,\n\t\t\t.artist-artistDiscography-topBar,\n\t\t\t.marketplace-header,\n\t\t\t.f59DF4qQ_FphIrVeRYkI,\n\t\t\t.cj6vRk3nFAi80HSVqX91,\n\t\t\t.main-home-filterChipsContainer {\n\t\t\t\tmargin-top: -64px !important;\n\t\t\t\ttop: 0 !important;\n\t\t\t}\n\n\t\t\t.marketplace-header,\n\t\t\t.f59DF4qQ_FphIrVeRYkI,\n\t\t\t.cj6vRk3nFAi80HSVqX91 {\n\t\t\t\tpadding-top: 15px !important;\n\t\t\t}\n\n\t\t\t.main-home-filterChipsContainer {\n\t\t\t\tpadding-top: 8px;\n\t\t\t}\n\n\t\t\t.artist-artistDiscography-topBar {\n\t\t\t\theight: 64px !important;\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n\t\t\t.artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum {\n\t\t\t\tpadding-top: 32px;\n\t\t\t}\n\n\t\t\t.main-view-container .search-searchCategory-SearchCategory {\n\t\t\t\theight: 64px;\n\t\t\t\tpadding-top: 17px;\n\t\t\t}\n\t\t}\n\n\t\t&.Collapse-Topbar-Snippet {\n\t\t\t.main-topBar-topbarContentWrapper nav {\n\t\t\t\tjustify-content: center;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.Header-Background {\n\t\t\t.main-entityHeader-imageContainerNew {\n\t\t\t\talign-self: center;\n\t\t\t\tleft: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 24px + var(--content-spacing));\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t.main-entityHeader-headerText {\n\t\t\t\tbackground-color: rgba(var(--spice-rgb-main-transition), var(--header-opacity));\n\t\t\t\tpadding: 24px 32px;\n\t\t\t\tborder-radius: var(--border-radius);\n\t\t\t\tmin-width: fit-content;\n\t\t\t\tbox-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1);\n\t\t\t\tjustify-content: space-evenly !important;\n\t\t\t\theight: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 48px);\n\t\t\t}\n\n\t\t\t.main-entityHeader-imageContainerNew+.main-entityHeader-headerText {\n\t\t\t\tpadding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing));\n\t\t\t\tmargin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing));\n\t\t\t}\n\n\t\t\t&:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>* {\n\t\t\t\topacity: var(--top-bar-opacity) !important;\n\t\t\t}\n\t\t}\n\n\t\t&.AM-Gradient-Include-Existing-Snippet.Banner-Enabled,\n\t\t&.Replace-Existing-Banners.Banner-Enabled {\n\t\t\t.under-main-view>div:not(.comfy-banner-frame) {\n\t\t\t\tdisplay: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Lyrics {\n\t\t\tmain>div>div:empty {\n\t\t\t\t--lyrics-color-background: transparent !important;\n\t\t\t}\n\t\t}\n\n\t\t&.Apple-Music-Gradient-Snippet {\n\t\t\t.comfy-banner-frame {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tz-index: 0;\n\t\t\t\tfilter: blur(calc(var(--image-blur) * 10));\n\t\t\t\tbackground-image: var(--gradient-background-image);\n\n\t\t\t\t.comfy-banner-image {\n\t\t\t\t\tposition: absolute !important;\n\t\t\t\t\twidth: var(--gradient-width) !important;\n\t\t\t\t\taspect-ratio: 1;\n\t\t\t\t\tanimation: rotate var(--gradient-speed) linear infinite;\n\t\t\t\t\tborder-radius: var(--gradient-radius) !important;\n\t\t\t\t\tmix-blend-mode: var(--gradient-blend-mode);\n\t\t\t\t\tbackground-size: cover !important;\n\n\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\theight: revert;\n\t\t\t\t\t\tleft: unset;\n\t\t\t\t\t\tbackground-size: unset;\n\t\t\t\t\t\tbackground-position: unset;\n\t\t\t\t\t\tfilter: none;\n\t\t\t\t\t\t-webkit-mask-image: none;\n\t\t\t\t\t\tmask-image: none;\n\t\t\t\t\t\tright: 0;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\tz-index: 10;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:last-of-type {\n\t\t\t\t\t\tdisplay: revert;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\tbottom: 0;\n\t\t\t\t\t\tanimation-direction: reverse;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@keyframes rotate {\n\t\t\t\tfrom {\n\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\n\t\t\t\tto {\n\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}" }, { "path": "Comfy/assets/_top_bar.scss", "content": ":root .main-topBar-container {\n\t.main-topBar-topbarContent *,\n\t.main-topBar-topbarContentWrapper * {\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t}\n\n\t.main-topBar-searchBar {\n\t\t>form input {\n\t\t\t&::placeholder {\n\t\t\t\tcolor: rgba(var(--spice-rgb-selected-row), 0.7);\n\t\t\t}\n\n\t\t\theight: 32px;\n\t\t\tbackground-color: rgba(var(--spice-rgb-shadow), 0.7);\n\t\t}\n\t}\n\n\t.main-topBar-historyButtons button:hover {\n\t\ttransform: scale(1.1);\n\t}\n\n\t.main-topBar-topbarContent>div:has([data-encore-id=\"buttonPrimary\"]):first-child {\n\t\tdisplay: none !important;\n\t}\n\n\t.main-topBar-background {\n\t\tbackground-color: var(--spice-main) !important;\n\t}\n\n\t.main-topBar-overlay {\n\t\tbackground-color: transparent !important;\n\t}\n\n\t.main-topBar-UpgradeButton {\n\t\tfont-size: 0;\n\t\toverflow: hidden;\n\t\tbackground: url(\"https://i.imgur.com/nzAfcIL.png\") 50% / contain no-repeat;\n\t\tborder: none;\n\t\tpadding: 5px;\n\t\tbox-sizing: content-box;\n\t\twidth: 12px;\n\t}\n}" }, { "path": "Comfy/assets/_tracklist.scss", "content": ":root {\n\n\t// Tracklist\n\t.main-trackList-active .main-trackList-rowTitle {\n\t\tcolor: var(--spice-text) !important;\n\t\ttext-shadow: 0px 0px 6px var(--spice-text);\n\t\t-webkit-text-stroke: thin;\n\t}\n\n\t.main-trackList-trackListHeader {\n\t\t&._2ajKWDiy6YvJu5wo8I1g {\n\t\t\tbackground: var(--spice-main) !important;\n\t\t\ttop: 0 !important;\n\t\t}\n\n\t\t&:not(._2ajKWDiy6YvJu5wo8I1g) {\n\n\t\t\t.main-trackList-trackListRow,\n\t\t\t.main-trackList-trackListHeaderRow {\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: rgba(var(--spice-rgb-selected-row), 0.05);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t}\n\n\t.main-trackList-trackListRow,\n\t.main-trackList-trackListHeaderRow {\n\t\tborder-radius: var(--border-radius);\n\t\tborder: none;\n\t\ttransition: 200ms background-color;\n\n\t\t&.main-trackList-selected {\n\t\t\tbackground-color: rgba(var(--spice-rgb-selected-row), 0.1);\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: rgba(var(--spice-rgb-selected-row), 0.15);\n\t\t\t}\n\t\t}\n\n\t\t.main-type-mesto,\n\t\t.main-type-ballad {\n\t\t\ttransition: 300ms color;\n\t\t}\n\n\t\t.main-trackList-rowImageFallback {\n\t\t\tborder-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t#main.Remove-Tracklist-Index {\n\n\t\t// Image Tracklist\n\t\t.main-trackList-trackList:has(.main-trackList-rowSectionStart img),\n\t\t.main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) {\n\t\t\t.main-trackList-trackListHeader {\n\t\t\t\t.main-trackList-rowSectionIndex {\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.main-trackList-trackListRow {\n\n\t\t\t\t&:hover,\n\t\t\t\t&:focus-within,\n\t\t\t\t&.main-trackList-active {\n\n\t\t\t\t\t.main-trackList-rowImagePlayPauseButton,\n\t\t\t\t\t.main-trackList-rowSectionIndex {\n\t\t\t\t\t\tbackground: rgba(var(--spice-rgb-play-button), 0.5);\n\t\t\t\t\t}\n\n\t\t\t\t\t.main-trackList-rowImagePlayButton,\n\t\t\t\t\t.main-trackList-rowImagePlayPauseButton {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.main-trackList-rowImagePlayButton,\n\t\t\t\t.main-trackList-rowImagePlayPauseButton,\n\t\t\t\t.main-trackList-rowSectionIndex {\n\t\t\t\t\tcolor: var(--spice-sidebar);\n\t\t\t\t\tborder-radius: var(--border-radius);\n\t\t\t\t\ttransition: 200ms opacity, 200ms background;\n\t\t\t\t}\n\n\t\t\t\t>.main-trackList-rowSectionIndex {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t\ttop: 8px;\n\t\t\t\t\tleft: 56px;\n\t\t\t\t\twidth: 40px;\n\t\t\t\t\theight: 40px;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\ttext-indent: -1000px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Image Tracklist with Index\n\t\t.main-trackList-indexable:has(.main-trackList-rowSectionStart img) {\n\t\t\t@for $i from 3 through 6 {\n\t\t\t\t&[aria-colcount=\"#{$i}\"] .main-trackList-trackListRowGrid {\n\t\t\t\t\tpadding-left: 2px;\n\n\t\t\t\t\t@if $i ==3 {\n\t\t\t\t\t\tgrid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t@else if $i ==4 {\n\t\t\t\t\t\tgrid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t@else if $i ==5 {\n\t\t\t\t\t\tgrid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t@else if $i ==6 {\n\t\t\t\t\t\tgrid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important;\n\t\t\t\t\t}\n\n\t\t\t\t\t@else if $i ==7 {\n\t\t\t\t\t\tgrid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}" }, { "path": "Comfy/color.ini", "content": "[Comfy]\ntext = FFFFFF\nsubtext = B9BBBE\nmain = 23283D\nmain-elevated = 32364A\nmain-transition = 1E2233\nhighlight = 45495B\nhighlight-elevated = 383D50\nsidebar = 1E2233\nplayer = 101320\ncard = 101320\nshadow = 1E2233\nselected-row = F1F1F1\nbutton = 7289DA\nbutton-active = 5C6FB1\nbutton-disabled = 4B588C\ntab-active = 1E2233\nnotification = 7289DA\nnotification-error = D25050\nmisc = 000000\nplay-button = 7289DA\nplay-button-active = 869ADF\nprogress-fg = 1ED760\nprogress-bg = 7289DA\nheart = D25050\npagelink-active = 5C6EB1\nradio-btn-active = 7289DA\n\n[Spotify]\ntext = FFFFFF\nsubtext = B3B3B3\nmain = 121212\nmain-elevated = 242424\nmain-transition = 000000\nhighlight = 1A1A1A\nhighlight-elevated = 2A2A2A\nsidebar = 000000\nplayer = 181818\ncard = 282828\nshadow = 000000\nselected-row = FFFFFF\nbutton = 1DB954\nbutton-active = 1ED760\nbutton-disabled = 535353\ntab-active = 333333\nnotification = 4687D6\nnotification-error = E22134\nmisc = 7F7F7F\nplay-button = 1DB954\nplay-button-active = 1DB954\nprogress-fg = 1DB954\nprogress-bg = 636363\nheart = 1DB954\npagelink-active = 333333\nradio-btn-active = 1DB954\n\n[Nord]\ntext = B2BCCC\nsubtext = B2BCCC\nmain = 2E3440\nmain-elevated = 3C414C\nmain-transition = 262B35\nhighlight = 50555F\nhighlight-elevated = 424852\nsidebar = 262B35\nplayer = 2E3440\ncard = 363D4C\nshadow = 1D2128\nselected-row = B2BCCC\nbutton = 8A99AF\nbutton-active = 718CAD\nbutton-disabled = 434C5E\ntab-active = 363D4C\nnotification = 363D4C\nnotification-error = A9555E\nmisc = FFFFFF\nplay-button = 8A99AF\nplay-button-active = 718CAD\nprogress-fg = 8A99AF\nprogress-bg = 4B566A\nheart = 718CAD\npagelink-active = B7C1D5\nradio-btn-active = 363D4C\n\n[Everforest]\ntext = D3C6AA \nsubtext = 9AA79D\nmain = 272E33\nmain-elevated = 30363A\nmain-transition = 495156\nhighlight = 444747\nhighlight-elevated = 34393D\nsidebar = 2E383C\nplayer = 272E33\ncard = 374145\nshadow = 374145\nselected-row = D3C6AA\nbutton = A7C080\nbutton-active = AEC984\nbutton-disabled = 374145\ntab-active = 181C1E\nnotification = 86AF87\nnotification-error = E67E80\nmisc = 000000\nplay-button = A7C080\nplay-button-active = AEC984\nprogress-fg = A7C080\nprogress-bg = 9DA9A0\nheart = A7C080\npagelink-active = 181C1E\nradio-btn-active = 86AF87\n\n[Kanagawa]\ntext = 545464\nsubtext = 545464\nmain = F2EBBC\nmain-elevated = E6DFB7\nmain-transition = D5CEA3\nhighlight = D5CfAf\nhighlight-elevated = E0DAB4\nsidebar = E7DBA0\nplayer = F2EBBC\ncard = D5CEA3\nshadow = E0DAB4\nselected-row = 43436C\nbutton = 43242B\nbutton-active = 39395D\nbutton-disabled = D5CEA3\ntab-active = E7DBA0\nnotification = 43242B\nnotification-error = E82423\nmisc = 000000\nplay-button = 43242B\nplay-button-active = 43242B\nprogress-fg = 43242B\nprogress-bg = 77713E\nheart = E82423\npagelink-active = FFFFFF\nradio-btn-active = E7DBA0\n\n[Houjicha]\ntext = B59F92 \nsubtext = 997B6F\nmain = 473F3C\nmain-elevated = 534C49\nmain-transition = 5C514D\nhighlight = 574F4B\nhighlight-elevated = 59524F\nsidebar = 514741\nplayer = 473F3C\ncard = 78645C\nshadow = 78645C\nselected-row = A49A96\nbutton = 6E916F\nbutton-active = B3A49A\nbutton-disabled = 67564D\ntab-active = 6D5D54\nnotification = 86AF87\nnotification-error = D25050\nmisc = 000000\nplay-button = B59F92\nplay-button-active = C7AfA1\nprogress-fg = 86AF87\nprogress-bg = B59F92\nheart = 86AF87\npagelink-active = FFFFFF\nradio-btn-active = 877063\n\n[Kitty]\ntext = FFFFFF\nsubtext = FFDDDC\nmain = C94985\nmain-elevated = CD548C\nmain-transition = DE4B90\nhighlight = DE4B90\nhighlight-elevated = CF598D\nsidebar = E072A6\nplayer = 941550\ncard = DE5BA5\nshadow = 2B0718\nselected-row = FFDDDC\nbutton = 941550\nbutton-active = FFFFFF\nbutton-disabled = 941550\ntab-active = E072A6\nnotification = E072A6\nnotification-error = 994B6F\nmisc = 000000\nplay-button = FFFFFF\nplay-button-active = A13267\nprogress-fg = DE4B90\nprogress-bg = 994B6F\nheart = A13267\npagelink-active = DE4B90\nradio-btn-active = 994B6F\n\n[Lunar]\ntext = F3F3F3\nsubtext = CECECE\nmain = 161616\nmain-elevated = 232323\nmain-transition = 101010\nhighlight = 2A2A2A\nhighlight-elevated = 292929\nsidebar = 202020\nplayer = 161616\ncard = 303030\nshadow = 252525\nselected-row = CECECE\nbutton = 3281EA\nbutton-active = 0284E8\nbutton-disabled = 303030\ntab-active = EBBCBA\nnotification = 3281EA\nnotification-error = B10C0C\nmisc = 252525\nplay-button = EBBCBA\nplay-button-active = EBA9A7\nprogress-fg = 025CA1\nprogress-bg = 202020\nheart = EBBCBA\npagelink-active = FFFFFF\nradio-btn-active = 0284E8\n\n[Deep]\ntext = 4F9A87\nsubtext = 406560\nmain = 040614\nmain-elevated = 0A111D\nmain-transition = 0F111A\nhighlight = 0F1F28\nhighlight-elevated = 0C1520\nsidebar = 0F111A\nplayer = 040614\ncard = 0F1118\nshadow = 0F1118\nselected-row = 4F9A87\nbutton = 106165\nbutton-active = 4F9A87\nbutton-disabled = 0C1C19\ntab-active = 0A1527\nnotification = 051024\nnotification-error = 051024\nmisc = 406560\nplay-button = 106165\nplay-button-active = 4F9A87\nprogress-fg = 4F9A87\nprogress-bg = 106165\nheart = D25050\npagelink-active = 4F9A87\nradio-btn-active = 106165\n\n[Velvet]\ntext = AD434E\nsubtext = 762F37\nmain = 1E1E1E\nmain-elevated = 272021\nmain-transition = 161616\nhighlight = 322324\nhighlight-elevated = 2A2122\nsidebar = 161616\nplayer = 080808\ncard = 0F0F0F\nshadow = 161616\nselected-row = 973B45\nbutton = 6B2B32\nbutton-active = 552328\nbutton-disabled = 262626\ntab-active = 161616\nnotification = 6B2B32\nnotification-error = 60272D\nmisc = 000000\nplay-button = 552328\nplay-button-active = 6B2B32\nprogress-fg = 81333B\nprogress-bg = A23F49\nheart = 60272D\npagelink-active = 4A1F23\nradio-btn-active = 6B2B32\n\n[Yami]\ntext = D4D4D4\nsubtext = D4D4D4\nmain = 0A0A10\nmain-elevated = 0D0D14\nmain-transition = 0A0A10\nhighlight = 191923\nhighlight-elevated = 0E0E15\nsidebar = 0A0A10\nplayer = 0A0A10\ncard = 191923\nshadow = AF8BF3\nselected-row = 353447\nbutton = 191923\nbutton-active = 353447\nbutton-disabled = 111117\ntab-active = 191923\nnotification = 0A0A10\nnotification-error = F7407B\nmisc = 0A0A10\nplay-button = 2B2A3D\nplay-button-active = 353447\nprogress-fg = F7407B\nprogress-bg = 0A0A10\nheart = F7407B\npagelink-active = F7407B\nradio-btn-active = 191923\n\n[Hikari]\ntext = CDBBF9\nsubtext = 8A7EA8\nmain = 050406\nmain-elevated = 0D0D14\nmain-transition = 0B0910\nhighlight = 1B1923\nhighlight-elevated = 0E0E15\nsidebar = 0D0D14\nplayer = 0D0D14\ncard = 1F132D\nshadow = 1F132D\nselected-row = F1F1F1\nbutton = 90128B\nbutton-active = 90128B\nbutton-disabled = 1C0033\ntab-active = 1B1923\nnotification = 0A0A10\nnotification-error = 90128B\nmisc = 0A0A10\nplay-button = CDBBF9\nplay-button-active = 8A7EA8\nprogress-fg = 90128B\nprogress-bg = 0D0D14\nheart = CDBBF9\npagelink-active = 1B1923\nradio-btn-active = 191923\n\n[catppuccin-latte]\ntext = 4C4F69\nsubtext = 5C5F77\nmain = E6E9EF\nmain-elevated = DCE0E6\nmain-transition = E6E9EF\nhighlight = CED3DB\nhighlight-elevated = D8DBE3\nsidebar = EFF1F5\nplayer = E6E9EF\ncard = BCC0CC\nshadow = E6E9EF\nselected-row = 5C5F77\nbutton = 1E66F5\nbutton-active = 209FB5\nbutton-disabled = BCC0CC\ntab-active = CCD0DA\nnotification = 1E66F5\nnotification-error = D20F39\nmisc = ACB0BE\nplay-button = EA76CB\nplay-button-active = DD7878\nprogress-fg = 04A5E5\nprogress-bg = BCC0CC\nheart = FE640B\npagelink-active = FFFFFF\nradio-btn-active = 209FB5\n\n[catppuccin-frappe]\ntext = C6D0F5\nsubtext = B5BFE2\nmain = 292C3C\nmain-elevated = 333648\nmain-transition = 292C3C\nhighlight = 3B4058\nhighlight-elevated = 373B4D\nsidebar = 303446\nplayer = 292C3C\ncard = 51576D\nshadow = 626880\nselected-row = B5BFE2\nbutton = 8CAAEE\nbutton-active = 85C1DC\nbutton-disabled = 51576D\ntab-active = 414559\nnotification = 8CAAEE\nnotification-error = E78284\nmisc = 626880\nplay-button = F4B8E4\nplay-button-active = EECEBE\nprogress-fg = 99D1DB\nprogress-bg = 51576D\nheart = EF9F76\npagelink-active = FFFFFF\nradio-btn-active = 85C1DC\n\n[catppuccin-macchiato]\ntext = CAD3F5\nsubtext = B8C0E0\nmain = 181926\nmain-elevated = 232533\nmain-transition = 181926\nhighlight = 333645\nhighlight-elevated = 292A39\nsidebar = 24273A\nplayer = 181926\ncard = 494D64\nshadow = 5B6078\nselected-row = B8C0E0\nbutton = 8AADF4\nbutton-active = 7DC4E4\nbutton-disabled = 494D64\ntab-active = 363A4F\nnotification = 8AADF4\nnotification-error = ED8796\nmisc = 5B6078\nplay-button = F5BDE6\nplay-button-active = F0C6C6\nprogress-fg = 91D7E3\nprogress-bg = 494D64\nheart = F5A97F\npagelink-active = FFFFFF\nradio-btn-active = 7DC4E4\n\n[catppuccin-mocha]\ntext = CDD6F4\nsubtext = BAC2DE\nmain = 181825\nmain-elevated = 232432\nmain-transition = 181825\nhighlight = 333645\nhighlight-elevated = 292A38\nsidebar = 1E1E2E\nplayer = 181825\ncard = 45475A\nshadow = 585B70\nselected-row = BAC2DE\nbutton = 89B4FA\nbutton-active = 74C7EC\nbutton-disabled = 45475A\ntab-active = 313244\nnotification = 89B4FA\nnotification-error = F38BA8\nmisc = 585B70\nplay-button = F5C2E7\nplay-button-active = F2CDCD\nprogress-fg = 89DCEB\nprogress-bg = 45475A\nheart = FAB387\npagelink-active = FFFFFF\nradio-btn-active = 74C7EC\n\n[rose-pine]\ntext = E0DEF4\nsubtext = 908CAA\nmain = 1F1D2E\nmain-elevated = 2D2B3C\nmain-transition = 26233A\nhighlight = 403D52\nhighlight-elevated = 333142\nsidebar = 191724\nplayer = 1F1D2E\ncard = 403D52\nshadow = 524F67\nselected-row = E0DEF4\nbutton = EBBCBA\nbutton-active = EBBCBA\nbutton-disabled = 6E6A86\ntab-active = 524F67\nnotification = 9CCFD8\nnotification-error = EB6F92\nmisc = FFFFFF\nplay-button = EBBCBA\nplay-button-active = EBBCBA\nprogress-fg = EBBCBA\nprogress-bg = 403D52\nheart = EB6F92\npagelink-active = EBBCBA\nradio-btn-active = 9CCFD8\n\n[rose-pine-moon]\ntext = E0DEF4\nsubtext = 908CAA\nmain = 2A273F\nmain-elevated = 37344C\nmain-transition = 393552\nhighlight = 44415A\nhighlight-elevated = 3D3A52\nsidebar = 232136\nplayer = 2A273F\ncard = 44415A\nshadow = 56526E\nselected-row = E0DEF4\nbutton = EA9A97\nbutton-active = EA9A97\nbutton-disabled = 6E6A86\ntab-active = 56526E\nnotification = 9CCFD8\nnotification-error = EB6F92\nmisc = FFFFFF\nplay-button = EA9A97\nplay-button-active = EA9A97\nprogress-fg = EA9A97\nprogress-bg = 44415A\nheart = EB6F92\npagelink-active = EA9A97\nradio-btn-active = 9CCFD8\n\n[rose-pine-dawn]\ntext = 575279\nsubtext = 797593\nmain = FFFAF3\nmain-elevated = F3EEEB\nmain-transition = F2E9E1\nhighlight = DFDAD9\nhighlight-elevated = EEE9E6\nsidebar = FAF4ED\nplayer = FFFAF3\ncard = DFDAD9\nshadow = FAF4ED\nselected-row = 575279\nbutton = D7827E\nbutton-active = D7827E\nbutton-disabled = 9893A5\ntab-active = CECACD\nnotification = 56949F\nnotification-error = B4637A\nmisc = FFFFFF\nplay-button = D7827E\nplay-button-active = D7827E\nprogress-fg = D7827E\nprogress-bg = DFDAD9\nheart = B4637A\npagelink-active = D7827E\nradio-btn-active = 907AA9\n\n[Mono]\ntext = FFFFFF\nsubtext = B9BBBE\nmain = 171717\nmain-elevated = 262626\nmain-transition = FFFFFF\nhighlight = 3B3B3B\nhighlight-elevated = 2E2E2E\nsidebar = 101010\nplayer = 171717\ncard = 343434\nshadow = 595858\nselected-row = F1F1F1\nbutton = FFFFFF\nbutton-active = C5C5C5\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = 101010\nnotification-error = D25050\nmisc = 000000\nplay-button = FFFFFF\nplay-button-active = FFFFFF\nprogress-fg = FFFFFF\nprogress-bg = 343434\nheart = FFFFFF\npagelink-active = 787878\nradio-btn-active = 737373\n\n[Sunset]\ntext = FFCE3F\nsubtext = FEF3BB\nmain = 171717\nmain-elevated = 272622\nmain-transition = 000000\nhighlight = 3D3C32\nhighlight-elevated = 2F2E28\nsidebar = 101010\nplayer = 171717\ncard = CC9756\nshadow = E3B47B\nselected-row = FEF3BB\nbutton = FFCE3F\nbutton-active = BF9B30\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = FFFFFF\nnotification-error = D25050\nmisc = 000000\nplay-button = FFCE3F\nplay-button-active = FC9E3A\nprogress-fg = FF8300\nprogress-bg = 343434\nheart = FF8300\npagelink-active = FEF3BB\nradio-btn-active = FEF3BB\n\n[Neon]\ntext = 588BAE\nsubtext = EAFFFF\nmain = 171717\nmain-elevated = 262626\nmain-transition = 000000\nhighlight = 3B3B3B\nhighlight-elevated = 2E2E2E\nsidebar = 101010\nplayer = 171717\ncard = 7FA1B5\nshadow = A9C9DB\nselected-row = F1F1F1\nbutton = 588BAE\nbutton-active = 3B5D75\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = FFFFFF\nnotification-error = D25050\nmisc = 000000\nplay-button = 588BAE\nplay-button-active = 5085AB\nprogress-fg = 00AFDB\nprogress-bg = 343434\nheart = 00AFDB\npagelink-active = BBE7FE\nradio-btn-active = EAFFFF\n\n[Forest]\ntext = B2C5B3\nsubtext = D5DDDE\nmain = 171717\nmain-elevated = 262626\nmain-transition = 000000\nhighlight = 3B3B3B\nhighlight-elevated = 2E2E2E\nsidebar = 101010\nplayer = 171717\ncard = 5C6E59\nshadow = 3C5148\nselected-row = F1F1F1\nbutton = B2C5B3\nbutton-active = F1F1F1\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = FFFFFF\nnotification-error = D25050\nmisc = 000000\nplay-button = 3C5148\nplay-button-active = 43705D\nprogress-fg = 3C5148\nprogress-bg = 343434\nheart = 3C5148\npagelink-active = 3C5148\nradio-btn-active = 737373\n\n[Sakura]\ntext = FCB4CA\nsubtext = FFDCDC\nmain = 171717\nmain-elevated = 262626\nmain-transition = 000000\nhighlight = 3D3838\nhighlight-elevated = 2E2E2E\nsidebar = 101010\nplayer = 171717\ncard = D68BA2\nshadow = FCB4CA\nselected-row = FFDCDC\nbutton = FCB4CA\nbutton-active = D48AA0\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = FFFFFF\nnotification-error = D25050\nmisc = 000000\nplay-button = F42C38\nplay-button-active = BA182B\nprogress-fg = CFEEFA\nprogress-bg = 343434\nheart = F25477\npagelink-active = F5BCDB\nradio-btn-active = FFDCDC\n\n[Vaporwave]\ntext = 01CDFE\nsubtext = EAFFFF\nmain = 171717\nmain-elevated = 262626\nmain-transition = 000000\nhighlight = 3B3B3B\nhighlight-elevated = 2E2E2E\nsidebar = 101010\nplayer = 171717\ncard = 007F9E\nshadow = 2EC2E6\nselected-row = F1F1F1\nbutton = 01CDFE\nbutton-active = 118BA8\nbutton-disabled = 4A4949\ntab-active = 303030\nnotification = FFFFFF\nnotification-error = D25050\nmisc = 000000\nplay-button = FFD300\nplay-button-active = E3C01B\nprogress-fg = F706CF\nprogress-bg = 343434\nheart = F706CF\npagelink-active = C0D6FA\nradio-btn-active = EAFFFF\n\n[wal16]\ntext = ${xrdb:color15}\nsubtext = ${xrdb:color7}\nmain = ${xrdb:color0}\nmain-elevated = ${xrdb:color1}\nmain-transition = ${xrdb:color0}\nhighlight = ${xrdb:color5}\nhighlight-elevated = ${xrdb:color13}\nsidebar = ${xrdb:color0}\nplayer = ${xrdb:color0}\ncard = ${xrdb:color0}\nshadow = ${xrdb:color8}\nselected-row = ${xrdb:color15}\nbutton = ${xrdb:color6}\nbutton-active = ${xrdb:color14}\nbutton-disabled = ${xrdb:color8}\ntab-active = ${xrdb:color0}\nnotification = FFFFFF\nnotification-error = D25050\nmisc = ${xrdb:color0}\nplay-button = ${xrdb:color3}\nplay-button-active = ${xrdb:color11}\nprogress-fg = ${xrdb:color10}\nprogress-bg = ${xrdb:color0}\nheart = ${xrdb:color12}\npagelink-active = ${xrdb:color3}\nradio-btn-active = ${xrdb:color3}\n" }, { "path": "Comfy/package.json", "content": "{\n\t\"name\": \"comfy\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"Stay comfy while listening to music\",\n\t\"main\": \"theme.script.js\",\n\t\"scripts\": {\n\t\t\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n\t\t\"compile-scss\": \"sass app.scss app.css\"\n\t},\n\t\"repository\": {\n\t\t\"type\": \"git\",\n\t\t\"url\": \"git+https://github.com/Comfy-Themes/Spicetify.git\"\n\t},\n\t\"keywords\": [\"comfy\", \"spicetify\"],\n\t\"author\": \"Comfy-Themes\",\n\t\"license\": \"WTFPL\",\n\t\"bugs\": {\n\t\t\"url\": \"https://github.com/Comfy-Themes/Spicetify/issues\"\n\t},\n\t\"homepage\": \"https://github.com/Comfy-Themes/Spicetify#readme\",\n\t\"dependencies\": {\n\t\t\"node-sass\": \"^7.0.3\"\n\t}\n}\n" }, { "path": "Comfy/theme.js", "content": "(() => {\n\tconst themeScript = document.createElement(\"SCRIPT\");\n\tthemeScript.setAttribute(\"type\", \"text/javascript\");\n\tthemeScript.setAttribute(\"src\", \"https://comfy-themes.github.io/Spicetify/Comfy/theme.script.js\");\n\tdocument.head.appendChild(themeScript);\n})();\n" }, { "path": "Comfy/theme.script.js", "content": "/* \ntofix:\n- negative values\n- Reloading when filtered causes options to not be applied\n- fonts titles and stuff css\n\ntodo:\n- add warning message if using unsupported versions\n- add custom colour schemes \n- add overrides for topbar background and padding\n\n*/\n\n(async function comfy() {\n\t// Block Until Mass Usage Deps Loaded\n\tif (!(Spicetify.React && Spicetify.ReactDOM && Spicetify.Config)) {\n\t\tsetTimeout(comfy, 10);\n\t\treturn;\n\t}\n\tconsole.debug(\"[Comfy-Event]: Global Dependencies loaded\");\n\n\t// Add Global Functions\n\twindow.Comfy = {\n\t\tReset: () => {\n\t\t\tlocalStorage.removeItem(\"comfy:config\");\n\t\t\tlocation.reload();\n\t\t},\n\t\tConfig: () => {\n\t\t\tconsole.log(JSON.parse(localStorage.getItem(\"comfy:config\") || \"{}\"));\n\t\t}\n\t};\n\tconsole.debug(`[Comfy-Event]: Global Functions Added`);\n\n\t// Initialize Config\n\tlet config = JSON.parse(localStorage.getItem(\"comfy:config\") || \"{}\");\n\tlet configScheme = Spicetify.Config?.color_scheme || \"Comfy\";\n\tlet preloadedScheme = false;\n\tlet startup = true;\n\tlet preloadContainer = document.createElement(\"div\");\n\tconsole.debug(`[Comfy-Event]: Config Initialized`);\n\n\t// Preload Applied Colorscheme\n\tconst colorScheme = getConfig(\"Color-Scheme\");\n\tif (colorScheme) {\n\t\tpreloadedScheme = true;\n\t\tupdateScheme(colorScheme, \"preloaded\");\n\t}\n\n\t// Update Colorschemes\n\tfetch(\"https://raw.githubusercontent.com/Comfy-Themes/Spicetify/main/Comfy/color.ini\")\n\t\t.then(response => response.text())\n\t\t.then(iniContent => {\n\t\t\tsetConfig(\"Color-Schemes\", parseIni(iniContent), \"Successfully updated color schemes\");\n\t\t\tconfigScheme =\n\t\t\t\t(getConfig(\"Color-Schemes\") && Object.keys(getConfig(\"Color-Schemes\")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) ||\n\t\t\t\tconfigScheme;\n\t\t\tupdateScheme(getConfig(\"Color-Scheme\"), \"updated\");\n\t\t})\n\t\t.catch(error => {\n\t\t\tconsole.warn(\"[Comfy-Warning]: Failed to update color schemes:\", error);\n\t\t});\n\n\t// Window Zoom Variable\n\t// todo: improve this? seems unoptimal but spotify messes with window.outerWidth on minimize so this is required currently\n\tfunction updateZoomVariable() {\n\t\tlet prevOuterWidth = window.outerWidth;\n\t\tlet prevInnerWidth = window.innerWidth;\n\t\tlet prevRatio = window.devicePixelRatio;\n\t\tlet startup = true;\n\n\t\tfunction checkChanges() {\n\t\t\tconst newOuterWidth = window.outerWidth;\n\t\t\tconst newInnerWidth = window.innerWidth;\n\t\t\tconst newRatio = window.devicePixelRatio;\n\t\t\tif (startup || ((prevOuterWidth <= 160 || prevRatio !== newRatio) && (prevOuterWidth !== newOuterWidth || prevInnerWidth !== newInnerWidth))) {\n\t\t\t\tconst modified = newOuterWidth / newInnerWidth || 1;\n\t\t\t\tdocument.documentElement.style.setProperty(\"--zoom\", modified);\n\t\t\t\tconsole.debug(`[Comfy-Event]: Zoom Updated: ${newOuterWidth} / ${newInnerWidth} = ${modified}`);\n\n\t\t\t\tprevOuterWidth = newOuterWidth;\n\t\t\t\tprevInnerWidth = newInnerWidth;\n\t\t\t\tprevRatio = newRatio;\n\t\t\t}\n\n\t\t\trequestAnimationFrame(checkChanges);\n\t\t}\n\n\t\tcheckChanges();\n\t\tstartup = false;\n\t}\n\n\tupdateZoomVariable();\n\n\t// Layout Variables\n\tlet panelWidth = document.documentElement.style.getPropertyValue(\"--panel-width\");\n\tlet sidebarWidth = document.documentElement.style.getPropertyValue(\"--left-sidebar-width\");\n\tdocument.documentElement.style.setProperty(\"--comfy-panel-width\", `${panelWidth}px`);\n\tdocument.documentElement.style.setProperty(\"--comfy-left-sidebar-width\", `${sidebarWidth}px`);\n\n\tnew MutationObserver(mutations => {\n\t\tconst newPanelWidth = mutations[0].target.style.getPropertyValue(\"--panel-width\");\n\t\tconst newSidebarWidth = mutations[0].target.style.getPropertyValue(\"--left-sidebar-width\");\n\t\tif (newPanelWidth !== panelWidth || newSidebarWidth !== sidebarWidth) {\n\t\t\tconst trimmedPanelWidth = parseInt(newPanelWidth);\n\t\t\tconst trimmedSidebarWidth = parseInt(newSidebarWidth);\n\t\t\tdocument.documentElement.style.setProperty(\"--comfy-panel-width\", `${trimmedPanelWidth}px`);\n\t\t\tdocument.documentElement.style.setProperty(\"--comfy-left-sidebar-width\", `${trimmedSidebarWidth}px`);\n\t\t\tpanelWidth = newPanelWidth;\n\t\t\tsidebarWidth = newSidebarWidth;\n\t\t}\n\t}).observe(document.documentElement, { attributes: true, attributeFilter: [\"style\"] });\n\n\twaitForDeps(\"Spicetify.Platform.version\", version => {\n\t\tif (version >= \"1.2.46.462\") {\n\t\t\twaitForDeps(\n\t\t\t\t\":root .global-nav\",\n\t\t\t\troot => {\n\t\t\t\t\tif (!root.classList.contains(\"global-nav-centered\")) {\n\t\t\t\t\t\troot.classList.add(\"global-nav-centered\");\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\ttrue\n\t\t\t);\n\t\t}\n\t});\n\n\t// Banner Image(s)\n\tlet channels = {\n\t\tLyrics: { regex: /^\\/lyrics$/, enabled: getConfig(\"Lyrics\") ?? false },\n\t\tPlaylist: { regex: /^\\/playlist\\//, enabled: getConfig(\"Playlist\") ?? true },\n\t\tStation: { regex: /^\\/station\\/playlist\\//, enabled: getConfig(\"Station\") ?? true },\n\t\tArtist: { regex: /^\\/artist\\/(?!artists\\b)\\w+$/, enabled: getConfig(\"Artist\") ?? true },\n\t\tAlbum: { regex: /^\\/album\\//, enabled: getConfig(\"Album\") ?? true },\n\t\tCollection: { regex: /^\\/collection\\/tracks$/, enabled: getConfig(\"Collection\") ?? true },\n\t\t\"Your-Episodes\": { regex: /^\\/collection\\/your-episodes$/, enabled: getConfig(\"Your-Episodes\") ?? true },\n\t\t\"Local-Files\": { regex: /^\\/collection\\/local-files$/, enabled: getConfig(\"Local-Files\") ?? true },\n\t\tShow: { regex: /^\\/show\\//, enabled: getConfig(\"Show\") ?? true },\n\t\tEpisode: { regex: /^\\/episode\\//, enabled: getConfig(\"Episode\") ?? true },\n\t\t\"Lyrics-Plus\": { regex: /^\\/lyrics-plus$/, enabled: getConfig(\"Lyrics-Plus\") ?? true },\n\t\tUser: { regex: /^\\/user\\/(?!users\\b)\\w+$/, enabled: getConfig(\"User\") ?? true },\n\t\tGenre: { regex: /^\\/genre\\//, enabled: getConfig(\"Genre\") ?? true }\n\t};\n\n\tconst frame = document.createElement(\"div\");\n\tconst banner = [document.createElement(\"div\"), document.createElement(\"div\")];\n\n\tframe.className = \"comfy-banner-frame\";\n\tbanner.forEach(image => {\n\t\timage.className = \"comfy-banner-image\";\n\t\tframe.append(image);\n\t});\n\n\twaitForDeps(\n\t\t\".under-main-view\",\n\t\tunderMainView => {\n\t\t\tconsole.debug(\"[Comfy-Event]: Banner Frame Added\");\n\t\t\tunderMainView.appendChild(frame);\n\t\t},\n\t\ttrue\n\t);\n\twaitForDeps(\"Spicetify.Platform.History\", () => Spicetify.Platform.History.listen(updateBanner));\n\twaitForDeps(\"Spicetify.Player\", () => Spicetify.Player.addEventListener(\"songchange\", updateBanner));\n\tupdateBanner();\n\n\t// React components\n\tconst Dialog = Spicetify.React.memo(props => {\n\t\tconst [state, setState] = Spicetify.React.useState(true);\n\t\tconst self = document.querySelector(\".ReactModalPortal:last-of-type\");\n\t\tconst ConfirmDialog = Spicetify.ReactComponent.ConfirmDialog;\n\t\tconst isForwardRef = typeof ConfirmDialog === \"function\";\n\t\tconst commonProps = {\n\t\t\t...props,\n\t\t\tisOpen: state,\n\t\t\tonClose: () => {\n\t\t\t\tsetState(false);\n\t\t\t\tprops.onClose?.();\n\t\t\t\tself.remove();\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsetState(false);\n\t\t\t\tprops.onConfirm?.();\n\t\t\t\tself.remove();\n\t\t\t}\n\t\t};\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tif (state) {\n\t\t\t\tprops.onOpen?.();\n\t\t\t}\n\t\t}, [state]);\n\n\t\treturn isForwardRef ? ConfirmDialog(commonProps) : Spicetify.React.createElement(ConfirmDialog, commonProps);\n\t});\n\n\tconst Section = ({ name, children, condition = true, filter }) => {\n\t\tfilter = !filter || name === filter.label || filter.index === 0;\n\n\t\tif (condition === false) return null;\n\n\t\treturn (\n\t\t\tfilter &&\n\t\t\tSpicetify.React.createElement(\n\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\tnull,\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ className: \"setting-section\", id: name },\n\t\t\t\t\tSpicetify.React.createElement(\"h2\", { className: \"setting-header\" }, name),\n\t\t\t\t\tchildren.map(child =>\n\t\t\t\t\t\tSpicetify.React.createElement(child.type, {\n\t\t\t\t\t\t\t...child,\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(Tippy, { label: child.tippy })\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t};\n\n\tconst Row = ({ name, items }) => {\n\t\treturn Spicetify.React.createElement(\n\t\t\tSpicetify.React.Fragment,\n\t\t\tnull,\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: name },\n\t\t\t\titems.map(item =>\n\t\t\t\t\tSpicetify.React.createElement(item.type, {\n\t\t\t\t\t\t...item,\n\t\t\t\t\t\ttippy: Spicetify.React.createElement(Tippy, { label: item.tippy })\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t};\n\n\tconst Button = ({ name, title, condition = true, callback }) => {\n\t\tconst [state, setState] = Spicetify.React.useState(title);\n\n\t\tif (condition === false) return;\n\n\t\treturn Spicetify.React.createElement(\n\t\t\t\"button\",\n\t\t\t{\n\t\t\t\tclassName: \"main-buttons-button\",\n\t\t\t\tid: name,\n\t\t\t\tonClick: () => {\n\t\t\t\t\tcallback(state, setState);\n\t\t\t\t}\n\t\t\t},\n\t\t\tstate\n\t\t);\n\t};\n\n\tconst CardLayout = Spicetify.React.memo(({ title, desc, tippy, action, onClick }) => {\n\t\treturn Spicetify.React.createElement(\n\t\t\t\"div\",\n\t\t\t{ className: \"setting-card\" },\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"setting-container\", onClick: onClick },\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ className: \"setting-item\" },\n\t\t\t\t\tSpicetify.React.createElement(\"label\", { className: \"setting-title\" }, title, tippy),\n\t\t\t\t\tSpicetify.React.createElement(\"div\", { className: \"setting-action\" }, action)\n\t\t\t\t),\n\t\t\t\tSpicetify.React.createElement(\"div\", { className: \"setting-description\" }, desc),\n\t\t\t\tdesc && Spicetify.React.createElement(\"div\", { className: \"setting-description-spacer\" })\n\t\t\t)\n\t\t);\n\t});\n\n\tconst SubSection = Spicetify.React.memo(({ name, condition = true, items, collapseItems: initialCollapseItems = false, callback, ...props }) => {\n\t\tconst [state, setState] = Spicetify.React.useState(getConfig(name) ?? true);\n\t\tconst [collapseItems, setCollapseItems] = Spicetify.React.useState(getConfig(`${name}-Collapsed`) ?? initialCollapseItems);\n\n\t\tif (condition === false) return null;\n\n\t\treturn Spicetify.React.createElement(\n\t\t\tSpicetify.React.Fragment,\n\t\t\tnull,\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"setting-subSection\", id: state ? (collapseItems ? \"collapsed\" : \"enabled\") : \"disabled\" },\n\t\t\t\tSpicetify.React.createElement(Toggle, {\n\t\t\t\t\tname,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tcallback?.(value);\n\t\t\t\t\t\tsetState(value);\n\n\t\t\t\t\t\titems.forEach(item => {\n\t\t\t\t\t\t\tconst both = () => (item.type === Input ? \"\" : item.defaultVal);\n\t\t\t\t\t\t\tconst state = getConfig(item.name) ?? both();\n\n\t\t\t\t\t\t\tsetConfig(item.name, state);\n\t\t\t\t\t\t\tif (item.type === Toggle) {\n\t\t\t\t\t\t\t\tif (state || !value)\n\t\t\t\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\t\t\t\tconsole.debug(`[Comfy-subCallback]: ${item.name} =`, state);\n\t\t\t\t\t\t\t\t\t\t\tmain.classList.toggle(item.name, value ? state : false);\n\t\t\t\t\t\t\t\t\t\t\titem.callback?.(state);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else if (value && state !== both()) {\n\t\t\t\t\t\t\t\tconsole.debug(`[Comfy-subCallback]: ${item.name}`, state);\n\t\t\t\t\t\t\t\titem.callback?.(state, item.name);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tif (state) {\n\t\t\t\t\t\t\tsetConfig(`${name}-Collapsed`, !collapseItems, null, true);\n\t\t\t\t\t\t\tsetCollapseItems(!collapseItems);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t...props\n\t\t\t\t}),\n\t\t\t\tstate &&\n\t\t\t\t\t!collapseItems &&\n\t\t\t\t\t!startup &&\n\t\t\t\t\titems.map(item =>\n\t\t\t\t\t\tSpicetify.React.createElement(item.type, {\n\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(Tippy, { label: item.tippy })\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t)\n\t\t);\n\t});\n\n\tconst Tippy = ({ label }) => {\n\t\tif (!label) return null;\n\t\treturn Spicetify.React.createElement(\n\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t{\n\t\t\t\tlabel,\n\t\t\t\tshowDelay: 0,\n\t\t\t\tplacement: \"left\",\n\t\t\t\ttrigger: \"mouseenter\"\n\t\t\t},\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"x-settings-tooltip\" },\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: \"x-settings-tooltipIconWrapper\"\n\t\t\t\t\t},\n\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\"svg\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\trole: \"img\",\n\t\t\t\t\t\t\theight: \"16\",\n\t\t\t\t\t\t\twidth: \"16\",\n\t\t\t\t\t\t\ttabindex: \"0\",\n\t\t\t\t\t\t\tclassName: \"Svg-sc-ytk21e-0 Svg-img-icon x-settings-tooltipIcon\",\n\t\t\t\t\t\t\tviewBox: \"0 0 16 16\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\tSpicetify.React.createElement(\"path\", {\n\t\t\t\t\t\t\td: \"M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z\"\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tSpicetify.React.createElement(\"path\", {\n\t\t\t\t\t\t\td: \"M7.25 12.026v-1.5h1.5v1.5h-1.5zm.884-7.096A1.125 1.125 0 0 0 7.06 6.39l-1.431.448a2.625 2.625 0 1 1 5.13-.784c0 .54-.156 1.015-.503 1.488-.3.408-.7.652-.973.818l-.112.068c-.185.116-.26.203-.302.283-.046.087-.097.245-.097.57h-1.5c0-.47.072-.898.274-1.277.206-.385.507-.645.827-.846l.147-.092c.285-.177.413-.257.526-.41.169-.23.213-.397.213-.602 0-.622-.503-1.125-1.125-1.125z\"\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t};\n\n\tconst Toggle = Spicetify.React.memo(({ name, title, desc, tippy, defaultVal, condition = true, callback, onClick }) => {\n\t\tconst [state, setState] = Spicetify.React.useState(getConfig(name) ?? defaultVal);\n\t\tconst isFirstRender = Spicetify.React.useRef(true);\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tif (isFirstRender.current) {\n\t\t\t\tisFirstRender.current = false;\n\t\t\t\tif (!startup) return;\n\t\t\t}\n\n\t\t\tsetConfig(name, state);\n\t\t\tif (state || !startup) {\n\t\t\t\twaitForDeps(\n\t\t\t\t\t\"main\",\n\t\t\t\t\tmain => {\n\t\t\t\t\t\tconsole.debug(`[Comfy-Callback]: ${name} =`, state);\n\t\t\t\t\t\tmain.classList.toggle(name, state);\n\t\t\t\t\t\tcallback?.(state);\n\t\t\t\t\t},\n\t\t\t\t\ttrue,\n\t\t\t\t\t\"getElementById\"\n\t\t\t\t);\n\t\t\t}\n\t\t}, [state]);\n\n\t\tif (condition === false) return null;\n\n\t\treturn Spicetify.React.createElement(CardLayout, {\n\t\t\ttitle,\n\t\t\tdesc,\n\t\t\ttippy,\n\t\t\taction: Spicetify.React.createElement(\n\t\t\t\t\"label\",\n\t\t\t\t{ className: \"x-toggle-wrapper\" },\n\t\t\t\tSpicetify.React.createElement(\"input\", {\n\t\t\t\t\tclassName: \"x-toggle-input\",\n\t\t\t\t\ttype: \"checkbox\",\n\t\t\t\t\tdefaultChecked: state,\n\t\t\t\t\tonClick: () => setState(!state)\n\t\t\t\t}),\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"span\",\n\t\t\t\t\t{ className: \"x-toggle-indicatorWrapper\" },\n\t\t\t\t\tSpicetify.React.createElement(\"span\", { className: \"x-toggle-indicator\" })\n\t\t\t\t)\n\t\t\t),\n\t\t\tonClick\n\t\t});\n\t});\n\n\tconst Input = Spicetify.React.memo(\n\t\t({ inputType, includePicker, name, title, desc, min, max, step, tippy, defaultVal, condition = true, callback, callbackOverride }) => {\n\t\t\tconst [value, setValue] = Spicetify.React.useState(getConfig(name) ?? \"\");\n\t\t\tconst [defaultState, setDefaultState] = Spicetify.React.useState(defaultVal);\n\t\t\tconst isFirstRender = Spicetify.React.useRef(true);\n\t\t\tconst textFieldRef = Spicetify.React.useRef(null);\n\n\t\t\tSpicetify.React.useEffect(() => {\n\t\t\t\tif (textFieldRef.current) {\n\t\t\t\t\ttextFieldRef.current.addEventListener(\"wheel\", e => {\n\t\t\t\t\t\tif (document.focusedElement === textFieldRef.current) {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}, []);\n\n\t\t\tSpicetify.React.useEffect(() => {\n\t\t\t\tif (isPromise(defaultVal)) defaultVal.then(val => setDefaultState(val));\n\t\t\t}, [defaultVal]);\n\n\t\t\tSpicetify.React.useEffect(() => {\n\t\t\t\tif (isFirstRender.current) {\n\t\t\t\t\tisFirstRender.current = false;\n\t\t\t\t\tif (!startup) return;\n\t\t\t\t}\n\n\t\t\t\tsetConfig(name, value);\n\t\t\t\tif (value !== \"\" || !startup || callbackOverride) {\n\t\t\t\t\tconsole.debug(`[Comfy-Callback]: ${name} =`, value);\n\t\t\t\t\tcallback?.(value, name, defaultVal);\n\t\t\t\t}\n\t\t\t}, [value, name]);\n\n\t\t\tif (condition === false) return null;\n\n\t\t\treturn Spicetify.React.createElement(CardLayout, {\n\t\t\t\ttitle,\n\t\t\t\tdesc,\n\t\t\t\ttippy,\n\t\t\t\taction: [\n\t\t\t\t\tSpicetify.React.createElement(\"input\", {\n\t\t\t\t\t\ttype: inputType,\n\t\t\t\t\t\tclassName: \"input\",\n\t\t\t\t\t\tref: textFieldRef,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tmin: inputType === \"number\" ? Number(min) : null,\n\t\t\t\t\t\tmax: inputType === \"number\" ? Number(max) : null,\n\t\t\t\t\t\tstep: inputType === \"number\" ? Number(step) : null,\n\t\t\t\t\t\tplaceholder: defaultState,\n\t\t\t\t\t\tonChange: e => setValue(e.target.value)\n\t\t\t\t\t}),\n\t\t\t\t\tincludePicker &&\n\t\t\t\t\t\tSpicetify.React.createElement(\"input\", {\n\t\t\t\t\t\t\ttype: \"color\",\n\t\t\t\t\t\t\tclassName: \"input\",\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tplaceholder: defaultState,\n\t\t\t\t\t\t\tonChange: e => setValue(e.target.value)\n\t\t\t\t\t\t})\n\t\t\t\t]\n\t\t\t});\n\t\t}\n\t);\n\n\tconst Dropdown = Spicetify.React.memo(({ name, title, desc, options, defaultVal, condition = true, tippy, callback }) => {\n\t\tif (!condition) return null;\n\t\tif (!defaultVal) defaultVal = \"Select an option\";\n\t\tif (typeof options === \"function\") options = options();\n\n\t\tconst [selectedValue, setSelectedValue] = Spicetify.React.useState(getConfig(name) ?? defaultVal);\n\t\tconst [buttonEnabled, setButtonEnabled] = Spicetify.React.useState(selectedValue !== defaultVal);\n\t\tconst [menuOpen, setMenuOpen] = Spicetify.React.useState(false);\n\t\tconst isFirstRender = Spicetify.React.useRef(true);\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tif (isFirstRender.current) {\n\t\t\t\tisFirstRender.current = false;\n\t\t\t\tif (!startup) {\n\t\t\t\t\tconst parent = document.querySelector(\"generic-modal [aria-label='Comfy Settings']\");\n\t\t\t\t\tconst current = document.getElementById(name);\n\t\t\t\t\tparent.addEventListener(\"click\", event => {\n\t\t\t\t\t\tif (event.target.closest(\".dropdown-wrapper\") !== current) {\n\t\t\t\t\t\t\tsetMenuOpen(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetConfig(name, selectedValue);\n\t\t\tif ((condition && selectedValue !== defaultVal) || !startup) {\n\t\t\t\tconsole.debug(`[Comfy-Callback]: ${name} =`, selectedValue);\n\t\t\t\tcallback?.(name, selectedValue, options, defaultVal);\n\t\t\t\tsetButtonEnabled(selectedValue !== defaultVal);\n\t\t\t}\n\t\t}, [selectedValue]);\n\n\t\treturn Spicetify.React.createElement(CardLayout, {\n\t\t\ttitle,\n\t\t\tdesc,\n\t\t\ttippy,\n\t\t\taction: [\n\t\t\t\tbuttonEnabled &&\n\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclassName: `switch`,\n\t\t\t\t\t\t\tonClick: event => {\n\t\t\t\t\t\t\t\tevent.stopPropagation(); // Prevent event from propagating up\n\t\t\t\t\t\t\t\tsetSelectedValue(defaultVal);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\tSpicetify.React.createElement(\"svg\", {\n\t\t\t\t\t\t\theight: \"16\",\n\t\t\t\t\t\t\twidth: \"16\",\n\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t\t\t__html: Spicetify.SVGIcons.x\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t),\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? \"menu-open\" : \"\"}`, id: name },\n\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{ className: \"dropdown-button\", onClick: () => setMenuOpen(!menuOpen) },\n\t\t\t\t\t\tSpicetify.React.createElement(\"div\", { className: \"dropdown-selection\" }, selectedValue),\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{ className: \"dropdown-arrow-wrapper\" },\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"span\", { className: \"dropdown-arrow\" })\n\t\t\t\t\t\t)\n\t\t\t\t\t),\n\t\t\t\t\tmenuOpen &&\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{ className: \"dropdown-menu\" },\n\t\t\t\t\t\t\toptions.map(option =>\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: option,\n\t\t\t\t\t\t\t\t\t\tclassName: `dropdown-option${selectedValue === option ? \" selected\" : \"\"}`,\n\t\t\t\t\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t\t\t\t\t\t\"aria-selected\": selectedValue === option,\n\t\t\t\t\t\t\t\t\t\tonClick: event => {\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation(); // Prevent event from propagating up\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedValue(option);\n\t\t\t\t\t\t\t\t\t\t\tsetMenuOpen(false);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\toption\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t]\n\t\t});\n\t});\n\n\tconst Carousel = ({ chips, checked, setChecked }) => {\n\t\tconst containerRef = Spicetify.React.useRef(null);\n\t\tconst [showLeftButton, setShowLeftButton] = Spicetify.React.useState(false);\n\t\tconst [showRightButton, setShowRightButton] = Spicetify.React.useState(false);\n\t\tconst [startX, setStartX] = Spicetify.React.useState(0);\n\t\tconst [scrollLeft, setScrollLeft] = Spicetify.React.useState(0);\n\t\tconst [mouseDown, setMouseDown] = Spicetify.React.useState(false);\n\t\tconst isFirstRender = Spicetify.React.useRef(true);\n\n\t\tconst section = document.querySelector(\".main-trackCreditsModal-mainSection\");\n\n\t\t// Handle resizing and scroll visibility\n\t\tconst handleResize = Spicetify.React.useCallback(() => {\n\t\t\tif (containerRef.current) {\n\t\t\t\tconst container = containerRef.current;\n\t\t\t\tsetShowLeftButton(container.scrollLeft > 0);\n\t\t\t\tsetShowRightButton(container.scrollLeft < container.scrollWidth - container.clientWidth - 2);\n\t\t\t}\n\t\t}, []);\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\thandleResize(); // Initial call\n\t\t\twindow.addEventListener(\"resize\", handleResize);\n\t\t\treturn () => window.removeEventListener(\"resize\", handleResize);\n\t\t}, [handleResize]);\n\n\t\t// Scroll to active item on first render\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tif (containerRef.current && isFirstRender.current) {\n\t\t\t\tconst activeItem = containerRef.current.querySelector(`.search-searchCategory-categoryGridItem:nth-child(${checked.index + 1})`);\n\t\t\t\tif (activeItem) {\n\t\t\t\t\tconst container = containerRef.current;\n\t\t\t\t\tconst containerScrollLeft = container.scrollLeft;\n\t\t\t\t\tconst containerWidth = container.clientWidth;\n\t\t\t\t\tconst itemOffsetLeft = activeItem.offsetLeft;\n\t\t\t\t\tconst itemWidth = activeItem.clientWidth;\n\n\t\t\t\t\tif (itemOffsetLeft < containerScrollLeft + 32 || itemOffsetLeft + itemWidth > containerScrollLeft + containerWidth - 32) {\n\t\t\t\t\t\tconst scrollPosition = itemOffsetLeft - (containerWidth / 2 - itemWidth / 2);\n\t\t\t\t\t\tcontainer.scrollTo({ left: scrollPosition, behavior: \"instant\" });\n\t\t\t\t\t}\n\n\t\t\t\t\tisFirstRender.current = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}, [checked.index]);\n\n\t\t// Handle dragging\n\t\tconst handleMouseDown = event => {\n\t\t\tsetStartX(event.pageX - containerRef.current.offsetLeft);\n\t\t\tsetScrollLeft(containerRef.current.scrollLeft);\n\t\t\tsetMouseDown(true);\n\t\t\tcontainerRef.current.style.cursor = \"grabbing\";\n\t\t\tcontainerRef.current.style.userSelect = \"none\";\n\t\t\tcontainerRef.current.style.scrollBehavior = \"auto\";\n\t\t};\n\n\t\tconst handleMouseMove = event => {\n\t\t\tif (!mouseDown) return;\n\t\t\tevent.preventDefault();\n\t\t\tconst x = event.pageX - containerRef.current.offsetLeft;\n\t\t\tconst walk = (x - startX) * 1; // Adjust scrolling speed\n\t\t\tcontainerRef.current.scrollLeft = scrollLeft - walk;\n\t\t};\n\n\t\tconst handleMouseUpOrLeave = () => {\n\t\t\tif (mouseDown) {\n\t\t\t\tcontainerRef.current.style.cursor = \"\";\n\t\t\t\tcontainerRef.current.style.userSelect = \"\";\n\t\t\t\tcontainerRef.current.style.scrollBehavior = \"\";\n\t\t\t\tsetMouseDown(false);\n\t\t\t}\n\t\t};\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tdocument.addEventListener(\"mouseup\", handleMouseUpOrLeave);\n\t\t\tdocument.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.addEventListener(\"mouseleave\", handleMouseUpOrLeave);\n\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUpOrLeave);\n\t\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\tdocument.removeEventListener(\"mouseleave\", handleMouseUpOrLeave);\n\t\t\t};\n\t\t}, [mouseDown]);\n\n\t\t// Handle arrow key navigation\n\t\tconst handleKeyDown = Spicetify.React.useCallback(\n\t\t\tevent => {\n\t\t\t\tlet newIndex;\n\t\t\t\tlet startingIndex = checked.index;\n\n\t\t\t\tif (document.activeElement.classList.contains(\"search-searchCategory-categoryGridItem\")) {\n\t\t\t\t\tstartingIndex = Array.from(containerRef.current.querySelectorAll(\".search-searchCategory-categoryGridItem\")).indexOf(\n\t\t\t\t\t\tdocument.activeElement\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (event.key === \"ArrowLeft\") {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tnewIndex = startingIndex - 1;\n\t\t\t\t\tif (newIndex < 0) newIndex = chips.length - 1;\n\t\t\t\t} else if (event.key === \"ArrowRight\") {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tnewIndex = (startingIndex + 1) % chips.length;\n\t\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\t\tconst focusedChip = document.activeElement;\n\t\t\t\t\tconst index = Array.from(containerRef.current.querySelectorAll(\".search-searchCategory-categoryGridItem\")).indexOf(focusedChip);\n\t\t\t\t\tif (index !== -1) {\n\t\t\t\t\t\tsetChecked({ index, label: chips[index].label });\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (newIndex !== undefined) {\n\t\t\t\t\tconst chipElement = containerRef.current.querySelector(`.search-searchCategory-categoryGridItem:nth-child(${newIndex + 1})`);\n\t\t\t\t\tif (chipElement) chipElement.focus();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[checked.index, chips, setChecked]\n\t\t);\n\n\t\t// Handle button clicks\n\t\tconst handleButtonClick = direction => {\n\t\t\tconst multiplier = direction === \"LEFT\" ? -1 : 1;\n\t\t\tcontainerRef.current.scrollBy({\n\t\t\t\tleft: multiplier * (containerRef.current.clientWidth / 2),\n\t\t\t\tbehavior: \"smooth\"\n\t\t\t});\n\t\t};\n\n\t\tconst clickCallback = (index, label) => {\n\t\t\tif (scrollLeft === containerRef.current.scrollLeft) setChecked({ index, label });\n\n\t\t\tif (section) section.scrollTo(null, 0);\n\t\t};\n\n\t\treturn Spicetify.React.createElement(\n\t\t\t\"div\",\n\t\t\t{ className: \"search-searchCategory-SearchCategory encore-dark-theme\" },\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"div\",\n\t\t\t\t{ className: \"search-searchCategory-wrapper contentSpacing\" },\n\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: `search-searchCategory-contentArea\n\t\t\t\t\t\t${showLeftButton ? \"search-searchCategory-showLeftButton\" : \"\"}\n\t\t\t\t\t\t${showRightButton ? \"search-searchCategory-showRightButton\" : \"\"}\n\t\t\t\t\t\t${showRightButton && showLeftButton ? \"search-searchCategory-showLeftButton search-searchCategory-showRightButton\" : \"\"}`\n\t\t\t\t\t\t\t.trim()\n\t\t\t\t\t\t\t.replace(/\\s+/g, \" \")\n\t\t\t\t\t},\n\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tref: containerRef,\n\t\t\t\t\t\t\tclassName: \"search-searchCategory-categoryGrid\",\n\t\t\t\t\t\t\tonScroll: handleResize,\n\t\t\t\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\t\t\trole: \"list\",\n\t\t\t\t\t\t\ttabIndex: 0,\n\t\t\t\t\t\t\tonMouseDown: handleMouseDown\n\t\t\t\t\t\t},\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{ role: \"presentation\" },\n\t\t\t\t\t\t\tchips.map((chip, index) =>\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\t\t\"a\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tkey: index,\n\t\t\t\t\t\t\t\t\t\tdraggable: \"false\",\n\t\t\t\t\t\t\t\t\t\tclassName: \"search-searchCategory-categoryGridItem\",\n\t\t\t\t\t\t\t\t\t\ttabIndex: \"-1\",\n\t\t\t\t\t\t\t\t\t\tonClick: () => clickCallback(index, chip.label)\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\t\t\tSpicetify.ReactComponent.Chip,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tisUsingKeyboard: false,\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => clickCallback(index, chip.label),\n\t\t\t\t\t\t\t\t\t\t\tselected: checked.index === index,\n\t\t\t\t\t\t\t\t\t\t\tselectedColorSet: \"invertedLight\",\n\t\t\t\t\t\t\t\t\t\t\ttabIndex: \"-1\"\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tchip.label\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t),\n\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t{ className: \"search-searchCategory-carousel\" },\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: `search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft`,\n\t\t\t\t\t\t\t\ttabIndex: -1,\n\t\t\t\t\t\t\t\tonClick: () => handleButtonClick(\"LEFT\"),\n\t\t\t\t\t\t\t\tinert: true\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"svg\", {\n\t\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\t\tclassName: \"Svg-img-icon-small-textBase\",\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML: { __html: Spicetify.SVGIcons[\"chevron-left\"] }\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t),\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"button\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: `search-searchCategory-carouselButton search-searchCategory-carouselButtonRight`,\n\t\t\t\t\t\t\t\ttabIndex: -1,\n\t\t\t\t\t\t\t\tonClick: () => handleButtonClick(\"RIGHT\"),\n\t\t\t\t\t\t\t\tinert: true\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"svg\", {\n\t\t\t\t\t\t\t\tviewBox: \"0 0 16 16\",\n\t\t\t\t\t\t\t\tclassName: \"Svg-img-icon-small-textBase\",\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML: { __html: Spicetify.SVGIcons[\"chevron-right\"] }\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t);\n\t};\n\n\tconst Content = () => {\n\t\tconst defaultFilter = sessionStorage.getItem(\"comfy-settings-filter\") ? JSON.parse(sessionStorage.getItem(\"comfy-settings-filter\")) : null;\n\t\tconst [filter, setFilter] = Spicetify.React.useState(defaultFilter ?? { index: 0, label: \"All\" });\n\n\t\tSpicetify.React.useEffect(() => {\n\t\t\tif (startup) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsessionStorage.setItem(\"comfy-settings-filter\", JSON.stringify(filter));\n\t\t}, [filter]);\n\n\t\treturn Spicetify.React.createElement(\n\t\t\t\"div\",\n\t\t\t{ className: \"comfy-settings\" },\n\t\t\tSpicetify.React.createElement(Carousel, {\n\t\t\t\tchips: [\n\t\t\t\t\t{ label: \"All\" },\n\t\t\t\t\t{ label: \"Settings\" },\n\t\t\t\t\t{ label: \"Banner Image\" },\n\t\t\t\t\t{ label: \"Cover Art\" },\n\t\t\t\t\t{ label: \"Playbar\" },\n\t\t\t\t\t{ label: \"Tracklist\" },\n\t\t\t\t\t{ label: \"Interface\" },\n\t\t\t\t\t{ label: \"Colorscheme\" }\n\t\t\t\t],\n\t\t\t\tchecked: filter,\n\t\t\t\tsetChecked: setFilter\n\t\t\t}),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Colorscheme\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: Dropdown,\n\t\t\t\t\tname: \"Color-Scheme\",\n\t\t\t\t\ttitle: `Color Scheme`,\n\t\t\t\t\tdesc: \"For faster loadtimes use cli to change color schemes\",\n\t\t\t\t\toptions: () => {\n\t\t\t\t\t\tconst schemes = Object.keys(getConfig(\"Color-Schemes\"));\n\t\t\t\t\t\tconst decapSchemes = schemes.map(function (x) {\n\t\t\t\t\t\t\treturn x.toLowerCase();\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tif (!decapSchemes.includes(configScheme.toLowerCase())) {\n\t\t\t\t\t\t\tschemes.unshift(configScheme);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn schemes;\n\t\t\t\t\t},\n\t\t\t\t\tdefaultVal: (configScheme =\n\t\t\t\t\t\t(getConfig(\"Color-Schemes\") &&\n\t\t\t\t\t\t\tObject.keys(getConfig(\"Color-Schemes\")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) ||\n\t\t\t\t\t\tconfigScheme),\n\t\t\t\t\tcondition: getConfig(\"Color-Schemes\") && !preloadedScheme && !document.querySelector(\"body > style.marketplaceCSS.marketplaceScheme\"),\n\t\t\t\t\tcallback: (name, value) => {\n\t\t\t\t\t\tupdateScheme(value);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Dropdown,\n\t\t\t\t\tname: `Scheme-Features`,\n\t\t\t\t\ttitle: `Additional Features`,\n\t\t\t\t\tdescription: \"Extra tweaks to complete specific color schemes\",\n\t\t\t\t\toptions: [\"nord\", \"nord-flat\", \"kitty\"],\n\t\t\t\t\tcallback: (name, value, options, defaultVal) => {\n\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\tmain.classList.remove(...options.map(option => `Comfy-${option}-Snippet`));\n\t\t\t\t\t\t\t\tif (value !== defaultVal) main.classList.add(`Comfy-${value}-Snippet`);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Dropdown,\n\t\t\t\t\tname: \"Flatten-Colors\",\n\t\t\t\t\ttitle: \"Flatten Theme Colors\",\n\t\t\t\t\tdesc: \"Sets main color to the same color as sidebar\",\n\t\t\t\t\tdefaultVal: \"off\",\n\t\t\t\t\toptions: [\"off\", \"normal\", \"reverse\"],\n\t\t\t\t\tcallback: (name, value, options, defaultVal) => {\n\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\tmain.classList.remove(...options.map(option => `${name}-${option}`));\n\t\t\t\t\t\t\t\tif (value !== defaultVal) main.classList.add(`${name}-${value}`);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Dropdown,\n\t\t\t\t\tname: \"Dark-Modals\",\n\t\t\t\t\ttitle: \"Modal Colors\",\n\t\t\t\t\tdesc: \"Forces modals to be dark/light, useful for light mode schemes\",\n\t\t\t\t\tdefaultVal: \"light\",\n\t\t\t\t\toptions: [\"light\", \"dark\"],\n\t\t\t\t\tcallback: (name, value, options, defaultVal) => {\n\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\tconst customXpui = document.getElementById(\"/xpui.css\");\n\n\t\t\t\t\t\t\t\tif (value === defaultVal && customXpui) {\n\t\t\t\t\t\t\t\t\tcustomXpui.remove();\n\t\t\t\t\t\t\t\t\tmain.classList.remove(`Comfy-${name}-Snippet`);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tif (value !== defaultVal && !customXpui) {\n\t\t\t\t\t\t\t\t\tfetch(\"xpui.css\")\n\t\t\t\t\t\t\t\t\t\t.then(res => res.text())\n\t\t\t\t\t\t\t\t\t\t.then(text => {\n\t\t\t\t\t\t\t\t\t\t\tconst result = text.replace(\n\t\t\t\t\t\t\t\t\t\t\t\t/(\\.encore-dark-theme,\\.encore-dark-theme)/g,\n\t\t\t\t\t\t\t\t\t\t\t\t\".GenericModal__overlay .encore-light-theme,dialog .encore-light-theme,$1\"\n\t\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\t\tconst newStyle = document.createElement(\"style\");\n\t\t\t\t\t\t\t\t\t\t\tnewStyle.textContent = result;\n\t\t\t\t\t\t\t\t\t\t\tnewStyle.id = \"/xpui.css\";\n\t\t\t\t\t\t\t\t\t\t\tdocument.head.appendChild(newStyle);\n\t\t\t\t\t\t\t\t\t\t\tmain.classList.add(`Comfy-${name}-Snippet`);\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t.catch(e => console.error(`[Comfy-Error]: ${name}`, e));\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Interface\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\tname: \"App-Title\",\n\t\t\t\t\ttitle: \"Application Title\",\n\t\t\t\t\tdefaultVal: Spicetify.AppTitle?.get(),\n\t\t\t\t\tdesc: \"Change the title of the application, leave blank to reset\",\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\twaitForDeps(\"Spicetify.Platform.UserAPI\", async () => {\n\t\t\t\t\t\t\tconst productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service;\n\t\t\t\t\t\t\tawait productState.delOverridesValues({ keys: [\"name\"] });\n\t\t\t\t\t\t\tif (value) await productState.putOverridesValues({ pairs: { name: value } });\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\tname: \"App-Titlebar-Height\",\n\t\t\t\t\ttitle: \"Titlebar Height\",\n\t\t\t\t\tdefaultVal: Spicetify.Platform.version >= \"1.2.46.462\" ? \"64\" : \"40\",\n\t\t\t\t\tmin: \"0\",\n\t\t\t\t\tcondition: Spicetify.Platform.version >= \"1.2.32.997\",\n\t\t\t\t\tcallback: (value, name, defaultVal) => {\n\t\t\t\t\t\twaitForDeps([\"Spicetify.CosmosAsync\"], async () => {\n\t\t\t\t\t\t\tawait Spicetify.CosmosAsync.post(\"sp://messages/v1/container/control\", {\n\t\t\t\t\t\t\t\ttype: \"update_titlebar\",\n\t\t\t\t\t\t\t\theight: `${(value === \"0\" ? \"1\" : value) || defaultVal}px`\n\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--comfy-topbar-height\", value ? value + \"px\" : \"\");\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\tcallbackOverride: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\tname: \"Button-Radius\",\n\t\t\t\t\ttitle: \"Button Radius\",\n\t\t\t\t\tdefaultVal: \"8\",\n\t\t\t\t\tmin: \"0\",\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Change how circular buttons are:\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: 8px\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Spotify default: 50px\")\n\t\t\t\t\t),\n\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--button-radius\", value ? value + \"px\" : \"\")\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Topbar-Inside-Titlebar-Snippet\",\n\t\t\t\t\ttitle: \"Move Topbar Inside Titlebar\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcondition: Spicetify.Platform.version <= \"1.2.46.462\" && !document.querySelector(\":root .global-nav\"),\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (document.querySelector(\":root .global-nav\")) return;\n\n\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t[\".Root__top-container\", \".main-topBar-container\"],\n\t\t\t\t\t\t\telements => {\n\t\t\t\t\t\t\t\tconst [container, topbar] = elements;\n\t\t\t\t\t\t\t\tconst entryPoint = document.querySelector(\".Root__top-bar\") ?? document.querySelector(\".Root__main-view\");\n\t\t\t\t\t\t\t\tconst grid = value ? container : entryPoint;\n\n\t\t\t\t\t\t\t\tgrid.insertBefore(topbar, grid.firstChild);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Toggle,\n\t\t\t\t\t\t\tname: \"Collapse-Topbar-Snippet\",\n\t\t\t\t\t\t\ttitle: \"Collapse List Items\",\n\t\t\t\t\t\t\tdefaultVal: true\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\tcollapseItems: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-DJ-Prompt\",\n\t\t\t\t\ttitle: \"Remove your DJ prompt\",\n\t\t\t\t\tdesc: \"Hides the prompt 'Click to start listening' in the library\",\n\t\t\t\t\tdefaultVal: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Compact-Context-Menu\",\n\t\t\t\t\ttitle: \"Compact Context Menu\",\n\t\t\t\t\tdefaultVal: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Custom-Font\",\n\t\t\t\t\ttitle: \"Custom Font\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (!value) {\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--font-family\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--encore-title-font-stack\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--encore-body-font-stack\", \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t// tippy doesnt like loading images\n\t\t\t\t\t\t\t\t\theight: \"375px\",\n\t\t\t\t\t\t\t\t\twidth: \"242px\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"img\", {\n\t\t\t\t\t\t\t\tsrc: \"https://raw.githubusercontent.com/Tetrax-10/Nord-Spotify/master/assets/font/font-url.png\",\n\t\t\t\t\t\t\t\talt: \"preview\",\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\theight: \"300px\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}),\n\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Usage:\"),\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Font Name (if installed)\"),\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"URL (Google Fonts)\")\n\t\t\t\t\t\t)\n\t\t\t\t\t),\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\t\t\tname: \"Font\",\n\t\t\t\t\t\t\ttitle: \"Font\",\n\t\t\t\t\t\t\tdefaultVal: \"Placeholder\",\n\t\t\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\t\t\tlet fontFamily = value;\n\t\t\t\t\t\t\t\tif (isValidUrl(value)) {\n\t\t\t\t\t\t\t\t\tfontFamily = decodeURIComponent(value.match(/family=([^&:]+)/)?.[1]?.replace(/\\+/g, \" \"));\n\t\t\t\t\t\t\t\t\tif (!document.getElementById(\"custom-font\")) {\n\t\t\t\t\t\t\t\t\t\tconst link = document.createElement(\"link\");\n\t\t\t\t\t\t\t\t\t\tlink.rel = \"preload stylesheet\";\n\t\t\t\t\t\t\t\t\t\tlink.as = \"style\";\n\t\t\t\t\t\t\t\t\t\tlink.href = value;\n\t\t\t\t\t\t\t\t\t\tlink.id = \"custom-font\";\n\t\t\t\t\t\t\t\t\t\tdocument.head.appendChild(link);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tdocument.getElementById(\"custom-font\").href = value;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--font-family\", fontFamily);\n\t\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--encore-title-font-stack\", fontFamily);\n\t\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--encore-body-font-stack\", fontFamily);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Home-Header-Snippet\",\n\t\t\t\t\ttitle: \"Colorful Home Header\",\n\t\t\t\t\tdefaultVal: true,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (!value) {\n\t\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\t\tmain.classList.remove(\"Home-Header-Snippet\");\n\t\t\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--home-header-color\", \"\");\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\t\t\tincludePicker: true,\n\t\t\t\t\t\t\tname: \"Home-Header-Color\",\n\t\t\t\t\t\t\ttitle: \"Custom Color\",\n\t\t\t\t\t\t\tdefaultVal: \"none\",\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"name (red, blue, (--var), etc)\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"hex (#000000)\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"rgb (0, 0, 0)\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"rgba (0, 0, 0, 1)\")\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcallback: (value, name) => {\n\t\t\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\t\t\"main\",\n\t\t\t\t\t\t\t\t\tmain => {\n\t\t\t\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--home-header-color\", value);\n\n\t\t\t\t\t\t\t\t\t\tif (value === \"\") {\n\t\t\t\t\t\t\t\t\t\t\tmain.classList.remove(name);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tmain.classList.add(name);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ttrue,\n\t\t\t\t\t\t\t\t\t\"getElementById\"\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\tcollapseItems: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Horizontal-pageLinks-Snippet\",\n\t\t\t\t\ttitle: \"Horizontal Page Links\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcondition: Spicetify.Platform.version <= \"1.2.46.462\" && !document.querySelector(\":root .global-nav\")\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Tracklist\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Tracklist-Index\",\n\t\t\t\t\ttitle: \"Remove Tracklist Index\",\n\t\t\t\t\tdesc: \"Hides the numbers / count next to songs\",\n\t\t\t\t\tdefaultVal: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Column-Bar-Snippet\",\n\t\t\t\t\ttitle: \"Remove Column Bar\",\n\t\t\t\t\tdesc: \"Hides the column bar above tracklist\",\n\t\t\t\t\tdefaultVal: true,\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\"div\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t// tippy doesnt like loading images\n\t\t\t\t\t\t\t\t\theight: \"120px\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tSpicetify.React.createElement(\"img\", {\n\t\t\t\t\t\t\t\tsrc: \"https://github.com/Comfy-Themes/Spicetify/blob/main/images/settings/column-bar.png?raw=true\",\n\t\t\t\t\t\t\t\talt: \"preview\",\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\twidth: \"100%\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Tracklist-Gradient-Noise\",\n\t\t\t\t\ttitle: \"Remove Gradient Noise\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tdesc: \"Remove the noise from the gradient\",\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--tracklist-gradient-noise\", value ? \"none\" : \"\");\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\tname: \"Tracklist-Gradient-Height\",\n\t\t\t\t\ttitle: \"Gradient Height\",\n\t\t\t\t\tdefaultVal: \"232\",\n\t\t\t\t\tmin: \"0\",\n\t\t\t\t\tdesc: \"Change the height of the gradient (the transparent part of the tracklist)\",\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Set to 0 to disable the gradient!\")\n\t\t\t\t\t),\n\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--tracklist-gradient-height\", value ? value + \"px\" : \"\")\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\tname: \"Tracklist-Gradient-Opacity\",\n\t\t\t\t\ttitle: \"Gradient Opacity\",\n\t\t\t\t\tdefaultVal: \"0.6\",\n\t\t\t\t\tmin: \"0\",\n\t\t\t\t\tmax: \"1\",\n\t\t\t\t\tstep: \"0.1\",\n\t\t\t\t\tdesc: \"Change the opacity of the gradient (0 -> 1)\",\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Set to 0 for no gradient color!\")\n\t\t\t\t\t),\n\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--tracklist-gradient-opacity\", value || \"\")\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Playbar\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Custom-Playbar-Snippet\",\n\t\t\t\t\ttitle: \"Custom Playbar Layout\",\n\t\t\t\t\tdefaultVal: true,\n\t\t\t\t\tdesc: \"Comfy's out of box playbar design\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Playbar-Above-Right-Panel-Snippet\",\n\t\t\t\t\ttitle: \"Above Right Panel\",\n\t\t\t\t\tdesc: \"Moves the playbar above the right panel\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcondition: Spicetify.Platform.version <= \"1.2.46.462\" && !document.querySelector(\":root .global-nav\"),\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\twaitForDeps(\n\t\t\t\t\t\t\t\".Root__top-container\",\n\t\t\t\t\t\t\ttopContainer => {\n\t\t\t\t\t\t\t\tconst playbar = topContainer.querySelector(\".Root__now-playing-bar\");\n\n\t\t\t\t\t\t\t\tif (value) {\n\t\t\t\t\t\t\t\t\tconst rightbar = topContainer.querySelector(\".Root__right-sidebar\");\n\t\t\t\t\t\t\t\t\tconst resizeObserver = new ResizeObserver(entries => {\n\t\t\t\t\t\t\t\t\t\tif (getConfig(\"Playbar-Above-Right-Panel-Snippet\")) {\n\t\t\t\t\t\t\t\t\t\t\tfor (let entry of entries) {\n\t\t\t\t\t\t\t\t\t\t\t\tif (entry.target === rightbar) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tlet newWidth = entry.contentRect.width;\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (newWidth == 0) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst localStorageWidth = localStorage.getItem(\"223ni6f2epqcidhx5etjafeai:panel-width-saved\");\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (localStorageWidth) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnewWidth = localStorageWidth;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnewWidth = 420;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tplaybar.style.width = `${newWidth}px`;\n\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\tresizeObserver.observe(rightbar);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tplaybar.style.width = \"\";\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Smooth-Progress-Bar-Snippet\",\n\t\t\t\t\ttitle: \"Smooth Progress Bar\",\n\t\t\t\t\tdesc: \"Makes the progress bar ease its movement giving the appearance of a smoother transition\",\n\t\t\t\t\tdefaultVal: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Hoverable-Timers-Snippet\",\n\t\t\t\t\ttitle: \"Hoverable Playback Timers\",\n\t\t\t\t\tdefaultVal: false\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Connect-Bar-Snippet\",\n\t\t\t\t\ttitle: \"Remove Connect Bar\",\n\t\t\t\t\tdefaultVal: false\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Progress-Bar-Gradient-Snippet\",\n\t\t\t\t\ttitle: \"Remove Progress Bar Gradient\",\n\t\t\t\t\tdefaultVal: false\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Remove-Lyrics-Button-Snippet\",\n\t\t\t\t\ttitle: \"Remove Lyrics Button\",\n\t\t\t\t\tdefaultVal: false\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Cover Art\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Custom-Cover-Art-Dimensions\",\n\t\t\t\t\ttitle: \"Custom Dimensions\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (!value) {\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--cover-art-width\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--cover-art-height\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--cover-art-radius\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--cover-art-left\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--cover-art-bottom\", \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Change the size of the cover art:\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: (84px, 84px, 8px, 20px)\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Spotify default: (56px, 56px, 4px, 0px)\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Oblong: (115px, 84px, 15px, 20px)\")\n\t\t\t\t\t),\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Cover-Art-Width\",\n\t\t\t\t\t\t\ttitle: \"Width\",\n\t\t\t\t\t\t\tdefaultVal: \"84px\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--cover-art-width\", value ? value + \"px\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Cover-Art-Height\",\n\t\t\t\t\t\t\ttitle: \"Height\",\n\t\t\t\t\t\t\tdefaultVal: \"84px\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--cover-art-height\", value ? value + \"px\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Cover-Art-Radius\",\n\t\t\t\t\t\t\ttitle: \"Border Radius\",\n\t\t\t\t\t\t\tdefaultVal: \"8px\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--cover-art-radius\", value ? value + \"px\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Cover-Art-Left\",\n\t\t\t\t\t\t\ttitle: \"Left Margin\",\n\t\t\t\t\t\t\tdefaultVal: \"0px\",\n\t\t\t\t\t\t\tdesc: \"Change the distance between the cover art and the left of the playbar\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--cover-art-left\", value ? value + \"px\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Cover-Art-Bottom\",\n\t\t\t\t\t\t\ttitle: \"Bottom Margin\",\n\t\t\t\t\t\t\tdefaultVal: \"20px\",\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: 20px\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Spotify default: 0px\")\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tdesc: \"Change the distance between the cover art and the bottom of the playbar\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--cover-art-bottom\", value ? value + \"px\" : \"\")\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Banner Image\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Header-Background\",\n\t\t\t\t\ttitle: \"Header Background\",\n\t\t\t\t\tdesc: \"Adds a translucent background behind header text and images\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (!value) {\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--header-opacity\", \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Header-Background-Opacity\",\n\t\t\t\t\t\t\ttitle: \"Opacity\",\n\t\t\t\t\t\t\tdefaultVal: \"0.6\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--header-opacity\", value ? value : \"\")\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\tcollapseItems: false\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Banner-Enabled\",\n\t\t\t\t\ttitle: \"Custom Banner Images\",\n\t\t\t\t\tdefaultVal: true,\n\t\t\t\t\tdesc: \"(all settings in this category will be ignored if disabled)\",\n\t\t\t\t\titems: Object.keys(channels).map(channel => ({\n\t\t\t\t\t\ttype: Toggle,\n\t\t\t\t\t\tname: channel,\n\t\t\t\t\t\ttitle: `${channel.replace(\"-\", \" \")} Page`,\n\t\t\t\t\t\tdefaultVal: channels[channel][\"enabled\"],\n\t\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\t\tif (value !== channels[channel][\"enabled\"]) {\n\t\t\t\t\t\t\t\tchannels[channel][\"enabled\"] = value;\n\t\t\t\t\t\t\t\tupdateBanner();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t})),\n\t\t\t\t\tcollapseItems: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Replace-Existing-Banners\",\n\t\t\t\t\ttitle: \"Replace Existing Banners\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tdesc: \"Replace any existing banners with our own - e.g artist banners, playlist banners, etc.\",\n\t\t\t\t\tcallback: updateBanner\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Prefer-Existing-Image\",\n\t\t\t\t\ttitle: \"Prefer Existing Image\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tdesc: \"If available, use existing images instead of the current playing song - e.g playlist image, album art, etc.\",\n\t\t\t\t\tcallback: updateBanner\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Apple-Music-Gradient-Snippet\",\n\t\t\t\t\ttitle: \"Apple Music Gradient\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcallback: value => {\n\t\t\t\t\t\tif (!value) {\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--gradient-background-image\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--gradient-blend-mode\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--gradient-speed\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--gradient-width\", \"\");\n\t\t\t\t\t\t\tdocument.documentElement.style.setProperty(\"--gradient-radius\", \"\");\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"MacOS Note:\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Disable Reduced Motion in System Preferences\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Blur (10x Value):\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Recommended: 4px\")\n\t\t\t\t\t),\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Toggle,\n\t\t\t\t\t\t\tname: \"AM-Gradient-Include-Existing-Snippet\",\n\t\t\t\t\t\t\ttitle: \"Existing Banners\",\n\t\t\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\t\t\tdesc: \"Apply the gradient to existing banners on the page (e.g. artist banners)\",\n\t\t\t\t\t\t\tcallback: updateBanner\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\t\t\tname: \"Gradient-Noise\",\n\t\t\t\t\t\t\ttitle: \"Noise URL\",\n\t\t\t\t\t\t\tdefaultVal: \"none\",\n\t\t\t\t\t\t\tdesc: \"Overlays an image below the blur and over the art, can be used for noise\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--gradient-background-image\", value ? `url('${value}')` : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\t\t\tname: \"Gradient-Blend\",\n\t\t\t\t\t\t\ttitle: \"Blend Mode\",\n\t\t\t\t\t\t\tdefaultVal: \"luminosity\",\n\t\t\t\t\t\t\tdesc: \"'difference' works well with noise\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--gradient-blend-mode\", value || \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Gradient-Speed\",\n\t\t\t\t\t\t\ttitle: \"Speed\",\n\t\t\t\t\t\t\tdefaultVal: \"50\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Seconds per full rotation (360°):\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: 50\")\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--gradient-speed\", value ? value + \"s\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Gradient-Size\",\n\t\t\t\t\t\t\ttitle: \"Size\",\n\t\t\t\t\t\t\tdefaultVal: \"150\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Width of circles in relation to viewport (in %)\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: 150\")\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--gradient-width\", value ? value + \"%\" : \"\")\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\t\t\tname: \"Gradient-Radius\",\n\t\t\t\t\t\t\ttitle: \"Radius\",\n\t\t\t\t\t\t\tdesc: \"Radius of circles (in %)\",\n\t\t\t\t\t\t\tdefaultVal: \"50\",\n\t\t\t\t\t\t\tmin: \"0\",\n\t\t\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--gradient-radius\", value ? value + \"%\" : \"\")\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\tcollapseItems: true\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: SubSection,\n\t\t\t\t\tname: \"Custom-Image\",\n\t\t\t\t\ttitle: \"Custom Image\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tcallback: updateBanner,\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Input,\n\t\t\t\t\t\t\tinputType: \"text\",\n\t\t\t\t\t\t\tname: \"Custom-Image-URL\",\n\t\t\t\t\t\t\ttitle: \"URL\",\n\t\t\t\t\t\t\tdefaultVal: \"Paste URL here!\",\n\t\t\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\t\t\tnull,\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Network Images:\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Enter any raw image url into text box, e.g. 'https://example.com/image.png'\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Local Images:\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Place desired image in 'spotify/Apps/xpui/images'\"),\n\t\t\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Enter 'images/image.png' into text box\")\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcallback: updateBanner\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Input,\n\t\t\t\t\tinputType: \"number\",\n\t\t\t\t\tname: \"Image-Blur\",\n\t\t\t\t\ttitle: \"Image Blur\",\n\t\t\t\t\tdefaultVal: \"4\",\n\t\t\t\t\tmin: \"0\",\n\t\t\t\t\ttippy: Spicetify.React.createElement(\n\t\t\t\t\t\tSpicetify.React.Fragment,\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\tSpicetify.React.createElement(\"h4\", null, \"Amount of banner blur in pixels:\"),\n\t\t\t\t\t\tSpicetify.React.createElement(\"li\", null, \"Comfy default: 4px\")\n\t\t\t\t\t),\n\t\t\t\t\tcallback: value => document.documentElement.style.setProperty(\"--image-blur\", value ? value + \"px\" : \"\")\n\t\t\t\t}\n\t\t\t]),\n\t\t\tSpicetify.React.createElement(Section, { name: \"Settings\", filter }, [\n\t\t\t\t{\n\t\t\t\t\ttype: Toggle,\n\t\t\t\t\tname: \"Version-Analytics\",\n\t\t\t\t\ttitle: \"Send Version Analytics\",\n\t\t\t\t\tdefaultVal: false,\n\t\t\t\t\tdesc: \"Help us improve by sharing your Spotify version anonymously\",\n\t\t\t\t\tcallback: async value => {\n\t\t\t\t\t\twaitForDeps(\"Spicetify.Platform.UserAPI\", async () => {\n\t\t\t\t\t\t\tconst endpoint = value ? \"collect\" : \"purge\";\n\t\t\t\t\t\t\tconst user = await Spicetify.Platform.UserAPI.getUser();\n\n\t\t\t\t\t\t\tfetch(`https://included-exotic-javelin.ngrok-free.app/${endpoint}`, {\n\t\t\t\t\t\t\t\tmethod: \"POST\",\n\t\t\t\t\t\t\t\theaders: {\n\t\t\t\t\t\t\t\t\t\"Content-Type\": \"application/json\",\n\t\t\t\t\t\t\t\t\t\"ngrok-skip-browser-warning\": \"true\"\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbody: JSON.stringify({\n\t\t\t\t\t\t\t\t\turi: await hashString(user.uri),\n\t\t\t\t\t\t\t\t\tspotify_version: value ? Spicetify.Platform.version : \"\"\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t.then(response => response.json())\n\t\t\t\t\t\t\t\t.then(data => console.log(data))\n\t\t\t\t\t\t\t\t.catch(error => console.warn(\"[Comfy-Warning]: Failed to send/purge analytics:\", error));\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: Row,\n\t\t\t\t\tname: \"setting-card setting-button-row\",\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Button,\n\t\t\t\t\t\t\tname: \"Import\",\n\t\t\t\t\t\t\ttitle: \"Import\",\n\t\t\t\t\t\t\tcallback: async (state, setState) => {\n\t\t\t\t\t\t\t\tconst paste = await Spicetify.Platform.ClipboardAPI.paste();\n\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\tJSON.parse(paste);\n\t\t\t\t\t\t\t\t\tsetState(\"Success!\");\n\n\t\t\t\t\t\t\t\t\tnew Promise(resolve => setTimeout(resolve, 500)).then(() => {\n\t\t\t\t\t\t\t\t\t\tlocalStorage.setItem(\"comfy:config\", paste);\n\t\t\t\t\t\t\t\t\t\tlocation.reload();\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\t\t\tsetState(\"Invalid!\");\n\t\t\t\t\t\t\t\t\tnew Promise(resolve => setTimeout(resolve, 2000)).then(() => {\n\t\t\t\t\t\t\t\t\t\tsetState(state);\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Button,\n\t\t\t\t\t\t\tname: \"Export\",\n\t\t\t\t\t\t\ttitle: \"Export\",\n\t\t\t\t\t\t\tcallback: (state, setState) => {\n\t\t\t\t\t\t\t\tSpicetify.Platform.ClipboardAPI.copy(localStorage.getItem(\"comfy:config\"));\n\t\t\t\t\t\t\t\tsetState(\"Copied!\");\n\n\t\t\t\t\t\t\t\tnew Promise(resolve => setTimeout(resolve, 2000)).then(() => {\n\t\t\t\t\t\t\t\t\tsetState(state);\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: Button,\n\t\t\t\t\t\t\tname: \"Reset\",\n\t\t\t\t\t\t\ttitle: \"Reset\",\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tconst settings = document.querySelector(\".GenericModal__overlay:has(.comfy-settings)\");\n\t\t\t\t\t\t\t\tSpicetify.ReactDOM.render(\n\t\t\t\t\t\t\t\t\tSpicetify.React.createElement(\n\t\t\t\t\t\t\t\t\t\tSpicetify.ReactComponent.RemoteConfigProvider,\n\t\t\t\t\t\t\t\t\t\t{ configuration: Spicetify.Platform.RemoteConfiguration },\n\t\t\t\t\t\t\t\t\t\tSpicetify.React.createElement(Dialog, {\n\t\t\t\t\t\t\t\t\t\t\ttitleText: \"Are you sure?\",\n\t\t\t\t\t\t\t\t\t\t\tdescriptionText: \"This will reset all settings to default!\",\n\t\t\t\t\t\t\t\t\t\t\tcancelText: \"Cancel\",\n\t\t\t\t\t\t\t\t\t\t\tconfirmText: \"Reset\",\n\t\t\t\t\t\t\t\t\t\t\tonOpen: () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsettings.style.zIndex = 0;\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\tonClose: () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsettings.style.zIndex = 100;\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\tonConfirm: () => {\n\t\t\t\t\t\t\t\t\t\t\t\tlocalStorage.removeItem(\"comfy:config\");\n\t\t\t\t\t\t\t\t\t\t\t\tlocation.reload();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tdocument.createElement(\"div\")\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t])\n\t\t);\n\t};\n\n\tconst headerButton = ({ label, link, svg, viewBox }) => {\n\t\treturn Spicetify.React.createElement(\n\t\t\tSpicetify.ReactComponent.TooltipWrapper,\n\t\t\t{\n\t\t\t\tlabel: label,\n\t\t\t\tshowDelay: 200\n\t\t\t},\n\t\t\tSpicetify.React.createElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName: \"main-trackCreditsModal-closeBtn\",\n\t\t\t\t\tonClick: () => window.open(link)\n\t\t\t\t},\n\t\t\t\tSpicetify.React.createElement(\"svg\", {\n\t\t\t\t\twidth: \"18\",\n\t\t\t\t\theight: \"18\",\n\t\t\t\t\tviewBox: viewBox,\n\t\t\t\t\tfill: \"currentColor\",\n\t\t\t\t\tdangerouslySetInnerHTML: {\n\t\t\t\t\t\t__html: svg\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t)\n\t\t);\n\t};\n\n\t// Settings Button + Modal\n\twaitForDeps(\"Spicetify.Topbar.Button\", () => {\n\t\tnew Spicetify.Topbar.Button(\n\t\t\t\"Comfy Settings\",\n\t\t\t``,\n\t\t\t() => {\n\t\t\t\t// reset startup preventions\n\t\t\t\tstartup = false;\n\t\t\t\tpreloadedScheme = false;\n\n\t\t\t\t// Trigger Modal + Modal Styling\n\t\t\t\tdocument.getElementById(\"main\").classList.add(\"Settings-Open\");\n\n\t\t\t\tSpicetify.PopupModal.display({\n\t\t\t\t\ttitle: \"Comfy Settings\",\n\t\t\t\t\tcontent: Spicetify.React.createElement(Content),\n\t\t\t\t\tisLarge: true\n\t\t\t\t});\n\n\t\t\t\tdocument.querySelector(\".main-trackCreditsModal-closeBtn[aria-label='Close']\").addEventListener(\"click\", function () {\n\t\t\t\t\tdocument.getElementById(\"main\").classList.remove(\"Settings-Open\");\n\t\t\t\t});\n\n\t\t\t\tdocument.querySelector(\"generic-modal\").addEventListener(\"click\", event => {\n\t\t\t\t\tif (event.target.className === \"GenericModal__overlay\") {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tdocument.getElementById(\"main\").classList.remove(\"Settings-Open\");\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Social Buttons\n\t\t\t\tconst header = document.querySelector(\".main-trackCreditsModal-header\");\n\t\t\t\tconst closeButton = document.querySelector(\".main-trackCreditsModal-closeBtn\");\n\t\t\t\tconst container = document.createElement(\"div\");\n\t\t\t\tconst socialButtons = [\n\t\t\t\t\tSpicetify.React.createElement(headerButton, {\n\t\t\t\t\t\tlabel: \"Join our Discord!\",\n\t\t\t\t\t\tlink: \"https://discord.gg/rtBQX5D3bD\",\n\t\t\t\t\t\tsvg: ``,\n\t\t\t\t\t\tviewBox: \"0 -28.5 256 256\"\n\t\t\t\t\t}),\n\t\t\t\t\tSpicetify.React.createElement(headerButton, {\n\t\t\t\t\t\tlabel: \"Visit our GitHub org!\",\n\t\t\t\t\t\tlink: \"https://github.com/Comfy-Themes\",\n\t\t\t\t\t\tsvg: ``,\n\t\t\t\t\t\tviewBox: \"0 0 16 16\"\n\t\t\t\t\t})\n\t\t\t\t];\n\n\t\t\t\tSpicetify.ReactDOM.render(socialButtons, container);\n\t\t\t\tcontainer.appendChild(closeButton);\n\t\t\t\theader.appendChild(container);\n\n\t\t\t\t// Scroll Position\n\t\t\t\tconst section = document.querySelector(\".main-trackCreditsModal-mainSection\");\n\t\t\t\tconst cache = sessionStorage.getItem(\"comfy-settings-scroll\");\n\t\t\t\tconst scrollVal = cache ? cache * (section.scrollHeight - section.clientHeight) : 0;\n\n\t\t\t\tsection.scrollTo(null, scrollVal);\n\t\t\t\tsection.addEventListener(\"scroll\", () => {\n\t\t\t\t\tconst scrollTop = section.scrollTop;\n\t\t\t\t\tconst scrollHeight = section.scrollHeight - section.clientHeight;\n\t\t\t\t\tconst scrollPercentage = scrollTop / scrollHeight;\n\t\t\t\t\tsessionStorage.setItem(\"comfy-settings-scroll\", scrollPercentage);\n\t\t\t\t});\n\t\t\t},\n\t\t\tfalse,\n\t\t\ttrue\n\t\t);\n\t});\n\n\t// Preloading settings\n\tconsole.debug(\"[Comfy-Event]: Settings Preload Started\");\n\tSpicetify.ReactDOM.render(Spicetify.React.createElement(Content), preloadContainer);\n\tSpicetify.ReactDOM.unmountComponentAtNode(preloadContainer);\n\n\t// Functions\n\tfunction getConfig(key) {\n\t\treturn config[key] ?? null;\n\t}\n\n\tfunction setConfig(key, value, message, silent) {\n\t\tif (value !== getConfig(key)) {\n\t\t\tif (!silent) console.debug(`[Comfy-Config]: ${message ?? key + \" =\"}`, value);\n\t\t\tconfig[key] = value;\n\t\t\tlocalStorage.setItem(\"comfy:config\", JSON.stringify(config));\n\t\t}\n\t}\n\n\tfunction isPromise(p) {\n\t\tif (typeof p === \"object\" && typeof p.then === \"function\") {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isValidUrl(urlString) {\n\t\ttry {\n\t\t\treturn Boolean(new URL(urlString));\n\t\t} catch (e) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tasync function waitForDeps(dependencies, callback, element = false, elementType = \"querySelector\", timeout = 5000) {\n\t\treturn new Promise(resolve => {\n\t\t\tlet allDependenciesLoaded = false;\n\t\t\tlet startTime = Date.now();\n\n\t\t\tasync function checkElements() {\n\t\t\t\tconst check = () =>\n\t\t\t\t\tArray.isArray(dependencies) ? dependencies.every(element => document[elementType](element)) : document[elementType](dependencies);\n\t\t\t\tif (check()) {\n\t\t\t\t\tcallback?.(Array.isArray(dependencies) ? dependencies.map(d => document[elementType](d)) : document[elementType](dependencies));\n\t\t\t\t\tresolve();\n\t\t\t\t} else {\n\t\t\t\t\tconst observer = new MutationObserver(() => {\n\t\t\t\t\t\tif (check()) {\n\t\t\t\t\t\t\tobserver.disconnect();\n\t\t\t\t\t\t\tcallback?.(Array.isArray(dependencies) ? dependencies.map(d => document[elementType](d)) : document[elementType](dependencies));\n\t\t\t\t\t\t\tresolve();\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tobserver.observe(document.documentElement, { childList: true, subtree: true });\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tasync function checkDependencies() {\n\t\t\t\tfor (const dependency of Array.isArray(dependencies) ? dependencies : [dependencies]) {\n\t\t\t\t\tif (!eval(dependency)) {\n\t\t\t\t\t\tif (Date.now() - startTime < timeout) {\n\t\t\t\t\t\t\tsetTimeout(checkDependencies, 10);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconsole.error(`[Comfy-Error]: Dependency Timeout -`, dependencies);\n\t\t\t\t\t\t\tresolve();\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (!allDependenciesLoaded) {\n\t\t\t\t\tallDependenciesLoaded = true;\n\n\t\t\t\t\tcallback?.(Array.isArray(dependencies) ? dependencies.map(d => eval(d)) : eval(dependencies));\n\n\t\t\t\t\tresolve();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement ? checkElements() : checkDependencies();\n\t\t});\n\t}\n\n\tasync function updateBanner() {\n\t\tawait waitForDeps([\"Spicetify.Player.data\", \"Spicetify.Platform.History.location\"]);\n\n\t\tconst pathname = Spicetify.Platform.History.location.pathname;\n\t\tlet source;\n\n\t\tif (getConfig(\"Apple-Music-Gradient-Snippet\") && getConfig(\"AM-Gradient-Include-Existing-Snippet\")) {\n\t\t\tconst [isPlaylist, isArtist] = [Spicetify.URI.isPlaylistV1OrV2(pathname), Spicetify.URI.isArtist(pathname)];\n\n\t\t\tif (isPlaylist || isArtist) {\n\t\t\t\tconst id = pathname.match(/\\/(?:playlist|artist)\\/([^/]+)/)[1];\n\t\t\t\tconst uri = `spotify:${isPlaylist ? \"playlist\" : \"artist\"}:${id}`;\n\t\t\t\tconst metadata = isPlaylist\n\t\t\t\t\t? await Spicetify.Platform.PlaylistAPI.getMetadata(uri)\n\t\t\t\t\t: await Spicetify.GraphQL.Request(\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tname: \"queryArtistOverview\",\n\t\t\t\t\t\t\t\toperation: \"query\",\n\t\t\t\t\t\t\t\tsha256Hash: \"35648a112beb1794e39ab931365f6ae4a8d45e65396d641eeda94e4003d41497\",\n\t\t\t\t\t\t\t\tvalue: null\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\turi: uri,\n\t\t\t\t\t\t\t\tincludePrerelease: true,\n\t\t\t\t\t\t\t\tlocale: null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t );\n\t\t\t\tsource = isPlaylist ? metadata.images[3]?.url : metadata.data.artistUnion.visuals.headerImage?.sources?.[0]?.url;\n\t\t\t}\n\t\t}\n\n\t\tif (!source && getConfig(\"Custom-Image\")) {\n\t\t\tsource = getConfig(\"Custom-Image-URL\")?.replace(/\"/g, \"\");\n\t\t}\n\n\t\tif (!source && getConfig(\"Prefer-Existing-Image\")) {\n\t\t\tif (Spicetify.URI.isPlaylistV1OrV2(pathname)) {\n\t\t\t\tconst uri = `spotify:playlist:${pathname.split(\"/\").pop()}`;\n\t\t\t\tconst playlist = await Spicetify.Platform.PlaylistAPI.getMetadata(uri);\n\t\t\t\tsource = playlist.images[0]?.url;\n\t\t\t} else if (Spicetify.URI.isAlbum(pathname)) {\n\t\t\t\tawait waitForDeps(\"Spicetify.CosmosAsync\");\n\t\t\t\tconst album = await Spicetify.CosmosAsync.get(`https://api.spotify.com/v1/albums/${pathname.split(\"/\").pop()}`);\n\t\t\t\tsource = album.images[0]?.url;\n\t\t\t}\n\t\t}\n\n\t\tsource = source ?? Spicetify.Player.data.item?.metadata?.image_xlarge_url ?? Spicetify.Player.data.track.metadata.image_xlarge_url;\n\n\t\tconst validChannel = Object.values(channels).some(channel => channel.enabled && channel.regex.test(pathname));\n\t\tframe.style.display = validChannel ? \"\" : \"none\";\n\t\tif (getConfig(\"Banner-Enabled\")) {\n\t\t\tif (!validChannel) {\n\t\t\t\tdocument.getElementById(\"main\").classList.remove(\"Banner-Enabled\");\n\t\t\t} else {\n\t\t\t\tdocument.getElementById(\"main\").classList.add(\"Banner-Enabled\");\n\t\t\t}\n\t\t}\n\n\t\tif (document.documentElement.style.getPropertyValue(\"--image-url\") !== `url(${source})`) {\n\t\t\tconsole.debug(`[Comfy-Event]: Banner Source = ${source}`);\n\n\t\t\tconst preloadImage = new Image();\n\t\t\tpreloadImage.onload = function () {\n\t\t\t\tdocument.documentElement.style.setProperty(\"--image-url\", `url(${source})`);\n\t\t\t};\n\t\t\tpreloadImage.src = source;\n\t\t}\n\n\t\tbanner.forEach(image => {\n\t\t\timage.style.display = source ? \"\" : \"none\";\n\t\t});\n\t}\n\n\tfunction updateScheme(scheme, message) {\n\t\tconst marketplace = document.querySelector(\"body > style.marketplaceCSS.marketplaceScheme\");\n\t\tconst colorSchemes = getConfig(\"Color-Schemes\");\n\t\tconst existingScheme = document.querySelector(\"style.comfyScheme\");\n\n\t\texistingScheme?.remove();\n\t\tif (colorSchemes[scheme] && !marketplace && scheme !== configScheme) {\n\t\t\tconsole.debug(`[Comfy-Event]: Scheme ${message ? message : \"applied\"} - ${scheme}`);\n\t\t\tscheme = colorSchemes[scheme];\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\n\t\tconst schemeTag = document.createElement(\"style\");\n\t\tschemeTag.classList.add(\"comfyScheme\");\n\t\tlet injectStr = \":root {\";\n\t\tconst themeIniKeys = Object.keys(scheme);\n\t\tthemeIniKeys.forEach(key => {\n\t\t\tinjectStr += `--spice-${key}: #${scheme[key]};`;\n\t\t\tinjectStr += `--spice-rgb-${key}: ${hexToRGB(scheme[key])};`;\n\t\t});\n\t\tinjectStr += \"}\";\n\t\tschemeTag.innerHTML = injectStr;\n\t\tdocument.body.appendChild(schemeTag);\n\t}\n\n\tfunction parseIni(data) {\n\t\tconst regex = {\n\t\t\tsection: /^\\s*\\[\\s*([^\\]]*)\\s*\\]\\s*$/,\n\t\t\tparam: /^\\s*([^=]+?)\\s*=\\s*(.*?)\\s*$/,\n\t\t\tcomment: /^\\s*;.*$/\n\t\t};\n\t\tconst value = {};\n\t\tlet section = null;\n\n\t\tconst lines = data.split(/[\\r\\n]+/);\n\n\t\tlines.forEach(function (line) {\n\t\t\tif (regex.comment.test(line)) {\n\t\t\t\treturn;\n\t\t\t} else if (regex.param.test(line)) {\n\t\t\t\tif (line.includes(\"xrdb\")) {\n\t\t\t\t\tdelete value[section || \"\"];\n\t\t\t\t\tsection = null;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst match = line.match(regex.param);\n\n\t\t\t\tif (match && match.length === 3) {\n\t\t\t\t\tif (section) {\n\t\t\t\t\t\tif (!value[section]) {\n\t\t\t\t\t\t\tvalue[section] = {};\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue[section][match[1]] = match[2].split(\";\")[0].trim();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (regex.section.test(line)) {\n\t\t\t\tconst match = line.match(regex.section);\n\t\t\t\tif (match) {\n\t\t\t\t\tvalue[match[1]] = {};\n\t\t\t\t\tsection = match[1];\n\t\t\t\t}\n\t\t\t} else if (line.length === 0 && section) {\n\t\t\t\tsection = null;\n\t\t\t}\n\t\t});\n\n\t\treturn value;\n\t}\n\n\tfunction hexToRGB(hex) {\n\t\tif (hex.length === 3) {\n\t\t\thex = hex\n\t\t\t\t.split(\"\")\n\t\t\t\t.map(char => char + char)\n\t\t\t\t.join(\"\");\n\t\t} else if (hex.length != 6) {\n\t\t\tthrow \"Only 3- or 6-digit hex colours are allowed\";\n\t\t} else if (hex.match(/[^0-9a-f]/i)) {\n\t\t\tthrow \"Only hex colours are allowed\";\n\t\t}\n\n\t\tconst aRgbHex = hex.match(/.{1,2}/g);\n\t\tif (!aRgbHex || aRgbHex.length !== 3) {\n\t\t\tthrow \"Could not parse hex colour\";\n\t\t}\n\n\t\tconst aRgb = [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)];\n\n\t\treturn aRgb;\n\t}\n\n\tasync function hashString(str) {\n\t\tconst encoder = new TextEncoder();\n\t\tconst data = encoder.encode(str);\n\t\tconst buffer = await crypto.subtle.digest(\"SHA-256\", data);\n\t\treturn Array.from(new Uint8Array(buffer))\n\t\t\t.map(b => b.toString(16).padStart(2, \"0\"))\n\t\t\t.join(\"\");\n\t}\n})();\n" }, { "path": "Comfy/user.css", "content": "@import url(\"https://comfy-themes.github.io/Spicetify/Comfy/app.css\");\n" }, { "path": "LICENCE", "content": " DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n Version 2, December 2004\n\nCopyright (C) 2004 Sam Hocevar \n\nEveryone is permitted to copy and distribute verbatim or modified\ncopies of this license document, and changing it is allowed as long\nas the name is changed.\n\n DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n\nTERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n\n0. You just DO WHAT THE FUCK YOU WANT TO.\n" }, { "path": "README.md", "content": "\n \n \n \n
\n \"Preview\"\n
\n \"Logo\"\n

Comfy Spicetify

\n

Stay comfy while listening to music

\n Report an issue ・ Join the support server ・\n Preview images\n
\n
\n

✅ Recommended

\n
  • 🔥 Spicetify: 2.38.5
    • \n
  • 🟢 Spotify: 1.2.51
    • \n
    \n
    \n\n### 📥 Automatic Installation\n\n---\n\nWindows -> **PowerShell**:\n\n```powershell\niwr -useb https://raw.githubusercontent.com/NYRI4/Comfy-spicetify/main/install.ps1 | iex\n```\n\nmacOS and Linux -> **Bash**:\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/NYRI4/Comfy-spicetify/main/install.sh | sh\n```\n\n### 📥 Manual Installation\n\n---\n\n### Downloading Comfy.\n\nCD into your `Themes` folder in `.spicetify` and run :\n\n```sh\ngit clone https://github.com/Comfy-Themes/Spicetify\n```\n\nRename the folder to `Comfy` and run these commands to apply :\n\n```powershell\nspicetify config current_theme Comfy\nspicetify config color_scheme