├── .gitattributes ├── remote ├── user.css ├── theme.js └── color.ini ├── README.md ├── assets ├── images │ └── base.png └── icons │ ├── play.svg │ ├── circle-play.svg │ ├── skip-back.svg │ ├── skip-forward.svg │ ├── pause.svg │ ├── airplay.svg │ ├── list.svg │ ├── circle-pause.svg │ ├── repeat.svg │ ├── repeat-1.svg │ ├── maximize-2.svg │ ├── heart.svg │ ├── shopping-cart.svg │ ├── shuffle.svg │ └── heart-off.svg ├── .hintrc ├── Spicetify-ShadeX.code-workspace ├── manifest.json ├── src ├── theme.js ├── color.ini └── user.css ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.yml └── workflows │ └── jekyll-gh-pages.yml ├── install ├── install.sh ├── Lucid.ps1 └── Functions.psm1 ├── dev ├── apply.ps1 └── del_workflows.ps1 ├── LICENSE └── README-Marketplace.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /remote/user.css: -------------------------------------------------------------------------------- 1 | @import url("https://sanooj.is-a.dev/Spicetify-ShadeX/src/user.css"); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spicetify-ShadeX 2 | A minimal theme for spotify inspired by shadcn/ui design 3 | -------------------------------------------------------------------------------- /assets/images/base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanoojes/Spicetify-ShadeX/HEAD/assets/images/base.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "development" 4 | ], 5 | "browserslist": [ 6 | "defaults", 7 | "not ie 11", 8 | "not samsung <= 25" 9 | ] 10 | } -------------------------------------------------------------------------------- /Spicetify-ShadeX.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | }, 6 | { 7 | "path": "../../../AppData/Roaming/spicetify" 8 | } 9 | ], 10 | "settings": {} 11 | } -------------------------------------------------------------------------------- /assets/icons/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /remote/theme.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | const themeScript = document.createElement("script"); 3 | themeScript.type = "text/javascript"; 4 | themeScript.src = "https://sanooj.is-a.dev/Spicetify-ShadeX/src/theme.js"; 5 | document.head.appendChild(themeScript); 6 | })(); 7 | -------------------------------------------------------------------------------- /assets/icons/circle-play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/skip-back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/skip-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/airplay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/circle-pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/repeat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/repeat-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/maximize-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/shuffle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icons/heart-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ShadeX", 3 | "description": "A Minimal Spicetify theme inspired by Shadcn/ui Design", 4 | "preview": "assets/images/base.png", 5 | "readme": "README-Marketplace.md", 6 | "usercss": "https://cdn.jsdelivr.net/gh/sanoojes/Spicetify-ShadeX@main/src/user.css", 7 | "schemes": "https://cdn.jsdelivr.net/gh/sanoojes/Spicetify-ShadeX@main/src/color.ini", 8 | "include": [ 9 | "https://cdn.jsdelivr.net/gh/sanoojes/Spicetify-ShadeX@main/src/theme.js" 10 | ], 11 | "authors": [ 12 | { 13 | "name": "Sanoojes", 14 | "url": "https://github.com/sanoojes" 15 | } 16 | ], 17 | "tags": ["shadcn", "dark", "minimal"] 18 | } 19 | -------------------------------------------------------------------------------- /src/theme.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | while (!Spicetify?.React || !Spicetify?.ReactDOM || !Spicetify?.Platform) { 3 | await new Promise((resolve) => setTimeout(resolve, 100)); 4 | } 5 | 6 | const isGlobalNav = !!( 7 | Spicetify.Platform.version >= "1.2.46" || 8 | document.querySelector(".globalNav") || 9 | document.querySelector(".Root__globalNav") || 10 | document.getElementById("global-nav-bar") || 11 | document.querySelector(".main-globalNav-searchSection") 12 | ); 13 | 14 | if (isGlobalNav) { 15 | document.body.classList.add("global-nav"); 16 | } else { 17 | document.body.classList.add("control-nav"); 18 | } 19 | })(); 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /install/install.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | # Download URL 6 | theme_url="https://raw.githubusercontent.com/sanoojes/Spicetify-ShadeX/main/src/" 7 | 8 | # Setup directories to download to 9 | spice_dir="$(dirname "$(spicetify -c)")" 10 | theme_dir="${spice_dir}/Themes" 11 | 12 | # Make directories if needed 13 | mkdir -p "${theme_dir}/ShadeX" 14 | 15 | # Download latest tagged files into correct director 16 | echo "Downloading ShadeX..." 17 | curl --silent --output "${theme_dir}/ShadeX/color.ini" "${theme_url}/color.ini" 18 | curl --silent --output "${theme_dir}/ShadeX/user.css" "${theme_url}/user.css" 19 | curl --silent --output "${theme_dir}/ShadeX/theme.js" "${theme_url}/theme.js" 20 | echo "Done" 21 | 22 | # Apply theme 23 | echo "Applying theme" 24 | spicetify config current_theme ShadeX color_scheme base 25 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 26 | spicetify apply 27 | 28 | echo "All done!" -------------------------------------------------------------------------------- /dev/apply.ps1: -------------------------------------------------------------------------------- 1 | $srcFolder = "./src" 2 | $destinationFolder = "$(spicetify path userdata)\Themes\ShadeX" 3 | 4 | # Create the destination folder if it doesn't exist 5 | if (!(Test-Path $destinationFolder)) { 6 | New-Item -ItemType Directory -Path $destinationFolder -Force 7 | } 8 | 9 | Write-Host "Copying theme files..." 10 | try { 11 | Copy-Item -Path "$srcFolder\*.*" -Destination "$destinationFolder" -Recurse -Force 12 | Write-Host "Theme files copied successfully!" 13 | } catch { 14 | Write-Host "Error copying files: $($_.Exception.Message)" 15 | } 16 | Write-Host "Applying Spicetify theme..." 17 | Invoke-Expression "spicetify apply" 18 | 19 | while ((Get-Item $destinationFolder).LastWriteTime -eq $lastWriteTime) { 20 | Start-Sleep -Milliseconds 500 # Check every 500ms 21 | } 22 | 23 | Write-Host "Theme applied successfully!" 24 | 25 | $configPath = (spicetify path -c) 26 | Write-Host "Config path: $configPath" 27 | Write-Host "Theme path: $destinationFolder" -------------------------------------------------------------------------------- /src/color.ini: -------------------------------------------------------------------------------- 1 | [dark] 2 | text = fafafa 3 | subtext = 737373 4 | secondary-text = 0a0a0a 5 | main = 0a0a0a 6 | main-elevated = 171717 7 | accent = fafafa 8 | sidebar = 0a0a0a 9 | player = 0a0a0a 10 | card = 0a0a0a 11 | highlight = 171717 12 | highlight-elevated = 171717 13 | border = 262626 14 | shadow = 262626 15 | selected-row = fafafa 16 | button = 0a0a0a 17 | button-hover = 171717 18 | secondary-button = fafafa 19 | secondary-button-hover = e5e5e5 20 | button-active = fafafa 21 | button-disabled = a1a1a6 22 | tab-active = 171717 23 | misc = 404040 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sanooj Es 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-Marketplace.md: -------------------------------------------------------------------------------- 1 |
2 |

Spiceity ShadeX

