Showing preview only (239K chars total). Download the full file or copy to clipboard to get everything.
Repository: NYRI4/Comfy-spicetify
Branch: main
Commit: 32ff101e27cf
Files: 28
Total size: 229.1 KB
Directory structure:
gitextract_zuo02ba5/
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows/
│ └── build.yml
├── .gitignore
├── .prettierrc
├── Comfy/
│ ├── README.md
│ ├── app.css
│ ├── app.scss
│ ├── assets/
│ │ ├── _main.scss
│ │ ├── _navbar.scss
│ │ ├── _now_playing.scss
│ │ ├── _settings.scss
│ │ ├── _snippets.scss
│ │ ├── _top_bar.scss
│ │ └── _tracklist.scss
│ ├── color.ini
│ ├── package.json
│ ├── theme.js
│ ├── theme.script.js
│ └── user.css
├── LICENCE
├── README.md
├── install.ps1
├── install.sh
├── manifest.json
├── uninstall.ps1
└── uninstall.sh
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
ko_fi: OhItsTom
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Please provide as much information as possible!
title: ''
labels: bug
assignees: ohitstom
---
**Environment**
- Spotify Version: `placeholder`
- Spicetify Version: `placeholder`
- Platform (WIN, MAC, LINUX): `placeholder`
**Addons**
*`[name1, name2]` or `[]` if none*
- Extensions: `placeholder`
- Custom Apps: `placeholder`
- Snippets: `placeholder`
**Spicetify Config**
*Screenshot / File Upload*
- spicetify config-dir in terminal
- config-xpui.ini
**Theme Information**
- Export Of Comfy Settings: `placeholder`
- Installed via Marketplace Or CLI: `placeholder`
**Describe the bug**
A clear and concise description of what the bug is.
**Screenshots**
If applicable, add screenshots to help explain your problem.
Please also provide devtools errors/debug messages if possible:
- Spicetify enable-devtools
- open devtools (ctrl+shift+i on windows)
- enable verbose -> https://imgur.com/a/0NIAiuP
- press ctrl + r to reload
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/workflows/build.yml
================================================
on:
push:
branches: [main, beta]
name: Build
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: "lts/*"
- name: Compile Sass
run: npx sass Comfy/app.scss:Comfy/app.css --no-source-map --style=compressed
- name: Push Changes
uses: stefanzweifel/git-auto-commit-action@v4
if: ${{ github.repository == 'Comfy-Themes/Spicetify' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') }}
with:
commit_message: "chore: compile sass"
commit_author: "github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>"
branch: ${{ github.ref }}
================================================
FILE: .gitignore
================================================
CHECKUP.txt
/.vscode/
.prettierignore
Comfy/node_modules
Comfy/package-lock.json
Comfy/app.css.map
================================================
FILE: .prettierrc
================================================
{
"printWidth": 150,
"tabWidth": 2,
"useTabs": true,
"trailingComma": "none",
"arrowParens": "avoid"
}
================================================
FILE: Comfy/README.md
================================================
### 🎨 Color Schemes
#### Collection
<details><summary>Catppuccin</summary>
<details><summary>🌻 Latte</summary>
</details>
<details><summary>🍨 Frappé</summary>
</details>
<details><summary>🌺 Macchiato</summary>
</details>
<details><summary>🌿 Mocha</summary>
</details></details>
<details><summary>Rosé Pine</summary>
<details><summary>Original</summary>
</details>
<details><summary>Moon</summary>
</details>
<details><summary>Dawn</summary>
</details></details>
<details><summary>Mono</summary>
<details><summary>Original</summary>
</details>
<details><summary>Forest</summary>
</details>
<details><summary>Neon</summary>
</details>
<details><summary>Sakura</summary>
</details>
<details><summary>Sunset</summary>
</details>
<details><summary>Vaporwave</summary>
</details></details>
#### Individual
<details><summary>Comfy</summary>
</details>
<details><summary>Spotify</summary>
</details>
<details><summary>Nord</summary>
</details>
<details><summary>Everforest</summary>
</details>
<details><summary>Kanagawa</summary>
</details>
<details><summary>Houjicha</summary>
</details>
<details><summary>Kitty</summary>
</details>
<details><summary>Lunar</summary>
</details>
<details><summary>Deep</summary>
</details>
<details><summary>Velvet</summary>
</details>
<details><summary>Yami</summary>
</details>
<details><summary>Hikari</summary>
</details>
### 📑 Pages
<details><summary>Album</summary>
</details>
<details><summary>Artist</summary>
</details>
<details><summary>Browse</summary>
</details>
<details><summary>Discography</summary>
</details>
<details><summary>Home</summary>
</details>
<details><summary>Lyrics Plus</summary>
</details>
<details><summary>Marketplace</summary>
</details>
<details><summary>New Releases</summary>
</details>
<details><summary>Playlist</summary>
</details>
<details><summary>Podcasts</summary>
</details>
<details><summary>Profile</summary>
</details>
<details><summary>Radio</summary>
</details>
<details><summary>Search</summary>
</details>
<details><summary>Search Results</summary>
</details>
### 📳 Panels
<details><summary>Friends</summary>
</details>
<details><summary>Library</summary>
</details>
<details><summary>Library Expanded</summary>
</details>
<details><summary>Library Closed</summary>
</details>
<details><summary>Library Compact</summary>
</details>
<details><summary>Now Playing View</summary>
</details>
<details><summary>Queue</summary>
</details>
### ⚙️ Settings
<details><summary>Apple Music Gradient</summary>
</details>
<details><summary>Application Title</summary>
</details>
<details><summary>Blur</summary>
</details>
<details><summary>Button Radius</summary>
</details>
<details><summary>Custom Image</summary>
</details>
<details><summary>Flatten Colors</summary>
</details>
<details><summary>Horizontal Page Links</summary>
</details>
<details><summary>Oblong Cover Art</summary>
</details>
<details><summary>Topbar in Titlebar</summary>
</details>
================================================
FILE: Comfy/app.css
================================================
: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}
================================================
FILE: Comfy/app.scss
================================================
@forward "assets/main";
@forward "assets/navbar";
@forward "assets/now_playing";
@forward "assets/settings";
@forward "assets/top_bar";
@forward "assets/snippets";
@forward "assets/tracklist";
:root {
// Variables
--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;
// Custom Radii
button,
button span,
input,
select,
img,
.x-entityImage-xsmall,
div[style*="background-image"]:has(img),
.profile-userEditDetails-image div:nth-child(2),
[data-encore-id="buttonSecondary"] {
border-radius: var(--border-radius) !important;
}
button:not(.main-editImageButton-overlay):not([style*="background-image"]):not(.main-buddyFeed-overlay),
button span:not(.Lyric.Synced.Line):not([data-encore-id="text"]),
button figure img,
button:has(span:empty),
input:not([style*="background-image"]),
select,
[data-encore-id="buttonSecondary"] {
border-radius: var(--button-radius) !important;
}
.Card .main-card-imageContainer * {
border-radius: var(--border-radius) !important;
}
// Remove Overflow
.Root__top-container {
overflow: hidden;
}
// Custom Topbar Height + Bg Colour Matching
&:not(:has(.global-nav)) .Root__top-container {
padding-top: max(calc(var(--comfy-topbar-height, 40px) / var(--zoom, 1)), 8px) !important;
}
.global-nav .Root__top-container {
grid-template-rows: max(48px, calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1) - 16px)) minmax(0, 1fr) auto;
}
&.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;
}
&:has(.global-nav-centered) body::after {
height: min(calc(32px / var(--zoom, 1)), calc(var(--comfy-topbar-height, 64px) / var(--zoom, 1))) !important;
top: calc((var(--comfy-topbar-height, 64px) / var(--zoom, 1) - min(calc(32px / var(--zoom, 1)), var(--comfy-topbar-height, 64px))) / 2);
}
}
&.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav {
padding-block: calc(var(--comfy-topbar-height, 64px) / 2 - 8px);
}
&.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));
}
// Filtering
.main-trackList-playingIcon,
.view-homeShortcutsGrid-playingIcon,
[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;
}
.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;
}
// Base Sets
.encore-dark-theme,
.encore-dark-theme .encore-base-set {
--background-elevated-base: var(--spice-main-elevated);
--background-highlight: var(--spice-highlight);
}
.encore-bright-accent-set {
--background-base: var(--spice-play-button);
--background-highlight: var(--spice-play-button-active);
--background-press: var(--spice-play-button-active);
}
.encore-inverted-light-set {
--background-highlight: var(--spice-text);
--background-press: var(--spice-subtext);
}
// Premium Fullscreen Overlay
.npv-background-image__overlay {
background: linear-gradient(rgba(var(--spice-rgb-shadow), 0.5) 0, transparent 100%), var(--background-noise);
background-color: unset;
}
// Scrollbars
.Root__main-view .main-view-container__scroll-node-child {
padding-bottom: 0;
}
aside#Desktop_PanelContainer_Id .os-scrollbar-vertical,
.os-scrollbar-horizontal {
display: none !important;
}
.os-scrollbar-track,
::-webkit-scrollbar {
width: 8px;
}
.os-scrollbar-handle,
::-webkit-scrollbar-thumb {
border-radius: 1em;
--os-handle-perpendicular-size-active: 8px;
--os-handle-perpendicular-size-hover: 8px;
--os-handle-perpendicular-size: 8px;
}
.os-scrollbar {
--os-padding-perpendicular: 4px;
}
::-webkit-scrollbar-track {
margin-bottom: 10px;
}
// Coloured heart
.Button-textBrightAccent-lg-32-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle,
.main-addButton-active {
color: var(--spice-heart);
&:hover {
color: rgba(var(--spice-rgb-heart), 0.7);
}
}
#_R_G *:not([stroke="none"]) {
stroke: var(--spice-heart);
}
.main-trackList-rowHeartButton,
.control-button-heart,
#_R_G {
& *:not([fill="none"]) {
fill: var(--spice-heart) !important;
}
}
// Menus
.main-contextMenu-tippy.main-contextMenu-tippyEnterActive {
box-shadow: none !important;
}
#context-menu {
overflow: hidden;
.main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before {
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), .1);
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
.main-popper-arrow,
.main-popper-arrow::before {
background-color: var(--spice-player) !important;
}
ul:not([aria-labelledby~="device-picker-header"]) {
background-color: var(--spice-player);
button,
a {
border-radius: 2px !important;
&:not(.main-contextMenu-disabled):focus,
&:not(.main-contextMenu-disabled):hover,
&[aria-expanded="true"] {
background-color: rgba(var(--spice-rgb-pagelink-active), 0.15);
transition: 150ms background-color;
}
}
}
}
#bookmark-menu {
background-color: var(--spice-player);
border-radius: var(--border-radius);
.bookmark-filter {
background-color: var(--spice-player);
}
button,
a {
border-radius: 0;
&::before,
&::after {
content: none;
}
&:not(.main-contextMenu-disabled):focus,
&:not(.main-contextMenu-disabled):hover,
&[aria-expanded="true"] {
background-color: rgba(var(--spice-rgb-pagelink-active), 0.15);
transition: 150ms background-color;
}
}
}
}
================================================
FILE: Comfy/assets/_main.scss
================================================
// Global Nav Support
: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;
.comfy-banner-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top;
background-image: var(--image-url);
filter: blur(var(--image-blur));
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
mask-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
transition: background 0.5s ease;
}
.comfy-banner-image:last-of-type {
display: none;
}
}
.main-entityHeader-backgroundColor {
background: none !important;
}
// gradient noise gets stretched vertically with this approach - but no black lines
&.Custom-Playbar-Snippet:not(.Comfy-nord-Snippet, .Comfy-nord-flat-Snippet, .Playbar-Above-Right-Panel-Snippet) {
.artist-artistOverview-artistOverviewContent,
.main-actionBarBackground-background {
min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px - 12px) !important;
}
}
.artist-artistOverview-artistOverviewContent,
.main-actionBarBackground-background {
background-image: linear-gradient(rgba(var(--spice-rgb-main-transition), var(--tracklist-gradient-opacity)) 0,
var(--spice-main) var(--tracklist-gradient-height)),
var(--tracklist-gradient-noise) !important;
background-color: transparent !important;
height: calc(100% - 250px);
min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px);
background-size: auto 100%, 300px var(--tracklist-gradient-height);
background-repeat: repeat-x;
}
.artist-artistOverview-artistOverviewContent {
position: relative !important;
.main-actionBarBackground-background {
background-image: none !important;
background-color: unset !important;
}
}
.playlist-playlist-playlistContent,
.dTKw7B8X1ybw7SHebMH3,
.xcTrtCsYOPtSElbX9inq,
.EmeHQXR87mUskYK6xEde,
.N_8iI7NKHP0iG2jp3g0R {
background: none; // Remove background
}
.main-entityHeader-background {
height: calc(40vh + var(--tracklist-gradient-height));
max-height: 100%;
&.main-entityHeader-overlay {
--bgColor: unset !important;
}
}
}
:root .Root__main-view {
// Banner
.comfy-banner-frame {
display: none;
}
.main-entityHeader-withBackgroundImage {
height: 40vh !important;
}
// Ad containers
.main-leaderboardComponent-container,
.sponsor-container {
display: none !important;
}
.main-view-container {
// Main Page Tweaks
main:not(:has(.lyrics-lyricsContainer-LyricsContainer)):not(:has(> .visualizer-container)) {
position: sticky;
padding-bottom: 32px;
.os-host-overflow,
.os-padding,
.os-viewport,
div[data-overlayscrollbars~="host"],
[data-overlayscrollbars-viewport~="scrollbarHidden"] {
overflow: visible !important; // Override overflow property
}
}
// Radio Button Coloring
input:checked~.x-toggle-indicatorWrapper {
background-color: var(--spice-radio-btn-active);
}
// Cards
&:not(:has(#stats-app)) .main-card-card {
background: var(--spice-sidebar);
border-radius: var(--border-radius);
padding: 0;
overflow: hidden;
&:hover {
background: var(--spice-card);
}
.main-card-PlayButtonContainer {
right: 12px !important;
}
.main-card-imageContainer {
margin-bottom: -4px;
.main-cardImage-circular,
img {
border-radius: 0 !important; // Remove border-radius
}
.main-cardImage-imageWrapper {
box-shadow: none !important;
}
}
.main-card-cardMetadata {
padding: 16px;
}
}
// Headers
.rX_OmqCngvY5ZCoYBZgb.zyeJ9w99yrvGokL3BsMc,
.hIFR8WDm_54EEIa1gwpC.fIvMht6B9HdROywMNJZ4,
.main-home-filterChipsContainer>div:first-child {
&:after {
background-color: var(--spice-main);
}
}
.main-home-homeHeader {
display: none;
}
.main-entityHeader-container {
padding: 32px;
justify-content: center;
&>div:nth-last-of-type(2),
&>div.contentSpacing,
.main-entityHeader-imageContainer {
align-self: center;
justify-content: center;
&+.main-entityHeader-headerText {
flex: unset;
justify-content: center;
.main-entityHeader-title h1 {
font-size: 3rem !important;
}
}
}
}
// Action bar
.main-actionBar-ActionBar {
padding: 8px 16px 16px 16px; // Adjust padding
.main-actionBar-ActionBarRow {
&:first-of-type {
>*:first-child {
margin-top: -24px;
}
}
>*:first-child {
margin-left: calc(var(--content-spacing) + 3px);
}
>:first-child:not(:only-child) {
margin-right: calc(var(--content-spacing) + 4px);
}
[class*="Button"] {
min-block-size: 32px;
padding-block: 0;
}
}
}
// Artist Page
.artist-artistOverview-artistOverviewContent .contentSpacing>.main-gridContainer-gridContainer {
padding-bottom: var(--grid-gap);
}
// Home Page
.view-homeShortcutsGrid-shortcut {
border-radius: var(--border-radius);
.view-homeShortcutsGrid-imageWrapper {
border-radius: calc(var(--border-radius) + 15px);
}
.main-playButton-PlayButton {
background: none !important;
}
}
// Lyrics plus
.lyrics-lyricsContainer-Provider {
font-size: 0;
}
.lyrics-lyricsContainer-LyricsContainer {
&::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
.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));
}
}
// Shows
section[data-testid="your-episodes-page"] {
.main-actionBarBackground-background {
height: calc(100vh - 494px) !important;
}
}
section[data-testid="episode"] {
.main-actionBar-ActionBar {
flex-direction: column-reverse;
.main-actionBar-ActionBarRow {
margin-top: 0 !important;
&:nth-child(1) {
padding-top: 2rem;
}
}
}
}
}
}
================================================
FILE: Comfy/assets/_navbar.scss
================================================
:root .Root__nav-bar {
.main-rootlist-wrapper {
div:nth-child(2) {
>li {
.main-yourLibraryX-listRowEntityImage {
border-radius: var(--border-radius) !important;
}
>div {
&:active::after {
background-color: var(--spice-highlight-elevated);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}
}
[role="presentation"]>li>div>div>div>div>div>.x-entityImage-imageContainer {
box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), .0) !important;
}
}
// Library header shadow
.main-yourLibraryX-isScrolled {
box-shadow: none !important;
}
// Scrollbar
.os-scrollbar {
display: none;
}
// Forcing line-breaking on long text
#Desktop_LeftSidebar_Id {
.main-yourLibraryX-entryPoints {
span.LineClamp {
-webkit-line-clamp: 1 !important;
line-clamp: 1 !important;
}
}
}
}
================================================
FILE: Comfy/assets/_now_playing.scss
================================================
:root .Root__top-container {
// Cover-art
.main-nowPlayingWidget-nowPlaying {
height: 0;
z-index: 1;
left: var(--cover-art-left);
.main-coverSlotCollapsed-container {
bottom: var(--cover-art-bottom);
border-radius: var(--cover-art-radius);
>div button {
border-radius: var(--cover-art-radius) !important;
background: none;
}
.cover-art,
.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;
&::before {
z-index: auto !important;
}
&:has(.main-connectBar-connectBar)::before {
height: calc(100% - 40px);
top: 40px;
}
.main-nowPlayingBar-nowPlayingBar {
margin-bottom: 12px;
// Center
.main-nowPlayingBar-center {
// Player Controls
.player-controls__buttons--new-icons {
margin-bottom: 0px !important;
}
// Playback Area
.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;
.saber-hilt {
height: 0;
}
// Timers
&>div:not(.playback-progressbar-container) {
text-align: center;
&:first-of-type {
grid-area: time-left;
}
&:last-of-type {
grid-area: time-right;
}
}
// Progess Bar
.playback-progressbar-container {
display: contents;
}
.playback-progressbar {
grid-column: 1/3;
grid-area: bar;
height: 11px;
.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;
.x-progressBar-fillColor {
width: 107%;
background-color: transparent;
background-image: linear-gradient(90deg, var(--spice-progress-fg) 93%, transparent 100%);
}
.progress-bar__slider {
display: none;
}
}
}
}
}
// Right
.main-nowPlayingBar-right {
// Volume Bar
.main-nowPlayingBar-volumeBar .progress-bar {
--bg-color: rgba(var(--spice-rgb-progress-bg), 0.5);
}
// Miscolored right side button svgs
.main-nowPlayingBar-extraControls {
button:not(.main-genericButton-buttonActive) {
color: rgba(var(--spice-rgb-selected-row), 0.7);
&:hover {
color: var(--spice-text) !important;
}
}
.main-devicePicker-indicator {
display: none;
}
}
}
}
}
}
}
================================================
FILE: Comfy/assets/_settings.scss
================================================
// Spotify settings
.x-settings-container {
max-width: unset;
}
.x-toggle-indicatorWrapper {
border-radius: var(--button-radius);
}
// Comfy settings
#main.Settings-Open~generic-modal .GenericModal__overlay {
// Failsafe incase spotify's variables are not present
--background-tinted-base: rgba(var(--spice-rgb-selected-row), 0.07);
--background-tinted-highlight: rgba(var(--spice-rgb-selected-row), 0.1);
// Header Section Styling
.main-trackCreditsModal-header {
padding: 12px 12px 12px 16px;
.main-type-alto {
font-size: 25px;
}
.main-trackCreditsModal-closeBtn {
background-color: var(--background-tinted-base);
height: 34px;
cursor: pointer;
&:hover {
transform: scale(1.04) !important;
color: var(--spice-text);
}
&:focus {
transform: scale(1);
}
&:active {
transform: scale(0.98) !important;
color: var(--spice-text);
}
&:first-of-type {
margin-left: auto;
}
&:not(:last-of-type) {
margin-right: 8px;
}
&:last-of-type {
svg {
scale: 0.8;
}
}
}
}
// Scrollbars And Modal Sizing
.main-embedWidgetGenerator-container {
max-height: 75vh !important;
width: 550px !important;
}
.main-trackCreditsModal-mainSection {
padding: 0px 16px 0;
scrollbar-width: thin;
min-height: calc(100% - 60px);
&::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;
}
}
.GenericModal ::-webkit-scrollbar,
.main-trackCreditsModal-mainSection ::-webkit-scrollbar,
.main-trackCreditsModal-originalCredits ::-webkit-scrollbar {
width: 8px !important;
}
.GenericModal ::-webkit-scrollbar-thumb,
.main-trackCreditsModal-mainSection ::-webkit-scrollbar-thumb,
.main-trackCreditsModal-originalCredits ::-webkit-scrollbar-thumb {
border-radius: 1em !important;
}
.GenericModal {
border-radius: 10px;
}
}
// Main Section Styling
.comfy-settings {
// Carousel Styling
.search-searchCategory-SearchCategory {
background: var(--spice-player);
grid-column: 1 / -1;
height: 48px;
padding-top: 7px;
position: sticky;
top: 0px;
z-index: 1;
& {
height: unset;
padding-bottom: 12px;
padding-top: 12px;
top: 0;
}
.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;
.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);
}
&.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);
}
&.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);
}
.search-searchCategory-categoryGrid {
overflow-y: hidden;
&Item {
cursor: pointer;
padding: 2px;
button::after {
border: none !important;
}
&:active,
&:focus,
&:hover {
text-decoration: none;
}
&:focus-visible {
outline: none;
text-decoration: none;
&>* {
outline: 5px auto #3673d4;
}
}
&>* {
margin-inline-end: 8px;
margin-block-end: 0 !important;
}
}
}
}
}
.search-searchCategory-showRightButton .search-searchCategory-carouselButtonRight,
.search-searchCategory-showRightButton:hover .search-searchCategory-carouselButtonRight,
.search-searchCategory-showLeftButton .search-searchCategory-carouselButtonLeft,
.search-searchCategory-showLeftButton:hover .search-searchCategory-carouselButtonLeft {
cursor: pointer;
opacity: 1;
pointer-events: auto;
}
}
// Contents Styling
.setting-header {
text-align: center;
padding: 5px 0;
}
.setting-card {
background-color: var(--background-tinted-base);
border-radius: 10px;
margin: 8px 0;
.setting-container {
padding: 12px 16px;
display: flex;
flex-direction: column;
.setting-item {
display: flex;
flex-direction: row;
justify-content: space-between;
.setting-title {
padding-right: 15px;
font-weight: 600;
}
.x-settings-tooltip {
cursor: help !important;
.x-settings-tooltipIconWrapper {
padding: 0px 8px 0px 8px !important;
svg {
fill: var(--spice-subtext);
transition: fill 0.2s;
}
&:focus-within,
&:hover {
svg {
fill: var(--spice-text) !important;
}
}
}
}
}
.setting-action,
.setting-title {
display: flex;
align-items: center;
padding: 8px 0;
}
}
.setting-description {
font-size: 0.9rem;
color: var(--spice-subtext);
}
.setting-description-spacer {
height: 0.9rem;
}
.setting-action {
text-align: right;
.x-toggle-wrapper {
cursor: pointer;
.x-toggle-input {
width: 100%;
}
.x-toggle-indicatorWrapper {
transition: background-color 0.2s;
--spice-button-disabled: var(--background-tinted-base);
}
input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
background-color: var(--background-tinted-highlight);
}
input:checked:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
background-color: var(--spice-button-active);
}
}
button.switch {
border: 0px;
background-color: var(--background-tinted-base);
cursor: pointer;
display: flex;
padding: 8px;
margin-inline-end: 12px;
&:hover {
transform: scale(1.04);
color: var(--spice-text);
}
&:active {
transform: scale(0.98);
color: var(--spice-text);
}
}
input {
padding-inline: 10px;
text-align: center;
background-color: var(--background-tinted-base);
color: var(--spice-text);
border: none;
height: 32px;
width: 120px;
&::placeholder {
color: rgba(var(--spice-rgb-text), 0.3);
}
&[type="number"] {
width: 50px;
transition: width 0.2s;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
display: none;
}
&:hover {
width: 60px;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
display: block;
}
}
}
&[type="color"] {
width: 32px;
padding: 3px;
transition: all 0.2s ease;
cursor: pointer;
margin-left: 8px;
&:hover,
&:focus,
&:active {
scale: 1.04;
background-color: var(--background-tinted-highlight);
}
&::-webkit-color-swatch-wrapper {
padding: 0;
margin: 0;
}
&::-webkit-color-swatch {
border: none;
border-radius: var(--button-radius);
}
}
}
.dropdown-wrapper {
position: relative;
&.menu-open {
.dropdown-button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown-arrow {
border-color: transparent transparent rgba(var(--spice-rgb-text), 0.7);
border-width: 0 5px 5px;
}
.dropdown-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.dropdown-button {
position: relative;
background-color: var(--background-tinted-base);
border: 0;
border-radius: var(--button-radius);
box-sizing: border-box;
color: rgba(var(--spice-rgb-text), 0.7);
cursor: default;
outline: 0;
padding: 0 36px 0 16px;
transition: all 0.2s ease;
height: 32px;
cursor: pointer !important;
&:hover {
color: var(--spice-rgb-text);
background-color: var(--background-tinted-highlight);
}
.dropdown-selection {
display: flex;
align-items: center;
height: 32px;
}
}
.dropdown-arrow {
border-color: rgba(var(--spice-rgb-text), 0.7) transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
content: " ";
display: block;
height: 0;
margin-top: -ceil(2.5);
position: absolute;
right: 16px;
top: 14px;
width: 0;
}
.dropdown-menu {
scrollbar-width: thin;
background-color: var(--spice-card);
opacity: 1;
border: 0;
border-radius: 8px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
box-sizing: border-box;
margin-top: -1px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: 100%;
width: 100%;
z-index: 1000;
-webkit-overflow-scrolling: touch;
}
.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;
&.selected {
background-color: rgba(var(--spice-rgb-text), 0.7);
color: var(--spice-sidebar);
}
&:hover {
background-color: rgb(var(--spice-rgb-text));
color: var(--spice-sidebar);
}
}
}
}
}
// Subsection Specific Styling
.setting-subSection {
&#enabled {
.setting-card {
border-radius: 0;
margin: 0;
&:first-child {
border-radius: 10px 10px 0px 0px;
background-color: var(--spice-sidebar);
margin-top: 8px;
transition: 0.2s;
&:hover {
background-color: var(--spice-button-disabled);
transition: background-color 0.2s;
cursor: pointer;
}
.setting-title {
cursor: pointer !important;
}
}
&:last-child {
border-radius: 0 0 10px 10px;
margin-bottom: 8px;
}
}
}
&#collapsed {
.setting-card {
background-color: var(--spice-sidebar);
transition: background-color 0.2s;
cursor: pointer;
&:hover {
background-color: var(--spice-button-disabled);
}
.setting-title {
cursor: pointer !important;
}
}
}
}
// Button and Button Row
.setting-button-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
}
.main-buttons-button {
background-color: transparent;
color: var(--spice-button);
border: 2px solid var(--spice-button) !important;
margin: 5px 10px;
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.76px;
line-height: 18px;
padding: 8px 8%;
text-align: center;
text-transform: uppercase;
transition: all 33ms cubic-bezier(0.3, 0, 0, 1);
white-space: nowrap;
will-change: transform;
&:hover {
transform: scale(1.02);
filter: brightness(1.2);
}
&:active {
transform: scale(0.98);
filter: brightness(0.8);
}
}
}
================================================
FILE: Comfy/assets/_snippets.scss
================================================
:root {
&.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet {
.main-topBar-container {
padding-inline: 60px 150px !important;
}
}
&.spotify__container--is-desktop.spotify__os--is-linux #main.Topbar-Inside-Titlebar-Snippet {
.main-topBar-container {
padding-inline: 0px 150px !important;
}
}
&.spotify__container--is-desktop.spotify__os--is-macos #main.Topbar-Inside-Titlebar-Snippet {
.main-topBar-container {
padding-inline: 72px 0px !important;
}
}
&.spotify__container--is-desktop:not(.fullscreen):has(#main.Topbar-Inside-Titlebar-Snippet) .body-drag-top {
height: calc(var(--comfy-topbar-height, 40px) + 8px) !important;
}
&: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);
}
&:has(#main.Flatten-Colors-reverse) {
--spice-sidebar: var(--spice-main);
--spice-rgb-sidebar: var(--spice-rgb-main);
}
&:has(#main.Comfy-Dark-Modals-Snippet) {
.ABD0FGjBGqGZG33bP7Lc,
.main-duplicateTrackModal-container {
background-color: var(--spice-main);
color: var(--spice-text);
}
}
&:has(#main.Remove-DJ-Prompt) {
._EFIA9HjgZxxgTSZzQcg>*:not(:first-child) {
display: none;
}
}
&: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;
}
.main-rootlist-rootlistDivider,
.main-contextMenu-dividerBefore::before,
.main-contextMenu-dividerAfter::after,
.show-episodeList-divider,
.main-rootlist-rootlistDividerContainer {
display: none;
}
.main-contextMenu-menuItemButton,
.main-userWidget-dropDownMenuItemButton {
border-radius: 8px !important;
color: var(--spice-text);
height: 32px;
padding-left: 8px;
}
.main-contextMenu-menuItem,
._60cb742e518d084c3c959007b9463b51-scss>li {
margin: 2px 6px;
}
.main-contextMenu-menuItem:first-child,
._60cb742e518d084c3c959007b9463b51-scss> :first-child {
margin: 6px 6px 2px;
}
.main-contextMenu-menuItem:last-child {
margin: 2px 6px 6px;
}
._60cb742e518d084c3c959007b9463b51-scss> :last-child {
margin: 2px 6px 8px;
}
.main-contextMenu-menu,
._60cb742e518d084c3c959007b9463b51-scss {
border-radius: 8px;
border: 1px solid var(--spice-button-disabled);
}
.main-userWidget-dropDownMenu li.main-contextMenu-menuItem>div {
left: calc(225px + 185px) !important;
width: 225px;
}
}
#main {
&.Comfy-nord-Snippet.Custom-Playbar-Snippet,
&.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet {
.Root__top-container {
.Root__now-playing-bar.LibraryX {
--cover-ambience-background: var(--spice-player, var(--spice-sidebar));
}
.main-connectBar-connectBar {
margin-bottom: 8px;
}
.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);
.playback-bar {
position: absolute !important;
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container,
.encore-text {
position: fixed;
bottom: 14px;
right: 8px;
}
.playback-bar__progress-time-elapsed,
.encore-text:first-of-type {
transform: translateX(calc(-100% - 20px));
}
.playback-bar__progress-time-elapsed::after,
.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%);
}
.x-progressBar-progressBarBg,
.x-progressBar-sliderArea {
border-radius: 0 0 8px 8px !important;
height: 6px !important;
}
.x-progressBar-progressBarBg {
&:after {
content: "";
padding: 8px;
position: absolute;
top: -6px;
width: calc(100% - 16px);
}
}
.playback-progressbar,
.x-progressBar-fillColor {
height: 6px !important;
border-radius: 50px !important;
}
}
}
}
}
&.Comfy-nord-flat-Snippet.Custom-Playbar-Snippet {
.Root__now-playing-bar.LibraryX {
--cover-ambience-background: var(--spice-main) !important;
}
.main-nowPlayingBar-nowPlayingBar {
background: var(--bg-img, var(--spice-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;
}
}
&.Remove-Column-Bar-Snippet {
.main-trackList-trackListHeader {
display: none;
}
}
&.Home-Header-Snippet {
.main-home-homeHeader {
display: block !important;
}
}
&.Home-Header-Color {
.main-home-homeHeader {
background-color: var(--home-header-color) !important;
}
}
&.Horizontal-pageLinks-Snippet {
ul#spicetify-sticky-list {
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
span {
display: none;
}
}
.main-yourLibraryX-navItem {
padding: 4px 8px !important;
}
}
&.Playbar-Above-Right-Panel-Snippet {
.artist-artistOverview-artistOverviewContent,
.main-actionBarBackground-background {
min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 150, 400px)) - 50px) !important;
}
.Root__top-container {
grid-template-areas:
"left-sidebar main-view now-playing-bar"
"left-sidebar main-view right-sidebar";
&[data-right-sidebar-hidden] .Root__main-view {
grid-area: main-view/main-view/main-view/span 1;
}
.Root__main-view,
.Root__nav-bar {
margin-bottom: 8px;
}
.Root__right-sidebar {
height: calc(100vh - 450px);
width: min-content;
padding-bottom: 8px;
}
.Root__now-playing-bar {
width: var(--comfy-panel-width);
background-color: var(--spice-main);
border-radius: 8px;
.main-nowPlayingBar-container {
flex-direction: column;
min-width: 280px;
max-width: 420px;
.main-nowPlayingBar-nowPlayingBar {
flex-direction: column;
padding: 8px;
min-height: 400px;
.main-nowPlayingBar-center,
.main-nowPlayingBar-left {
width: 100%;
}
.player-controls__buttons.player-controls__buttons--new-icons {
order: 2;
}
.playback-bar,
.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS {
order: 1;
}
.main-nowPlayingBar-right {
width: calc(var(--comfy-panel-width) - 16px);
.main-nowPlayingBar-extraControls {
width: calc(var(--comfy-panel-width) - 16px);
justify-content: space-evenly;
}
}
.main-nowPlayingWidget-nowPlaying {
width: 100%;
height: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
.main-coverSlotCollapsed-container {
width: 100%;
height: 100%;
bottom: 0;
> :first-child {
width: 100%;
height: 100%;
> :first-child {
width: 100%;
height: 100%;
background-color: #00000000;
}
}
.main-coverSlotCollapsed-expandButton {
top: 3%;
}
.HD9s7U5E1RLSWKpXmrqx {
background-color: #00000000;
margin: auto;
width: 100%;
.main-nowPlayingWidget-coverArt {
width: 100%;
height: 100%;
padding-bottom: 5px;
background-color: #00000000;
.cover-art {
height: 220px !important;
width: 220px !important;
margin: auto;
background-color: #00000000;
img {
background-color: #00000000;
box-shadow: 0 0 5px 5px var(--spice-text);
}
}
}
}
}
}
}
}
}
}
}
&.Smooth-Progress-Bar-Snippet {
.playback-bar,
.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS .x-progressBar-sliderArea {
>div,
~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
}
}
}
&.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;
}
}
&.Remove-Connect-Bar-Snippet {
.main-connectBar-connectBar,
.main-devicePicker-indicator {
display: none !important;
}
}
&.Remove-Lyrics-Button-Snippet {
.main-nowPlayingBar-lyricsButton {
display: none !important;
}
}
&.Hoverable-Timers-Snippet {
.playback-bar,
.pn5V0OzovI9p6b8nWq8p.gglUjikTBtMzCZFgSmpS {
>div {
transition: all 0.3s ease;
opacity: 0;
}
&:hover>div {
transition: all 0.3s ease;
opacity: 1 !important;
}
.playback-progressbar {
opacity: 1 !important;
}
}
}
&.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;
.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;
.main-topBar-topbarContentWrapper {
>*:not(.main-topBar-searchBar):not(:has(ul)) {
justify-content: center;
display: flex;
}
ul {
text-align: center !important;
justify-content: center;
}
.queue-tabBar-headerItemLink {
padding: 5px 16px;
}
}
.main-topBar-topbarContent {
app-region: drag !important;
.main-entityHeader-topbarTitle {
height: 100%;
}
}
.main-topBar-background {
display: none;
}
}
}
main:not(:has(.main-home-filterChipsContainer)),
.queue-queuePage-queuePage,
.search-searchCategory-SearchCategory,
.artist-artistDiscography-topBar,
.marketplace-header,
.f59DF4qQ_FphIrVeRYkI,
.cj6vRk3nFAi80HSVqX91,
.main-home-filterChipsContainer {
margin-top: -64px !important;
top: 0 !important;
}
.marketplace-header,
.f59DF4qQ_FphIrVeRYkI,
.cj6vRk3nFAi80HSVqX91 {
padding-top: 15px !important;
}
.main-home-filterChipsContainer {
padding-top: 8px;
}
.artist-artistDiscography-topBar {
height: 64px !important;
box-shadow: none;
}
.artist-artistDiscography-headerContainer.artist-artistDiscography-firstAlbum {
padding-top: 32px;
}
.main-view-container .search-searchCategory-SearchCategory {
height: 64px;
padding-top: 17px;
}
}
&.Collapse-Topbar-Snippet {
.main-topBar-topbarContentWrapper nav {
justify-content: center;
display: flex;
}
}
&.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;
}
.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);
}
.main-entityHeader-imageContainerNew+.main-entityHeader-headerText {
padding-left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + 32px + var(--content-spacing));
margin-right: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px) / 424 * 104, 232px) + var(--content-spacing));
}
&:not(.Topbar-Inside-Titlebar-Snippet) .main-entityHeader-topbarContentFadeIn>* {
opacity: var(--top-bar-opacity) !important;
}
}
&.AM-Gradient-Include-Existing-Snippet.Banner-Enabled,
&.Replace-Existing-Banners.Banner-Enabled {
.under-main-view>div:not(.comfy-banner-frame) {
display: none !important;
}
}
&.Lyrics {
main>div>div:empty {
--lyrics-color-background: transparent !important;
}
}
&.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);
.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;
&: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;
}
&:last-of-type {
display: revert;
left: 0;
bottom: 0;
animation-direction: reverse;
}
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
}
================================================
FILE: Comfy/assets/_top_bar.scss
================================================
:root .main-topBar-container {
.main-topBar-topbarContent *,
.main-topBar-topbarContentWrapper * {
justify-content: center;
text-align: center;
}
.main-topBar-searchBar {
>form input {
&::placeholder {
color: rgba(var(--spice-rgb-selected-row), 0.7);
}
height: 32px;
background-color: rgba(var(--spice-rgb-shadow), 0.7);
}
}
.main-topBar-historyButtons button:hover {
transform: scale(1.1);
}
.main-topBar-topbarContent>div:has([data-encore-id="buttonPrimary"]):first-child {
display: none !important;
}
.main-topBar-background {
background-color: var(--spice-main) !important;
}
.main-topBar-overlay {
background-color: transparent !important;
}
.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;
}
}
================================================
FILE: Comfy/assets/_tracklist.scss
================================================
:root {
// Tracklist
.main-trackList-active .main-trackList-rowTitle {
color: var(--spice-text) !important;
text-shadow: 0px 0px 6px var(--spice-text);
-webkit-text-stroke: thin;
}
.main-trackList-trackListHeader {
&._2ajKWDiy6YvJu5wo8I1g {
background: var(--spice-main) !important;
top: 0 !important;
}
&:not(._2ajKWDiy6YvJu5wo8I1g) {
.main-trackList-trackListRow,
.main-trackList-trackListHeaderRow {
&:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.05);
}
}
}
}
.main-trackList-trackListRow,
.main-trackList-trackListHeaderRow {
border-radius: var(--border-radius);
border: none;
transition: 200ms background-color;
&.main-trackList-selected {
background-color: rgba(var(--spice-rgb-selected-row), 0.1);
&:hover {
background-color: rgba(var(--spice-rgb-selected-row), 0.15);
}
}
.main-type-mesto,
.main-type-ballad {
transition: 300ms color;
}
.main-trackList-rowImageFallback {
border-radius: var(--border-radius) !important;
}
}
#main.Remove-Tracklist-Index {
// Image Tracklist
.main-trackList-trackList:has(.main-trackList-rowSectionStart img),
.main-trackList-trackList:has(.main-trackList-rowSectionStart .main-trackList-rowImageFallback) {
.main-trackList-trackListHeader {
.main-trackList-rowSectionIndex {
opacity: 0;
}
}
.main-trackList-trackListRow {
&:hover,
&:focus-within,
&.main-trackList-active {
.main-trackList-rowImagePlayPauseButton,
.main-trackList-rowSectionIndex {
background: rgba(var(--spice-rgb-play-button), 0.5);
}
.main-trackList-rowImagePlayButton,
.main-trackList-rowImagePlayPauseButton {
opacity: 1;
}
}
.main-trackList-rowImagePlayButton,
.main-trackList-rowImagePlayPauseButton,
.main-trackList-rowSectionIndex {
color: var(--spice-sidebar);
border-radius: var(--border-radius);
transition: 200ms opacity, 200ms background;
}
>.main-trackList-rowSectionIndex {
position: relative;
z-index: 1000;
top: 8px;
left: 56px;
width: 40px;
height: 40px;
justify-content: center;
text-indent: -1000px;
}
}
}
// Image Tracklist with Index
.main-trackList-indexable:has(.main-trackList-rowSectionStart img) {
@for $i from 3 through 6 {
&[aria-colcount="#{$i}"] .main-trackList-trackListRowGrid {
padding-left: 2px;
@if $i ==3 {
grid-template-columns: [index] 0px [first] var(--col1, 4fr) [last] minmax(120px, var(--col2, 1fr)) !important;
}
@else if $i ==4 {
grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 4fr)) [var1] minmax(120px, var(--col2, 2fr)) [last] minmax(120px, var(--col3, 1fr)) !important;
}
@else if $i ==5 {
grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [last] minmax(120px, var(--col4, 1fr)) !important;
}
@else if $i ==6 {
grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [last] minmax(120px, var(--col5, 1fr)) !important;
}
@else if $i ==7 {
grid-template-columns: [index] 0px [first] minmax(120px, var(--col1, 6fr)) [var1] minmax(120px, var(--col2, 4fr)) [var2] minmax(120px, var(--col3, 3fr)) [var3] minmax(120px, var(--col4, 2fr)) [var4] minmax(120px, var(--col5, 2fr)) [last] minmax(120px, var(--col6, 1fr)) !important;
}
}
}
}
}
}
================================================
FILE: Comfy/color.ini
================================================
[Comfy]
text = FFFFFF
subtext = B9BBBE
main = 23283D
main-elevated = 32364A
main-transition = 1E2233
highlight = 45495B
highlight-elevated = 383D50
sidebar = 1E2233
player = 101320
card = 101320
shadow = 1E2233
selected-row = F1F1F1
button = 7289DA
button-active = 5C6FB1
button-disabled = 4B588C
tab-active = 1E2233
notification = 7289DA
notification-error = D25050
misc = 000000
play-button = 7289DA
play-button-active = 869ADF
progress-fg = 1ED760
progress-bg = 7289DA
heart = D25050
pagelink-active = 5C6EB1
radio-btn-active = 7289DA
[Spotify]
text = FFFFFF
subtext = B3B3B3
main = 121212
main-elevated = 242424
main-transition = 000000
highlight = 1A1A1A
highlight-elevated = 2A2A2A
sidebar = 000000
player = 181818
card = 282828
shadow = 000000
selected-row = FFFFFF
button = 1DB954
button-active = 1ED760
button-disabled = 535353
tab-active = 333333
notification = 4687D6
notification-error = E22134
misc = 7F7F7F
play-button = 1DB954
play-button-active = 1DB954
progress-fg = 1DB954
progress-bg = 636363
heart = 1DB954
pagelink-active = 333333
radio-btn-active = 1DB954
[Nord]
text = B2BCCC
subtext = B2BCCC
main = 2E3440
main-elevated = 3C414C
main-transition = 262B35
highlight = 50555F
highlight-elevated = 424852
sidebar = 262B35
player = 2E3440
card = 363D4C
shadow = 1D2128
selected-row = B2BCCC
button = 8A99AF
button-active = 718CAD
button-disabled = 434C5E
tab-active = 363D4C
notification = 363D4C
notification-error = A9555E
misc = FFFFFF
play-button = 8A99AF
play-button-active = 718CAD
progress-fg = 8A99AF
progress-bg = 4B566A
heart = 718CAD
pagelink-active = B7C1D5
radio-btn-active = 363D4C
[Everforest]
text = D3C6AA
subtext = 9AA79D
main = 272E33
main-elevated = 30363A
main-transition = 495156
highlight = 444747
highlight-elevated = 34393D
sidebar = 2E383C
player = 272E33
card = 374145
shadow = 374145
selected-row = D3C6AA
button = A7C080
button-active = AEC984
button-disabled = 374145
tab-active = 181C1E
notification = 86AF87
notification-error = E67E80
misc = 000000
play-button = A7C080
play-button-active = AEC984
progress-fg = A7C080
progress-bg = 9DA9A0
heart = A7C080
pagelink-active = 181C1E
radio-btn-active = 86AF87
[Kanagawa]
text = 545464
subtext = 545464
main = F2EBBC
main-elevated = E6DFB7
main-transition = D5CEA3
highlight = D5CfAf
highlight-elevated = E0DAB4
sidebar = E7DBA0
player = F2EBBC
card = D5CEA3
shadow = E0DAB4
selected-row = 43436C
button = 43242B
button-active = 39395D
button-disabled = D5CEA3
tab-active = E7DBA0
notification = 43242B
notification-error = E82423
misc = 000000
play-button = 43242B
play-button-active = 43242B
progress-fg = 43242B
progress-bg = 77713E
heart = E82423
pagelink-active = FFFFFF
radio-btn-active = E7DBA0
[Houjicha]
text = B59F92
subtext = 997B6F
main = 473F3C
main-elevated = 534C49
main-transition = 5C514D
highlight = 574F4B
highlight-elevated = 59524F
sidebar = 514741
player = 473F3C
card = 78645C
shadow = 78645C
selected-row = A49A96
button = 6E916F
button-active = B3A49A
button-disabled = 67564D
tab-active = 6D5D54
notification = 86AF87
notification-error = D25050
misc = 000000
play-button = B59F92
play-button-active = C7AfA1
progress-fg = 86AF87
progress-bg = B59F92
heart = 86AF87
pagelink-active = FFFFFF
radio-btn-active = 877063
[Kitty]
text = FFFFFF
subtext = FFDDDC
main = C94985
main-elevated = CD548C
main-transition = DE4B90
highlight = DE4B90
highlight-elevated = CF598D
sidebar = E072A6
player = 941550
card = DE5BA5
shadow = 2B0718
selected-row = FFDDDC
button = 941550
button-active = FFFFFF
button-disabled = 941550
tab-active = E072A6
notification = E072A6
notification-error = 994B6F
misc = 000000
play-button = FFFFFF
play-button-active = A13267
progress-fg = DE4B90
progress-bg = 994B6F
heart = A13267
pagelink-active = DE4B90
radio-btn-active = 994B6F
[Lunar]
text = F3F3F3
subtext = CECECE
main = 161616
main-elevated = 232323
main-transition = 101010
highlight = 2A2A2A
highlight-elevated = 292929
sidebar = 202020
player = 161616
card = 303030
shadow = 252525
selected-row = CECECE
button = 3281EA
button-active = 0284E8
button-disabled = 303030
tab-active = EBBCBA
notification = 3281EA
notification-error = B10C0C
misc = 252525
play-button = EBBCBA
play-button-active = EBA9A7
progress-fg = 025CA1
progress-bg = 202020
heart = EBBCBA
pagelink-active = FFFFFF
radio-btn-active = 0284E8
[Deep]
text = 4F9A87
subtext = 406560
main = 040614
main-elevated = 0A111D
main-transition = 0F111A
highlight = 0F1F28
highlight-elevated = 0C1520
sidebar = 0F111A
player = 040614
card = 0F1118
shadow = 0F1118
selected-row = 4F9A87
button = 106165
button-active = 4F9A87
button-disabled = 0C1C19
tab-active = 0A1527
notification = 051024
notification-error = 051024
misc = 406560
play-button = 106165
play-button-active = 4F9A87
progress-fg = 4F9A87
progress-bg = 106165
heart = D25050
pagelink-active = 4F9A87
radio-btn-active = 106165
[Velvet]
text = AD434E
subtext = 762F37
main = 1E1E1E
main-elevated = 272021
main-transition = 161616
highlight = 322324
highlight-elevated = 2A2122
sidebar = 161616
player = 080808
card = 0F0F0F
shadow = 161616
selected-row = 973B45
button = 6B2B32
button-active = 552328
button-disabled = 262626
tab-active = 161616
notification = 6B2B32
notification-error = 60272D
misc = 000000
play-button = 552328
play-button-active = 6B2B32
progress-fg = 81333B
progress-bg = A23F49
heart = 60272D
pagelink-active = 4A1F23
radio-btn-active = 6B2B32
[Yami]
text = D4D4D4
subtext = D4D4D4
main = 0A0A10
main-elevated = 0D0D14
main-transition = 0A0A10
highlight = 191923
highlight-elevated = 0E0E15
sidebar = 0A0A10
player = 0A0A10
card = 191923
shadow = AF8BF3
selected-row = 353447
button = 191923
button-active = 353447
button-disabled = 111117
tab-active = 191923
notification = 0A0A10
notification-error = F7407B
misc = 0A0A10
play-button = 2B2A3D
play-button-active = 353447
progress-fg = F7407B
progress-bg = 0A0A10
heart = F7407B
pagelink-active = F7407B
radio-btn-active = 191923
[Hikari]
text = CDBBF9
subtext = 8A7EA8
main = 050406
main-elevated = 0D0D14
main-transition = 0B0910
highlight = 1B1923
highlight-elevated = 0E0E15
sidebar = 0D0D14
player = 0D0D14
card = 1F132D
shadow = 1F132D
selected-row = F1F1F1
button = 90128B
button-active = 90128B
button-disabled = 1C0033
tab-active = 1B1923
notification = 0A0A10
notification-error = 90128B
misc = 0A0A10
play-button = CDBBF9
play-button-active = 8A7EA8
progress-fg = 90128B
progress-bg = 0D0D14
heart = CDBBF9
pagelink-active = 1B1923
radio-btn-active = 191923
[catppuccin-latte]
text = 4C4F69
subtext = 5C5F77
main = E6E9EF
main-elevated = DCE0E6
main-transition = E6E9EF
highlight = CED3DB
highlight-elevated = D8DBE3
sidebar = EFF1F5
player = E6E9EF
card = BCC0CC
shadow = E6E9EF
selected-row = 5C5F77
button = 1E66F5
button-active = 209FB5
button-disabled = BCC0CC
tab-active = CCD0DA
notification = 1E66F5
notification-error = D20F39
misc = ACB0BE
play-button = EA76CB
play-button-active = DD7878
progress-fg = 04A5E5
progress-bg = BCC0CC
heart = FE640B
pagelink-active = FFFFFF
radio-btn-active = 209FB5
[catppuccin-frappe]
text = C6D0F5
subtext = B5BFE2
main = 292C3C
main-elevated = 333648
main-transition = 292C3C
highlight = 3B4058
highlight-elevated = 373B4D
sidebar = 303446
player = 292C3C
card = 51576D
shadow = 626880
selected-row = B5BFE2
button = 8CAAEE
button-active = 85C1DC
button-disabled = 51576D
tab-active = 414559
notification = 8CAAEE
notification-error = E78284
misc = 626880
play-button = F4B8E4
play-button-active = EECEBE
progress-fg = 99D1DB
progress-bg = 51576D
heart = EF9F76
pagelink-active = FFFFFF
radio-btn-active = 85C1DC
[catppuccin-macchiato]
text = CAD3F5
subtext = B8C0E0
main = 181926
main-elevated = 232533
main-transition = 181926
highlight = 333645
highlight-elevated = 292A39
sidebar = 24273A
player = 181926
card = 494D64
shadow = 5B6078
selected-row = B8C0E0
button = 8AADF4
button-active = 7DC4E4
button-disabled = 494D64
tab-active = 363A4F
notification = 8AADF4
notification-error = ED8796
misc = 5B6078
play-button = F5BDE6
play-button-active = F0C6C6
progress-fg = 91D7E3
progress-bg = 494D64
heart = F5A97F
pagelink-active = FFFFFF
radio-btn-active = 7DC4E4
[catppuccin-mocha]
text = CDD6F4
subtext = BAC2DE
main = 181825
main-elevated = 232432
main-transition = 181825
highlight = 333645
highlight-elevated = 292A38
sidebar = 1E1E2E
player = 181825
card = 45475A
shadow = 585B70
selected-row = BAC2DE
button = 89B4FA
button-active = 74C7EC
button-disabled = 45475A
tab-active = 313244
notification = 89B4FA
notification-error = F38BA8
misc = 585B70
play-button = F5C2E7
play-button-active = F2CDCD
progress-fg = 89DCEB
progress-bg = 45475A
heart = FAB387
pagelink-active = FFFFFF
radio-btn-active = 74C7EC
[rose-pine]
text = E0DEF4
subtext = 908CAA
main = 1F1D2E
main-elevated = 2D2B3C
main-transition = 26233A
highlight = 403D52
highlight-elevated = 333142
sidebar = 191724
player = 1F1D2E
card = 403D52
shadow = 524F67
selected-row = E0DEF4
button = EBBCBA
button-active = EBBCBA
button-disabled = 6E6A86
tab-active = 524F67
notification = 9CCFD8
notification-error = EB6F92
misc = FFFFFF
play-button = EBBCBA
play-button-active = EBBCBA
progress-fg = EBBCBA
progress-bg = 403D52
heart = EB6F92
pagelink-active = EBBCBA
radio-btn-active = 9CCFD8
[rose-pine-moon]
text = E0DEF4
subtext = 908CAA
main = 2A273F
main-elevated = 37344C
main-transition = 393552
highlight = 44415A
highlight-elevated = 3D3A52
sidebar = 232136
player = 2A273F
card = 44415A
shadow = 56526E
selected-row = E0DEF4
button = EA9A97
button-active = EA9A97
button-disabled = 6E6A86
tab-active = 56526E
notification = 9CCFD8
notification-error = EB6F92
misc = FFFFFF
play-button = EA9A97
play-button-active = EA9A97
progress-fg = EA9A97
progress-bg = 44415A
heart = EB6F92
pagelink-active = EA9A97
radio-btn-active = 9CCFD8
[rose-pine-dawn]
text = 575279
subtext = 797593
main = FFFAF3
main-elevated = F3EEEB
main-transition = F2E9E1
highlight = DFDAD9
highlight-elevated = EEE9E6
sidebar = FAF4ED
player = FFFAF3
card = DFDAD9
shadow = FAF4ED
selected-row = 575279
button = D7827E
button-active = D7827E
button-disabled = 9893A5
tab-active = CECACD
notification = 56949F
notification-error = B4637A
misc = FFFFFF
play-button = D7827E
play-button-active = D7827E
progress-fg = D7827E
progress-bg = DFDAD9
heart = B4637A
pagelink-active = D7827E
radio-btn-active = 907AA9
[Mono]
text = FFFFFF
subtext = B9BBBE
main = 171717
main-elevated = 262626
main-transition = FFFFFF
highlight = 3B3B3B
highlight-elevated = 2E2E2E
sidebar = 101010
player = 171717
card = 343434
shadow = 595858
selected-row = F1F1F1
button = FFFFFF
button-active = C5C5C5
button-disabled = 4A4949
tab-active = 303030
notification = 101010
notification-error = D25050
misc = 000000
play-button = FFFFFF
play-button-active = FFFFFF
progress-fg = FFFFFF
progress-bg = 343434
heart = FFFFFF
pagelink-active = 787878
radio-btn-active = 737373
[Sunset]
text = FFCE3F
subtext = FEF3BB
main = 171717
main-elevated = 272622
main-transition = 000000
highlight = 3D3C32
highlight-elevated = 2F2E28
sidebar = 101010
player = 171717
card = CC9756
shadow = E3B47B
selected-row = FEF3BB
button = FFCE3F
button-active = BF9B30
button-disabled = 4A4949
tab-active = 303030
notification = FFFFFF
notification-error = D25050
misc = 000000
play-button = FFCE3F
play-button-active = FC9E3A
progress-fg = FF8300
progress-bg = 343434
heart = FF8300
pagelink-active = FEF3BB
radio-btn-active = FEF3BB
[Neon]
text = 588BAE
subtext = EAFFFF
main = 171717
main-elevated = 262626
main-transition = 000000
highlight = 3B3B3B
highlight-elevated = 2E2E2E
sidebar = 101010
player = 171717
card = 7FA1B5
shadow = A9C9DB
selected-row = F1F1F1
button = 588BAE
button-active = 3B5D75
button-disabled = 4A4949
tab-active = 303030
notification = FFFFFF
notification-error = D25050
misc = 000000
play-button = 588BAE
play-button-active = 5085AB
progress-fg = 00AFDB
progress-bg = 343434
heart = 00AFDB
pagelink-active = BBE7FE
radio-btn-active = EAFFFF
[Forest]
text = B2C5B3
subtext = D5DDDE
main = 171717
main-elevated = 262626
main-transition = 000000
highlight = 3B3B3B
highlight-elevated = 2E2E2E
sidebar = 101010
player = 171717
card = 5C6E59
shadow = 3C5148
selected-row = F1F1F1
button = B2C5B3
button-active = F1F1F1
button-disabled = 4A4949
tab-active = 303030
notification = FFFFFF
notification-error = D25050
misc = 000000
play-button = 3C5148
play-button-active = 43705D
progress-fg = 3C5148
progress-bg = 343434
heart = 3C5148
pagelink-active = 3C5148
radio-btn-active = 737373
[Sakura]
text = FCB4CA
subtext = FFDCDC
main = 171717
main-elevated = 262626
main-transition = 000000
highlight = 3D3838
highlight-elevated = 2E2E2E
sidebar = 101010
player = 171717
card = D68BA2
shadow = FCB4CA
selected-row = FFDCDC
button = FCB4CA
button-active = D48AA0
button-disabled = 4A4949
tab-active = 303030
notification = FFFFFF
notification-error = D25050
misc = 000000
play-button = F42C38
play-button-active = BA182B
progress-fg = CFEEFA
progress-bg = 343434
heart = F25477
pagelink-active = F5BCDB
radio-btn-active = FFDCDC
[Vaporwave]
text = 01CDFE
subtext = EAFFFF
main = 171717
main-elevated = 262626
main-transition = 000000
highlight = 3B3B3B
highlight-elevated = 2E2E2E
sidebar = 101010
player = 171717
card = 007F9E
shadow = 2EC2E6
selected-row = F1F1F1
button = 01CDFE
button-active = 118BA8
button-disabled = 4A4949
tab-active = 303030
notification = FFFFFF
notification-error = D25050
misc = 000000
play-button = FFD300
play-button-active = E3C01B
progress-fg = F706CF
progress-bg = 343434
heart = F706CF
pagelink-active = C0D6FA
radio-btn-active = EAFFFF
[wal16]
text = ${xrdb:color15}
subtext = ${xrdb:color7}
main = ${xrdb:color0}
main-elevated = ${xrdb:color1}
main-transition = ${xrdb:color0}
highlight = ${xrdb:color5}
highlight-elevated = ${xrdb:color13}
sidebar = ${xrdb:color0}
player = ${xrdb:color0}
card = ${xrdb:color0}
shadow = ${xrdb:color8}
selected-row = ${xrdb:color15}
button = ${xrdb:color6}
button-active = ${xrdb:color14}
button-disabled = ${xrdb:color8}
tab-active = ${xrdb:color0}
notification = FFFFFF
notification-error = D25050
misc = ${xrdb:color0}
play-button = ${xrdb:color3}
play-button-active = ${xrdb:color11}
progress-fg = ${xrdb:color10}
progress-bg = ${xrdb:color0}
heart = ${xrdb:color12}
pagelink-active = ${xrdb:color3}
radio-btn-active = ${xrdb:color3}
================================================
FILE: Comfy/package.json
================================================
{
"name": "comfy",
"version": "1.0.0",
"description": "Stay comfy while listening to music",
"main": "theme.script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile-scss": "sass app.scss app.css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Comfy-Themes/Spicetify.git"
},
"keywords": ["comfy", "spicetify"],
"author": "Comfy-Themes",
"license": "WTFPL",
"bugs": {
"url": "https://github.com/Comfy-Themes/Spicetify/issues"
},
"homepage": "https://github.com/Comfy-Themes/Spicetify#readme",
"dependencies": {
"node-sass": "^7.0.3"
}
}
================================================
FILE: Comfy/theme.js
================================================
(() => {
const themeScript = document.createElement("SCRIPT");
themeScript.setAttribute("type", "text/javascript");
themeScript.setAttribute("src", "https://comfy-themes.github.io/Spicetify/Comfy/theme.script.js");
document.head.appendChild(themeScript);
})();
================================================
FILE: Comfy/theme.script.js
================================================
/*
tofix:
- negative values
- Reloading when filtered causes options to not be applied
- fonts titles and stuff css
todo:
- add warning message if using unsupported versions
- add custom colour schemes
- add overrides for topbar background and padding
*/
(async function comfy() {
// Block Until Mass Usage Deps Loaded
if (!(Spicetify.React && Spicetify.ReactDOM && Spicetify.Config)) {
setTimeout(comfy, 10);
return;
}
console.debug("[Comfy-Event]: Global Dependencies loaded");
// Add Global Functions
window.Comfy = {
Reset: () => {
localStorage.removeItem("comfy:config");
location.reload();
},
Config: () => {
console.log(JSON.parse(localStorage.getItem("comfy:config") || "{}"));
}
};
console.debug(`[Comfy-Event]: Global Functions Added`);
// Initialize Config
let config = JSON.parse(localStorage.getItem("comfy:config") || "{}");
let configScheme = Spicetify.Config?.color_scheme || "Comfy";
let preloadedScheme = false;
let startup = true;
let preloadContainer = document.createElement("div");
console.debug(`[Comfy-Event]: Config Initialized`);
// Preload Applied Colorscheme
const colorScheme = getConfig("Color-Scheme");
if (colorScheme) {
preloadedScheme = true;
updateScheme(colorScheme, "preloaded");
}
// Update Colorschemes
fetch("https://raw.githubusercontent.com/Comfy-Themes/Spicetify/main/Comfy/color.ini")
.then(response => response.text())
.then(iniContent => {
setConfig("Color-Schemes", parseIni(iniContent), "Successfully updated color schemes");
configScheme =
(getConfig("Color-Schemes") && Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) ||
configScheme;
updateScheme(getConfig("Color-Scheme"), "updated");
})
.catch(error => {
console.warn("[Comfy-Warning]: Failed to update color schemes:", error);
});
// Window Zoom Variable
// todo: improve this? seems unoptimal but spotify messes with window.outerWidth on minimize so this is required currently
function updateZoomVariable() {
let prevOuterWidth = window.outerWidth;
let prevInnerWidth = window.innerWidth;
let prevRatio = window.devicePixelRatio;
let startup = true;
function checkChanges() {
const newOuterWidth = window.outerWidth;
const newInnerWidth = window.innerWidth;
const newRatio = window.devicePixelRatio;
if (startup || ((prevOuterWidth <= 160 || prevRatio !== newRatio) && (prevOuterWidth !== newOuterWidth || prevInnerWidth !== newInnerWidth))) {
const modified = newOuterWidth / newInnerWidth || 1;
document.documentElement.style.setProperty("--zoom", modified);
console.debug(`[Comfy-Event]: Zoom Updated: ${newOuterWidth} / ${newInnerWidth} = ${modified}`);
prevOuterWidth = newOuterWidth;
prevInnerWidth = newInnerWidth;
prevRatio = newRatio;
}
requestAnimationFrame(checkChanges);
}
checkChanges();
startup = false;
}
updateZoomVariable();
// Layout Variables
let panelWidth = document.documentElement.style.getPropertyValue("--panel-width");
let sidebarWidth = document.documentElement.style.getPropertyValue("--left-sidebar-width");
document.documentElement.style.setProperty("--comfy-panel-width", `${panelWidth}px`);
document.documentElement.style.setProperty("--comfy-left-sidebar-width", `${sidebarWidth}px`);
new MutationObserver(mutations => {
const newPanelWidth = mutations[0].target.style.getPropertyValue("--panel-width");
const newSidebarWidth = mutations[0].target.style.getPropertyValue("--left-sidebar-width");
if (newPanelWidth !== panelWidth || newSidebarWidth !== sidebarWidth) {
const trimmedPanelWidth = parseInt(newPanelWidth);
const trimmedSidebarWidth = parseInt(newSidebarWidth);
document.documentElement.style.setProperty("--comfy-panel-width", `${trimmedPanelWidth}px`);
document.documentElement.style.setProperty("--comfy-left-sidebar-width", `${trimmedSidebarWidth}px`);
panelWidth = newPanelWidth;
sidebarWidth = newSidebarWidth;
}
}).observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
waitForDeps("Spicetify.Platform.version", version => {
if (version >= "1.2.46.462") {
waitForDeps(
":root .global-nav",
root => {
if (!root.classList.contains("global-nav-centered")) {
root.classList.add("global-nav-centered");
}
},
true
);
}
});
// Banner Image(s)
let channels = {
Lyrics: { regex: /^\/lyrics$/, enabled: getConfig("Lyrics") ?? false },
Playlist: { regex: /^\/playlist\//, enabled: getConfig("Playlist") ?? true },
Station: { regex: /^\/station\/playlist\//, enabled: getConfig("Station") ?? true },
Artist: { regex: /^\/artist\/(?!artists\b)\w+$/, enabled: getConfig("Artist") ?? true },
Album: { regex: /^\/album\//, enabled: getConfig("Album") ?? true },
Collection: { regex: /^\/collection\/tracks$/, enabled: getConfig("Collection") ?? true },
"Your-Episodes": { regex: /^\/collection\/your-episodes$/, enabled: getConfig("Your-Episodes") ?? true },
"Local-Files": { regex: /^\/collection\/local-files$/, enabled: getConfig("Local-Files") ?? true },
Show: { regex: /^\/show\//, enabled: getConfig("Show") ?? true },
Episode: { regex: /^\/episode\//, enabled: getConfig("Episode") ?? true },
"Lyrics-Plus": { regex: /^\/lyrics-plus$/, enabled: getConfig("Lyrics-Plus") ?? true },
User: { regex: /^\/user\/(?!users\b)\w+$/, enabled: getConfig("User") ?? true },
Genre: { regex: /^\/genre\//, enabled: getConfig("Genre") ?? true }
};
const frame = document.createElement("div");
const banner = [document.createElement("div"), document.createElement("div")];
frame.className = "comfy-banner-frame";
banner.forEach(image => {
image.className = "comfy-banner-image";
frame.append(image);
});
waitForDeps(
".under-main-view",
underMainView => {
console.debug("[Comfy-Event]: Banner Frame Added");
underMainView.appendChild(frame);
},
true
);
waitForDeps("Spicetify.Platform.History", () => Spicetify.Platform.History.listen(updateBanner));
waitForDeps("Spicetify.Player", () => Spicetify.Player.addEventListener("songchange", updateBanner));
updateBanner();
// React components
const Dialog = Spicetify.React.memo(props => {
const [state, setState] = Spicetify.React.useState(true);
const self = document.querySelector(".ReactModalPortal:last-of-type");
const ConfirmDialog = Spicetify.ReactComponent.ConfirmDialog;
const isForwardRef = typeof ConfirmDialog === "function";
const commonProps = {
...props,
isOpen: state,
onClose: () => {
setState(false);
props.onClose?.();
self.remove();
},
onConfirm: () => {
setState(false);
props.onConfirm?.();
self.remove();
}
};
Spicetify.React.useEffect(() => {
if (state) {
props.onOpen?.();
}
}, [state]);
return isForwardRef ? ConfirmDialog(commonProps) : Spicetify.React.createElement(ConfirmDialog, commonProps);
});
const Section = ({ name, children, condition = true, filter }) => {
filter = !filter || name === filter.label || filter.index === 0;
if (condition === false) return null;
return (
filter &&
Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement(
"div",
{ className: "setting-section", id: name },
Spicetify.React.createElement("h2", { className: "setting-header" }, name),
children.map(child =>
Spicetify.React.createElement(child.type, {
...child,
tippy: Spicetify.React.createElement(Tippy, { label: child.tippy })
})
)
)
)
);
};
const Row = ({ name, items }) => {
return Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement(
"div",
{ className: name },
items.map(item =>
Spicetify.React.createElement(item.type, {
...item,
tippy: Spicetify.React.createElement(Tippy, { label: item.tippy })
})
)
)
);
};
const Button = ({ name, title, condition = true, callback }) => {
const [state, setState] = Spicetify.React.useState(title);
if (condition === false) return;
return Spicetify.React.createElement(
"button",
{
className: "main-buttons-button",
id: name,
onClick: () => {
callback(state, setState);
}
},
state
);
};
const CardLayout = Spicetify.React.memo(({ title, desc, tippy, action, onClick }) => {
return Spicetify.React.createElement(
"div",
{ className: "setting-card" },
Spicetify.React.createElement(
"div",
{ className: "setting-container", onClick: onClick },
Spicetify.React.createElement(
"div",
{ className: "setting-item" },
Spicetify.React.createElement("label", { className: "setting-title" }, title, tippy),
Spicetify.React.createElement("div", { className: "setting-action" }, action)
),
Spicetify.React.createElement("div", { className: "setting-description" }, desc),
desc && Spicetify.React.createElement("div", { className: "setting-description-spacer" })
)
);
});
const SubSection = Spicetify.React.memo(({ name, condition = true, items, collapseItems: initialCollapseItems = false, callback, ...props }) => {
const [state, setState] = Spicetify.React.useState(getConfig(name) ?? true);
const [collapseItems, setCollapseItems] = Spicetify.React.useState(getConfig(`${name}-Collapsed`) ?? initialCollapseItems);
if (condition === false) return null;
return Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement(
"div",
{ className: "setting-subSection", id: state ? (collapseItems ? "collapsed" : "enabled") : "disabled" },
Spicetify.React.createElement(Toggle, {
name,
callback: value => {
callback?.(value);
setState(value);
items.forEach(item => {
const both = () => (item.type === Input ? "" : item.defaultVal);
const state = getConfig(item.name) ?? both();
setConfig(item.name, state);
if (item.type === Toggle) {
if (state || !value)
waitForDeps(
"main",
main => {
console.debug(`[Comfy-subCallback]: ${item.name} =`, state);
main.classList.toggle(item.name, value ? state : false);
item.callback?.(state);
},
true,
"getElementById"
);
} else if (value && state !== both()) {
console.debug(`[Comfy-subCallback]: ${item.name}`, state);
item.callback?.(state, item.name);
}
});
},
onClick: () => {
if (state) {
setConfig(`${name}-Collapsed`, !collapseItems, null, true);
setCollapseItems(!collapseItems);
}
},
...props
}),
state &&
!collapseItems &&
!startup &&
items.map(item =>
Spicetify.React.createElement(item.type, {
...item,
tippy: Spicetify.React.createElement(Tippy, { label: item.tippy })
})
)
)
);
});
const Tippy = ({ label }) => {
if (!label) return null;
return Spicetify.React.createElement(
Spicetify.ReactComponent.TooltipWrapper,
{
label,
showDelay: 0,
placement: "left",
trigger: "mouseenter"
},
Spicetify.React.createElement(
"div",
{ className: "x-settings-tooltip" },
Spicetify.React.createElement(
"div",
{
className: "x-settings-tooltipIconWrapper"
},
Spicetify.React.createElement(
"svg",
{
role: "img",
height: "16",
width: "16",
tabindex: "0",
className: "Svg-sc-ytk21e-0 Svg-img-icon x-settings-tooltipIcon",
viewBox: "0 0 16 16"
},
Spicetify.React.createElement("path", {
d: "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"
}),
Spicetify.React.createElement("path", {
d: "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"
})
)
)
)
);
};
const Toggle = Spicetify.React.memo(({ name, title, desc, tippy, defaultVal, condition = true, callback, onClick }) => {
const [state, setState] = Spicetify.React.useState(getConfig(name) ?? defaultVal);
const isFirstRender = Spicetify.React.useRef(true);
Spicetify.React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
if (!startup) return;
}
setConfig(name, state);
if (state || !startup) {
waitForDeps(
"main",
main => {
console.debug(`[Comfy-Callback]: ${name} =`, state);
main.classList.toggle(name, state);
callback?.(state);
},
true,
"getElementById"
);
}
}, [state]);
if (condition === false) return null;
return Spicetify.React.createElement(CardLayout, {
title,
desc,
tippy,
action: Spicetify.React.createElement(
"label",
{ className: "x-toggle-wrapper" },
Spicetify.React.createElement("input", {
className: "x-toggle-input",
type: "checkbox",
defaultChecked: state,
onClick: () => setState(!state)
}),
Spicetify.React.createElement(
"span",
{ className: "x-toggle-indicatorWrapper" },
Spicetify.React.createElement("span", { className: "x-toggle-indicator" })
)
),
onClick
});
});
const Input = Spicetify.React.memo(
({ inputType, includePicker, name, title, desc, min, max, step, tippy, defaultVal, condition = true, callback, callbackOverride }) => {
const [value, setValue] = Spicetify.React.useState(getConfig(name) ?? "");
const [defaultState, setDefaultState] = Spicetify.React.useState(defaultVal);
const isFirstRender = Spicetify.React.useRef(true);
const textFieldRef = Spicetify.React.useRef(null);
Spicetify.React.useEffect(() => {
if (textFieldRef.current) {
textFieldRef.current.addEventListener("wheel", e => {
if (document.focusedElement === textFieldRef.current) {
e.preventDefault();
}
});
}
}, []);
Spicetify.React.useEffect(() => {
if (isPromise(defaultVal)) defaultVal.then(val => setDefaultState(val));
}, [defaultVal]);
Spicetify.React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
if (!startup) return;
}
setConfig(name, value);
if (value !== "" || !startup || callbackOverride) {
console.debug(`[Comfy-Callback]: ${name} =`, value);
callback?.(value, name, defaultVal);
}
}, [value, name]);
if (condition === false) return null;
return Spicetify.React.createElement(CardLayout, {
title,
desc,
tippy,
action: [
Spicetify.React.createElement("input", {
type: inputType,
className: "input",
ref: textFieldRef,
value,
min: inputType === "number" ? Number(min) : null,
max: inputType === "number" ? Number(max) : null,
step: inputType === "number" ? Number(step) : null,
placeholder: defaultState,
onChange: e => setValue(e.target.value)
}),
includePicker &&
Spicetify.React.createElement("input", {
type: "color",
className: "input",
value,
placeholder: defaultState,
onChange: e => setValue(e.target.value)
})
]
});
}
);
const Dropdown = Spicetify.React.memo(({ name, title, desc, options, defaultVal, condition = true, tippy, callback }) => {
if (!condition) return null;
if (!defaultVal) defaultVal = "Select an option";
if (typeof options === "function") options = options();
const [selectedValue, setSelectedValue] = Spicetify.React.useState(getConfig(name) ?? defaultVal);
const [buttonEnabled, setButtonEnabled] = Spicetify.React.useState(selectedValue !== defaultVal);
const [menuOpen, setMenuOpen] = Spicetify.React.useState(false);
const isFirstRender = Spicetify.React.useRef(true);
Spicetify.React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
if (!startup) {
const parent = document.querySelector("generic-modal [aria-label='Comfy Settings']");
const current = document.getElementById(name);
parent.addEventListener("click", event => {
if (event.target.closest(".dropdown-wrapper") !== current) {
setMenuOpen(false);
}
});
return;
}
}
setConfig(name, selectedValue);
if ((condition && selectedValue !== defaultVal) || !startup) {
console.debug(`[Comfy-Callback]: ${name} =`, selectedValue);
callback?.(name, selectedValue, options, defaultVal);
setButtonEnabled(selectedValue !== defaultVal);
}
}, [selectedValue]);
return Spicetify.React.createElement(CardLayout, {
title,
desc,
tippy,
action: [
buttonEnabled &&
Spicetify.React.createElement(
"button",
{
className: `switch`,
onClick: event => {
event.stopPropagation(); // Prevent event from propagating up
setSelectedValue(defaultVal);
}
},
Spicetify.React.createElement("svg", {
height: "16",
width: "16",
viewBox: "0 0 16 16",
fill: "currentColor",
dangerouslySetInnerHTML: {
__html: Spicetify.SVGIcons.x
}
})
),
Spicetify.React.createElement(
"div",
{ className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? "menu-open" : ""}`, id: name },
Spicetify.React.createElement(
"div",
{ className: "dropdown-button", onClick: () => setMenuOpen(!menuOpen) },
Spicetify.React.createElement("div", { className: "dropdown-selection" }, selectedValue),
Spicetify.React.createElement(
"div",
{ className: "dropdown-arrow-wrapper" },
Spicetify.React.createElement("span", { className: "dropdown-arrow" })
)
),
menuOpen &&
Spicetify.React.createElement(
"div",
{ className: "dropdown-menu" },
options.map(option =>
Spicetify.React.createElement(
"div",
{
key: option,
className: `dropdown-option${selectedValue === option ? " selected" : ""}`,
role: "option",
"aria-selected": selectedValue === option,
onClick: event => {
event.stopPropagation(); // Prevent event from propagating up
setSelectedValue(option);
setMenuOpen(false);
}
},
option
)
)
)
)
]
});
});
const Carousel = ({ chips, checked, setChecked }) => {
const containerRef = Spicetify.React.useRef(null);
const [showLeftButton, setShowLeftButton] = Spicetify.React.useState(false);
const [showRightButton, setShowRightButton] = Spicetify.React.useState(false);
const [startX, setStartX] = Spicetify.React.useState(0);
const [scrollLeft, setScrollLeft] = Spicetify.React.useState(0);
const [mouseDown, setMouseDown] = Spicetify.React.useState(false);
const isFirstRender = Spicetify.React.useRef(true);
const section = document.querySelector(".main-trackCreditsModal-mainSection");
// Handle resizing and scroll visibility
const handleResize = Spicetify.React.useCallback(() => {
if (containerRef.current) {
const container = containerRef.current;
setShowLeftButton(container.scrollLeft > 0);
setShowRightButton(container.scrollLeft < container.scrollWidth - container.clientWidth - 2);
}
}, []);
Spicetify.React.useEffect(() => {
handleResize(); // Initial call
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, [handleResize]);
// Scroll to active item on first render
Spicetify.React.useEffect(() => {
if (containerRef.current && isFirstRender.current) {
const activeItem = containerRef.current.querySelector(`.search-searchCategory-categoryGridItem:nth-child(${checked.index + 1})`);
if (activeItem) {
const container = containerRef.current;
const containerScrollLeft = container.scrollLeft;
const containerWidth = container.clientWidth;
const itemOffsetLeft = activeItem.offsetLeft;
const itemWidth = activeItem.clientWidth;
if (itemOffsetLeft < containerScrollLeft + 32 || itemOffsetLeft + itemWidth > containerScrollLeft + containerWidth - 32) {
const scrollPosition = itemOffsetLeft - (containerWidth / 2 - itemWidth / 2);
container.scrollTo({ left: scrollPosition, behavior: "instant" });
}
isFirstRender.current = false;
}
}
}, [checked.index]);
// Handle dragging
const handleMouseDown = event => {
setStartX(event.pageX - containerRef.current.offsetLeft);
setScrollLeft(containerRef.current.scrollLeft);
setMouseDown(true);
containerRef.current.style.cursor = "grabbing";
containerRef.current.style.userSelect = "none";
containerRef.current.style.scrollBehavior = "auto";
};
const handleMouseMove = event => {
if (!mouseDown) return;
event.preventDefault();
const x = event.pageX - containerRef.current.offsetLeft;
const walk = (x - startX) * 1; // Adjust scrolling speed
containerRef.current.scrollLeft = scrollLeft - walk;
};
const handleMouseUpOrLeave = () => {
if (mouseDown) {
containerRef.current.style.cursor = "";
containerRef.current.style.userSelect = "";
containerRef.current.style.scrollBehavior = "";
setMouseDown(false);
}
};
Spicetify.React.useEffect(() => {
document.addEventListener("mouseup", handleMouseUpOrLeave);
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseleave", handleMouseUpOrLeave);
return () => {
document.removeEventListener("mouseup", handleMouseUpOrLeave);
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseleave", handleMouseUpOrLeave);
};
}, [mouseDown]);
// Handle arrow key navigation
const handleKeyDown = Spicetify.React.useCallback(
event => {
let newIndex;
let startingIndex = checked.index;
if (document.activeElement.classList.contains("search-searchCategory-categoryGridItem")) {
startingIndex = Array.from(containerRef.current.querySelectorAll(".search-searchCategory-categoryGridItem")).indexOf(
document.activeElement
);
}
if (event.key === "ArrowLeft") {
event.preventDefault();
newIndex = startingIndex - 1;
if (newIndex < 0) newIndex = chips.length - 1;
} else if (event.key === "ArrowRight") {
event.preventDefault();
newIndex = (startingIndex + 1) % chips.length;
} else if (event.key === "Enter") {
const focusedChip = document.activeElement;
const index = Array.from(containerRef.current.querySelectorAll(".search-searchCategory-categoryGridItem")).indexOf(focusedChip);
if (index !== -1) {
setChecked({ index, label: chips[index].label });
return;
}
}
if (newIndex !== undefined) {
const chipElement = containerRef.current.querySelector(`.search-searchCategory-categoryGridItem:nth-child(${newIndex + 1})`);
if (chipElement) chipElement.focus();
}
},
[checked.index, chips, setChecked]
);
// Handle button clicks
const handleButtonClick = direction => {
const multiplier = direction === "LEFT" ? -1 : 1;
containerRef.current.scrollBy({
left: multiplier * (containerRef.current.clientWidth / 2),
behavior: "smooth"
});
};
const clickCallback = (index, label) => {
if (scrollLeft === containerRef.current.scrollLeft) setChecked({ index, label });
if (section) section.scrollTo(null, 0);
};
return Spicetify.React.createElement(
"div",
{ className: "search-searchCategory-SearchCategory encore-dark-theme" },
Spicetify.React.createElement(
"div",
{ className: "search-searchCategory-wrapper contentSpacing" },
Spicetify.React.createElement(
"div",
{
className: `search-searchCategory-contentArea
${showLeftButton ? "search-searchCategory-showLeftButton" : ""}
${showRightButton ? "search-searchCategory-showRightButton" : ""}
${showRightButton && showLeftButton ? "search-searchCategory-showLeftButton search-searchCategory-showRightButton" : ""}`
.trim()
.replace(/\s+/g, " ")
},
Spicetify.React.createElement(
"div",
{
ref: containerRef,
className: "search-searchCategory-categoryGrid",
onScroll: handleResize,
onKeyDown: handleKeyDown,
role: "list",
tabIndex: 0,
onMouseDown: handleMouseDown
},
Spicetify.React.createElement(
"div",
{ role: "presentation" },
chips.map((chip, index) =>
Spicetify.React.createElement(
"a",
{
key: index,
draggable: "false",
className: "search-searchCategory-categoryGridItem",
tabIndex: "-1",
onClick: () => clickCallback(index, chip.label)
},
Spicetify.React.createElement(
Spicetify.ReactComponent.Chip,
{
isUsingKeyboard: false,
onClick: () => clickCallback(index, chip.label),
selected: checked.index === index,
selectedColorSet: "invertedLight",
tabIndex: "-1"
},
chip.label
)
)
)
)
),
Spicetify.React.createElement(
"div",
{ className: "search-searchCategory-carousel" },
Spicetify.React.createElement(
"button",
{
className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft`,
tabIndex: -1,
onClick: () => handleButtonClick("LEFT"),
inert: true
},
Spicetify.React.createElement("svg", {
viewBox: "0 0 16 16",
className: "Svg-img-icon-small-textBase",
dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-left"] }
})
),
Spicetify.React.createElement(
"button",
{
className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonRight`,
tabIndex: -1,
onClick: () => handleButtonClick("RIGHT"),
inert: true
},
Spicetify.React.createElement("svg", {
viewBox: "0 0 16 16",
className: "Svg-img-icon-small-textBase",
dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-right"] }
})
)
)
)
)
);
};
const Content = () => {
const defaultFilter = sessionStorage.getItem("comfy-settings-filter") ? JSON.parse(sessionStorage.getItem("comfy-settings-filter")) : null;
const [filter, setFilter] = Spicetify.React.useState(defaultFilter ?? { index: 0, label: "All" });
Spicetify.React.useEffect(() => {
if (startup) {
return;
}
sessionStorage.setItem("comfy-settings-filter", JSON.stringify(filter));
}, [filter]);
return Spicetify.React.createElement(
"div",
{ className: "comfy-settings" },
Spicetify.React.createElement(Carousel, {
chips: [
{ label: "All" },
{ label: "Settings" },
{ label: "Banner Image" },
{ label: "Cover Art" },
{ label: "Playbar" },
{ label: "Tracklist" },
{ label: "Interface" },
{ label: "Colorscheme" }
],
checked: filter,
setChecked: setFilter
}),
Spicetify.React.createElement(Section, { name: "Colorscheme", filter }, [
{
type: Dropdown,
name: "Color-Scheme",
title: `Color Scheme`,
desc: "For faster loadtimes use cli to change color schemes",
options: () => {
const schemes = Object.keys(getConfig("Color-Schemes"));
const decapSchemes = schemes.map(function (x) {
return x.toLowerCase();
});
if (!decapSchemes.includes(configScheme.toLowerCase())) {
schemes.unshift(configScheme);
}
return schemes;
},
defaultVal: (configScheme =
(getConfig("Color-Schemes") &&
Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) ||
configScheme),
condition: getConfig("Color-Schemes") && !preloadedScheme && !document.querySelector("body > style.marketplaceCSS.marketplaceScheme"),
callback: (name, value) => {
updateScheme(value);
}
},
{
type: Dropdown,
name: `Scheme-Features`,
title: `Additional Features`,
description: "Extra tweaks to complete specific color schemes",
options: ["nord", "nord-flat", "kitty"],
callback: (name, value, options, defaultVal) => {
waitForDeps(
"main",
main => {
main.classList.remove(...options.map(option => `Comfy-${option}-Snippet`));
if (value !== defaultVal) main.classList.add(`Comfy-${value}-Snippet`);
},
true,
"getElementById"
);
}
},
{
type: Dropdown,
name: "Flatten-Colors",
title: "Flatten Theme Colors",
desc: "Sets main color to the same color as sidebar",
defaultVal: "off",
options: ["off", "normal", "reverse"],
callback: (name, value, options, defaultVal) => {
waitForDeps(
"main",
main => {
main.classList.remove(...options.map(option => `${name}-${option}`));
if (value !== defaultVal) main.classList.add(`${name}-${value}`);
},
true,
"getElementById"
);
}
},
{
type: Dropdown,
name: "Dark-Modals",
title: "Modal Colors",
desc: "Forces modals to be dark/light, useful for light mode schemes",
defaultVal: "light",
options: ["light", "dark"],
callback: (name, value, options, defaultVal) => {
waitForDeps(
"main",
main => {
const customXpui = document.getElementById("/xpui.css");
if (value === defaultVal && customXpui) {
customXpui.remove();
main.classList.remove(`Comfy-${name}-Snippet`);
}
if (value !== defaultVal && !customXpui) {
fetch("xpui.css")
.then(res => res.text())
.then(text => {
const result = text.replace(
/(\.encore-dark-theme,\.encore-dark-theme)/g,
".GenericModal__overlay .encore-light-theme,dialog .encore-light-theme,$1"
);
const newStyle = document.createElement("style");
newStyle.textContent = result;
newStyle.id = "/xpui.css";
document.head.appendChild(newStyle);
main.classList.add(`Comfy-${name}-Snippet`);
})
.catch(e => console.error(`[Comfy-Error]: ${name}`, e));
}
},
true,
"getElementById"
);
}
}
]),
Spicetify.React.createElement(Section, { name: "Interface", filter }, [
{
type: Input,
inputType: "text",
name: "App-Title",
title: "Application Title",
defaultVal: Spicetify.AppTitle?.get(),
desc: "Change the title of the application, leave blank to reset",
callback: value => {
waitForDeps("Spicetify.Platform.UserAPI", async () => {
const productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service;
await productState.delOverridesValues({ keys: ["name"] });
if (value) await productState.putOverridesValues({ pairs: { name: value } });
});
}
},
{
type: Input,
inputType: "number",
name: "App-Titlebar-Height",
title: "Titlebar Height",
defaultVal: Spicetify.Platform.version >= "1.2.46.462" ? "64" : "40",
min: "0",
condition: Spicetify.Platform.version >= "1.2.32.997",
callback: (value, name, defaultVal) => {
waitForDeps(["Spicetify.CosmosAsync"], async () => {
await Spicetify.CosmosAsync.post("sp://messages/v1/container/control", {
type: "update_titlebar",
height: `${(value === "0" ? "1" : value) || defaultVal}px`
});
document.documentElement.style.setProperty("--comfy-topbar-height", value ? value + "px" : "");
});
},
callbackOverride: true
},
{
type: Input,
inputType: "number",
name: "Button-Radius",
title: "Button Radius",
defaultVal: "8",
min: "0",
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement("h4", null, "Change how circular buttons are:"),
Spicetify.React.createElement("li", null, "Comfy default: 8px"),
Spicetify.React.createElement("li", null, "Spotify default: 50px")
),
callback: value => document.documentElement.style.setProperty("--button-radius", value ? value + "px" : "")
},
{
type: SubSection,
name: "Topbar-Inside-Titlebar-Snippet",
title: "Move Topbar Inside Titlebar",
defaultVal: false,
condition: Spicetify.Platform.version <= "1.2.46.462" && !document.querySelector(":root .global-nav"),
callback: value => {
if (document.querySelector(":root .global-nav")) return;
waitForDeps(
[".Root__top-container", ".main-topBar-container"],
elements => {
const [container, topbar] = elements;
const entryPoint = document.querySelector(".Root__top-bar") ?? document.querySelector(".Root__main-view");
const grid = value ? container : entryPoint;
grid.insertBefore(topbar, grid.firstChild);
},
true
);
},
items: [
{
type: Toggle,
name: "Collapse-Topbar-Snippet",
title: "Collapse List Items",
defaultVal: true
}
],
collapseItems: true
},
{
type: Toggle,
name: "Remove-DJ-Prompt",
title: "Remove your DJ prompt",
desc: "Hides the prompt 'Click to start listening' in the library",
defaultVal: true
},
{
type: Toggle,
name: "Compact-Context-Menu",
title: "Compact Context Menu",
defaultVal: true
},
{
type: SubSection,
name: "Custom-Font",
title: "Custom Font",
defaultVal: false,
callback: value => {
if (!value) {
document.documentElement.style.setProperty("--font-family", "");
document.documentElement.style.setProperty("--encore-title-font-stack", "");
document.documentElement.style.setProperty("--encore-body-font-stack", "");
}
},
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement(
"div",
{
style: {
// tippy doesnt like loading images
height: "375px",
width: "242px"
}
},
Spicetify.React.createElement("img", {
src: "https://raw.githubusercontent.com/Tetrax-10/Nord-Spotify/master/assets/font/font-url.png",
alt: "preview",
style: {
height: "300px"
}
}),
Spicetify.React.createElement("h4", null, "Usage:"),
Spicetify.React.createElement("li", null, "Font Name (if installed)"),
Spicetify.React.createElement("li", null, "URL (Google Fonts)")
)
),
items: [
{
type: Input,
inputType: "text",
name: "Font",
title: "Font",
defaultVal: "Placeholder",
callback: value => {
let fontFamily = value;
if (isValidUrl(value)) {
fontFamily = decodeURIComponent(value.match(/family=([^&:]+)/)?.[1]?.replace(/\+/g, " "));
if (!document.getElementById("custom-font")) {
const link = document.createElement("link");
link.rel = "preload stylesheet";
link.as = "style";
link.href = value;
link.id = "custom-font";
document.head.appendChild(link);
} else {
document.getElementById("custom-font").href = value;
}
}
document.documentElement.style.setProperty("--font-family", fontFamily);
document.documentElement.style.setProperty("--encore-title-font-stack", fontFamily);
document.documentElement.style.setProperty("--encore-body-font-stack", fontFamily);
}
}
]
},
{
type: SubSection,
name: "Home-Header-Snippet",
title: "Colorful Home Header",
defaultVal: true,
callback: value => {
if (!value) {
waitForDeps(
"main",
main => {
main.classList.remove("Home-Header-Snippet");
document.documentElement.style.setProperty("--home-header-color", "");
},
true,
"getElementById"
);
}
},
items: [
{
type: Input,
inputType: "text",
includePicker: true,
name: "Home-Header-Color",
title: "Custom Color",
defaultVal: "none",
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement("li", null, "name (red, blue, (--var), etc)"),
Spicetify.React.createElement("li", null, "hex (#000000)"),
Spicetify.React.createElement("li", null, "rgb (0, 0, 0)"),
Spicetify.React.createElement("li", null, "rgba (0, 0, 0, 1)")
),
callback: (value, name) => {
waitForDeps(
"main",
main => {
document.documentElement.style.setProperty("--home-header-color", value);
if (value === "") {
main.classList.remove(name);
} else {
main.classList.add(name);
}
},
true,
"getElementById"
);
}
}
],
collapseItems: true
},
{
type: Toggle,
name: "Horizontal-pageLinks-Snippet",
title: "Horizontal Page Links",
defaultVal: false,
condition: Spicetify.Platform.version <= "1.2.46.462" && !document.querySelector(":root .global-nav")
}
]),
Spicetify.React.createElement(Section, { name: "Tracklist", filter }, [
{
type: Toggle,
name: "Remove-Tracklist-Index",
title: "Remove Tracklist Index",
desc: "Hides the numbers / count next to songs",
defaultVal: true
},
{
type: Toggle,
name: "Remove-Column-Bar-Snippet",
title: "Remove Column Bar",
desc: "Hides the column bar above tracklist",
defaultVal: true,
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement(
"div",
{
style: {
// tippy doesnt like loading images
height: "120px"
}
},
Spicetify.React.createElement("img", {
src: "https://github.com/Comfy-Themes/Spicetify/blob/main/images/settings/column-bar.png?raw=true",
alt: "preview",
style: {
width: "100%"
}
})
)
)
},
{
type: Toggle,
name: "Remove-Tracklist-Gradient-Noise",
title: "Remove Gradient Noise",
defaultVal: false,
desc: "Remove the noise from the gradient",
callback: value => {
document.documentElement.style.setProperty("--tracklist-gradient-noise", value ? "none" : "");
}
},
{
type: Input,
inputType: "number",
name: "Tracklist-Gradient-Height",
title: "Gradient Height",
defaultVal: "232",
min: "0",
desc: "Change the height of the gradient (the transparent part of the tracklist)",
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement("h4", null, "Set to 0 to disable the gradient!")
),
callback: value => document.documentElement.style.setProperty("--tracklist-gradient-height", value ? value + "px" : "")
},
{
type: Input,
inputType: "number",
name: "Tracklist-Gradient-Opacity",
title: "Gradient Opacity",
defaultVal: "0.6",
min: "0",
max: "1",
step: "0.1",
desc: "Change the opacity of the gradient (0 -> 1)",
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement("h4", null, "Set to 0 for no gradient color!")
),
callback: value => document.documentElement.style.setProperty("--tracklist-gradient-opacity", value || "")
}
]),
Spicetify.React.createElement(Section, { name: "Playbar", filter }, [
{
type: Toggle,
name: "Custom-Playbar-Snippet",
title: "Custom Playbar Layout",
defaultVal: true,
desc: "Comfy's out of box playbar design"
},
{
type: Toggle,
name: "Playbar-Above-Right-Panel-Snippet",
title: "Above Right Panel",
desc: "Moves the playbar above the right panel",
defaultVal: false,
condition: Spicetify.Platform.version <= "1.2.46.462" && !document.querySelector(":root .global-nav"),
callback: value => {
waitForDeps(
".Root__top-container",
topContainer => {
const playbar = topContainer.querySelector(".Root__now-playing-bar");
if (value) {
const rightbar = topContainer.querySelector(".Root__right-sidebar");
const resizeObserver = new ResizeObserver(entries => {
if (getConfig("Playbar-Above-Right-Panel-Snippet")) {
for (let entry of entries) {
if (entry.target === rightbar) {
let newWidth = entry.contentRect.width;
if (newWidth == 0) {
const localStorageWidth = localStorage.getItem("223ni6f2epqcidhx5etjafeai:panel-width-saved");
if (localStorageWidth) {
newWidth = localStorageWidth;
} else {
newWidth = 420;
}
}
playbar.style.width = `${newWidth}px`;
break;
}
}
} else {
resizeObserver.disconnect();
}
});
resizeObserver.observe(rightbar);
} else {
playbar.style.width = "";
}
},
true
);
}
},
{
type: Toggle,
name: "Smooth-Progress-Bar-Snippet",
title: "Smooth Progress Bar",
desc: "Makes the progress bar ease its movement giving the appearance of a smoother transition",
defaultVal: true
},
{
type: Toggle,
name: "Hoverable-Timers-Snippet",
title: "Hoverable Playback Timers",
defaultVal: false
},
{
type: Toggle,
name: "Remove-Connect-Bar-Snippet",
title: "Remove Connect Bar",
defaultVal: false
},
{
type: Toggle,
name: "Remove-Progress-Bar-Gradient-Snippet",
title: "Remove Progress Bar Gradient",
defaultVal: false
},
{
type: Toggle,
name: "Remove-Lyrics-Button-Snippet",
title: "Remove Lyrics Button",
defaultVal: false
}
]),
Spicetify.React.createElement(Section, { name: "Cover Art", filter }, [
{
type: SubSection,
name: "Custom-Cover-Art-Dimensions",
title: "Custom Dimensions",
defaultVal: false,
callback: value => {
if (!value) {
document.documentElement.style.setProperty("--cover-art-width", "");
document.documentElement.style.setProperty("--cover-art-height", "");
document.documentElement.style.setProperty("--cover-art-radius", "");
document.documentElement.style.setProperty("--cover-art-left", "");
document.documentElement.style.setProperty("--cover-art-bottom", "");
}
},
tippy: Spicetify.React.createElement(
Spicetify.React.Fragment,
null,
Spicetify.React.createElement("h4", null, "Change the size of the cover art:"),
Spicetify.React.createElement("li", null, "Comfy default: (84px, 84px, 8px, 20px)"),
Spicetify.React.createElement("li", null, "Spotify de
gitextract_zuo02ba5/ ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ └── build.yml ├── .gitignore ├── .prettierrc ├── Comfy/ │ ├── README.md │ ├── app.css │ ├── app.scss │ ├── assets/ │ │ ├── _main.scss │ │ ├── _navbar.scss │ │ ├── _now_playing.scss │ │ ├── _settings.scss │ │ ├── _snippets.scss │ │ ├── _top_bar.scss │ │ └── _tracklist.scss │ ├── color.ini │ ├── package.json │ ├── theme.js │ ├── theme.script.js │ └── user.css ├── LICENCE ├── README.md ├── install.ps1 ├── install.sh ├── manifest.json ├── uninstall.ps1 └── uninstall.sh
SYMBOL INDEX (11 symbols across 1 files)
FILE: Comfy/theme.script.js
function updateZoomVariable (line 65) | function updateZoomVariable() {
function getConfig (line 1820) | function getConfig(key) {
function setConfig (line 1824) | function setConfig(key, value, message, silent) {
function isPromise (line 1832) | function isPromise(p) {
function isValidUrl (line 1839) | function isValidUrl(urlString) {
function waitForDeps (line 1847) | async function waitForDeps(dependencies, callback, element = false, elem...
function updateBanner (line 1896) | async function updateBanner() {
function updateScheme (line 1970) | function updateScheme(scheme, message) {
function parseIni (line 1996) | function parseIni(data) {
function hexToRGB (line 2041) | function hexToRGB(hex) {
function hashString (line 2063) | async function hashString(str) {
Condensed preview — 28 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (260K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 63,
"preview": "# These are supported funding model platforms\n\nko_fi: OhItsTom\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 961,
"preview": "---\nname: Bug report\nabout: Please provide as much information as possible!\ntitle: ''\nlabels: bug\nassignees: ohitstom\n\n-"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".github/workflows/build.yml",
"chars": 756,
"preview": "on:\n push:\n branches: [main, beta]\n\nname: Build\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: "
},
{
"path": ".gitignore",
"chars": 99,
"preview": "CHECKUP.txt\n/.vscode/\n.prettierignore\nComfy/node_modules\nComfy/package-lock.json\nComfy/app.css.map\n"
},
{
"path": ".prettierrc",
"chars": 108,
"preview": "{\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",
"chars": 5526,
"preview": "\n\n### 🎨 Color Schemes\n\n#### Collection\n\n<details><summary>Catppuccin</summary>\n<details><"
},
{
"path": "Comfy/app.css",
"chars": 74963,
"preview": ":root .global-nav .Root__main-view .main-view-container .main-entityHeader-container{padding:32px;align-items:center;mar"
},
{
"path": "Comfy/app.scss",
"chars": 8497,
"preview": "@forward \"assets/main\";\n@forward \"assets/navbar\";\n@forward \"assets/now_playing\";\n@forward \"assets/settings\";\n@forward \"a"
},
{
"path": "Comfy/assets/_main.scss",
"chars": 6412,
"preview": "// Global Nav Support\n:root .global-nav {\n\t.Root__main-view .main-view-container .main-entityHeader-container {\n\t\tpaddin"
},
{
"path": "Comfy/assets/_navbar.scss",
"chars": 866,
"preview": ":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"
},
{
"path": "Comfy/assets/_now_playing.scss",
"chars": 3085,
"preview": ":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("
},
{
"path": "Comfy/assets/_settings.scss",
"chars": 11613,
"preview": "// Spotify settings\n.x-settings-container {\n\tmax-width: unset;\n}\n\n.x-toggle-indicatorWrapper {\n\tborder-radius: var(--but"
},
{
"path": "Comfy/assets/_snippets.scss",
"chars": 15042,
"preview": ":root {\n\t&.spotify__container--is-desktop.spotify__os--is-windows #main.Topbar-Inside-Titlebar-Snippet {\n\t\t.main-topBar-"
},
{
"path": "Comfy/assets/_top_bar.scss",
"chars": 921,
"preview": ":root .main-topBar-container {\n\t.main-topBar-topbarContent *,\n\t.main-topBar-topbarContentWrapper * {\n\t\tjustify-content: "
},
{
"path": "Comfy/assets/_tracklist.scss",
"chars": 3657,
"preview": ":root {\n\n\t// Tracklist\n\t.main-trackList-active .main-trackList-rowTitle {\n\t\tcolor: var(--spice-text) !important;\n\t\ttext-"
},
{
"path": "Comfy/color.ini",
"chars": 19450,
"preview": "[Comfy]\ntext = FFFFFF\nsubtext = B9BBBE\nmain = 23283D\nmain-elevated = 32364A\n"
},
{
"path": "Comfy/package.json",
"chars": 613,
"preview": "{\n\t\"name\": \"comfy\",\n\t\"version\": \"1.0.0\",\n\t\"description\": \"Stay comfy while listening to music\",\n\t\"main\": \"theme.script.j"
},
{
"path": "Comfy/theme.js",
"chars": 265,
"preview": "(() => {\n\tconst themeScript = document.createElement(\"SCRIPT\");\n\tthemeScript.setAttribute(\"type\", \"text/javascript\");\n\tt"
},
{
"path": "Comfy/theme.script.js",
"chars": 70570,
"preview": "/* \ntofix:\n- negative values\n- Reloading when filtered causes options to not be applied\n- fonts titles and stuff css\n\nto"
},
{
"path": "Comfy/user.css",
"chars": 71,
"preview": "@import url(\"https://comfy-themes.github.io/Spicetify/Comfy/app.css\");\n"
},
{
"path": "LICENCE",
"chars": 475,
"preview": " DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n Version 2, December 2004\n\nCopyright (C) 2004"
},
{
"path": "README.md",
"chars": 3377,
"preview": "<table>\n <tr>\n <td>\n <img align=\"right\" src=\"./images/preview.png\" alt=\"Preview\" width=\"50%\">\n <div align="
},
{
"path": "install.ps1",
"chars": 2541,
"preview": "# GPL license.\n# Edited from project Denoland install script (https://github.com/denoland/deno_install)\nparam (\n [strin"
},
{
"path": "install.sh",
"chars": 821,
"preview": "#!/bin/sh\n\nset -e\n\n# Download URL\ntheme_url=\"https://raw.githubusercontent.com/Comfy-Themes/Spicetify/main/Comfy\"\n\n# Set"
},
{
"path": "manifest.json",
"chars": 1281,
"preview": "[\n\t{\n\t\t\"name\": \"Comfy\",\n\t\t\"description\": \"Stay comfy while listening to music\",\n\t\t\"preview\": \"images/preview.png\",\n\t\t\"re"
},
{
"path": "uninstall.ps1",
"chars": 1470,
"preview": "# GPL license.\n# Edited from project Denoland install script (https://github.com/denoland/deno_install)\nparam (\n [strin"
},
{
"path": "uninstall.sh",
"chars": 519,
"preview": "#!/bin/sh\n\nset -e\n\necho \"Uninstalling\"\nspicetify config current_theme \" \" color_scheme \" \"\n\necho \"Deleting files\"\nwhile "
}
]
About this extraction
This page contains the full source code of the NYRI4/Comfy-spicetify GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 28 files (229.1 KB), approximately 68.7k tokens, and a symbol index with 11 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.