diff --git a/Bloom/Dark-1.png b/Bloom/Dark-1.png new file mode 100644 index 0000000..c8a0c32 Binary files /dev/null and b/Bloom/Dark-1.png differ diff --git a/Bloom/LICENSE b/Bloom/LICENSE new file mode 100644 index 0000000..d1baa63 --- /dev/null +++ b/Bloom/LICENSE @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2021 William Ha +Copyright (c) 2021 schnensch + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/Bloom/README.md b/Bloom/README.md new file mode 100644 index 0000000..2412f12 --- /dev/null +++ b/Bloom/README.md @@ -0,0 +1,80 @@ +
+

Bloom

+ + [Spicetify](https://github.com/khanhas/spicetify-cli) theme inspired by Microsoft's [Fluent Design System](https://www.microsoft.com/design/fluent). +
+
+

please star and help to shape the future by commenting

+ + +![dark-1](https://raw.githubusercontent.com/nimsandu/spicetify-bloom/main/Dark-1.png) + + +
+ + +## Dependencies + +- [Spicetify](https://github.com/khanhas/spicetify-cli) version 2.7.0 or newer, latest version always recommended. +- [Segoe UI](https://en.wikipedia.org/wiki/Segoe#Segoe_UI) font family, comes pre-installed on Windows Vista and newer. + Segoe UI versions older than 5.37 (older than Windows 8.0) are not officially supported but may work. + +## Installation + +### Windows (PowerShell) + +```powershell +Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/nimsandu/Fluent-Spotify/install.ps1" | Invoke-Expression +``` + +### Linux/macOS (Bash) + +```bash +curl -fsSL https://raw.githubusercontent.com/nimsandu/Fluent-Spotify/install.sh | sh +``` + +### OR DOWNLOAD Release script (powershell or shell) and run on your machine + + +### Spicetify Marketplace + +You may alternatively install spicetify-fluent from within the Spicetify Marketplace. +Simply install the [spicetify-marketplace](https://github.com/spicetify/spicetify-marketplace) by following it's +installation instructions and look for and install the theme from within the Marketplace Button. + +### Important + +For the sidebar playlists to show properly, ensure that these two lines are added in the Patch section of your `config-xpui.ini` file: + +```ini +[Patch] +xpui.js_find_8008 = ,(\w+=)32, +xpui.js_repl_8008 = ,${1}56, +``` + +## Customization + +apply the theme using these commands + +``` +spicetify current_theme Bloom +spicetify config color_scheme dark +spicetify apply +``` + +### More Options + +- You can change the accent color in the theme folder's color.ini file. +- If you are using Windows, you can hide the window controls by adding the flag `--transparent-window-controls` after Spotify.exe in your Spotify shortcut. +- Use "Sidebar config" in the Spotify profile menu to hide/unhide and stick/unstick the Liked Songs and My Episodes icons in the sidebar. + +## Credits +special thanks and the concept belongs to williamckha +customized the theme by williamckha (https://github.com/williamckha/spicetify-fluent) +Based off [Ziro](https://github.com/schnensch0/ziro) theme by [schnensch](https://github.com/schnensch0) +[Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) by Microsoft Corporation +[Phosphor Icons](https://github.com/phosphor-icons/phosphor-icons) by Phosphor Icons + +## License + +[MIT License](LICENSE) diff --git a/Bloom/assets/fluentui-system-icons/LICENSE b/Bloom/assets/fluentui-system-icons/LICENSE new file mode 100644 index 0000000..3c88423 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Microsoft Corporation + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_add_circle_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_add_circle_24_regular.svg new file mode 100644 index 0000000..4f045c5 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_add_circle_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg new file mode 100644 index 0000000..7f56f64 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg new file mode 100644 index 0000000..41d10d4 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg new file mode 100644 index 0000000..a12d356 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg new file mode 100644 index 0000000..cab2d04 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg new file mode 100644 index 0000000..88c1c52 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_filled.svg new file mode 100644 index 0000000..2920bd4 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_regular.svg new file mode 100644 index 0000000..1c3e255 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_arrow_up_right_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_folder_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_folder_24_filled.svg new file mode 100644 index 0000000..f22319f --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_folder_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_heart_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_heart_24_filled.svg new file mode 100644 index 0000000..442f995 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_heart_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_filled.svg new file mode 100644 index 0000000..cc43ee8 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_regular.svg new file mode 100644 index 0000000..f37bf31 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_home_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_filled.svg new file mode 100644 index 0000000..a7d0027 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_regular.svg new file mode 100644 index 0000000..3646e45 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_library_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_mic_on_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_mic_on_24_filled.svg new file mode 100644 index 0000000..84f0dd5 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_mic_on_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg new file mode 100644 index 0000000..05a2067 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_next_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_next_24_filled.svg new file mode 100644 index 0000000..65d98a4 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_next_24_filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_pause_16_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_pause_16_filled.svg new file mode 100644 index 0000000..60a814a --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_pause_16_filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_play_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_play_24_filled.svg new file mode 100644 index 0000000..390cabd --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_play_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_previous_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_previous_24_filled.svg new file mode 100644 index 0000000..902748e --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_previous_24_filled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_search_12_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_search_12_filled.svg new file mode 100644 index 0000000..0eccb9a --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_search_12_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_filled.svg new file mode 100644 index 0000000..b24cf29 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_regular.svg new file mode 100644 index 0000000..2674a73 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_search_16_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_filled.svg new file mode 100644 index 0000000..041059f --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_regular.svg new file mode 100644 index 0000000..8634841 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_search_24_regular.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg new file mode 100644 index 0000000..09a85eb --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg @@ -0,0 +1,10 @@ + + + + Layer 1 + + + + + + \ No newline at end of file diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg new file mode 100644 index 0000000..11d6d73 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg @@ -0,0 +1,15 @@ + + + Layer 1 + + + + + + + + + + + + \ No newline at end of file diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_filled.svg new file mode 100644 index 0000000..bb18fd5 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_regular.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_regular.svg new file mode 100644 index 0000000..9f92990 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_slide_text_24_regular.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Bloom/assets/fluentui-system-icons/ic_fluent_top_speed_24_filled.svg b/Bloom/assets/fluentui-system-icons/ic_fluent_top_speed_24_filled.svg new file mode 100644 index 0000000..4ceada8 --- /dev/null +++ b/Bloom/assets/fluentui-system-icons/ic_fluent_top_speed_24_filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/Bloom/assets/phosphor-icons/LICENSE b/Bloom/assets/phosphor-icons/LICENSE new file mode 100644 index 0000000..e2eb0bd --- /dev/null +++ b/Bloom/assets/phosphor-icons/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Phosphor Icons + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Bloom/assets/phosphor-icons/shuffle-bold.svg b/Bloom/assets/phosphor-icons/shuffle-bold.svg new file mode 100644 index 0000000..f21c08a --- /dev/null +++ b/Bloom/assets/phosphor-icons/shuffle-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Bloom/assets/phosphor-icons/shuffle-light.svg b/Bloom/assets/phosphor-icons/shuffle-light.svg new file mode 100644 index 0000000..c1c22ae --- /dev/null +++ b/Bloom/assets/phosphor-icons/shuffle-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Bloom/assets/phosphor-icons/shuffle.svg b/Bloom/assets/phosphor-icons/shuffle.svg new file mode 100644 index 0000000..8ec7e24 --- /dev/null +++ b/Bloom/assets/phosphor-icons/shuffle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Bloom/bloom.js b/Bloom/bloom.js new file mode 100644 index 0000000..ccb3741 --- /dev/null +++ b/Bloom/bloom.js @@ -0,0 +1,128 @@ +(function bloom() { + + function waitForElement(els, func, timeout = 10000) { + const queries = els.map(el => document.querySelector(el)); + if (queries.every(a => a)) { + func(); + } else if (timeout > 0) { + setTimeout(waitForElement, 300, els, func, timeout--); + } + } + + waitForElement([ + ".main-rootlist-rootlistItemLink" + ], function () { + function replacePlaylistIcons() { + const playListItems = document.getElementsByClassName("main-rootlist-rootlistItemLink"); + + for (const item of playListItems) { + const link = item.pathname; + let uri; + if (link.search("playlist") !== -1) { + uri = Spicetify.URI.playlistV2URI(link.split("/").pop()); + } else if (link.search("folder") !== -1) { + item.style.content = "url('./fluentui-system-icons/ic_fluent_folder_24_filled.svg')" + continue; + } + + Spicetify.CosmosAsync.get( + `sp://core-playlist/v1/playlist/${uri.toString()}/metadata`, { + policy: { + picture: true + } + } + ).then(res => { + const meta = res.metadata; + if (meta.picture === "") { + item.style.content = "url('./fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg')" + } else { + item.style.backgroundImage = "url(" + meta.picture + ")"; + item.style.content = ""; + } + }); + }; + + }; + + replacePlaylistIcons(); + const observer = new MutationObserver(replacePlaylistIcons); + waitForElement(["#spicetify-playlist-list"], () => { + const rootList = document.querySelector("#spicetify-playlist-list"); + observer.observe(rootList, { + childList: true, + subtree: true + }); + }); + }); + + waitForElement([ + ".main-navBar-navBarLink", + "[href='/collection'] > span" + ], () => { + const navBarItems = document.getElementsByClassName("main-navBar-navBarLink"); + for (const item of navBarItems) { + let div = document.createElement("div"); + div.classList.add("navBar-navBarLink-accent"); + item.appendChild(div); + } + document.querySelector("[href='/collection'] > span").innerHTML = "Library"; + }); + + const textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text'); + if (textColor == " #000000") { + document.documentElement.style.setProperty('--filter-brightness', 0); + } + + var interval = setInterval(function () { + if ( + typeof Spicetify.Platform == 'undefined' || ( + typeof Spicetify.Platform.Translations.play == 'undefined' && + typeof Spicetify.Platform.Translations.pause == 'undefined' + ) + ) return; + clearInterval(interval); + var playButtonStyle = document.createElement('style'); + playButtonStyle.type = 'text/css'; + playButtonStyle.innerHTML = ` + .main-playButton-button[aria-label="${Spicetify.Platform.Translations.play}"], + .main-playButton-PlayButton[aria-label="${Spicetify.Platform.Translations.play}"], + .main-playPauseButton-button[aria-label="${Spicetify.Platform.Translations.play}"], + .main-trackList-rowPlayPauseButton[aria-label="${Spicetify.Platform.Translations.play}"] { + background-color: var(--spice-text) !important; + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg') !important; + } + .main-playButton-button[aria-label="${Spicetify.Platform.Translations.pause}"], + .main-playButton-PlayButton[aria-label="${Spicetify.Platform.Translations.pause}"], + .main-playPauseButton-button[aria-label="${Spicetify.Platform.Translations.pause}"], + .main-trackList-rowPlayPauseButton[aria-label="${Spicetify.Platform.Translations.pause}"] { + background-color: var(--spice-text) !important; + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_pause_16_filled.svg') !important; + }`; + document.getElementsByTagName('head')[0].appendChild(playButtonStyle); + }, 10) + + waitForElement([".progress-bar__slider"], () => { + const sliders = document.getElementsByClassName("progress-bar__slider"); + for (const slider of sliders) { + const dot = document.createElement("div"); + dot.classList.add("slider-dot"); + slider.appendChild(dot); + } + }, 10); + + waitForElement([".ExtraControls"], () => { + const element = document.querySelector(".ExtraControls"); + element.addEventListener("click", () => { + waitForElement([".npv-main-container .progress-bar__slider"], () => { + const sliders = document.getElementsByClassName("npv-main-container")[0].getElementsByClassName("progress-bar__slider"); + for (const slider of sliders) { + if (slider.dataset.dot === "true") { continue; } + slider.dataset.dot = "true"; + const dot = document.createElement("div"); + dot.classList.add("slider-dot"); + slider.appendChild(dot); + } + }, 10) + }) + }, 10); +})(); diff --git a/Bloom/color.ini b/Bloom/color.ini new file mode 100644 index 0000000..d8b8d19 --- /dev/null +++ b/Bloom/color.ini @@ -0,0 +1,113 @@ +[acc 00befd] + +[light] +text = 1B1B1B +subtext = 6d6d6d +alt-text = ffffff +main = f9f9f9 +sidebar = F3F3F3 +player = F3F3F3 +player-border = e4e4e4 +player-bar-shadow = a5a5a5 +player-bar-bg = 7d7d7d +card = fdfdfd +shadow = ffffff +selected-row = fdfdfd +button = ffffff +button-active = ffffff +button-disabled = fdfdfd +tab-active = eeeeee +notification = 006bba +notification-error = fb7c7c +misc = 202020 +not-selected = bbbbbb +; Change accent color +accent = 006bba +layer-shadow = ededed +contour = efefef +dark-border = E5E5E5 +light-border = E5E5E5 + +[dark] +text = ffffff +subtext = 909090 +alt-text = ffffff +main = 14141a +sidebar = 121316 +player = 202330 +player-border = 3c3c3c +player-bar-shadow = 040508 +player-bar-bg = 313131 +card = 22222a +shadow = ffffff +selected-row = 30303a +button = ffffff +button-active = ffffff +button-disabled = 313131 +tab-active = 272727 +notification = 00befd +notification-error = fb7c7c +misc = 3c3c3c +not-selected = bbbbbb +; Change accent color +accent = 00ffa1 +layer-shadow = 1d1d1d +contour = 3c3c3c +; +dark-border = 171717 +; +light-border = 3a3a3a + +[dracula] +text = f8f8f2 +subtext = 6272a4 +alt-text = f8f8f2 +main = 282a36 +sidebar = 282a36 +player = 282a36 +player-border = 3d3f4a +player-bar-shadow = 181920 +player-bar-bg = 323336 +card = 44475a +shadow = f8f8f2 +selected-row = 44475a +button = f8f8f2 +button-active = 50fa7b +button-disabled = 44475a +tab-active = 44475a +notification = 8be9fd +notification-error = fb7c7c +misc = 282a36 +not-selected = bbbbbb +; Change accent color +accent = 8be9fd +layer-shadow = 181920 +contour = 3d3f4a + +[comfy] +text = ffffff +subtext = 909090 +alt-text = ffffff +main = 23283d +sidebar = 1a202e +topbar = 101320 +nav-icon-active = bbbbbb +player = 1a202e +player-border = 0d0d0d +player-bar-shadow = 171717 +player-bar-bg = 313131 +card = 1e2233 +shadow = ffffff +selected-row = 1e2233 +button = ffffff +button-active = ffffff +button-disabled = 313131 +tab-active = 23283d +notification = 1b7d48 +notification-error = fb7c7c +misc = 1a202e +not-selected = bbbbbb +accent = 35b8f3 +layer-shadow = 1d1d1d +contour = 0c0c0c + diff --git a/Bloom/install.ps1 b/Bloom/install.ps1 new file mode 100644 index 0000000..d454927 --- /dev/null +++ b/Bloom/install.ps1 @@ -0,0 +1,84 @@ +# Enable TLS 1.2 since it is required for connections to GitHub +[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 + +Write-Host "Beginning installation of spicetify-fluent" +Write-Host "https://github.com/nimsandu/spicetify-bloom" + +# Give time for user to cancel via CTRL+C +Start-Sleep -s 3 + +$checkSpice = Get-Command spicetify -ErrorAction Silent +if ($null -eq $checkSpice) { + Write-Host -ForegroundColor Red "Spicetify not found. Installing that for you..." + Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/khanhas/spicetify-cli/master/install.ps1" | Invoke-Expression +} + +# Check if ~\.spicetify-cli\Themes\bloom directory exists +$spicePath = spicetify -c | Split-Path +$themePath = "$spicePath\Themes\bloom" +if (-not (Test-Path $themePath)) { + Write-Host "Creating bloom theme folder..." + New-Item -Path $themePath -ItemType Directory | Out-Null +} else { + # Remove pre-existing files, only keep the newest files + Remove-Item "$themePath\*" -Recurse -Force +} + +# Download latest master +$zipUri = "https://github.com/nimsandu/spicetify-bloom/archive/refs/heads/master.zip" +$zipSavePath = "$themePath\bloom-main.zip" +Write-Host "Downloading spicetify-bloom latest master..." +Invoke-WebRequest -Uri $zipUri -UseBasicParsing -OutFile $zipSavePath + +# Extract theme from .zip file +Write-Host "Extracting..." +Expand-Archive -Path $zipSavePath -DestinationPath $themePath -Force +Get-ChildItem "$themePath\spicetify-bloom-main\*" | ForEach-Object { Move-Item $_ $themePath } +Remove-Item "$themePath\spicetify-bloom-main" + +# Delete .zip file +Write-Host "Deleting zip file..." +Remove-Item -Path $zipSavePath + +# Change Directory to the Theme Folder +Set-Location $themePath + +# Copy the bloom.js to the Extensions folder +Copy-Item bloom.js ..\..\Extensions +Write-Host "+ Installed bloom.js theme" + +# Apply the theme with spicetify config calls +spicetify config extensions bloom.js +spicetify config current_theme bloom +spicetify config color_scheme dark +spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 +Write-Host "+ Configured bloom theme" + +# Patch the xpui.js for sidebar fixes +# credit: https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/install.ps1 +$configFile = Get-Content "$spicePath\config-xpui.ini" +if (-not ($configFile -match "xpui.js_find_8008")) { + $rep = @" +[Patch] +xpui.js_find_8008=,(\w+=)32, +xpui.js_repl_8008=,`${1}58, +"@ + # In case missing Patch section + if (-not ($configFile -match "\[Patch\]")) { + $configFile += "`n[Patch]`n" + } + $configFile = $configFile -replace "\[Patch\]",$rep + Set-Content "$spicePath\config-xpui.ini" $configFile +} +Write-Host "+ Patched xpui.js for Sidebar fixes" + +# backup apply or just apply where necessary +# credit: https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/install.ps1 +$backupVer = $configFile -match "^version" +$version = ConvertFrom-StringData $backupVer[0] +if ($version.version.Length -gt 0) { + spicetify apply +} else { + spicetify backup apply +} +Write-Host "+ Applied Theme" \ No newline at end of file diff --git a/Bloom/install.sh b/Bloom/install.sh new file mode 100644 index 0000000..cb5e434 --- /dev/null +++ b/Bloom/install.sh @@ -0,0 +1,67 @@ +#!/bin/sh + +set -e + +echo "Beginning installation of spicetify-bloom" +echo "https://github.com/nimsandu/spicetify-bloom" + +# Give time for user to cancel via CTRL+C +sleep 3s + +# Check if ~\.spicetify-cli\Themes\bloom directory exists +spicePath=dirname "$(spicetify -c)" +themePath=dirname "$spicePath/Themes/bloom" +if [ ! -d $themePath ]; then + echo "Creating bloom theme folder..." + mkdir -p $themePath +else + # Remove pre-existing files, only keep the newest files + rm -rfv "$themePath/*" +fi + +# Download latest master +zipUri="https://github.com/nimsandu/spicetify-bloom/archive/refs/heads/master.zip" +zipSavePath="$themePath/bloom-main.zip" +echo "Downloading bloom-spicetify latest master..." +curl --fail --location --progress-bar --output "$zipUri" "$zipSavePath" + + +# Extract theme from .zip file +echo "Extracting..." +unzip -d "$themePath" -o "$zipSavePath" +mv "$themePath/spicetify-bloom-main/*" $themePath +rmdir "$themePath/spicetify-bloom-main" + +# Delete .zip file +echo "Deleting zip file..." +rm "$zipSavePath" + +# Change Directory to the Theme Folder +cd $themePath + +# Copy the fluent.js to the Extensions folder +mkdir -p ../../Extensions +cp fluent.js ../../Extensions/. +echo "+ Installed bloom.js extension" + +# Apply the theme with spicetify config calls +spicetify config extensions bloom.js +spicetify config current_theme bloom +spicetify config color_scheme dark +spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 +echo "+ Configured Bloom theme" + +# Patch the xpui.js for sidebar fixes +# credit: https://github.com/JulienMaille/dribbblish-dynamic-theme/blob/main/install.sh +PATCH='[Patch] +xpui.js_find_8008 = ,(\\w+=)32, +xpui.js_repl_8008 = ,\${1}58,' +if cat config-xpui.ini | grep -o '\[Patch\]'; then + perl -i -0777 -pe "s/\[Patch\].*?($|(\r*\n){2})/$PATCH\n\n/s" config-xpui.ini +else + echo -e "\n$PATCH" >> config-xpui.ini +fi +echo "+ Patched xpui.js for Sidebar fixes" + +spicetify apply +echo "+ Applied Theme" diff --git a/Bloom/user.css b/Bloom/user.css new file mode 100644 index 0000000..952fa18 --- /dev/null +++ b/Bloom/user.css @@ -0,0 +1,1723 @@ +:root { + --border-radius-1: 9px; + --border-radius-2: 7px; + --border-radius-3: 7px; + --glue-font-weight-normal: 400; + --glue-font-weight-bold: 600; + --glue-font-weight-black: 700; + --scrollbars: unset; + --scrollbar-vertical-size: 6px; + --filter-brightness: 1; + --green: #00ffa1; +} + +* { + font-family: 'Segoe UI', sans-serif !important; + line-height: normal; + box-shadow: none !important; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} + +.Root__main-view { + z-index: 0; + background-color: var(--spice-main); + height: 119%; +} + +.os-scrollbar { + display: var(--scrollbars); +} + +.os-scrollbar-handle { + border-radius: 50px; + background: var(--spice-button-disabled) !important; +} + +.os-theme-spotify>.os-scrollbar-vertical { + margin-right: 2px; +} + +.os-scrollbar-horizontal { + display: none; +} + +.contentSpacing { + max-width: 100vw !important; +} + +.main-home-homeHeader, +.main-actionBarBackground-background { + background-image: none; +} + +.main-actionBarBackground-background, +.main-home-homeHeader, +.x-entityHeader-overlay, +.x-actionBarBackground-background { + background-color: var(--spice-main) !important; +} + +.main-topBar-background, +.main-topBar-overlay { + background-color: var(--spice-topbar) !important; + opacity: 1 !important; +} + +.main-entityHeader-overlay { + background-image: linear-gradient(to bottom, rgb(39 39 39 / 0%), var(--spice-main)); +} + +.x-actionBarBackground-background, +.x-entityHeader-overlay, +.We1fExPHxLIRmV0rZGNo { + background: none !important; +} + + +/* remove dividers */ + +.main-trackList-trackListHeaderRow, +.main-trackCreditsModal-header { + background-color: var(--spice-card); + border-bottom: none; +} + +.now-playing-bar-container, +._6e96ad0ba78d75ffb2a0156aa1834a21-scss { + border-top: none; +} + +.main-rootlist-rootlistDivider, +.main-contextMenu-dividerBefore::before, +.main-contextMenu-dividerAfter::after, +.show-episodeList-divider, +.main-rootlist-rootlistDividerContainer { + display: none; +} + + +/* cards */ + +.main-shelf-shelfGrid { + overflow-y: visible !important; +} + +.main-cardImage-image, +.main-cardImage-imageWrapper, +.OALAQFKvC7XQOVYpklB4 img { + border-radius: var(--border-radius-2); +} + +.main-card-card, +.x-heroCategoryCard-HeroCategoryCard, +.x-categoryCard-CategoryCard, +.main-heroCard-card, +.OALAQFKvC7XQOVYpklB4 { + border-radius: var(--border-radius-1); +} + +.main-card-card, +.main-heroCard-card, +.x-searchResultsTracks-root>.main-gridContainer-gridContainer, +.main-trackList-indexable, +.view-homeShortcutsGrid-shortcut, +.OALAQFKvC7XQOVYpklB4, +.L4WROPnQ7MPGhylvVyxd { + background-color: var(--spice-card); + box-shadow: 0px 4px 4px -4px var(--spice-layer-shadow) !important; + border: 1px var(--spice-contour) solid; +} + +.main-tag-container { + font-weight: 400; + font-size: 10px; + color: #463d3d !important; +} + +.main-heroCardTag-root, ._8PRqRiYMqnyy_gN_fUD ._AxyaXOKl3GkvT212Vco { + height: 24px; + padding: 12px; + margin-top: 8px; +} + +.ZHE5oMCbrUVXtUWiPmpH { /* tags */ + padding: 12px !important; +} + +.x-categoryCard-title, +.x-heroCategoryCard-heroTitle, +.collection-collectionEntityHeroCard-likedSongs div { + color: var(--spice-alt-text); +} + + +/* transitions */ + +.main-card-card { + transition: background-color 150ms ease; +} + +.link-subtle { + transition-duration: 150ms; +} + + +/* headers */ + +.Root__top-bar { + position: absolute !important; + width: 100vw !important; + grid-area: none; + z-index: 4 !important; + background: var(--spice-sidebar); +} + +.main-topBar-container { + background: transparent; + max-width: 100vw; + backdrop-filter: blur(70px) !important; +} + +.main-entityHeader-withBackgroundImage { + padding: 0 32px 24px; + margin-top: 48px; +} + +.main-entityHeader-title { + font-size: unset; + font-weight: 500; +} + +h1, +h2, +h3, +.main-shelf-title, +.main-entityHeader-topbarTitle, +.main-type-canon, +.main-type-bass, +.main-cardHeader-text.main-type-alto, +.x-searchResultsTracks-title { + font-weight: 500; + letter-spacing: 0.1px !important; + margin-bottom: 4px; + white-space: normal; +} + +.main-seeAll-link { + margin-bottom: 10px; +} + +.main-topBar-topbarContent { + position: absolute; + display: -webkit-box; + left: 50%; + top: 5px; + transform: translate(-50%, 0%); + padding: 6px; +} + +.queue-tabBar-header { + text-align: center; + min-width: 100px; +} + +.queue-tabBar-headerItemLink { + transition: background-color ease-out 167ms; +} + +.main-topBar-historyButtons button:nth-child(1) { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg'); + margin-left: 60px; + background-color: var(--spice-text) !important; + padding: 5px; + width: 24px !important; + height: 24px !important; +} + +.main-topBar-historyButtons button:nth-child(2) { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg'); + background-color: var(--spice-text) !important; + padding: 5px; + width: 24px !important; + height: 24px !important; +} + +.main-userWidget-displayName, +.main-userWidget-chevron { + display: none !important; +} + + +/* menus */ + +.main-contextMenu-menuItemButton, +.main-userWidget-dropDownMenuItemButton { + border-radius: var(--border-radius-1); + color: var(--spice-text) !important; + 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: var(--border-radius-1); + border: 1px solid var(--spice-layer-shadow); + background-color: var(--spice-card); +} + +.queue-tabBar-dropdownItemLink { + color: var(--spice-text) !important; +} + + +/* buttons */ + +.icon, .gSLhUO, .hDgDGI { + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + margin: auto; + display: block; +} + +.main-navBar-navBarLink .gSLhUO path, +.icon > svg, +.x-searchInput-searchInputIconContainer path, +.show-episodeBlock-playerActions svg, +.main-playButton-PlayButton polygon, +.main-playButton-PlayButton rect { + display: none !important; +} + +.home-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_home_24_regular.svg'); + background-color: var(--spice-subtext) !important; +} + +.home-active-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_home_24_filled.svg'); + background-color: var(--spice-accent) !important; +} + +.search-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_24_regular.svg'); + background-color: var(--spice-subtext) !important; +} + +.search-active-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_24_filled.svg'); + background-color: var(--spice-accent) !important; +} + +.collection-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_library_24_regular.svg'); + background-color: var(--spice-subtext) !important; +} + +.collection-active-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_library_24_filled.svg'); + background-color: var(--spice-accent) !important; +} + +.main-navBar-navBarLink[href="/lyrics-plus"] > .collection-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_regular.svg'); + background-color: var(--spice-subtext) !important; +} + +.main-navBar-navBarLink[href="/lyrics-plus"] > .collection-active-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_filled.svg'); + background-color: var(--spice-accent) !important; +} + +.home-icon path, +.search-icon path, +.collection-icon path, +.home-active-icon path, +.search-active-icon path, +.collection-active-icon path { + display: none !important; +} + +.main-createPlaylistButton-button { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_add_circle_24_regular.svg'); + background-color: var(--spice-subtext) !important; + padding: 0px; + margin: auto; + height: 24px !important; + width: 24px !important; + display: block !important; + margin-top: 20px !important; + margin-bottom: 20px !important; +} + +.main-createPlaylistButton-button svg { + display: none !important; +} + +.main-createPlaylistButton-createPlaylistIcon { + background-color: var(--spice-subtext) !important; + display: block !important; +} + +.main-createPlaylistButton-createPlaylistIcon > svg, .main-createPlaylistButton-text { + display: none !important; +} + +.main-collectionLinkButton-collectionLinkButton { + width: 49px; + min-height: 48px; + margin: auto; + margin-bottom: 8px; + justify-content: center; +} + +.main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] { + background: linear-gradient(135deg,#450af5,#c4efd9) !important; +} + +.main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] { + background-color: #006450 !important; +} + +.main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] .main-collectionLinkButton-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_heart_24_filled.svg'); + background-color: white !important; + margin-right: 0px; +} + +.main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] .main-collectionLinkButton-icon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_mic_on_24_filled.svg'); + background-color: #00DA6B !important; + margin-right: 0px; +} + +.main-likedSongsButton-likedSongsIcon, +.main-yourEpisodesButton-yourEpisodesIcon, +.main-collectionLinkButton-collectionLinkText { + display: none !important; +} + + +.main-type-balladBold { + font-weight: 500; + letter-spacing: 0.2px; +} + +.main-type-minuetBold { + text-transform: none; + letter-spacing: 0px; + font-weight: 400; + font-size: 14px; + line-height: 10px; +} + +.main-shelf-seeAll { + height: 21px; +} + +style { + --nav-bar-width: 62px !important; +} + +.main-playButton-PlayButton.main-playButton-primary, +.main-pageErrorTemplate-errorButton { + color: var(--spice-shadow); +} + +button.switch { + background-color: transparent !important; +} + +#spicetify-home-config button, +#spicetify-sidebar-config button { + background-color: var(--spice-main) !important; + color: var(--spice-text) !important; + border: none !important; +} + +#spicetify-home-config button { + border-radius: var(--border-radius-2) !important; +} + +#spicetify-sidebar-config button { + border-radius: var(--border-radius-3) !important; +} + +#spicetify-home-config button:disabled, +#spicetify-sidebar-config button:disabled { + background-color: var(--spice-button-disabled) !important; + color: var(--spice-text) !important; +} + +.main-buttons-button, +.show-followButton-button { + background-color: var(--spice-card); + font-weight: normal; + font-size: 15px; + letter-spacing: 0px; + text-transform: none; + border-radius: var(--border-radius-2); + -webkit-font-smoothing: subpixel-antialiased; +} + +.main-button-outlined, +.main-button-outlined:hover { + border: var(--spice-contour) solid 1px !important; +} + +.main-button-primary { + background-color: var(--spice-accent); + color: black; +} + +.main-button-outlined { + background-color: var(--spice-card); +} + +.main-button-secondary { + color: var(--spice-text); +} + +.main-entityHeader-titleButton { + background: none !important; +} + +.x-carousel-button, +.x-removeButton-RemoveButton { + background-color: var(--spice-card); +} + +.x-carousel-button svg { + fill: var(--spice-text) !important; +} + +/* sidebar */ + +.Root__nav-bar { + z-index: 1 !important; + max-width: 85px !important; + height: calc(100% + 107px); +} + +.main-navBar-navBar { + width: 85px !important; + margin-top: 64px; + padding-top: 0; +} + +/* Rounded top-left corner + left/top border for main content window */ +.main-navBar-navBar:before{ + content: ''; + position: absolute; + left: 100%; + width: 100vw; + height: 100vh; + margin-left: -1px; + z-index: 1; + border-top-left-radius: var(--border-radius-2); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + box-shadow: -8px -8px 0 var(--spice-sidebar); + border-left: 1px solid var(--spice-dark-border); + border-top: 1px solid var(--spice-dark-border); + border-right: none; + border-bottom: none; + pointer-events: none; +} + +.main-navBar-navBarLink { + border-radius: var(--border-radius-2); + color: var(--spice-text); + height: 65px !important; + display: block; + padding-top: 12px; + padding-left: 0px; + padding-right: 0px; + margin-bottom: 4px; +} + +.main-navBar-navBarLink span, +.main-createPlaylistButton-text { + font-size: 10.5px !important; + margin: auto; + display: block; + text-align: center; + margin-top: 4px; + white-space: pre; + color: var(--spice-subtext); +} + +.main-navBar-navBarLinkActive span { + display: none; +} + +.main-navBar-navBarLinkActive > .icon, +.main-navBar-navBarLinkActive .gSLhUO, +.main-navBar-navBarLinkActive > .hDgDGI { + position: relative; + top: 50%; + transform: translate(0, -50%); + margin: auto; +} + +.main-navBar-navBarLinkActive { + padding: 0; +} + +.main-navBar-entryPoints { + padding-top: 0 !important; +} + +.main-type-mestoBold { + font-weight: normal !important; +} + +.navBar-navBarLink-accent { + position: relative; + width: 4px; + height: 25px; + background-color: var(--spice-accent); + border-radius: var(--border-radius-2); + bottom: 3px; + display: none; +} + +.main-navBar-navBarLinkActive>.navBar-navBarLink-accent { + display: block !important; +} + +.main-navBar-navBarLink:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.3); +} + +.main-navBar-navBarLink:active { + background-color: rgba(var(--spice-rgb-selected-row), 0.5); +} + +.main-navBar-navBarLinkActive, +.main-navBar-navBarLinkActive:hover, +.main-navBar-navBarLinkActive:active, +.main-navBar-navBarLinkActive:focus { + background-color: var(--spice-selected-row); + color: var(--spice-not-selected); + transition: 167ms ease-out all; +} + +.main-navBar-navBarLink { + transition: background-color ease-out 167ms; +} + + +/* sidebar resizer */ + +.LayoutResizer__resize-bar { + display: none; +} + + +/* playlist sidebar */ + +.main-rootlist-rootlist .os-content { + padding: 0px 0px !important; +} + +.main-rootlist-rootlist { + --left-sidebar-item-height: 48px; + --left-sidebar-padding-left: 18px; + --left-sidebar-padding-right: 18px; + padding-bottom: 120px; /* don't go below player controls */ +} + +.main-rootlist-rootlistItemLink { + padding: 8px; +} + +.main-rootlist-rootlistItemLink:link, +.main-rootlist-rootlistItemLink:visited, +.main-rootlist-rootlistPlaylistHeader { + color: var(--spice-text); + background-color: var(--spice-card); + background-size: cover; + border-radius: var(--border-radius-2); + cursor: pointer; +} + +.main-rootlist-rootlistItemLink:not(:last-child) { + margin-bottom: 8px; +} + +.main-rootlist-textWrapper { + display: none; +} + + +.main-rootlist-statusIcons { + right: 17px !important; + top: -4px; +} + +.main-rootlist-expandArrow { + color: var(--spice-text); + position: relative; + margin-inline-start: -16px; + right: -6px; + top: 16px; + height: 16px; + transform: rotate(-90deg); +} + +.main-rootlist-expandArrow.qAAhQw9dXNB7DbPgDDxy { + transform: rotate(0deg); +} + +.main-rootlist-statusIcons { + margin-inline-start: -24px; + position: relative; + right: 8px; +} + +.main-rootlist-rootlistItemLink:hover, +.main-createPlaylistButton-button:hover, +.main-collectionLinkButton-collectionLinkButton:hover { + filter: brightness(50%); +} + +.main-rootlist-statusIcons>button { + color: var(--spice-text); +} + +.main-rootlist-rootlistItemLinkActive~.main-rootlist-statusIcons>button { + color: var(--spice-shadow); +} + +/* tracklist */ + +.main-trackList-indexable .main-virtualScrollList-wrapper, +.main-trackList-indexable .main-rootlist-wrapper { + background-color: var(--spice-card); + border-radius: var(--border-radius-2); + padding: 8px; +} + +.main-trackList-indexable { + padding: 8px; + padding-bottom: 24px; +} + +.main-trackList-trackListHeader.g9n_9K5pFI3B_JuDI_hS { + padding: 0px; + margin: 0px; + border-bottom: none; + background: var(--spice-card); +} + +.main-trackList-trackListRow { + border-radius: var(--border-radius-2); +} + +.main-trackList-trackListRow:hover { + background-color: rgba(var(--spice-rgb-selected-row), .05); +} + +.main-trackList-trackListRow:active { + background-color: rgba(var(--spice-rgb-selected-row), .1); +} + +.main-trackList-trackListRow.main-trackList-selected, +.main-trackList-trackListRow.main-trackList-selected:hover { + background-color: var(--spice-selected-row); +} + +.main-trackList-trackListRow.main-trackList-selected .main-tag-container, +.main-trackList-trackListRow.main-trackList-selected:hover .main-tag-container, +.main-trackList-trackListRow.main-trackList-selected:active .main-tag-container, +.main-trackList-trackListRow.main-trackList-selected:focus .main-tag-container { + color: var(--spice-text) !important; + background-color: var(--spice-shadow); +} + +.main-tag-container, +.main-trackList-rowImage { + border-radius: var(--border-radius-3); +} + +.main-trackList-rowTitle { + color: var(--spice-text) !important; +} + +.main-trackList-trackListRow.main-trackList-selected span, +.main-trackList-trackListRow.main-trackList-selected:hover span, +.main-trackList-trackListRow.main-trackList-selected:active span, +.main-trackList-trackListRow.main-trackList-selected:focus span, +.main-trackList-trackListRow.main-trackList-selected a, +.main-trackList-trackListRow.main-trackList-selected:hover a, +.main-trackList-trackListRow.main-trackList-selected:active a, +.main-trackList-trackListRow.main-trackList-selected:focus a, +.main-trackList-trackListRow.main-trackList-selected button, +.main-trackList-trackListRow.main-trackList-selected:hover button, +.main-trackList-trackListRow.main-trackList-selected:active button, +.main-trackList-trackListRow.main-trackList-selected:focus button, +.main-trackList-trackListRow.main-trackList-selected div, +.main-trackList-trackListRow.main-trackList-selected:hover div, +.main-trackList-trackListRow.main-trackList-selected:active div, +.main-trackList-trackListRow.main-trackList-selected:focus div { + color: var(--spice-text) !important; +} + +.main-trackList-trackListHeader { + margin-bottom: 8px; +} + +._110dbc41d89af63f97cdd8b7cd7fea47-scss { + border: 1px solid var(--spice-text); +} + +.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, +.main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, +.main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, +.main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss, +.main-trackList-trackListRow.main-trackList-selected .main-button-outlined { + border: 1px solid var(--spice-text); +} + +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { + border-bottom: none; +} + +.main-trackList-statusChangeUp { + color: var(--green); +} + +/* big thanks to CharlieS and harbassan for providing the svg */ +.main-trackList-playingIcon, .WBTm60_TPRG_oYwBuS7_ { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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-text); + content-visibility: hidden; +} + +.main-trackList-selected .main-trackList-playingIcon { + background: var(--spice-shadow); +} + +.main-trackList-rowImageWithPlay .main-trackList-rowPlayPauseButton { + width: 24px; + height: 24px; +} + +/* headers */ + +.main-entityHeader-image:not(.main-entityHeader-circle) { + border-radius: var(--border-radius-1); +} + +.x-sortBox-sortDropdown, +.x-filterBox-filterInput, +.x-filterBox-expandButton:focus, +.x-filterBox-expandButton:hover { + border-radius: var(--border-radius-2) !important; +} + +.x-sortBox-sortDropdown { + color: var(--spice-text); +} + +.fIDrcz, .ghlXvf { + fill: var(--spice-text); +} + +.main-navBar-navBar .fIDrcz { + fill: var(--spice-alt-text); +} + +.x-filterBox-filterInput { + background-color: var(--spice-card); + color: var(--spice-text); +} + +.x-emptyState-container { + height: auto; + margin-top: 120px; +} + +/* artist page */ + +.artist-artistOverview-heading, +.artist-artistPick-heading, +.J6CYfp0Tj6MkWJCdssuA, +.artist-artistAbout-heading { + margin-bottom: 20px !important; +} + +.artist-artistPick-pinnedImage, +.artist-artistOffers-item { + border-radius: var(--border-radius-2) !important; +} + +.artist-artistAbout-container, +.main-entityHeader-background, +.main-entityHeader-background.main-entityHeader-overlay { + border-radius: var(--border-radius-1); +} + +.main-entityHeader-background.main-entityHeader-overlay, +.wQi0raQMEJJrELuj_2FP.main-entityHeader-overlay { + --bgColor: transparent !important; + background: none; +} + +.artist-artistOffers-item:hover { + background-color: rgba(var(--spice-rgb-selected-row), .05) !important; +} + +.artist-artistOffers-item:active { + background-color: rgba(var(--spice-rgb-selected-row), .1) !important; +} + +.main-entityHeader-background, .wQi0raQMEJJrELuj_2FP._dsx4Y9jukDHLzhl7bQb { + transform: scale(1) !important; + margin-top: 48px; +} + +[class="main-entityHeader-backgroundColor"] { + opacity: min(calc(var(--filter-brightness) + 0.4), 1); +} + +.main-entityHeader-container { + background-image: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--spice-main)); +} + +.main-entityHeader-metaDataText, +.main-entityTitle-subtitle, +.main-entityHeader-metaDataText span { + color: var(--spice-text) !important; +} + + +/* podcasts */ + +.show-trailer-container, +.show-episodeBlock-episodeBlock, +.show-show-episodes> :last-child { + border-radius: var(--border-radius-1) !important; +} + +.show-episodeBlock-episodeBlock:hover { + background-color: rgba(var(--spice-rgb-selected-row), .05); +} + +.show-episodeBlock-episodeBlock:active { + background-color: rgba(var(--spice-rgb-selected-row), .1); +} + +.show-show-episodes> :last-child { + padding: 8px 24px; +} + +.show-trailer-container, +.show-show-episodes> :last-child { + background-color: var(--spice-card) !important; +} + + +/* top bar */ + +.main-topBar-button, +.main-userWidget-box { + background-color: var(--spice-sidebar); +} + +.main-entityHeader-topbarTitle, +.main-topBar-topbarTitle { + font-size: 16px; + font-weight: 400; + padding-left: 4px; + position: relative; + top: 5px; +} + +.main-playButton-PlayButton.main-playButton-primary { + padding: 12px; + padding-bottom: 0px; + padding-top: 0px; + height: auto; +} + +.main-topBar-topbarContent>.main-playButton-PlayButton.main-playButton-primary { + margin-top: 10px; +} + + +/* tab bars */ + +a[class*='-tabBar-active'] { + background-color: rgba(var(--spice-rgb-selected-row), 1) !important; +} + +a[class*='-tabBar-headerItemLink']:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.3); +} + +a[class*='-tabBar-headerItemLink']:active { + background-color: rgba(var(--spice-rgb-selected-row), 0.5); +} + + +/* search */ + +.x-searchInput-searchInputInput, +.dIwMadpRrW1PwEwEeAbN, +.G9iUss4eOSpJyn2VBzsS { + background-color: var(--spice-card); + color: var(--spice-text) !important; + border: 1px solid var(--spice-light-border); + border-radius: var(--border-radius-2) !important; + padding-right: 0px; + padding-left: 12px; + transition: background-color ease-in 167ms; +} + +.x-searchInput-searchInputInput:focus, +.dIwMadpRrW1PwEwEeAbN:focus, +.G9iUss4eOSpJyn2VBzsS:focus { + background-color: var(--spice-main); + border-bottom: var(--spice-accent) solid 2px; +} + +.x-searchInput-searchInput, .g3Xinb8x23n81ejvS9Uj { + -webkit-box-flex: 1; + width: 40vw; +} + +.x-searchInput-searchInputIconContainer, +.t2K4_iLmAyDtH7mcT5Wy { + flex-direction: row-reverse; +} + +.H6jh9Xd7DNOq3NsLDmCB { + flex: 0 !important; +} + +.x-searchInput-searchInputSearchIcon { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_16_regular.svg'); + background-color: var(--spice-subtext) !important; + flex: 0; + transform: scaleX(-1); + height: 16px; + width: 16px; +} + +.x-searchInput-searchInputSearchIcon path { + display: none; +} + +.x-searchInput-searchInputClearButton { + margin-left: 5px; + margin-right: 12px; + height: 20px; +} + +.x-searchInput-searchInputClearButton path, +.g7ggq46CbOli19ZxJlQe .BDcKgSW_ys9_Hj2DwDBW path { + display: block !important; + stroke: var(--spice-subtext) !important; + stroke-width: 1.3px; +} + +.x-searchInput-searchInputClearButton svg, +.g7ggq46CbOli19ZxJlQe .BDcKgSW_ys9_Hj2DwDBW svg { + padding: 3px; +} + +.x-searchInput-searchInputSearchIcon, +.x-searchInput-searchInputInput::placeholder, +.x-searchInput-searchInputClearButton { + color: var(--spice-text) !important; +} + +.x-searchResultsTracks-root .main-gridContainer-gridContainer { + padding: 8px; +} + +.main-heroCard-card, +.x-searchResultsTracks-root .main-gridContainer-gridContainer { + background-color: var(--spice-card); + border-radius: var(--border-radius-1); +} + +/* playlist search box icon fix */ + +._bjbHn5TABOW2s5LsEGX { + flex: 0 0 auto !important; +} + +.EsqEJ_NPrHsPkTbX4FW8 { + flex: 0 0 auto !important; + position: fixed !important; + margin-left: 152px !important; +} + + +/* error */ + +path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 23-23C46 10.297 35.703 0 23 0zm0 44C11.421 44 2 34.579 2 23S11.42 2 23 2c11.579 0 21 9.42 21 21 0 11.579-9.42 21-21 21zm1.872-32.065l-.8 16.192h-2.144l-.832-16.192h3.776zm-3.968 20.768c0-.576.203-1.072.608-1.488a1.979 1.979 0 011.472-.624c.576 0 1.072.208 1.488.624.416.416.624.912.624 1.488s-.208 1.067-.624 1.472a2.056 2.056 0 01-1.488.608 2.006 2.006 0 01-1.472-.608 2.002 2.002 0 01-.608-1.472z"], +.spoticon-warning-64::before { + color: var(--spice-notification-error); +} + + +/* modals */ + +.GenericModal__overlay { + background-color: rgba(0, 0, 0, 0.6) +} + +.main-trackCreditsModal-container, +.main-aboutRecsModal-container, +.main-playlistEditDetailsModal-container, +.profile-userEditDetails-container, +.artist-artistAbout-modal { + background-color: var(--spice-main) !important; + border-radius: var(--border-radius-1) !important; +} + +.main-playlistEditDetailsModal-titleInput, +.main-playlistEditDetailsModal-descriptionTextarea, +.main-playlistEditDetailsModal-titleInput:focus, +.main-playlistEditDetailsModal-descriptionTextarea:focus, +.playlist-inlineSearchBox-filterInput { + background-color: var(--spice-card); +} + +.profile-userEditDetails-nameInput, +.profile-userEditDetails-textElement:focus { + background: var(--spice-card) !important; +} + +.main-playlistEditDetailsModal-titleInput:focus, +.main-playlistEditDetailsModal-descriptionTextarea:focus, +.profile-userEditDetails-textElement:focus, +.playlist-inlineSearchBox-filterInput:focus { + border: 1px solid var(--spice-button-active) !important; +} + +.playlist-inlineSearchBox-filterInput { + border: 1px solid var(--spice-card); +} + +.main-playlistEditDetailsModal-titleInput, +.main-playlistEditDetailsModal-descriptionTextarea, +.profile-userEditDetails-nameInput, +.playlist-inlineSearchBox-filterInput { + border-radius: var(--border-radius-2) !important; +} + +.profile-userEditDetails-labelText:before { + bottom: 8px !important; +} + +.main-playlistEditDetailsModal-titleInput::placeholder, +.main-playlistEditDetailsModal-descriptionTextarea::placeholder { + color: var(--spice-text); +} + +.main-editImageButton-overlay { + background-color: rgba(var(--spice-rgb-card), 0.7); +} + + +/* dialogs */ + +.main-deletePlaylistDialog-container, +.main-deleteFolderDialog-container { + background-color: var(--spice-card); + color: var(--spice-text); + border-radius: var(--border-radius-1); +} + +.main-deletePlaylistDialog-secondaryButton, +.main-deleteFolderDialog-secondaryButton { + color: var(--spice-button); +} + +.main-deletePlaylistDialog-buttonContainer>:last-child, +.main-deleteFolderDialog-buttonContainer>:last-child { + background-color: var(--spice-notification-error); +} + + +/* friend activity */ +.spotify__container--is-desktop.spotify__os--is-windows.buddyfeed-visible .main-topBar-container { + padding-inline-end: 170px; +} + +.main-connectToFacebook-container { + margin-top: 50px; +} + +.main-connectToFacebook-text, +.main-connectToFacebook-disclaimer, +.main-connectToFacebook-headerTitle, +.main-addFriendsView-headerText p { + color: var(--spice-text); +} + +.main-addFriendsView-header { + margin-top: 16px; + border-bottom: 1px solid var(--spice-selected-row) !important; +} + +.main-addFriendsView-facebookIconWrapper { + background-color: #008AFF !important; +} + +.main-addFriendsView-filterInput { + background-color: var(--spice-card) !important; + color: var(--spice-text) !important; +} + +.main-addFriendsView-filterInput::placeholder { + color: var(--spice-text) !important; +} + +.main-buddyFeed-header { + opacity: 1 !important; +} + +.main-buddyFeed-friendsFeedContainer { + margin-top: 25px; +} + +.main-buddyFeed-findFriendsIcon, +.main-buddyFeed-addFriendPlaceholderIcon { + color: var(--spice-text) !important; +} + +.main-buddyFeed-username a { + color: var(--spice-text) !important; +} + +.main-buddyFeed-artistAndTrackName a, +.main-buddyFeed-activityMetadata, +.main-buddyFeed-playbackContextLink { + color: var(--spice-subtext) !important; +} + +.main-buddyFeed-friendActivity { + background-color: var(--spice-card); + border-radius: var(--border-radius-1); + margin: 8px; + padding: 8px 8px 8px 12px; +} + +.main-buddyFeed-addFriendsContainer { + background-color: var(--spice-main); +} + +.main-buddyFeed-buddyFeedRoot, +.main-buddyFeed-buddyFeed { + width: 280px; + z-index: 0; +} + +.main-buddyFeed-buddyFeedRoot .main-avatar-avatar { + margin-right: 8px; +} + +.main-buddyFeed-activityMetadata { + max-width: 120px; +} + +/* settings */ + +.main-dropDown-dropDown, +option { + background-color: var(--spice-card) !important; + color: var(--spice-text); +} + +.main-dropDown-dropDown { + border-radius: var(--border-radius-2) !important; +} + +.x-toggle-indicator { + background-color: var(--spice-card) !important; +} + +.x-settings-facebookButton, +.main-connectToFacebook-facebookButton { + color: var(--spice-shadow); +} + +.x-toggle-indicatorWrapper { + background-color: rgba(var(--spice-rgb-subtext), .3) !important; +} + +.x-proxySettings-proxyInput { + border-radius: var(--border-radius-2) !important; + background-color: var(--spice-card) !important; +} + +.x-proxySettings-proxyInput::placeholder { + color: var(--spice-subtext); +} + +.x-proxySettings-proxyInput:focus { + border-color: var(--spice-button-active); +} + + +/* connect device menu */ + +._9eb5acf729a98d62135ca21777fef244-scss, +.connect-device-button { + color: var(--spice-shadow); +} + +.connect-device-list-container { + border-radius: var(--border-radius-1); + border: 1px solid var(--spice-button-disabled); +} + +.connect-device-list-item { + margin: 0 8px; + border-radius: var(--border-radius-2); + width: -webkit-fill-available; +} + +.connect-device-list-item:last-child { + margin: 0 8px 8px; +} + +.connect-device-list-item:focus, +.connect-device-list-item:hover { + background-color: rgba(var(--spice-rgb-selected-row), 0.05); +} + +.connect-header { + display: none; +} + +.connect-device-list-item--active, +.connect-device-list-item--active .connect-device-list-item__icon, +.connect-device-list-item--active .connect-device-list-item__device-subtitle { + color: var(--spice-subtext); +} + +.main-connectBar-connectBar { + background-color: var(--spice-accent) !important; + border-radius: 4px; + height: 28px; + width: fit-content; + padding: 8px; + position: absolute; + right: 14px; + bottom: 112px; + color: black !important; + box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important; +} + +.main-connectBar-connectBar:after { + border-bottom: none !important; +} + +.main-connectBar-connectBar .icon, +.main-connectBar-connectBar .hDgDGI { + margin: 0px; + margin-right: 8px; +} + +/* player */ + +.Root__now-playing-bar { + background: #1c232b7a; + padding-right: 6px; + margin: 0px 13px 13px 13px; + width: calc(100% - 26px); + box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75) !important; + border-radius: var(--border-radius-1); + border: 1.7px solid var(--spice-player-border); + backdrop-filter: blur(50px) !important; + + +} + +.main-nowPlayingBar-container { + background: transparent; + border-radius: var(--border-radius-1); + +} + +.gqeP9Y0_y6DLm4CD_m3Q { + border: 0px; + background: none; +} + +.main-nowPlayingBar-container { + background: transparent; + border-top: 0px; + border-radius: var(--border-radius-1)!important; +} + +.now-playing--cover-expanded { + transform: translateX(0px) !important; + border-radius: var(--border-radius-1)!important; + +} + +.playback-bar, +.progress-bar, +.progress-bar__fg_wrapper { + --fg-color: var(--spice-accent) !important; + --is-active-fg-color: var(--spice-accent) !important; + --bg-color: var(--spice-player-bar-bg); +} + +.playback-progressbar { + margin: 0px 8px; +} + +.prog-tooltip { + width: 140px; + display: none; +} + +.progress-bar__slider { + background-color: var(--spice-selected-row) !important; + border: 6px solid var(--spice-selected-row); + box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important; + box-sizing: content-box !important; + width: 8px; + height: 8px; + opacity: 1 !important; + display: block; + margin-left: -10px; +} + +.slider-dot { + width: 3px; + height: 3px; + background-color: var(--spice-accent); + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 5px solid var(--spice-accent); + border-radius: 50%; + transition: border-width 75ms ease; +} + +.progress-bar__slider:hover .slider-dot:not(:hover) { + border-width: 7px; +} + +.slider-dot:hover { + border-width: 7px; +} + +.progress-bar__slider:active .slider-dot:not(:active) { + border-width: 4px !important; +} + +.slider-dot:active { + border-width: 4px !important; +} + +.main-nowPlayingWidget-nowPlaying>.ellipsis-one-line, +.main-trackInfo-container { + margin-left: 74px; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotExpanded-container, +.T6whS8zYB9fG_tIdTg6m { + position: fixed; + top: calc(100% - 320px); + left: calc(100% - 220px); + width: 200px; + height: 200px; + visibility: hidden; + transform-origin: center; + box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5) !important; + animation: 1s coverExpandedIn; + animation-fill-mode: forwards; + background: none; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotExpanded-containerExitActive { + display: none; + border-radius: var(--border-radius-1)!important; +} + +@keyframes coverExpandedIn { + 99% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} + +@keyframes coverExpandedOut { + 99% { + visibility: visible; + } + 100% { + visibility: hidden; + } +} + +.main-coverSlotCollapsed-container, +.zcsxy3fvYCmZGcE7VzW7 { + position: fixed; + top: -12px; + left: 0px; + width: 56px; + height: 56px; + visibility: visible; + z-index: 99999 !important; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotCollapsed-container, +.cover-art .cover-art-image, +.zcsxy3fvYCmZGcE7VzW7 { + transform-origin: center; + transition-timing-function: ease-in; + transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.3s, left 0.5s, box-shadow 0.5s; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotCollapsed-container[aria-hidden="true"], +.zcsxy3fvYCmZGcE7VzW7[aria-hidden="true"] { + left: calc(100vw - 178px); + top: -245px; + width: 200px; + height: 200px; + visibility: hidden; + box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.5) !important; + animation: 1s coverExpandedOut; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotCollapsed-container[aria-hidden="false"], +.zcsxy3fvYCmZGcE7VzW7[aria-hidden="false"] { + transition-timing-function: ease-out !important; + transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.5s 0.1s, left 0.3s, box-shadow 0.5s !important; + border-radius: var(--border-radius-1)!important; +} + +.main-coverSlotCollapsed-container[aria-hidden="true"] .cover-art .cover-art-image, +.main-nowPlayingWidget-coverExpanded .zcsxy3fvYCmZGcE7VzW7 .cover-art .cover-art-image { + width: 200px; + height: 200px; + border-radius: var(--border-radius-1)!important; +} + +.CoverSlotExpanded__actionButton, +.main-coverSlotCollapsed-expandButton, +.CoverSlotExpanded__actionButton:hover, +.main-coverSlotCollapsed-expandButton:hover, +.kyn0AY4_gXWvbdivdFgP, +.kyn0AY4_gXWvbdivdFgP:hover { + background-color: var(--spice-card); + border-radius: var(--border-radius-1)!important; +} + +.now-playing-bar .cover-art-image { + border-radius: var(--border-radius-1); +} + +.playback-bar__progress-time, +.main-playbackBarRemainingTime-container { + color: var(--spice-text) !important; +} + +.progress-bar--is-active .progress-bar__slider:focus { + background-color: var(--spice-accent); +} + +.volume-bar { + margin-right: 8px; +} + +.main-playPauseButton-button, +.player-controls__buttons button:not(.main-playPauseButton-button) { + --button-size: 28px !important; +} + +.main-seekBack15sButton-button, +.main-seekForward15sButton-button, +.main-speedControlsButton-button { + height: auto; + color: var(--spice-button); +} + +.main-playPauseButton-button svg { + height: 24px; + width: 24px; +} + +.player-controls__buttons { + margin-bottom: 8px; + align-items: center; +} + +.player-controls__buttons path { + display: none !important; +} + +.player-controls__left, .player-controls__right { + margin-top: 2px; +} + +.player-controls__buttons button { + padding-left: 20px; + padding-right: 20px; +} + +.main-skipForwardButton-button { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_next_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +.main-skipBackButton-button { + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_previous_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +.j4TkiByCgwfJawuHfzsd { /* Skip back 15 sec */ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +.Kvxb6GUtWNNo5mFeKfMn { /* Skip forward 15 sec */ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +.Y0lBew4O9_Ma84_Lnnsq { /* Speed icon for podcasts */ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_top_speed_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +/* Disabled */ +.main-repeatButton-button[aria-checked="false"]{ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg'); + background-color: var(--spice-subtext) !important; + height: 22px !important; +} +/* Repeat one */ +.main-repeatButton-button[aria-checked="mixed"]{ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg') !important; + background-color: var(--spice-text) !important; + height: 22px !important; +} +/* Repeat all */ +.main-repeatButton-button[aria-checked="true"]{ + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +/* Shuffle disabled */ +.main-shuffleButton-button { + -webkit-mask-image: url('./phosphor-icons/shuffle.svg'); + background-color: var(--spice-subtext) !important; + height: 22px !important; +} +/* Shuffle enabled */ +.main-shuffleButton-button[aria-checked="true"] { + -webkit-mask-image: url('./phosphor-icons/shuffle-bold.svg'); + background-color: var(--spice-text) !important; + height: 22px !important; +} + +/*Like button*/ +.control-button-heart[aria-checked=true] { + color: var(--spice-accent); +} + +/* ads */ + +.main-leaderboardComponent-container, +.main-billboardComponent-footer, +.k6onUQZSeZIsonJ4cSpK { + display: none; +} + +.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer, +.desktoproutes-homepage-takeover-ad-hptoComponent-container, +.snMc3rl8H2pM9cqkTpQ6 { + display: none !important; +} + +.main-topBar-UpgradeButton { + display: none !important; +} + + +/* play buttons */ + +.main-playButton-button, +.main-playButton-PlayButton, +.main-trackList-rowPlayPauseButton{ + background-color: var(--spice-text) !important; + -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg'); +} + + +/* error content */ + +.main-pageErrorTemplate-errorBody { + min-height: calc((100vh - 64px) - 105px); +} + +.main-pageErrorTemplate-errorBody svg { + margin: 0; +} + + +/* spicetify */ + +#spicetify-sidebar-config { + flex-direction: column; + top: -60px !important; +} + +#spicetify-show-list >* { + padding: 0px; +} + +/* spicetify extensions */ + +.main-topBar-button[title="Popup Lyrics"], +.main-topBar-button[title="Full App Display"], +.main-topBar-button[title="Bookmark"] { + background-color: var(--spice-card) !important; +} \ No newline at end of file