3 | A Minimal Spotify theme inspired by Shadcn/ui Design 4 | 5 |
6 | 7 | **Consider starring us !** 8 | 9 | ## Join the Community! 10 | 11 | - **Discord:** [https://discord.gg/knXP88Zbph](https://discord.gg/knXP88Zbph) a small community for Lucid theme tag me there ! 12 | - **GitHub Issues:** [https://github.com/sanoojes/Spicetify-ShadeX/issues](https://github.com/sanoojes/Spicetify-ShadeX/issues) 13 | 14 |
15 | 16 | ## Dependencies 17 | 18 | - Latest version of [Spicetify](https://github.com/spicetify/spicetify-cli). 19 | - Latest version of [Spotify](https://www.spotify.com/download). 20 | - [Inter](https://fonts.google.com/specimen/Inter) font family, from Google Fonts. 21 | 22 | ## Troubleshooting 23 | 24 | ### Issues when installing from Spicetify Marketplace 25 | 26 | ```sh 27 | spicetify config current_theme marketplace color_scheme marketplace 28 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 29 | spicetify apply 30 | ``` 31 | 32 | ### There isn't any blur at all 33 | 34 | Open Spotify settings and turn on `Enable hardware acceleration`. 35 | 36 | ### Some custom app on the left navbar has a wrong icon 37 | 38 | Please report about that via the repository's issues page. 39 | 40 | ## License 41 | 42 | [MIT License](LICENSE) 43 | -------------------------------------------------------------------------------- /.github/workflows/jekyll-gh-pages.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Build job 26 | build: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v4 31 | - name: Setup Pages 32 | uses: actions/configure-pages@v5 33 | - name: Build with Jekyll 34 | uses: actions/jekyll-build-pages@v1 35 | with: 36 | source: ./ 37 | destination: ./_site 38 | - name: Upload artifact 39 | uses: actions/upload-pages-artifact@v3 40 | 41 | # Deployment job 42 | deploy: 43 | environment: 44 | name: github-pages 45 | url: ${{ steps.deployment.outputs.page_url }} 46 | runs-on: ubuntu-latest 47 | needs: build 48 | steps: 49 | - name: Deploy to GitHub Pages 50 | id: deployment 51 | uses: actions/deploy-pages@v4 52 | -------------------------------------------------------------------------------- /dev/del_workflows.ps1: -------------------------------------------------------------------------------- 1 | # Set colors for output 2 | $green = [ConsoleColor]::Green 3 | $red = [ConsoleColor]::Red 4 | $yellow = [ConsoleColor]::Yellow 5 | $reset = [ConsoleColor]::White 6 | 7 | # Prompt for GitHub username and repository 8 | $username = Read-Host -Prompt "Enter your GitHub username" 9 | $repository = Read-Host -Prompt "Enter your GitHub repository name" 10 | 11 | # Function to get the total number of workflow runs 12 | function Get-TotalRuns { 13 | $runs = gh api -X GET /repos/$username/$repository/actions/runs | ConvertFrom-Json 14 | return $runs.workflow_runs.Count 15 | } 16 | 17 | # Function to delete all workflow runs 18 | function Delete-AllWorkflowRuns { 19 | $runs = gh api -X GET /repos/$username/$repository/actions/runs | ConvertFrom-Json 20 | $runIds = $runs.workflow_runs | Select-Object -ExpandProperty id 21 | 22 | foreach ($runId in $runIds) { 23 | Write-Host "Deleting workflow run with ID: $runId" -ForegroundColor Green 24 | gh api -X DELETE /repos/$username/$repository/actions/runs/$runId | Out-Null 25 | } 26 | 27 | Write-Host "All workflow runs have been deleted." -ForegroundColor Green 28 | } 29 | 30 | # Main loop 31 | while ($true) { 32 | $totalRuns = Get-TotalRuns 33 | 34 | # Display options 35 | Write-Host "Workflow Run Deleter for $username/$repository" -ForegroundColor Green 36 | Write-Host "Total Workflow Runs: $totalRuns" -ForegroundColor Yellow 37 | 38 | Write-Host "1. Delete all workflow runs" -ForegroundColor Green 39 | Write-Host "2. Exit" -ForegroundColor Green 40 | 41 | $choice = Read-Host -Prompt "Enter your choice" 42 | 43 | switch ($choice) { 44 | 1 { 45 | if ($totalRuns -gt 0) { 46 | Delete-AllWorkflowRuns 47 | } else { 48 | Write-Host "No workflow runs found to delete." -ForegroundColor Yellow 49 | } 50 | } 51 | 2 { 52 | Write-Host "Exiting..." 53 | break 54 | } 55 | default { 56 | Write-Host "Invalid choice. Please try again." -ForegroundColor Red 57 | } 58 | } 59 | 60 | Write-Host "" # Add a blank line for better readability 61 | } 62 | 63 | # Reset console color 64 | Write-Host -NoNewLine -ForegroundColor $reset -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: Report errors or unexpected behavior 3 | labels: [bug] 4 | body: 5 | - type: checkboxes 6 | attributes: 7 | label: Do you have the latest versions of Spicetify, Spotify and ShadeX? 8 | description: It is difficult to support all versions of Spicetify/Spotify, so we only provide support for the latest versions. And don't forget to update the theme itself if you've installed it locally, your issue may already have been fixed. 9 | options: 10 | - label: I'm using the latest versions of Spicetify, Spotify and ShadeX 11 | required: true 12 | - type: checkboxes 13 | attributes: 14 | label: Is there already an issue for your problem? 15 | description: Please make sure you are not creating an already submitted issue. Check closed issues as well. 16 | options: 17 | - label: I have checked older issues, open and closed 18 | required: true 19 | - type: checkboxes 20 | attributes: 21 | label: Is your problem definitely caused by the theme? 22 | description: Please make sure the theme is the source of the problem and not another extension/custom app or the Spotify app itself. 23 | options: 24 | - label: I have checked the app behavior without the theme and it is different 25 | required: true 26 | - type: textarea 27 | attributes: 28 | label: Environment & Computer Info 29 | description: | 30 | Please provide the details of the system ShadeX is running on: 31 | - Copy the information from the "About" window (`⋯` button -> Help -> About -> expand -> click the Copy to Clipboard button) 32 | - Write where you got the Spotify app 33 | 34 | Please also tell us how you installed the theme. 35 | value: | 36 | - Spotify version: 37 | - Installed from: (Windows Store, Spotify site, Flatpak, etc) 38 | - Spicetify version: 39 | - Color scheme: 40 | - Extensions: 41 | - Custom apps: 42 | - ShadeX installation method: (Spicetify Marketplace/PowerShell script/Bash script/Manual) 43 | placeholder: | 44 | - Spotify version: for Windows 1.2.11.916.geb595a67 45 | - Installed from: Spotify site 46 | - Spicetify version: v2.18.1 47 | - Color scheme: darkmono 48 | - Extensions: fullAlbumDate.js, adblock.js 49 | - Custom apps: marketplace, lyrics-plus 50 | - ShadeX installation method: Spicetify Marketplace 51 | render: Markdown 52 | validations: 53 | required: true 54 | - type: textarea 55 | attributes: 56 | label: Description 57 | description: | 58 | List steps to reproduce the error and details on what happens and what you expected to happen. 59 | placeholder: | 60 | 1. Please number your steps like so. 61 | 2. This helps readability of your instructions. 62 | 63 | Feel free to write down additional notes you may want us to know. 64 | validations: 65 | required: true 66 | - type: textarea 67 | attributes: 68 | label: Screenshots 69 | description: Place any screenshots of the issue here if needed 70 | validations: 71 | required: false 72 | -------------------------------------------------------------------------------- /remote/color.ini: -------------------------------------------------------------------------------- 1 | [dark] 2 | main = 121212 3 | subtext = aaaaaa 4 | shadow = 060606 5 | text = ffffff 6 | button = 00ffa1 7 | button-active = 00ffa1 8 | accent = 00ffa1 9 | card = 212121 10 | sidebar = 212121 11 | 12 | [light] 13 | main = F0F4F8 14 | subtext = 202020 15 | shadow = 060606 16 | text = 060606 17 | button = 00befd 18 | button-active = 00befd 19 | accent = 00befd 20 | card = F0F4F8 21 | sidebar = F0F4F8 22 | 23 | [comfy] 24 | main = 23283d 25 | subtext = aaaaaa 26 | shadow = 060606 27 | text = ffffff 28 | button = 35b8f3 29 | button-active = 35b8f3 30 | accent = 35b8f3 31 | card = 1e2233 32 | sidebar = 1e2233 33 | 34 | [darkgreen] 35 | main = 1B2421 36 | subtext = 7ca697 37 | shadow = 060606 38 | text = bfffe8 39 | button = BBF1DD 40 | button-active = BBF1DD 41 | accent = BBF1DD 42 | card = 141a16 43 | sidebar = 141a16 44 | 45 | [coffee] 46 | main = 533a28 47 | subtext = e0d3b8 48 | shadow = 060606 49 | text = fff7e5 50 | button = f0ddc2 51 | button-active = f0ddc2 52 | accent = f0ddc2 53 | card = 6a5139 54 | sidebar = 6a5139 55 | 56 | [violet] 57 | main = 362c48 58 | subtext = cac3d9 59 | shadow = 060606 60 | text = f1e9ff 61 | button = be98d9 62 | button-active = be98d9 63 | accent = be98d9 64 | card = 453a59 65 | sidebar = 453a59 66 | 67 | [dark-fluent] 68 | main = 272727 69 | subtext = 909090 70 | shadow = 060606 71 | text = ffffff 72 | button = 00befd 73 | button-active = 00befd 74 | accent = 00befd 75 | card = 323232 76 | sidebar = 323232 77 | 78 | [dark-bloom] 79 | main = 14141a 80 | subtext = 909090 81 | shadow = 060606 82 | text = ffffff 83 | button = 00ffa1 84 | button-active = 00ffa1 85 | accent = 00ffa1 86 | card = 22222a 87 | sidebar = 22222a 88 | 89 | [midnight-catppuccin] 90 | main = 11111b 91 | subtext = a6adc8 92 | shadow = 3e4058 93 | text = cdd6f4 94 | button = cdd6f4 95 | button-active = cdd6f4 96 | accent = f5c2e7 97 | card = 3e4058 98 | sidebar = 3e4058 99 | 100 | 101 | [biscuit] 102 | main = 191414 103 | subtext = 9c8181 104 | shadow = 3c3030 105 | text = dcc9bc 106 | button = dcc9bc 107 | button-active = dcc9bc 108 | accent = e46a3a 109 | card = 3c3030 110 | sidebar = 3c3030 111 | 112 | 113 | [greenland] 114 | main = 0a211f 115 | subtext = b2ffcb 116 | shadow = 2b413c 117 | text = e9fad4 118 | button = e9fad4 119 | button-active = e9fad4 120 | accent = abe95a 121 | card = 2b413c 122 | sidebar = 2b413c 123 | 124 | 125 | [macos] 126 | main = 191919 127 | subtext = cecece 128 | shadow = 383838 129 | text = f8f8f8 130 | button = 0860f2 131 | button-active = 0860f2 132 | accent = 0860f2 133 | card = 383838 134 | sidebar = 383838 135 | 136 | [tidal] 137 | main = 17171A 138 | subtext = fcfcfc 139 | shadow = 000000 140 | text = FFFFFF 141 | sidebar = 242528 142 | player = 242528 143 | card = 242528 144 | selected-row = FFFFFF 145 | button = FFFFFF 146 | button-active = 00FFFF -------------------------------------------------------------------------------- /install/Lucid.ps1: -------------------------------------------------------------------------------- 1 | [CmdletBinding()] 2 | param ( 3 | [ValidateSet('Install', 'Uninstall', 'Update')] 4 | [string]$Action = 'Install' 5 | ) 6 | begin { 7 | $ErrorActionPreference = 'Stop' 8 | Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process -Force 9 | [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 10 | $previousConsoleTitle = $Host.UI.RawUI.WindowTitle 11 | $Host.UI.RawUI.WindowTitle = 'ShadeX Installer' 12 | } 13 | process { 14 | Clear-Host 15 | 16 | Write-Verbose -Message 'Downloading Functions module...' -Verbose 17 | $moduleName = 'Functions' 18 | $Temp = [System.IO.Path]::GetTempPath() 19 | $modulePath = "$Temp\$moduleName.psm1" 20 | $Parameters = @{ 21 | Uri = ( 22 | 'https://raw.githubusercontent.com/sanoojes/Spicetify-ShadeX/main/install/Functions.psm1' 23 | ) 24 | UseBasicParsing = $true 25 | OutFile = $modulePath 26 | } 27 | Invoke-WebRequest @Parameters 28 | Import-Module -Name $modulePath 29 | 30 | Clear-Host 31 | Write-HelloMessage 32 | 33 | $minimumPowerShellVersion = 5 34 | $currentPowerShellVersion = $PSVersionTable.PSVersion.Major 35 | 36 | if ($currentPowerShellVersion -lt $minimumPowerShellVersion) { 37 | Write-Error -Message ( 38 | "Your PowerShell version is $currentPowerShellVersion.`n" + 39 | "The minimum version required to run this script is $minimumPowerShellVersion." 40 | ) 41 | } 42 | 43 | $isSpicetifyInstalled = Test-Spicetify 44 | 45 | switch ($Action) { 46 | 'Uninstall' { 47 | if (-not $isSpicetifyInstalled) { 48 | Write-Error -Message 'Failed to detect Spicetify installation!' 49 | } 50 | 51 | $spicetifyFolders = Get-SpicetifyFoldersPaths 52 | $Parameters = @{ 53 | Path = $spicetifyFolders.ShadeXPath 54 | Config = $spicetifyFolders.configPath 55 | } 56 | 57 | $Host.UI.RawUI.Flushinputbuffer() 58 | $choice = $Host.UI.PromptForChoice( 59 | '', 60 | 'Do you plan to use the marketplace to install the next theme?', 61 | ('&Yes', '&No'), 62 | 0 63 | ) 64 | if ($choice -eq 0) { 65 | $Parameters.Value = 'marketplace' 66 | } 67 | 68 | Uninstall-ShadeX @Parameters 69 | } 70 | 'Update' { 71 | if (-not $isSpicetifyInstalled) { 72 | Write-Error -Message 'Failed to detect Spicetify installation!' 73 | } 74 | 75 | $spicetifyFolders = Get-SpicetifyFoldersPaths 76 | $Parameters = @{ 77 | Path = (Get-ShadeX) 78 | Destination = $spicetifyFolders.ShadeXPath 79 | Config = $spicetifyFolders.configPath 80 | Type = (Get-ThemeType -Path $spicetifyFolders.ShadeXPath) 81 | } 82 | Install-ShadeX @Parameters 83 | } 84 | 'Install' { 85 | if (-not (Test-Spotify)) { 86 | Write-Host -Object 'Spotify not found.' -ForegroundColor Yellow 87 | 88 | $Host.UI.RawUI.Flushinputbuffer() 89 | $choice = $Host.UI.PromptForChoice('', 'Install Spotify?', ('&Yes', '&No'), 0) 90 | if ($choice -eq 1) { 91 | exit 92 | } 93 | 94 | Install-Spotify 95 | } 96 | 97 | if (-not $isSpicetifyInstalled) { 98 | Write-Host -Object 'Spicetify not found.' -ForegroundColor Yellow 99 | 100 | $Host.UI.RawUI.Flushinputbuffer() 101 | $choice = $Host.UI.PromptForChoice('', 'Install Spicetify?', ('&Yes', '&No'), 0) 102 | if ($choice -eq 1) { 103 | exit 104 | } 105 | 106 | Install-Spicetify 107 | Install-Marketplace 108 | } 109 | 110 | $spicetifyFolders = Get-SpicetifyFoldersPaths 111 | $Parameters = @{ 112 | Path = (Get-ShadeX) 113 | Destination = $spicetifyFolders.ShadeXPath 114 | Config = $spicetifyFolders.configPath 115 | ColorScheme = (Get-WindowsAppsTheme) 116 | } 117 | 118 | $Host.UI.RawUI.Flushinputbuffer() 119 | $choice = $Host.UI.PromptForChoice( 120 | '', 121 | 'Use the files that fetch all the code remotely (auto-update)' + 122 | 'or store all of the code locally (no auto-update)?', 123 | ('&Remote', '&Local'), 124 | 0 125 | ) 126 | if ($choice -eq 1) { 127 | $Parameters.Type = 'Local' 128 | } 129 | 130 | Install-ShadeX @Parameters 131 | } 132 | } 133 | } 134 | end { 135 | Write-ByeMessage 136 | Remove-Module -Name $moduleName -Force 137 | Remove-Item -Path $modulePath -Force 138 | [Console]::Title = $previousConsoleTitle 139 | Start-Sleep -Seconds 5 140 | } -------------------------------------------------------------------------------- /install/Functions.psm1: -------------------------------------------------------------------------------- 1 | #Requires -Version 5.0 2 | 3 | #region Console helpers 4 | function Write-Center { 5 | [CmdletBinding()] 6 | param ( 7 | [Parameter(Mandatory)] 8 | [string]$Message, 9 | 10 | [string]$ForegroundColor = $Host.UI.RawUI.ForegroundColor 11 | ) 12 | process { 13 | $freeSpace = $Host.UI.RawUI.BufferSize.Width - $Message.Length 14 | $spaces = ' ' * [Math]::Floor($freeSpace / 2) 15 | Write-Host -Object ($spaces + $Message + $spaces) -ForegroundColor $ForegroundColor 16 | } 17 | } 18 | 19 | function Write-HelloMessage { 20 | [CmdletBinding()] 21 | param () 22 | process { 23 | Write-Host 24 | Write-Center -Message '----------------------------------------' -ForegroundColor Blue 25 | Write-Center -Message 'Starting the Spicetify ShadeX script...' -ForegroundColor Blue 26 | Write-Host 27 | Write-Center -Message 'github.com/sanoojes/Spicetify-ShadeX' -ForegroundColor Blue 28 | Write-Center -Message '----------------------------------------' -ForegroundColor Blue 29 | Write-Host 30 | } 31 | } 32 | 33 | function Write-Error { 34 | [CmdletBinding()] 35 | param ( 36 | [Parameter(Mandatory)] 37 | [string]$Message 38 | ) 39 | process { 40 | Write-Host -Object $Message -ForegroundColor Red 41 | } 42 | end { 43 | Wait-Input 44 | exit 1 45 | } 46 | } 47 | 48 | function Write-ByeMessage { 49 | [CmdletBinding()] 50 | param () 51 | process { 52 | Write-Host 53 | Write-Center -Message '----------------------------------------' -ForegroundColor Green 54 | Write-Center -Message 'No errors!' -ForegroundColor Green 55 | Write-Host 56 | Write-Center -Message 'Thanks for using ShadeX!' -ForegroundColor Green 57 | Write-Center -Message '----------------------------------------' -ForegroundColor Green 58 | Write-Host 59 | } 60 | } 61 | 62 | function Wait-Input { 63 | [CmdletBinding()] 64 | param () 65 | process { 66 | Write-Host -Object 'Press any key to continue...' 67 | $Host.UI.RawUI.Flushinputbuffer() 68 | $Host.UI.RawUI.ReadKey('NoEcho, IncludeKeyDown') | Out-Null 69 | } 70 | } 71 | #endregion Console helpers 72 | 73 | #region Spotify 74 | function Test-Spotify { 75 | [CmdletBinding()] 76 | [OutputType([bool])] 77 | param () 78 | begin { 79 | Write-Verbose -Message 'Checking if Spotify is installed...' -Verbose 80 | } 81 | process { 82 | $desktopApp = Test-Path -Path "$env:APPDATA/Spotify" -PathType Container 83 | $storeApp = Get-AppxPackage -Name '*SpotifyAB*' 84 | } 85 | end { 86 | $desktopApp -or $storeApp 87 | } 88 | } 89 | 90 | function Test-SpotifyBackup { 91 | [CmdletBinding()] 92 | [OutputType([bool])] 93 | param ( 94 | [Parameter(Mandatory)] 95 | [string]$Path 96 | ) 97 | begin { 98 | Write-Verbose -Message 'Checking if there is up-to-date Spotify backup...' -Verbose 99 | } 100 | process { 101 | $configFile = Get-Content -Path $Path 102 | $configFile | ForEach-Object -Process { 103 | if ($PSItem -match '^version = (.+)$') { 104 | $backupVersion = $Matches[1] 105 | } 106 | elseif ($PSItem -match '^prefs_path.+= (.+)$') { 107 | $spotifyPrefsPath = $Matches[1] 108 | } 109 | } 110 | 111 | $spotifyPrefs = Get-Content -Path $spotifyPrefsPath 112 | $spotifyPrefs | ForEach-Object -Process { 113 | if ($PSItem -match '^app.last-launched-version="(.+)"$') { 114 | $spotifyVersion = $Matches[1] 115 | } 116 | } 117 | } 118 | end { 119 | $backupVersion -eq $spotifyVersion 120 | } 121 | } 122 | 123 | function Install-Spotify { 124 | [CmdletBinding()] 125 | param () 126 | begin { 127 | $Temp = [System.IO.Path]::GetTempPath() 128 | $installerPath = "$Temp\SpotifySetup.exe" 129 | } 130 | process { 131 | Write-Verbose -Message 'Downloading the Spotify installer...' -Verbose 132 | $Parameters = @{ 133 | UseBasicParsing = $true 134 | Uri = 'https://download.scdn.co/SpotifySetup.exe' 135 | OutFile = $installerPath 136 | } 137 | Invoke-WebRequest @Parameters 138 | 139 | Write-Host 140 | Write-Host -Object 'ATTENTION!' -ForegroundColor Yellow 141 | Write-Host -Object 'Do not close the Spotify installer!' 142 | Write-Host -Object 'Once Spotify is installed, please login. Then close the window.' 143 | Wait-Input 144 | 145 | Write-Host 146 | Write-Verbose -Message 'Starting the Spotify installer...' -Verbose 147 | Start-Process -FilePath $installerPath 148 | 149 | while (-not (Get-Process -Name Spotify -ErrorAction SilentlyContinue)) { 150 | Start-Sleep -Seconds 1 151 | } 152 | Wait-Process -Name Spotify 153 | } 154 | } 155 | #endregion Spotify 156 | 157 | #region Spicetify 158 | function Test-Spicetify { 159 | [CmdletBinding()] 160 | [OutputType([bool])] 161 | Param () 162 | Begin { 163 | Write-Verbose -Message 'Checking if Spicetify is installed...' -Verbose 164 | } 165 | Process { 166 | [bool](Get-Command -Name spicetify -ErrorAction SilentlyContinue) 167 | } 168 | } 169 | 170 | function Install-Spicetify { 171 | [CmdletBinding()] 172 | param () 173 | begin { 174 | Write-Verbose -Message 'Starting the Spicetify installation script...' -Verbose 175 | } 176 | process { 177 | $Parameters = @{ 178 | UseBasicParsing = $true 179 | Uri = 'https://raw.githubusercontent.com/spicetify/spicetify-cli/master/install.ps1' 180 | } 181 | Invoke-WebRequest @Parameters | Invoke-Expression 182 | } 183 | } 184 | 185 | function Install-Marketplace { 186 | [CmdletBinding()] 187 | param () 188 | begin { 189 | Write-Verbose -Message 'Starting the Spicetify Marketplace installation script...' -Verbose 190 | } 191 | process { 192 | $Parameters = @{ 193 | UseBasicParsing = $true 194 | Uri = ( 195 | 'https://raw.githubusercontent.com/spicetify/spicetify-marketplace/main/resources/install.ps1' 196 | ) 197 | } 198 | Invoke-WebRequest @Parameters | Invoke-Expression 199 | } 200 | } 201 | 202 | function Get-SpicetifyFoldersPaths { 203 | [CmdletBinding()] 204 | [OutputType([hashtable])] 205 | param () 206 | begin { 207 | Write-Verbose -Message 'Getting the Spicetify folders paths...' -Verbose 208 | } 209 | process { 210 | @{ 211 | configPath = (spicetify path -c) 212 | ShadeXPath = "$(spicetify path userdata)\Themes\ShadeX" 213 | } 214 | } 215 | } 216 | 217 | function Submit-SpicetifyConfig { 218 | [CmdletBinding()] 219 | param ( 220 | [Parameter(Mandatory)] 221 | [string]$Path 222 | ) 223 | begin { 224 | Write-Verbose -Message 'Applying changes...' -Verbose 225 | } 226 | process { 227 | if (Test-SpotifyBackup -Path $Path) { 228 | spicetify apply 229 | } 230 | else { 231 | spicetify backup apply 232 | } 233 | } 234 | } 235 | #endregion Spicetify 236 | 237 | #region Misc 238 | function Get-WindowsAppsTheme { 239 | [CmdletBinding()] 240 | param () 241 | begin { 242 | Write-Verbose -Message 'Getting current Windows apps theme...' -Verbose 243 | $Parameters = @{ 244 | Path = 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize' 245 | Name = 'AppsUseLightTheme' 246 | } 247 | } 248 | process { 249 | switch (Get-ItemPropertyValue @Parameters) { 250 | 0 { 'dark' } 251 | 1 { 'light' } 252 | } 253 | } 254 | } 255 | 256 | function Get-ThemeType { 257 | [CmdletBinding()] 258 | [OutputType([string])] 259 | param ( 260 | [Parameter(Mandatory)] 261 | [string]$Path 262 | ) 263 | begin { 264 | Write-Verbose -Message 'Detecting current installation type...' -Verbose 265 | } 266 | process { 267 | $userCssData = Get-Content -Path "$Path\user.css" 268 | } 269 | end { 270 | if ($userCssData -like '*@import*') { 271 | 'Remote' 272 | } 273 | else { 274 | 'Local' 275 | } 276 | } 277 | } 278 | #endregion Misc 279 | 280 | #region ShadeX 281 | function Get-ShadeX { 282 | [CmdletBinding()] 283 | [OutputType([string])] 284 | param () 285 | begin { 286 | $archiveName = 'ShadeX-main' 287 | $Temp = [System.IO.Path]::GetTempPath() 288 | $archivePath = "$Temp\$archiveName.zip" 289 | } 290 | process { 291 | Write-Verbose -Message 'Downloading the ShadeX repository archive...' -Verbose 292 | $Parameters = @{ 293 | UseBasicParsing = $true 294 | Uri = 'https://codeload.github.com/sanoojes/Spicetify-ShadeX/zip/refs/heads/main' 295 | OutFile = $archivePath 296 | } 297 | Invoke-WebRequest @Parameters 298 | 299 | Write-Verbose -Message 'Unpacking the ShadeX repository archive...' -Verbose 300 | $Parameters = @{ 301 | Path = $archivePath 302 | DestinationPath = $Temp 303 | Force = $true 304 | } 305 | Expand-Archive @Parameters 306 | } 307 | end { 308 | "$Temp\$archiveName" 309 | Remove-Item -Path $archivePath -Force 310 | } 311 | } 312 | 313 | function Install-ShadeX { 314 | [CmdletBinding()] 315 | param ( 316 | [Parameter(Mandatory)] 317 | [string]$Path, 318 | 319 | [Parameter(Mandatory)] 320 | [string]$Destination, 321 | 322 | [Parameter(Mandatory)] 323 | [string]$Config, 324 | 325 | [ValidateSet('Remote', 'Local')] 326 | [string]$Type = 'Remote', 327 | 328 | [string]$ColorScheme 329 | ) 330 | begin { 331 | Write-Verbose -Message 'Installing ShadeX theme...' -Verbose 332 | $ShadeXSrcPath = "$Path\src" 333 | $ShadeXRemotePath = "$Path\remote" 334 | } 335 | process { 336 | New-Item -Path $Destination -ItemType Directory -Force | Out-Null 337 | 338 | if ($Type -eq 'Remote') { 339 | $Parameters = @{ 340 | Path = "$ShadeXSrcPath\color.ini" 341 | Destination = $Destination 342 | Force = $true 343 | } 344 | Move-Item @Parameters 345 | 346 | $Parameters = @{ 347 | Path = "$ShadeXRemotePath\*" 348 | Destination = $Destination 349 | Force = $true 350 | } 351 | Move-Item @Parameters 352 | } 353 | else { 354 | $Parameters = @{ 355 | Path = $ShadeXSrcPath 356 | Destination = $Destination 357 | Force = $true 358 | } 359 | Move-Item @Parameters 360 | } 361 | 362 | spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 363 | spicetify config current_theme 'ShadeX' 364 | 365 | if ($ColorScheme) { 366 | spicetify config color_scheme $ColorScheme 367 | } 368 | 369 | Submit-SpicetifyConfig -Path $Config 370 | } 371 | end { 372 | Remove-Item -Path $Path -Recurse -Force 373 | } 374 | } 375 | 376 | function Uninstall-ShadeX { 377 | [CmdletBinding()] 378 | param ( 379 | [Parameter(Mandatory)] 380 | [string]$Path, 381 | 382 | [Parameter(Mandatory)] 383 | [string]$Config, 384 | 385 | [string]$Value = ' ' 386 | ) 387 | begin { 388 | Write-Verbose -Message 'Uninstalling ShadeX theme...' -Verbose 389 | } 390 | process { 391 | spicetify config current_theme $Value color_scheme $Value 392 | Submit-SpicetifyConfig -Path $Config 393 | } 394 | end { 395 | Remove-Item -Path $Path -Recurse -Force 396 | } 397 | } 398 | #endregion ShadeX 399 | -------------------------------------------------------------------------------- /src/user.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); 2 | 3 | :root { 4 | /* Border */ 5 | --border-thickness: 1px; 6 | --border-radius-sm: 0.5rem; 7 | --border-radius-md: 0.5rem; 8 | --border-radius-lg: 0.5rem; 9 | 10 | --default-border: var(--border-thickness) solid var(--spice-border); 11 | 12 | /* Gap */ 13 | --gap-sm: 0.25rem; 14 | --gap-md: 0.5rem; 15 | --gap-lg: 0.75rem; 16 | --gap-xl: 1rem; 17 | --grid-gap: var(--gap-md); 18 | 19 | /* Margin */ 20 | --margin-sm: 0.25rem; 21 | --margin-md: 0.5rem; 22 | --margin-lg: 0.75rem; 23 | --margin-xl: 1rem; 24 | 25 | /* Padding */ 26 | --padding-sm: 0.25rem; 27 | --padding-md: 0.5rem; 28 | --padding-lg: 0.75rem; 29 | --padding-xl: 1rem; 30 | --padding-2xl: 1.5rem; 31 | 32 | /* Blur */ 33 | --blur-sm: 0.25rem; 34 | --blur-md: 0.5rem; 35 | --blur-lg: 0.75rem; 36 | --blur-xl: 1rem; 37 | --blur-2xl: 1.5rem; 38 | 39 | --now-playing-bar-height: 5rem; 40 | 41 | /* Font */ 42 | --default-font-family: "Inter"; 43 | --normal-font-weight: 500; 44 | --bold-font-weight: 700; 45 | --extra-bold-font-weight: var(--bold-font-weight); 46 | --font-to-use: var(--default-font-family), 47 | CircularSp, 48 | CircularSp-Arab, 49 | CircularSp-Hebr, 50 | CircularSp-Cyrl, 51 | CircularSp-Grek, 52 | CircularSp-Deva, 53 | var(--fallback-fonts, sans-serif); 54 | 55 | --top-bar-backdrop: blur(24px) saturate(140%); 56 | 57 | --spice-card-hover: var(--spice-button-hover); 58 | } 59 | 60 | /* Spicetify Overrides */ 61 | * { 62 | --text-subdued: var(--spice-subtext); 63 | --button-size: 1.5rem !important; 64 | box-shadow: none !important; 65 | scrollbar-width: thin; 66 | font-family: var(--font-to-use) !important; 67 | } 68 | 69 | body, 70 | input { 71 | color: rgba(var(--spice-rgb-text), 0.75); 72 | } 73 | 74 | .encore-dark-theme, 75 | .encore-dark-theme .encore-base-set { 76 | --background-highlight: rgba(var(--spice-rgb-main), 0.5); 77 | } 78 | 79 | /* Scrollbar */ 80 | .os-theme-spotify.os-scrollbar { 81 | --os-size: 4px; 82 | --os-handle-bg: rgba(var(--spice-rgb-subtext), 0.3); 83 | --os-handle-bg-active: rgba(var(--spice-rgb-subtext), 0.3); 84 | --os-handle-bg-hover: rgba(var(--spice-rgb-subtext), 0.7); 85 | --os-handle-border-radius: 1rem; 86 | } 87 | 88 | .os-scrollbar { 89 | z-index: 2; 90 | } 91 | 92 | /* Font */ 93 | .main-entityHeader-metaDataText { 94 | color: rgba(var(--spice-rgb-text), 0.75) !important; 95 | } 96 | 97 | .encore-text-title-small, 98 | .encore-text-title-medium, 99 | .encore-text-body-medium-bold, 100 | .encore-text-body-small-bold, 101 | .main-card-cardTitle { 102 | font-weight: var(--bold-font-weight) !important; 103 | } 104 | 105 | .ListRowText-bodyMedium-textBase-listRowTitle-useBrowserDefaultFocusStyle { 106 | font-weight: 600; 107 | } 108 | 109 | .encore-text-body-small, 110 | .encore-text-body-medium, 111 | .encore-text-body-large { 112 | font-weight: 500; 113 | } 114 | 115 | /* Main container */ 116 | .contentSpacing { 117 | min-width: calc(100% - (var(--content-spacing) * 2)); 118 | } 119 | 120 | .spotify__container--is-desktop .Root__top-container { 121 | padding-top: 48px; 122 | } 123 | 124 | .spotify__container--is-desktop .global-nav .Root__top-container { 125 | padding-top: var(--panel-gap, 0.5rem); 126 | } 127 | 128 | .spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container { 129 | padding-inline: 3vw 8vw; 130 | } 131 | 132 | .spotify__container--is-desktop.spotify__os--is-windows .global-nav .main-topBar-container { 133 | padding-inline: 0; 134 | } 135 | 136 | .spotify__container--is-desktop.spotify__os--is-macos .main-topBar-container, 137 | .spotify__container--is-desktop.spotify__os--is-macos .Root__globalNav { 138 | -webkit-padding-start: calc(80px*var(--zoom-adjust-coefficient, 1)); 139 | padding-inline-start: calc(80px*var(--zoom-adjust-coefficient, 1)) 140 | } 141 | 142 | /* Root Containers */ 143 | .Root__main-view, 144 | .Root__right-sidebar, 145 | .global-libraryX.Root__globalNav, 146 | .main-yourLibraryX-entryPoints { 147 | border: var(--default-border); 148 | border-radius: var(--border-radius-md); 149 | } 150 | 151 | .main-home-content.contentSpacing { 152 | padding-top: 0.5rem; 153 | } 154 | 155 | /* Button Styles */ 156 | .MxmW8QkHqHWtuhO589PV, 157 | .main-globalNav-searchInputContainer, 158 | .main-globalNav-searchInputContainer .SFAoASy0S_LZJmYZ3Fh9, 159 | .NqzueDshzvgXEygqOGPG, 160 | .Root__globalNav .main-globalNav-link-icon, 161 | .ButtonInner-large-iconOnly { 162 | overflow: hidden; 163 | border-radius: var(--border-radius-md) !important; 164 | } 165 | 166 | .ChipInnerComponent-sm, 167 | .ChipInnerComponent-md, 168 | .ChipInnerComponent-lg, 169 | .ChipInnerComponent-sm-selected, 170 | .ChipInnerComponent-md-selected, 171 | .ChipInnerComponent-lg-selected, 172 | .ButtonInner-small-iconOnly, 173 | .ButtonInner-medium-iconOnly, 174 | .ButtonInner-large-iconOnly, 175 | .main-repeatButton-button, 176 | .main-genericButton-button, 177 | .main-card-PlayButtonContainer, 178 | .LegacyChipComponent-checkbox-chip-sm-selected-useBrowserDefaultFocusStyle, 179 | .main-card-PlayButtonContainer, 180 | .LegacyChipComponent-checkbox-chip-md-selected-useBrowserDefaultFocusStyle, 181 | .main-card-PlayButtonContainer, 182 | .LegacyChipComponent-checkbox-chip-lg-selected-useBrowserDefaultFocusStyle { 183 | border-radius: var(--border-radius-md) !important; 184 | } 185 | 186 | .Button-buttonPrimary-useBrowserDefaultFocusStyle-data-is-icon-only:hover .ButtonInner-sc-14ud5tc-0 { 187 | background-color: var(--spice-secondary-button-hover); 188 | } 189 | 190 | .view-homeShortcutsGrid-shortcut:focus-within, 191 | .view-homeShortcutsGrid-shortcut:hover, 192 | .view-homeShortcutsGrid-shortcut[data-context-menu-open=true] { 193 | background-color: var(--spice-button-hover); 194 | } 195 | 196 | .main-genericButton-button.main-genericButton-buttonActive { 197 | color: var(--spice-secondary-button-active); 198 | } 199 | 200 | .main-genericButton-button.main-genericButton-buttonActive:focus, 201 | .main-genericButton-button.main-genericButton-buttonActive:hover { 202 | color: var(--spice-secondary-button); 203 | } 204 | 205 | .main-card-cardContainer { 206 | background-color: var(--spice-card); 207 | } 208 | 209 | .BoxComponent-group-listRow-tinted-isInteractive-minBlockSize_56px-padding_8px, 210 | .BoxComponent-group-listRow-naked-isInteractive-minBlockSize_56px-padding_8px:hover::after, 211 | .main-card-cardContainer:hover { 212 | background-color: var(--spice-card-hover); 213 | } 214 | 215 | .main-userWidget-box { 216 | background-color: var(--spice-main) !important; 217 | border: none !important; 218 | } 219 | 220 | .Button-medium-medium-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle, 221 | .Root__globalNav .main-globalNav-link-icon { 222 | background-color: var(--spice-main) !important; 223 | border: var(--default-border); 224 | } 225 | 226 | .main-trackList-rowMarker, 227 | .view-homeShortcutsGrid-PlayButtonContainer .view-homeShortcutsGrid-equaliser { 228 | filter: grayscale(1); 229 | } 230 | 231 | .playlist-playlist-refreshButton, 232 | .search-recentSearches-seeAll>span { 233 | background-color: var(--spice-secondary-button) !important; 234 | color: var(--spice-secondary-text) !important; 235 | margin: 0; 236 | padding: var(--padding-md) var(--padding-lg); 237 | border-radius: var(--border-radius-md); 238 | } 239 | 240 | .playlist-playlist-refreshButton:hover, 241 | .search-recentSearches-seeAll>span:hover { 242 | text-decoration: none !important; 243 | background-color: var(--spice-secondary-button-hover); 244 | } 245 | 246 | /* Toggle Button */ 247 | input:checked~.x-toggle-indicatorWrapper { 248 | background-color: var(--spice-secondary-button); 249 | } 250 | 251 | input:checked~.x-toggle-indicatorWrapper:hover { 252 | background-color: var(--spice-secondary-button-hover); 253 | } 254 | 255 | .x-toggle-indicator { 256 | background-color: var(--spice-button) 257 | } 258 | 259 | input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator { 260 | background-color: var(--spice-button); 261 | } 262 | 263 | input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper, 264 | .x-toggle-indicatorWrapper { 265 | background-color: var(--spice-button-hover); 266 | filter: brightness(1.25); 267 | } 268 | 269 | /* Home Grids */ 270 | .main-gridContainer-gridContainer { 271 | grid-gap: 0; 272 | } 273 | 274 | .MKCgGhu_c8l6hsVuee46 .main-shelf-shelfGrid { 275 | margin-inline: 0; 276 | } 277 | 278 | /* Home grid cards */ 279 | .main-card-imageContainer { 280 | overflow: hidden; 281 | border-radius: var(--border-radius-md); 282 | } 283 | 284 | .main-card-card .main-image-image, 285 | .main-card-cardContainer .main-image-image { 286 | transition: all ease-in-out .15s; 287 | } 288 | 289 | .main-card-card:hover .main-image-image, 290 | .main-card-cardContainer:hover .main-image-image { 291 | transform: scale(1.05); 292 | } 293 | 294 | /* Home shortcut grid */ 295 | @container (min-width: 0) { 296 | .view-homeShortcutsGrid-grid { 297 | --item-height: 52px; 298 | grid-template-columns: repeat(2, 1fr) 299 | } 300 | } 301 | 302 | @container (min-width: 815px) { 303 | .view-homeShortcutsGrid-grid { 304 | --item-height: 52px; 305 | grid-template-columns: repeat(3, 1fr) 306 | } 307 | 308 | .view-homeShortcutsGrid-gridOf4Columns { 309 | grid-template-columns: repeat(4, 1fr) 310 | } 311 | } 312 | 313 | @container (min-width: 1141px) { 314 | .view-homeShortcutsGrid-grid { 315 | --item-height: 64px; 316 | grid-gap: var(--gap-md) 317 | } 318 | } 319 | 320 | @container (min-width: 1599px) { 321 | .view-homeShortcutsGrid-grid { 322 | --item-height: 80px; 323 | grid-gap: var(--gap-md) 324 | } 325 | } 326 | 327 | .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-main { 328 | -webkit-padding-start: 0.5rem; 329 | -webkit-padding-end: 0.5rem; 330 | padding-inline: 0.5rem; 331 | } 332 | 333 | .view-homeShortcutsGrid-shortcut { 334 | border-radius: var(--border-radius-sm); 335 | background-color: var(--spice-card); 336 | border: var(--default-border); 337 | } 338 | 339 | .JS9WYvoqyy3vUXqMt5Hv, 340 | .view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-main .view-homeShortcutsGrid-name { 341 | -webkit-line-clamp: 1; 342 | line-clamp: 1; 343 | } 344 | 345 | /* Home Header Bg */ 346 | .main-home-homeHeader { 347 | background: var(--spice-main) !important; 348 | background-color: var(--spice-main) !important; 349 | } 350 | 351 | /* Topbar */ 352 | .main-view-container__scroll-node-child-spacer { 353 | height: 0px !important; 354 | } 355 | 356 | .main-topBar-container>*, 357 | .main-topBar-topbarContent { 358 | -webkit-app-region: drag !important; 359 | } 360 | 361 | .main-topBar-topbarContentRight button, 362 | .main-topBar-topbarContentRight *, 363 | .main-topBar-historyButtons * { 364 | -webkit-app-region: no-drag; 365 | } 366 | 367 | .main-topBar-container { 368 | top: 0; 369 | left: 0; 370 | right: 0; 371 | position: fixed; 372 | height: 48px; 373 | } 374 | 375 | .global-nav .main-topBar-container { 376 | height: 64px; 377 | } 378 | 379 | .artist-artistDiscography-topBar, 380 | .search-searchCategory-SearchCategory, 381 | .global-nav .main-home-filterChipsContainer, 382 | .main-trackList-trackListHeader, 383 | .marketplace-header, 384 | .main-home-filterChipsContainer { 385 | top: 0 !important; 386 | } 387 | 388 | .artist-artistDiscography-tracklist .main-trackList-trackListHeader { 389 | top: 40px !important; 390 | } 391 | 392 | .global-nav .artist-artistDiscography-tracklist .main-trackList-trackListHeader { 393 | top: 96px !important; 394 | } 395 | 396 | .global-nav .marketplace-header, 397 | .global-nav .main-trackList-trackListHeader, 398 | .global-nav .artist-artistDiscography-topBar { 399 | top: 64px !important; 400 | } 401 | 402 | .global-nav .main-topBar-container { 403 | position: absolute !important; 404 | -webkit-backdrop-filter: none !important; 405 | backdrop-filter: none !important; 406 | } 407 | 408 | .global-nav:has(.BeautifulLyricsPage) .main-topBar-container { 409 | position: absolute; 410 | } 411 | 412 | .global-nav .main-home-filterChipsContainer, 413 | .global-nav .main-topBar-background { 414 | border-bottom: var(--default-border); 415 | } 416 | 417 | .main-topBar-topbarContentWrapper { 418 | transform-origin: left center; 419 | transform: scale(0.75); 420 | } 421 | 422 | .global-nav .main-topBar-topbarContentWrapper { 423 | transform: scale(1); 424 | } 425 | 426 | .main-topBar-historyButtons .main-topBar-button, 427 | .main-topBar-buddyFeed, 428 | .main-userWidget-boxCondensed { 429 | height: 38px; 430 | width: 38px; 431 | } 432 | 433 | .main-userWidget-hasAvatar { 434 | transform: scale(1.1); 435 | } 436 | 437 | .global-nav .main-userWidget-hasAvatar { 438 | transform: scale(1.1); 439 | } 440 | 441 | .main-trackCreditsModal-container { 442 | max-height: 90vh; 443 | width: max-content; 444 | max-width: 75vw; 445 | } 446 | 447 | .main-home-homeHeader { 448 | background-color: transparent !important; 449 | -webkit-box-shadow: none !important; 450 | box-shadow: none !important; 451 | } 452 | 453 | .main-topBar-overlay { 454 | background-color: transparent !important; 455 | } 456 | 457 | .main-entityHeader-topbarTitle { 458 | text-wrap: nowrap; 459 | } 460 | 461 | .marketplace-header { 462 | background: none !important; 463 | background-color: transparent !important; 464 | -webkit-backdrop-filter: var(--top-bar-backdrop) !important; 465 | backdrop-filter: var(--top-bar-backdrop) !important; 466 | -webkit-box-shadow: none !important; 467 | box-shadow: none !important; 468 | } 469 | 470 | .global-nav .marketplace-card-type-heading { 471 | visibility: hidden; 472 | } 473 | 474 | .marketplace-header-icon-button, 475 | .searchbar-bar, 476 | .Dropdown-control { 477 | border-color: var(--card-hover-color); 478 | background-color: var(--card-color); 479 | 480 | &:hover { 481 | background-color: var(--card-hover-color); 482 | } 483 | } 484 | 485 | .global-nav .page-header { 486 | margin: 64px 0 16px; 487 | } 488 | 489 | .main-topBar-background { 490 | background: none !important; 491 | background-color: transparent !important; 492 | } 493 | 494 | .search-searchCategory-carouselButton { 495 | background-color: var(--main-color); 496 | } 497 | 498 | .main-topBar-overlay { 499 | background-color: rgba(0, 0, 0, 0); 500 | } 501 | 502 | /* Marketplace */ 503 | .marketplace-header { 504 | margin: 0 calc((var(--content-spacing) * -1) - 8px) 0 calc((var(--content-spacing) * -1) - 8px); 505 | padding: var(--padding-md) calc(var(--content-spacing)*2); 506 | } 507 | 508 | .marketplace-footer { 509 | margin-top: 5rem; 510 | } 511 | 512 | #marketplace-readme { 513 | background-color: transparent !important; 514 | } 515 | 516 | .main-home-filterChipsSection 517 | 518 | /* Filter Chips */ 519 | , 520 | .main-topBar-background, 521 | .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { 522 | background-color: rgba(var(--spice-rgb-main), 0.5) !important; 523 | -webkit-backdrop-filter: var(--top-bar-backdrop); 524 | backdrop-filter: var(--top-bar-backdrop); 525 | } 526 | 527 | .global-nav .main-topBar-background { 528 | border-bottom: var(--default-border); 529 | } 530 | 531 | /* Filter Chips */ 532 | .main-home-filterChipsSection:after, 533 | .main-home-filterChipsSection.fIvMht6B9HdROywMNJZ4:after { 534 | background-color: rgba(var(--spice-rgb-main), .6) !important; 535 | } 536 | 537 | .kwzBRpFigKr1EP2d5qle { 538 | border-radius: var(--border-radius-sm); 539 | background-color: var(--spice-secondary-button-hover); 540 | } 541 | 542 | .kwzBRpFigKr1EP2d5qle:hover { 543 | border-radius: var(--border-radius-sm); 544 | background-color: var(--spice-secondary-button-hover); 545 | } 546 | 547 | /* Right Sidebar */ 548 | .main-nowPlayingView-section, 549 | .main-nowPlayingView-aboutArtistV2TextContent { 550 | background-color: var(--spice-card); 551 | } 552 | 553 | .main-nowPlayingView-section { 554 | border: var(--default-border); 555 | } 556 | 557 | /* Input */ 558 | .spicetify-exp-features input.search, 559 | .x-searchInput-searchInputInput, 560 | .main-topBar-searchBar, 561 | .b7r2WRiu5f9Q99qmyreh .main-topBar-searchBar, 562 | .main-globalNav-searchInputContainer input { 563 | background-color: var(--spice-main) !important; 564 | border: var(--default-border) !important; 565 | } 566 | 567 | .main-topBar-searchBar:focus, 568 | .b7r2WRiu5f9Q99qmyreh .main-topBar-searchBar:focus, 569 | .x-searchInput-searchInputInput:focus, 570 | .spicetify-exp-features input.search:focus, 571 | .main-globalNav-searchInputContainer input:focus { 572 | border: 2px solid var(--spice-selected-row) !important; 573 | } 574 | 575 | .main-topBar-historyButtons .main-topBar-button, 576 | .main-topBar-buddyFeed, 577 | .main-userWidget-boxCondensed, 578 | .main-topBar-searchBar, 579 | .b7r2WRiu5f9Q99qmyreh .main-topBar-searchBar, 580 | .x-searchInput-searchInputInput { 581 | border-radius: var(--button-border-radius, 0.75rem) !important; 582 | } 583 | 584 | 585 | /* */ 586 | .x-sortBox-sortDropdown, 587 | .x-filterBox-expandButton { 588 | color: var(--spice-subtext) !important; 589 | } 590 | 591 | /* Tag Container */ 592 | .main-tag-container { 593 | background-color: rgba(var(--spice-rgb-accent), 0.75); 594 | } 595 | 596 | /* Track List */ 597 | .main-trackList-trackList { 598 | border: var(--default-border); 599 | } 600 | 601 | .main-trackList-trackListRowGrid { 602 | padding: 0 var(--padding-2xl); 603 | } 604 | 605 | .main-trackList-rowMainContent { 606 | row-gap: var(--gap-sm); 607 | } 608 | 609 | .GimJ6fo6WOYPyWNVpSr1 { 610 | background-color: rgba(var(--spice-rgb-main), 0.75); 611 | -webkit-backdrop-filter: blur(var(--blur-xl)); 612 | backdrop-filter: blur(var(--blur-xl)); 613 | border: var(--default-border); 614 | margin-top: 6px; 615 | } 616 | 617 | .GimJ6fo6WOYPyWNVpSr1 .A5mSopU8ZkrqFtMhrJae * { 618 | color: var(--spice-subtext) !important; 619 | } 620 | 621 | /* Playlist Gradient Background */ 622 | .main-entityHeader-container.main-entityHeader-nonWrapped { 623 | border-bottom: var(--default-border); 624 | border-color: rgba(var(--spice-rgb-accent), 0.25); 625 | } 626 | 627 | .main-entityHeader-container.main-entityHeader-nonWrapped { 628 | position: relative; 629 | border-bottom: var(--default-border); 630 | } 631 | 632 | .main-entityHeader-container.main-entityHeader-nonWrapped .contentSpacing { 633 | border-radius: var(--border-radius-md); 634 | } 635 | 636 | .main-entityHeader-background, 637 | .main-entityHeader-backgroundColor, 638 | .main-actionBarBackground-background { 639 | background-color: transparent !important; 640 | } 641 | 642 | .main-entityHeader-overlay { 643 | --bgColor: var(--spice-card) !important; 644 | background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(var(--spice-rgb-main), .5))), var(--background-noise); 645 | background: linear-gradient(transparent 0, rgba(var(--spice-rgb-main), .5) 100%), var(--background-noise); 646 | } 647 | 648 | .main-actionBarBackground-background { 649 | background: transparent !important; 650 | } 651 | 652 | .main-entityHeader-container.main-entityHeader-withBackgroundImage { 653 | border-radius: var(--border-radius-sm); 654 | } 655 | 656 | .main-entityHeader-background, 657 | .global-nav .main-entityHeader-background, 658 | .main-entityHeader-background.main-entityHeader-overlay, 659 | .global-nav .main-entityHeader-background.main-entityHeader-overlay, 660 | .main-entityHeader-background.main-entityHeader-overlay:after { 661 | height: calc(50vh + 64px); 662 | } 663 | 664 | .main-entityHeader-container.main-entityHeader-withBackgroundImage, 665 | .global-nav .main-entityHeader-container.main-entityHeader-withBackgroundImage { 666 | height: 55vh; 667 | } 668 | 669 | /* Aside Now Playing Bar */ 670 | aside[aria-label="Now playing view"] .ZbDMGdU4aBOnrNLowNRq, 671 | aside[aria-label="Now playing view"] .W3E0IT3_STcazjTeyOJa { 672 | position: absolute; 673 | width: 100%; 674 | z-index: 1; 675 | transition: backdrop-filter 0.5s ease, background-color 0.2s ease; 676 | top: 0; 677 | } 678 | 679 | aside[aria-label="Now playing view"] .fAte2d0xETy7pnDUAgHY, 680 | aside[aria-label="Now playing view"] .mdMUqcSHFw1lZIcYEblu { 681 | background-color: rgba(var(--spice-rgb-card), 0.75); 682 | -webkit-backdrop-filter: var(--top-bar-backdrop); 683 | backdrop-filter: var(--top-bar-backdrop); 684 | border-bottom: var(--default-border); 685 | } 686 | 687 | aside[aria-label="Now playing view"]:has(.ZbDMGdU4aBOnrNLowNRq) .main-buddyFeed-scrollBarContainer:not(:has(.main-buddyFeed-content > .main-buddyFeed-header)), 688 | aside[aria-label="Now playing view"]:has(.W3E0IT3_STcazjTeyOJa) .cZCuJDjrGA2QMXja_Sua:not(:has(.AAdBM1nhG73supMfnYX7 > .fNXmHtlrj4UVWmhQrJ_5)) { 689 | padding-top: 4rem; 690 | } 691 | 692 | /* Now Playing Bar */ 693 | /* button[data-restore-focus-key="now_playing_view"] { 694 | display: none; 695 | } */ 696 | 697 | footer.main-nowPlayingBar-container { 698 | gap: var(--gap-sm); 699 | border: none; 700 | } 701 | 702 | 703 | .main-nowPlayingBar-nowPlayingBar { 704 | border: var(--default-border); 705 | border-radius: var(--border-radius-md); 706 | } 707 | 708 | .player-controls__buttons { 709 | width: fit-content; 710 | padding-left: 5vw; 711 | margin-bottom: 0; 712 | align-items: center; 713 | } 714 | 715 | .player-controls__right, 716 | .player-controls__left { 717 | align-items: center; 718 | } 719 | 720 | .player-controls { 721 | flex-direction: row; 722 | } 723 | 724 | @media (max-width: 70rem) { 725 | .player-controls { 726 | flex-direction: column; 727 | } 728 | 729 | .player-controls__buttons { 730 | padding-left: 0; 731 | margin-bottom: 0.5rem; 732 | } 733 | 734 | .main-nowPlayingBar-right, 735 | .main-nowPlayingBar-left { 736 | min-width: 25vw; 737 | } 738 | } 739 | 740 | .main-nowPlayingBar-center { 741 | max-width: 55vw; 742 | flex-grow: 1; 743 | } 744 | 745 | .main-nowPlayingBar-right { 746 | min-width: fit-content; 747 | width: 25vw; 748 | } 749 | 750 | .main-nowPlayingBar-left { 751 | width: 20vw; 752 | } 753 | 754 | button.main-playPauseButton-button { 755 | background: none; 756 | color: var(--spice-text); 757 | --button-size: unset !important; 758 | } 759 | 760 | .main-playPauseButton-button svg { 761 | height: 20px; 762 | width: 21px; 763 | } 764 | 765 | /* Progress Bar */ 766 | .progress-bar { 767 | --bg-color: rgba(var(--spice-rgb-accent), .125); 768 | --fg-color: rgba(var(--spice-rgb-accent), 1); 769 | --is-active-fg-color: rgba(var(--spice-rgb-accent), 0.75); 770 | --progress-bar-height: 4px; 771 | --progress-bar-radius: calc(var(--progress-bar-height)/2); 772 | } 773 | 774 | .x-progressBar-fillColor { 775 | transition: transform 1s cubic-bezier(0.23, 1, 0.320, 1); 776 | } 777 | 778 | .progress-bar__slider { 779 | transition: left 1s cubic-bezier(0.23, 1, 0.320, 1); 780 | } 781 | 782 | .playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor, 783 | .playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider { 784 | transition: none; 785 | } 786 | 787 | /* connect bar */ 788 | .main-connectBar-connectBar { 789 | border-radius: var(--border-radius-sm); 790 | } 791 | 792 | /* Context Menu */ 793 | [data-tippy-root]::before, 794 | .main-contextMenu-menu::before { 795 | content: ""; 796 | z-index: -1; 797 | top: 0; 798 | left: 0; 799 | right: 0; 800 | bottom: 0; 801 | position: absolute; 802 | height: 100%; 803 | width: 100%; 804 | background-color: rgba(var(--spice-rgb-main), 0.5); 805 | -webkit-backdrop-filter: blur(var(--blur-xl)); 806 | backdrop-filter: blur(var(--blur-xl)); 807 | border-radius: var(--border-radius-md); 808 | } 809 | 810 | .main-contextMenu-menu, 811 | [data-tippy-root], 812 | [data-tippy-root] [data-tippy-root] ul { 813 | background-color: transparent; 814 | border-radius: var(--border-radius-md); 815 | border: var(--default-border); 816 | } 817 | 818 | #context-menu ul[aria-label*="Add to playlist menu"] { 819 | p { 820 | max-width: 10rem; 821 | } 822 | } 823 | 824 | .main-contextMenu-menuItemButton:hover, 825 | .main-contextMenu-menuItemButton:not([aria-checked="true"]):focus { 826 | background-color: rgba(var(--spice-rgb-selected-row), 0.1) 827 | } 828 | 829 | .X5mwWAw7ijxPvQOoabzQ, 830 | .DquSH3YjnaIIXMZiOvwA { 831 | background-color: transparent; 832 | } 833 | 834 | .main-contextMenu-tippy { 835 | --generic-tooltip-background-color: transparent !important; 836 | } 837 | 838 | /* Search Cards */ 839 | .IGCDq9qa08JVVY3mcy7Y { 840 | padding: 4px; 841 | } 842 | 843 | .Vn9yz8P5MjIvDT8c0U6w { 844 | background-color: var(--spice-card) !important; 845 | border: var(--default-border); 846 | 847 | &:hover { 848 | background-color: var(--spice-rgb-button-hover); 849 | } 850 | } 851 | 852 | /* Lyrics */ 853 | .main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient { 854 | border: var(--default-border); 855 | } 856 | 857 | .main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient, 858 | .lyrics-lyrics-container { 859 | --lyrics-active-color: var(--spice-rgb-text); 860 | --lyrics-color-active: var(--spice-rgb-text); 861 | --lyrics-color-inactive: rgba(var(--lyrics-active-color), 0.2) !important; 862 | --lyrics-color-shadow: rgba(var(--lyrics-active-color), 0.25) !important; 863 | --lyrics-color-passed: rgba(var(--lyrics-active-color), .5) !important; 864 | --lyrics-color-background: var(--spice-card) !important; 865 | --lyrics-color-messaging: rgb(0, 0, 0) !important; 866 | --lyrics-color-inactive: rgba(var(--spice-rgb-subtext), .25); 867 | } 868 | 869 | /* Search modal */ 870 | .N9tnwm0XDrt_eGJd2D2A:has(._kfmGT75UTPoF_D2afwa) { 871 | -webkit-backdrop-filter: blur(var(--blur-lg)); 872 | backdrop-filter: blur(var(--blur-lg)); 873 | transition: backdrop-filter 0.5s ease-in-out; 874 | } 875 | 876 | .zZMsUUWG29PYcwWPXhOV:not(._kfmGT75UTPoF_D2afwa) { 877 | -webkit-backdrop-filter: blur(var(--blur-lg)); 878 | backdrop-filter: blur(var(--blur-lg)); 879 | transition: backdrop-filter 0.3s ease; 880 | } 881 | 882 | .zZMsUUWG29PYcwWPXhOV, 883 | .search-modal-emptySearchTermContainer, 884 | .search-modal-emptySearchTermContainer, 885 | .search-modal-keyboard-accessibility-bar, 886 | .search-modal-listbox { 887 | background-color: var(--spice-card); 888 | border: var(--default-border); 889 | } 890 | 891 | .search-modal-listbox { 892 | border-top: none; 893 | } 894 | 895 | .search-modal-keyboard-accessibility-bar { 896 | border-top: none; 897 | border-bottom: none; 898 | } 899 | 900 | .zZMsUUWG29PYcwWPXhOV._kfmGT75UTPoF_D2afwa { 901 | border-bottom: none; 902 | } 903 | 904 | .search-modal-searchBar { 905 | border-radius: var(--border-radius-md); 906 | background-color: rgba(var(--spice-rgb-selected-row), 0.125) !important; 907 | color: var(--spice-text) !important; 908 | } 909 | 910 | .search-modal-searchIcon, 911 | .search-modal-input { 912 | color: var(--spice-subtext) !important; 913 | } 914 | 915 | .search-modal-searchIcon, 916 | .search-modal-input { 917 | color: var(--spice-subtext) !important; 918 | } 919 | 920 | .search-modal-searchBar:has(.search-modal-input:hover) { 921 | background-color: rgba(var(--spice-rgb-selected-row), 0.25) !important; 922 | 923 | .search-modal-searchIcon, 924 | .search-modal-input { 925 | color: var(--spice-text) !important; 926 | } 927 | } 928 | 929 | .search-modal-searchBar:has(.search-modal-input:focus) { 930 | background-color: rgba(var(--spice-rgb-card), 0.75) !important; 931 | border-bottom: 2px solid var(--spice-accent) !important; 932 | 933 | .search-modal-searchIcon, 934 | .search-modal-input { 935 | color: var(--spice-text) !important; 936 | } 937 | } 938 | 939 | .search-modal-input { 940 | background-color: transparent !important; 941 | } 942 | 943 | .main-genericButton-button.main-genericButton-buttonActiveDot:after { 944 | background-color: var(--spice-text) !important; 945 | } 946 | 947 | .ouiL5cH1WduxtprQ0Iig { 948 | aspect-ratio: auto; 949 | margin-top: 24px; 950 | } 951 | 952 | .ouiL5cH1WduxtprQ0Iig video { 953 | min-height: auto !important; 954 | height: auto; 955 | } 956 | 957 | /* Generic Modal */ 958 | 959 | .GenericModal__overlay { 960 | bottom: 0; 961 | display: -webkit-box; 962 | display: -ms-flexbox; 963 | display: flex; 964 | left: 0; 965 | position: absolute; 966 | right: 0; 967 | top: 0; 968 | -webkit-box-align: center; 969 | -ms-flex-align: center; 970 | align-items: center; 971 | -webkit-box-pack: center; 972 | -ms-flex-pack: center; 973 | justify-content: center; 974 | overflow: hidden; 975 | } 976 | 977 | .JnpOnFaQfrRIA2fYe88A 978 | 979 | /* ADD: classes for artist popup */ 980 | { 981 | max-height: 70vh !important; 982 | } 983 | 984 | .GenericModal__overlay { 985 | background-color: rgba(var(--spice-rgb-shadow), 0.25); 986 | } 987 | 988 | .KIbfbFDao0SHpZsKoKZD, 989 | .aJduGcVsoCwJvV1jVqjl, 990 | .BoxComponent-box-elevated { 991 | --text-base: var(--spice-text) !important; 992 | background-color: rgba(var(--spice-rgb-shadow), 993 | 0.2) !important; 994 | color: var(--spice-text) !important; 995 | -webkit-backdrop-filter: blur(var(--blur-sm)); 996 | backdrop-filter: blur(var(--blur-sm)); 997 | border: var(--default-border); 998 | } 999 | 1000 | .uv2sbcK86mvObEP6I6hA, 1001 | [data-testid="playlist-permissions-modal"], 1002 | .pdkMNbSQl8Yi5tl0iOF9, 1003 | .C1USyigFSYyc22_BmsgB, 1004 | .hmgHdasWrZaA9tiXVw_u, 1005 | .JnpOnFaQfrRIA2fYe88A, 1006 | .uJjmxe0T11dUVeW6Biz8, 1007 | .main-embedWidgetGenerator-container, 1008 | .main-trackCreditsModal-container, 1009 | .GenericModal, 1010 | .desktopmodals-aboutSpotifyModal-container { 1011 | max-height: 90vh; 1012 | background-color: rgba(var(--spice-rgb-card), 0.5); 1013 | border: var(--default-border); 1014 | border-radius: var(--border-radius-md); 1015 | -webkit-backdrop-filter: blur(var(--blur-xl)); 1016 | backdrop-filter: blur(var(--blur-xl)); 1017 | } 1018 | 1019 | .main-embedWidgetGenerator-contentCode { 1020 | display: none; 1021 | visibility: hidden; 1022 | background-color: transparent; 1023 | } 1024 | 1025 | .main-embedWidgetGenerator-contentCode.main-embedWidgetGenerator-visible { 1026 | border: var(--default-border); 1027 | -webkit-backdrop-filter: blur(var(--blur-md)); 1028 | backdrop-filter: blur(var(--blur-md)); 1029 | } 1030 | 1031 | .main-embedWidgetGenerator-visible, 1032 | .main-embedWidgetGenerator-contentCode.main-embedWidgetGenerator-visible { 1033 | display: block; 1034 | visibility: visible; 1035 | } 1036 | 1037 | .main-embedWidgetGenerator-code { 1038 | background-color: var(--spice-card); 1039 | border: var(--default-border); 1040 | border-radius: var(--border-radius-md); 1041 | } 1042 | 1043 | /* Search modal */ 1044 | .N9tnwm0XDrt_eGJd2D2A:has(._kfmGT75UTPoF_D2afwa) { 1045 | -webkit-backdrop-filter: blur(var(--blur-lg)); 1046 | backdrop-filter: blur(var(--blur-lg)); 1047 | transition: backdrop-filter 0.5s ease-in-out; 1048 | } 1049 | 1050 | .zZMsUUWG29PYcwWPXhOV:not(._kfmGT75UTPoF_D2afwa) { 1051 | -webkit-backdrop-filter: blur(var(--blur-lg)); 1052 | backdrop-filter: blur(var(--blur-lg)); 1053 | transition: backdrop-filter 0.3s ease; 1054 | } 1055 | 1056 | .zZMsUUWG29PYcwWPXhOV, 1057 | .search-modal-emptySearchTermContainer, 1058 | .search-modal-emptySearchTermContainer, 1059 | .search-modal-keyboard-accessibility-bar, 1060 | .search-modal-listbox { 1061 | background-color: var(--card-color); 1062 | border: var(--default-border); 1063 | } 1064 | 1065 | .search-modal-listbox { 1066 | border-top: none; 1067 | } 1068 | 1069 | .search-modal-keyboard-accessibility-bar { 1070 | border-top: none; 1071 | border-bottom: none; 1072 | } 1073 | 1074 | .zZMsUUWG29PYcwWPXhOV._kfmGT75UTPoF_D2afwa { 1075 | border-bottom: none; 1076 | } 1077 | 1078 | .search-modal-searchBar { 1079 | border-radius: var(--border-radius-md); 1080 | background-color: rgba(var(--spice-rgb-selected-row), 0.125) !important; 1081 | color: var(--spice-text) !important; 1082 | } 1083 | 1084 | .search-modal-searchIcon, 1085 | .search-modal-input { 1086 | color: var(--spice-subtext) !important; 1087 | } 1088 | 1089 | .search-modal-searchIcon, 1090 | .search-modal-input { 1091 | color: var(--spice-subtext) !important; 1092 | } 1093 | 1094 | .search-modal-searchBar:has(.search-modal-input:hover) { 1095 | background-color: rgba(var(--spice-rgb-selected-row), 0.25) !important; 1096 | 1097 | .search-modal-searchIcon, 1098 | .search-modal-input { 1099 | color: var(--spice-text) !important; 1100 | } 1101 | } 1102 | 1103 | .search-modal-searchBar:has(.search-modal-input:focus) { 1104 | background-color: rgba(var(--spice-rgb-card), 0.75) !important; 1105 | border-bottom: 2px solid var(--spice-accent) !important; 1106 | 1107 | .search-modal-searchIcon, 1108 | .search-modal-input { 1109 | color: var(--spice-text) !important; 1110 | } 1111 | } 1112 | 1113 | .search-modal-input { 1114 | background-color: transparent !important; 1115 | } 1116 | 1117 | /* Download Progress Bar */ 1118 | .eKcCHC { 1119 | position: relative; 1120 | overflow: hidden; 1121 | } 1122 | 1123 | .eKcCHC>.ProgressBarIndicator-sc-1b6tcn5-0 { 1124 | position: absolute; 1125 | height: 100%; 1126 | background: rgba(var(--spice-rgb-accent), 0.75); 1127 | left: 0; 1128 | top: 0; 1129 | border-radius: 99px; 1130 | } 1131 | 1132 | /* Whats new */ 1133 | .pVVteJIfAdehWU3vX7JR { 1134 | margin: 0; 1135 | } 1136 | 1137 | 1138 | .T9iBYqbERZHdwDl0U2tC .hGbRiYkIjjy4sJvor0A2>:not(.OgaF7O4ER8AvZfFd6JdJ) { 1139 | opacity: 0.75; 1140 | } 1141 | 1142 | .IEDOUN3mwwZhHVziC03a, 1143 | .Box-group-naked-listRow-isInteractive-hasLeadingOrMedia-minBlockSize_56px { 1144 | border: var(--default-border); 1145 | border-radius: var(--border-radius-md); 1146 | margin-top: var(--margin-md); 1147 | } 1148 | 1149 | .IEDOUN3mwwZhHVziC03a .HeaderArea, 1150 | .Box-group-naked-listRow-isInteractive-hasLeadingOrMedia-minBlockSize_56px .HeaderArea { 1151 | max-width: 70% !important; 1152 | } 1153 | 1154 | .XaingSntLq8c8wEfqf81, 1155 | ._72TrTBKZHea2vJ2I2BJX { 1156 | position: absolute; 1157 | right: var(--gap-lg); 1158 | top: var(--gap-sm); 1159 | } 1160 | 1161 | .VOGWdrCvz59_A_wAZv58 { 1162 | border: none; 1163 | } 1164 | 1165 | .SjhDNg4bQRQmIJAba47Z .eYvk_xcxVNMwCBkfY3O0>*, 1166 | .IEDOUN3mwwZhHVziC03a .Olh4d9g46wryDMTzRRmw>* { 1167 | opacity: 1; 1168 | } 1169 | 1170 | .eYvk_xcxVNMwCBkfY3O0 button:nth-child(2) { 1171 | order: 2; 1172 | } 1173 | 1174 | .eYvk_xcxVNMwCBkfY3O0 button:first-child { 1175 | order: 3; 1176 | } --------------------------------------------------------------------------------