confs

.config/spicetify/Themes/BurntSienna/README.md

@@ -0,0 +1,9 @@
+# BurntSienna
+
+## Screenshots
+![BurntSienna](./screenshot.png)
+
+## More
+Montserrat Font is necessary, it is available on Google Fonts:
+https://fonts.google.com/specimen/Montserrat<br>
+Author: https://github.com/pjaspinski

.config/spicetify/Themes/BurntSienna/color.ini

@@ -0,0 +1,6 @@
+[Base]
+button        = ef8450
+sidebar       = 242629
+player        = 242629
+main          = 303336
+button-active = ef8450

.config/spicetify/Themes/BurntSienna/user.css

@@ -0,0 +1,226 @@
+* {
+	font-family: Montserrat;
+}
+
+/* Page titles */
+h1 {
+	font-weight: 700 !important;
+}
+
+/* Song name in player */
+.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
+	overflow: unset;
+	font-size: 20px !important;
+}
+
+/* Artist name in player */
+.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
+	overflow: unset;
+	padding-top: 5px;
+	font-size: 15px;
+}
+
+.main-type-finale {
+	line-height: 17px;
+}
+
+/* Icons */
+.main-trackList-rowPlayPauseIcon {
+	transform: scale(1.3);
+}
+
+.x-downloadButton-button svg {
+	height: 32px;
+	width: 32px;
+}
+
+/* Progress and remaining time */
+.main-playbackBarRemainingTime-container,
+.playback-bar__progress-time-elapsed,
+.playback-bar__progress-time {
+	font-size: 15px;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+/* Player play button */
+.main-playPauseButton-button {
+	background-color: unset;
+	color: var(--spice-subtext);
+}
+
+.main-playPauseButton-button svg {
+	height: 28px;
+	width: 28px;
+}
+
+/* Progress bar */
+.progress-bar {
+	--fg-color: var(--spice-button);
+}
+
+.progress-bar__bg,
+.progress-bar__fg,
+.progress-bar__fg_wrapper {
+	height: 5px;
+}
+
+.progress-bar-wrapper {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+/* Extra controls */
+.control-button::before {
+	font-size: 20px;
+}
+
+.ExtraControls svg {
+	height: 20px;
+	width: 20px;
+}
+
+/* Removing gradients */
+.main-entityHeader-backgroundColor,
+.main-actionBarBackground-background {
+	background-color: unset !important;
+	background-image: none;
+}
+
+/* Cover shadow */
+.main-entityHeader-shadow {
+	-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
+	box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
+}
+
+/* Top bar */
+.main-topBar-background {
+	background-color: #3a3d42 !important;
+}
+
+/* Playing icon */
+.main-trackList-playingIcon {
+	filter: saturate(0%);
+}
+
+/* Playlist like button */
+.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
+	height: unset;
+	width: unset;
+}
+
+/* Order button */
+.x-sortBox-sortDropdown {
+	margin-top: 3px;
+}
+
+/* Sidebar playlists menu */
+.main-rootlist-rootlistDividerGradient {
+	background: unset;
+}
+
+.main-rootlist-rootlistDivider {
+	background-color: var(--spice-button);
+}
+
+/* Search box */
+.x-searchInput-searchInputInput {
+	font-size: 18px;
+}
+
+/* Aritsts names */
+.main-type-mesto {
+	font-size: 16px;
+	line-height: 20px;
+}
+
+/* Songs names */
+.main-type-ballad {
+	font-size: 18px;
+}
+
+/* Cards descriptions */
+.main-cardSubHeader-root {
+	overflow: hidden !important;
+}
+
+/* Ad title */
+.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
+	font-weight: 700 !important;
+}
+
+/* Friends names */
+.main-buddyFeed-username a {
+	color: var(--spice-text) !important;
+	font-size: 17px;
+	font-weight: 500;
+}
+
+/* Friends songs and artists */
+.main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-playbackContextLink span {
+	font-size: 13px;
+}
+
+/* Cover height */
+.main-coverSlotExpanded-container {
+	height: var(--nav-bar-width) + 8px;
+}
+
+/* Scrollbars */
+.os-scrollbar-handle {
+	background: var(--spice-button) !important;
+	border-radius: 8px;
+}
+
+/* Making index column wider so that lighter background that 
+highlights selected song contains multi-digit song numbers */
+/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
+.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid {
+	grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
+}
+
+/* Text boxes in settings */
+.main-dropDown-dropDown {
+	background-color: var(--spice-button-disabled);
+}
+
+/* Facebook button */
+.x-settings-facebookButton {
+	background-color: unset !important;
+}
+
+/* Playlist play button color */
+.encore-dark-theme .encore-bright-accent-set,
+.encore-dark-theme .encore-bright-accent-set:hover {
+	background-color: var(--spice-button) !important;
+}
+
+/* Volume bar margins */
+.volume-bar .progress-bar {
+	margin: 0 0.4rem;
+}
+
+.volume-bar .playback-progressbar {
+	width: 70%;
+}
+
+
+.volume-bar {
+	flex: 0 150px;
+}
+
+/* Menu hidden under the button with account name - font size and family unification */
+.ellipsis-one-line {
+	font-family: Montserrat;
+}
+
+.ellipsis-one-line.main-type-mesto {
+	font-size: 14px;
+}
+
+/* Removal of empty space above playlist cover and title on narrow viewports */
+.main-entityHeader-container.main-entityHeader-nonWrapped {
+	min-height: 325px;
+	height: 15vh;
+}

.config/spicetify/Themes/CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[INSERT CONTACT METHOD].
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

.config/spicetify/Themes/CONTRIBUTING.md

@@ -0,0 +1,119 @@
+# Contributing guidelines
+
+Here are the guidelines for contributing to this repository.
+
+## Before contributing
+
+For avoiding having too many similar themes with small changes, themes are merged only if they bring **sensitive** changes to default Spotify UI and are different from existing themes.
+
+A theme name (as well as color scheme name) should consist of one word starting with an uppercase letter and shouldn't contain `spicetify` or any whitespace in it; if a "-" is present in the name it must be followed by an uppercase letter.
+
+## How to contribute
+
+If you want to add your theme:
+
+*   Fork this repository
+*   Create another folder named after your theme name
+*   Create `color.ini` and `user.css` files
+*   Create a `README.md` in it with the following structure
+
+    ```markdown
+    # THEME_NAME
+
+    ## Screenshots
+
+    [Put at least one image per color scheme here]
+
+    ## More
+
+    [Specify any needed font; (optionally) author name and/or any other info about the theme]
+    ```
+*   Add the theme preview to [THEMES.md](./THEMES.md) (themes are in alphabetical order) following this structure if it has only one color scheme
+
+    ```markdown
+
+    ## THEME_NAME
+
+    [A single image of the theme]
+    ```
+
+    If, instead, more than one color scheme is present
+
+    ```markdown
+    ## THEME_NAME
+
+    #### COLOR_SCHEME1_NAME 
+
+    [A single image of the theme using the color scheme]
+
+    #### COLOR_SCHEME2_NAME
+
+    [A single image of the theme using the color scheme]
+
+    ...
+    ```
+*   Commit only once, more details in the **Commit Message**
+*   Open a Pull Request and mention the most important changes you've made to the UI (ignoring the color scheme)
+
+**Thanks to all the contributors.**
+
+## Commit Message
+
+**NOTE: commit only once when you add a new theme or scheme (you can also commit again later, if you need to).**
+
+### Format
+
+    <type>(<scope>): <subject>
+    <BLANK LINE>
+    <body>[optional]
+
+**Any line of the commit message cannot be longer than 100 characters!**
+
+*   **type:** feat | fix | docs | chore
+    *   **feat:** A new theme | A new scheme | A new feature
+    *   **fix:** A bug fix
+    *   **docs:** Change the `README.md` of the theme | Change the `THEMES.md`
+    *   **chore:** Add more screenshots | Change the screentshots | Other things
+*   **scope:** THEMES | `<ThemeName>`
+    *   THEMES is a fixed format: `docs(THEMES)`
+    *   In other cases, use the theme name
+*   **subject:** What changes you have done
+    *   Use the imperative, present tense: "change" not "changed" nor "changes"
+    *   Don't capitalize first letter
+    *   No dot (.) at the end
+*   **body**: More details of your changes, you can mention the most important changes here
+
+### Example (Turntable theme)
+
+*   feat
+
+    ```
+    feat(Turntable): add Turntable theme
+    ```
+
+
+    ```
+    feat(Turntable): control the rotation of the turntable
+
+    Rotate the turntable by playing state.
+    ```
+*   fix
+
+    ```
+    fix(Turntable): show the cursor outside the context menu
+    ```
+*   docs
+
+    ```
+    docs(Turntable): update README.md
+    ```
+
+    ```
+    docs(THEMES): add preview for the Turntable
+    ```
+*   chore
+
+    ```
+    chore(Turntable): add screenshots of the Turntable
+    ```
+If you want to learn more, view the [Angular - Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).

.config/spicetify/Themes/Default/README.md

@@ -0,0 +1,13 @@
+# Default
+
+Default look of Spotify with different color schemes.
+
+## Screenshot
+
+![screenshot](./ocean.png)
+
+## Info
+
+### Ocean
+
+Part of material ocean themes, [checkout here](https://github.com/material-ocean) for the same theme for different applications. By @Blacksuan19

.config/spicetify/Themes/Default/color.ini

@@ -0,0 +1,16 @@
+[Ocean]
+text               = FFFFFF
+subtext            = F1F1F1
+main               = 0F111A
+sidebar            = 0F111A
+player             = 0F111A
+card               = 00010A
+shadow             = 0F111A
+selected-row       = F1F1F1
+button             = FF4151
+button-active      = F1F1F1
+button-disabled    = 434C5E
+tab-active         = FF4151
+notification       = 00010A
+notification-error = FF4151
+misc               = 00010A

.config/spicetify/Themes/Dreary/README.md

@@ -0,0 +1,36 @@
+# Dreary
+
+## Screenshots
+
+### BIB
+![BIB Screenshot](bib.png)
+
+### Psycho
+![Psycho Screenshot](psycho.png)
+
+### Deeper
+![Deeper Screenshot](deeper.png)
+
+### Mono
+![Mono Screenshot](mono.png)
+
+### Golden
+![Golden Screenshot](golden.png)
+
+### Graytone-Blue
+![Graytone-Blue Screenshot](graytone-blue.png)
+
+
+## Important
+Certain aspects of the theme, such as the borders around playlist names, require Sidebar Config to be enabled. It is not required but recommended.
+
+You can enable it by running `spicetify config sidebar_config 1`.
+
+## More
+
+A chill theme that keeps things bordered in and organized
+
+BIB color scheme based on original [BIB-Green](https://github.com/spicetify/spicetify-themes/tree/master/BIB-Green) 
+
+Theme based on Sleek theme: https://github.com/spicetify/spicetify-themes/tree/v2/Sleek
+

.config/spicetify/Themes/Dreary/color.ini

@@ -0,0 +1,154 @@
+[Psycho]
+; Red on dark grey background
+text               = e00000
+subtext            = ffffff
+button-text        = ffffff
+main               = 101010
+sidebar            = 171717
+player             = 171717
+subbutton-text     = 101010
+card               = 171717
+shadow             = 6d1414
+selected-row       = 330d0d
+sub-button         = a20606
+button             = e00000
+button-active      = e00000
+button-disabled    = 404040
+tab-active         = 171717
+notification       = 5e0000
+notification-error = 5e0000
+playback-bar       = ff4700
+misc               = adadad
+
+[Deeper]
+; Light blue on Dark Background
+text               = 4f9a87
+subtext            = 406560
+button-text        = 4f9a87
+main               = 040614
+sidebar            = 0F111A
+player             = 0F111A
+subbutton-text     = 040614
+card               = 0f1118
+shadow             = 406560
+selected-row       = 040614
+sub-button         = 4f9a87
+button             = 0d3a2e
+button-active      = 106165
+button-disabled    = 0C1C19 
+tab-active         = 0a1527
+notification       = 051024
+notification-error = 051024
+playback-bar       = 4f9a87
+misc               = 406560
+
+[BIB]
+; Green on dark grey background
+text               = 8bc34a
+subtext            = b4b4b4
+button-text        = 202020
+main               = 202020
+sidebar            = 202020
+player             = 242424
+subbutton-text     = 202020
+card               = 242424
+shadow             = 000000
+selected-row       = 2a3c17
+sub-button         = 6a913d
+button             = 537b25
+button-active      = 98da4b
+button-disabled    = 353535
+tab-active         = 303030
+notification       = 242424
+notification-error = 242424
+playback-bar       = 8bc34a
+misc               = 8bc34a
+
+[Mono]
+;Grays, Blacks, Whites, You get the gist.
+text               = FFFFFF
+subtext            = d3d3d3
+button-text        = FFFFFF
+main               = 000000
+sidebar            = 5d5e60
+subbutton-text     = d3d3d3
+player             = 181818
+card               = 5d5e60
+selected-row       = 2D2A32
+shadow             = FFFFFF
+sub-button         = d3d3d3
+button             = d3d3d3
+button-active      = d3d3d3
+button-disabled    = 181818
+tab-active         = d3d3d3
+notification       = 181818
+notification-error = b5cbb7
+playback-bar       = d3d3d3
+misc               = d3d3d3
+
+[Golden]
+;Gold
+text               = FFE002
+subtext            = B28228
+button-text        = FFE002
+main               = 1C1C1C
+sidebar            = 3B3B3B
+subbutton-text     = 3B3B3B
+player             = 1C1C1C
+card               = 3B3B3B
+selected-row       = 1c1c1c
+shadow             = FFE002
+sub-button         = B28228
+button             = B28228
+button-active      = B28228
+button-disabled    = FFB606
+tab-active         = B28228
+notification       = FFB606
+notification-error = b5cbb7
+playback-bar       = B28228
+misc               = B28228
+
+
+[Graytone-Blue]
+; Gray colors with blue highlights
+text               = 4f9a87
+subtext            = 406560
+button-text        = 4f9a87
+main               = 111115
+sidebar            = 1e2027
+subbutton-text     = 040614
+player             = 1a1b1d
+card               = 0f1118
+selected-row       = 040614
+shadow             = 406560
+sub-button         = 4f9a87
+button             = 0d3a2e
+button-active      = 106165
+button-disabled    = 0C1C19
+tab-active         = 0a1527
+notification       = 051024
+notification-error = 051024
+playback-bar       = 4f9a87
+misc               = 406560
+
+; Description
+
+; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
+; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
+; button-text = text in main buttons in sidebar when active
+; main = main field or main bg
+; sidebar = sidebar bg
+; subbutton-text = text of buttons that use the text color or subtext color as a background
+; player = player bg
+; card = card bg
+; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
+; selected-row = color of the song selected
+; sub-button = caption and details of playlist, download and options button
+; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
+; button-active = hover on song selected
+; button-disabled = seekbar bg, volume bar bg, scrollbar
+; tab-active = button bg in main field (playlists, podcasts, artists, albums)
+; notification = notification ('Added to liked songs' etc.)
+; notification-error = error
+; playback-bar = seekbar fg, main play/pause button bg
+; misc = miscellaneous

.config/spicetify/Themes/Dreary/user.css

@@ -0,0 +1,609 @@
+/* Dreary Theme*/
+
+.main-rootlist-rootlistDividerGradient {
+  display: none;
+  visibility: hidden !important;
+}
+
+.main-rootlist-rootlistDivider {
+  background-color: var(--spice-text) !important;
+}
+
+input {
+  background-color: unset !important;
+  border-bottom: solid 1px var(--spice-text) !important;
+  border-radius: 0 !important;
+  padding: 6px 10px 6px 48px;
+  color: var(--spice-text) !important;
+}
+
+.x-833-searchInput-searchInputSearchIcon {
+  color: var(--spice-text) !important;
+}
+
+.main-home-homeHeader,
+.x-441-entityHeader-overlay,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor {
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+.main-playlistEditDetailsModal-textElement:focus {
+  border: 0;
+}
+
+.connect-title,
+.connect-header {
+  display: none;
+}
+
+/* Topbar visibility bug */
+
+.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
+  opacity: unset !important;
+}
+
+.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
+  > * {
+  opacity: 0 !important;
+}
+
+/* Remove Topbar background colour */
+
+.main-topBar-background {
+  background-color: unset !important;
+}
+
+.main-topBar-overlay {
+  background-color: var(--spice-main);
+}
+
+.main-entityHeader-shadow {
+  box-shadow: 0 04px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+  background: var(--spice-text);
+  content-visibility: hidden;
+}
+
+span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
+  fill: black;
+}
+
+/* Hide Banner Ads */
+
+.main-leaderboardComponent-container {
+  display: none;
+}
+
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
+.desktoproutes-homepage-takeover-ad-hptoComponent-container {
+  display: none !important;
+}
+
+/* Hide Upgrade Button */
+
+.main-topBar-UpgradeButton {
+  display: none;
+}
+
+[aria-label="Playing"] {
+  color: var(--spice-text);
+}
+
+/* Fix design fault */
+
+@media (min-width: 1024px) {
+  .main-trackList-trackListHeader {
+    border-bottom: solid 1px;
+    margin: 10px;
+  }
+}
+
+.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+  background: var(--spice-main);
+  border: 0;
+}
+
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
+}
+
+/* Changing Playback Bar Location */
+
+.progress-bar__bg,
+.progress-bar__fg_wrapper {
+  border-radius: 0;
+  z-index: 1;
+}
+
+.playback-bar__progress-time {
+  display: none;
+}
+
+.playback-bar {
+  width: 100%;
+  bottom: 83px;
+  position: absolute;
+  left: -1px;
+  z-index: 1;
+}
+
+.main-playbackBarRemainingTime-container {
+  position: absolute;
+  left: 49.68%;
+  top: 60%;
+  border: solid 1px;
+  border-radius: 20px;
+  z-index: 5;
+  color: var(--spice-subtext) !important;
+  padding-left: 5px;
+}
+
+.player-controls__buttons {
+  transform: translateY(6px);
+}
+
+.main-playPauseButton-button {
+  background-color: var(--spice-main);
+  box-shadow: var(--spice-shadow) 0 5px 9px 0px;
+  --button-size: 50px !important;
+  color: var(--spice-text);
+  background-color: var(--spice-player) !important;
+  cursor: pointer;
+}
+
+.player-controls__buttons {
+  align-items: center;
+  position: relative;
+  left: 2.3%;
+}
+
+.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
+  border: 2px var(--spice-text) solid;
+  border-radius: 4px;
+  width: fit-content;
+  display: inline;
+  text-align: center;
+  padding: 0 5px;
+}
+
+.os-theme-spotify.os-host-transition
+  > .os-scrollbar-vertical
+  > .os-scrollbar-track
+  > .os-scrollbar-handle {
+  border-radius: 4px;
+  background-color: var(--spice-text);
+}
+
+/* Hide Profile Options in Nav Bar */
+
+.main-userWidget-notificationIndicator {
+  display: none;
+}
+
+.main-avatar-userIcon {
+  color: white;
+}
+
+.main-userWidget-box {
+  background-color: var(--spice-sidebar);
+  text-decoration-line: underline;
+}
+
+/* Improve Sidebar Buttons */
+
+.main-likedSongsButton-likedSongsIcon {
+  background: var(--spice-text);
+}
+
+.main-likedSongsButton-likedSongsIcon {
+  color: var(--spice-sidebar);
+}
+
+.main-trackList-trackListHeaderRow {
+  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
+}
+
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
+}
+
+.main-trackList-trackListRow.main-trackList-selected,
+.main-trackList-trackListRow.main-trackList-selected:hover {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
+}
+
+.main-trackList-trackListRow:focus-within,
+.main-trackList-trackListRow:hover {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+}
+
+.main-duplicateTracksDialog-container {
+  background-color: var(--spice-card);
+  color: var(--spice-subtext);
+}
+
+.main-duplicateTracksDialog-secondaryButton {
+  color: var(--spice-text);
+}
+
+._9eb5acf729a98d62135ca21777fef244-scss {
+  color: var(--spice-card);
+}
+
+.x-sortBox-sortDropdown,
+.x-filterBox-expandButton {
+  color: var(--spice-text) !important;
+}
+
+/* Main Play Button Change */
+
+.main-playButton-PlayButton.main-playButton-primary {
+  color: var(--spice-main);
+  background-color: var(--spice-playback-bar);
+  cursor: pointer !important;
+}
+
+.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) {
+  display: none;
+}
+
+.main-entityHeader-image {
+  border-radius: 10%;
+}
+
+.x-downloadButton-button {
+  background: var(--spice-player);
+  border-radius: 50%;
+}
+
+/* Link playback-bar color */
+
+.playback-bar .progress-bar__fg {
+  background-color: var(--spice-playback-bar);
+}
+
+:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
+  background-color: var(--spice-playback-bar);
+}
+
+.main-navBar-navBarLinkActive {
+  background-color: var(--spice-main);
+}
+
+.main-navBar-navBarLinkActive,
+.main-navBar-navBarLinkActive:focus,
+.main-navBar-navBarLinkActive:hover,
+.logo {
+  color: var(--spice-text) !important;
+  background-color: var(--spice-selected-row);
+}
+
+.progress-bar__slider {
+  opacity: 1 !important;
+  background-color: var(--spice-sidebar) !important;
+  height: 16px !important;
+  border: solid 2px var(--spice-subtext) !important;
+  width: 16px !important;
+  display: unset !important;
+}
+
+a.x-categoryCard-CategoryCard,
+a.x-heroCategoryCard-HeroCategoryCard {
+  color: var(--spice-subtext);
+}
+
+.main-heroCard-card a,
+.collection-collectionEntityHeroCard-descriptionContainer {
+  color: var(--spice-subtext) !important;
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
+p.main-buddyFeed-timestamp.main-type-finale,
+.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
+  color: var(--spice-subtext);
+}
+
+/* Recolor sub-buttons */
+
+.main-moreButton-button {
+  color: var(--spice-sub-button);
+}
+
+.x-downloadButton-button {
+  color: var(--spice-sub-button) !important;
+}
+
+.x-downloadButton-button:hover {
+  color: var(--spice-text) !important;
+}
+
+.main-addButton-button {
+  color: var(--spice-sub-button);
+}
+
+.main-entityHeader-metaDataText {
+  color: var(--spice-sub-button);
+}
+
+.main-duration-container {
+  color: var(--spice-sub-button);
+}
+
+.main-tag-container {
+  background-color: var(--spice-sub-button);
+}
+
+.x-sortBox-sortDropdown {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.x-filterBox-searchIconContainer {
+  color: var(--spice-sub-button) !important;
+}
+
+.x-filterBox-expandButton:focus,
+.x-filterBox-expandButton:hover {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.view-homeShortcutsGrid-shortcut {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+}
+
+.view-homeShortcutsGrid-shortcut:focus-within,
+.view-homeShortcutsGrid-shortcut:hover,
+.view-homeShortcutsGrid-shortcut[data-context-menu-open="true"] {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.main-rootlist-textWrapper.main-type-viola {
+  cursor: pointer !important;
+}
+
+.main-navBar-navBar {
+  border-right: 2px solid var(--spice-misc);
+}
+
+.cMigZB * {
+  color: var(--spice-misc) !important;
+}
+
+.main-trackInfo-name a {
+  color: var(--spice-misc) !important;
+}
+
+.main-trackInfo-artists a:link {
+  color: var(--spice-misc) !important;
+}
+
+[class*=" spoticon-"]:before {
+  color: var(--spice-misc) !important;
+}
+
+.main-connectToFacebook-headerTitle {
+  color: var(--spice-misc) !important;
+}
+
+.main-repeatButton-button,
+.main-skipForwardButton-button,
+.main-skipBackButton-button,
+.main-shuffleButton-button {
+  cursor: pointer !important;
+}
+
+#spicetify-playlist-list {
+  display: inline;
+  height: 10%;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+#spicetify-playlist-list > div > div:nth-child(2) > li {
+  margin: 4px 3.2vw;
+  width: 84%;
+  flex-shrink: 0;
+  padding-top: 10%;
+  padding-bottom: 10%;
+  box-sizing: border-box;
+  position: relative;
+  margin-bottom: -1px;
+  border-radius: 10px;
+  border: 2px solid var(--spice-text);
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  transition: all 500ms;
+}
+
+#spicetify-playlist-list > div > div:nth-child(2) > li:hover {
+  border-color: var(--spice-button);
+}
+
+.main-connectToFacebook-text,
+.main-connectToFacebook-disclaimer {
+  color: unset !important;
+}
+
+.main-type-mesto {
+  color: var(--spice-button);
+}
+
+.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
+.main-rootlist-rootlistItemLink {
+  transition: 500ms;
+}
+
+.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
+.main-rootlist-rootlistItemLink:focus {
+  color: var(--spice-text);
+}
+
+.view-homeShortcutsGrid-shortcut {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+  border: solid 3px var(--spice-text);
+  border-radius: 10px;
+  padding-bottom: 80.7px;
+  transition: 500ms;
+}
+
+.main-card-card .main-card-cardLink {
+  border: solid 3px;
+  transition: 500ms;
+  border-radius: 27px;
+}
+
+.main-card-card {
+  border-radius: 27px !important;
+}
+
+.view-homeShortcutsGrid-shortcut:hover,
+.main-card-card .main-card-cardLink:hover {
+  border-color: var(--spice-button);
+}
+
+.main-createPlaylistButton-button,
+.main-collectionLinkButton-collectionLinkButton {
+  padding-left: 16px !important;
+  padding-top: 8px;
+}
+
+.main-trackCreditsModal-closeBtn {
+  color: var(--spice-button-disabled) !important;
+}
+
+.main-contextMenu-menu {
+  max-height: 400px;
+  opacity: 0.9676;
+}
+.main-trackList-trackList {
+  border-radius: 30px;
+  background-color: var(--spice-player);
+  border: 1px solid;
+}
+.main-buddyFeed-friendsFeedContainer {
+  border-left: solid 2px var(--spice-text);
+}
+.main-yourEpisodesButton-yourEpisodesIcon {
+  background: var(--spice-text);
+}
+.main-yourEpisodesButton-yourEpisodesIcon path {
+  fill: var(--spice-player);
+  opacity: 0.7;
+}
+.main-navBar-entryPoints > div:first-of-type {
+  margin-top: 20px;
+}
+.cMigZB {
+  cursor: pointer;
+}
+.control-button {
+  color: var(--spice-misc);
+}
+.main-buddyFeed-buddyFeed {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.main-buddyFeed-friendActivity {
+  border-bottom: solid 1px;
+}
+.collection-collectionEntityHeroCard-likedSongs {
+  background: linear-gradient(
+    149.46deg,
+    var(--spice-sidebar),
+    var(--spice-main) 99.16%
+  ) !important;
+}
+
+.main-repeatButton-button[disabled] {
+  color: var(--spice-button);
+}
+.main-shuffleButton-button[disabled] {
+  color: var(--spice-button);
+}
+.progress-bar_bg {
+  z-index: 20;
+}
+.main-deletePlaylistDialog-secondaryButton {
+  color: var(--spice-subbutton-text);
+}
+.main-connectToFacebook-facebookButton {
+  color: var(--spice-subbutton-text);
+}
+.div.GlueDropTarget.personal-library > *.active {
+  background: var(--spice-selected-row);
+}
+.main-connectBar-connectBar {
+  overflow: visible !important;
+  --triangle-position: 147px !important;
+  align-items: unset !important;
+  height: 0px !important;
+  position: absolute !important;
+  left: 80% !important;
+  display: flex !important;
+  bottom: 2% !important;
+  padding: unset !important;
+}
+#spicetify-playlist-list > div {
+  scroll-behavior: smooth;
+  overflow-y: scroll;
+  overflow: hidden;
+  contain: unset !important;
+  height: fit-content !important;
+  padding-bottom: 10px;
+}
+div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
+  > div
+  > div
+  > svg
+  > path {
+  color: blue;
+  background-color: blue;
+  fill: var(--spice-sidebar);
+  opacity: 0.7;
+}
+div.main-cardImage-imageWrapper.main-cardImage-roundedCorners
+  > div
+  > div
+  > svg
+  > path {
+  color: blue;
+  background-color: blue;
+  fill: var(--spice-sidebar);
+  opacity: 0.7;
+}
+.main-yourEpisodes-coverContainer {
+  background-color: var(--spice-text);
+}
+.playback-bar__progress-time-elapsed {
+  visibility: hidden;
+  width: 0px;
+  height: 0px;
+  padding: 0px;
+  margin: 0px;
+  position: absolute;
+}
+.Root__nav-bar {
+  min-width: 281px !important;
+}
+.playback-bar__progress-time-elapsed {
+  display: none !important;
+}
+#spicetify-playlist-list > div {
+  height: 100% !important;
+}

.config/spicetify/Themes/Dribbblish/README.md

@@ -0,0 +1,104 @@
+# Dribbblish
+
+### Base
+![base](base.png)
+### White
+![white](white.png)
+### Dark
+![dark](dark.png)
+### Nord-Light
+![nord-light](nord-light.png)
+### Nord-Dark
+![nord-dark](nord-dark.png)
+### Beach-Sunset
+![beach-sunset](beach-sunset.png)
+### Purple
+![purple](purple.png)
+### Samourai
+![samourai](samourai.png)
+### Gruvbox
+![gruvbox](gruvbox.png)
+
+##  Features
+### Resizable sidebar
+
+<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px"> 
+
+### Customizable sidebar
+Rearrange icons positions, stick icons to header or hide unnecessary to save space.
+Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons.
+After you finish customizing, turn off Config mode in Profile menu to save.
+
+<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px"> 
+
+### Playlist Folder image
+Right click at folder and choose images for your playlist folder. Every image formats supported by Chrome can be used, but do keep image size small and in compressed format.
+
+<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px"> 
+
+### Left/Right expanded cover
+In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
+
+## Auto-install
+Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56.
+### Windows
+```powershell
+Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
+```
+
+## Manual Install
+Run these commands:
+
+### Linux and MacOS:
+In **Bash**:
+```bash
+cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
+mkdir -p ../../Extensions
+cp dribbblish.js ../../Extensions/.
+spicetify config extensions dribbblish.js
+spicetify config current_theme Dribbblish color_scheme base
+spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
+spicetify apply
+```
+
+### Windows
+In **Powershell**:
+```powershell
+cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
+Copy-Item dribbblish.js ..\..\Extensions
+spicetify config extensions dribbblish.js
+spicetify config current_theme Dribbblish color_scheme base
+spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
+spicetify apply
+```
+
+From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicity change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:
+```ini
+[Patch]
+xpui.js_find_8008 = ,(\w+=)32,
+xpui.js_repl_8008 = ,${1}56,
+```
+
+## Change Color Schemes
+There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samourai`, `purple`. Change scheme with commands:
+```
+spicetify config color_scheme <scheme name>
+spicetify apply
+```
+
+## Auto-uninstall 
+### Windows
+```powershell
+Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression
+```
+
+## Manual uninstall 
+Remove the dribbblish script with the following commands 
+
+```
+spicetify config extensions dribbblish.js-
+```
+And remove Patch lines you added in config file earlier. Finally, run:
+```
+spicetify apply
+```

.config/spicetify/Themes/Dribbblish/color.ini

@@ -0,0 +1,180 @@
+[base]
+text               = FFFFFF
+subtext            = F0F0F0
+sidebar-text       = FFFFFF
+main               = 000000
+sidebar            = 1ed760
+player             = 000000
+card               = 000000
+shadow             = 202020
+selected-row       = 797979
+button             = 1ed760
+button-active      = 1ed760
+button-disabled    = 535353
+tab-active         = 166632
+notification       = 1db954
+notification-error = e22134
+misc               = BFBFBF
+
+
+[white]
+text               = 363636
+subtext            = 3D3D3D
+sidebar-text       = FFF9F4
+main               = FFF9F4
+sidebar            = FFA789
+player             = FFF9F4
+card               = FFF9F4
+shadow             = d3d3d3
+selected-row       = 6D6D6D
+button             = ff8367
+button-active      = ff8367
+button-disabled    = 535353
+tab-active         = ffdace
+notification       = FFA789
+notification-error = e22134
+misc               = BFBFBF
+
+[dark]
+text               = F0F0F0
+subtext            = F0F0F0
+sidebar-text       = 0a0e14
+main               = 0a0e14
+sidebar            = C2D935
+player             = 0a0e14
+card               = 0a0e14
+shadow             = 202020
+selected-row       = DEDEDE
+button             = C2D935
+button-active      = C2D935
+button-disabled    = 535353
+tab-active         = 727d2b
+notification       = C2D935
+notification-error = e22134
+misc               = BFBFBF
+
+[dracula]
+text               = f8f8f2
+subtext            = f8f8f2
+sidebar-text       = F0F0F0
+main               = 44475a
+sidebar            = 6272a4
+player             = 44475a
+card               = 6272a4
+shadow             = 000000
+selected-row       = bd93f9
+button             = ffb86c
+button-active      = 8be9fd
+button-disabled    = 535353
+tab-active         = 6272a4
+notification       = bd93f9
+notification-error = e22134
+misc               = BFBFBF
+
+[nord-light]
+text               = 2e3440
+subtext            = 3b4252
+sidebar-text       = ECEFF4
+main               = ECEFF4
+sidebar            = 5E81AC
+player             = ECEFF4
+card               = ebcb8b
+shadow             = eceff4
+selected-row       = 4c566a
+button             = 81a1c1
+button-active      = 81a1c1
+button-disabled    = c0c0c0
+tab-active         = ebcb8b
+notification       = a3be8c
+notification-error = bf616a
+misc               = BFBFBF
+
+[nord-dark]
+text               = ECEFF4
+subtext            = E5E9F0
+sidebar-text       = 434c5e
+main               = 2e3440
+sidebar            = 88C0D0
+player             = 2e3440
+card               = 2e3440
+shadow             = 2E3440
+selected-row       = D8DEE9
+button             = 81A1C1
+button-active      = 81A1C1
+button-disabled    = 434C5E
+tab-active         = 434C5E
+notification       = A3BE8C
+notification-error = BF616A
+misc               = BFBFBF
+
+[purple]
+text               = f1eaff
+subtext            = f1eaff
+sidebar-text       = e0d0ff
+main               = 0A0E14
+sidebar            = 6F3C89
+player             = 0A0E14
+card               = 0A0E14
+shadow             = 3a2645
+selected-row       = EBDFFF
+button             = c76af6
+button-active      = 6F3C89
+button-disabled    = 535353
+tab-active         = 58306D
+notification       = ff9e00
+notification-error = f61379
+misc               = DEDEDE
+
+[samourai]
+text               = ebdbb2
+subtext            = ebdbb2
+sidebar-text       = 461217
+main               = 461217
+sidebar            = ebdbb2
+player             = 461217
+card               = 461217
+shadow             = 3a2645
+selected-row       = 909090
+button             = e7a52d
+button-active      = e7a52d
+button-disabled    = 535353
+tab-active         = e7a52d
+notification       = e7a52d
+notification-error = e22134
+misc               = BFBFBF
+
+[beach-sunset]
+text               = FFFFFF
+subtext            = F0F0F0
+sidebar-text       = F0F0F0
+main               = 262626
+sidebar            = bd3e3e
+player             = 262626
+card               = 262626
+shadow             = 000000
+selected-row       = d1d6e2
+button             = f1a84f
+button-active      = c98430
+button-disabled    = 535353
+tab-active         = f1a84f
+notification       = c98430
+notification-error = e22134
+misc               = BFBFBF
+
+[gruvbox]
+text               = fbf1c7
+subtext            = d5c4a1
+sidebar-text       = 32302f
+main               = 292828
+sidebar            = 689d6a
+player             = 292828
+card               = 3c3836
+shadow             = 202020
+selected-row       = d5c4a1
+button             = fb4934
+button-active      = cc241d
+button-disabled    = bdae93
+tab-active         = fb4934
+notification       = 8ec07c
+notification-error = d79921
+misc               = BFBFBF

.config/spicetify/Themes/Dribbblish/dribbblish.js

@@ -0,0 +1,238 @@
+// Hide popover message
+// document.getElementById("popover-container").style.height = 0;
+const DribbblishShared = {
+    configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
+    rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
+    setRightBigCover: () => {
+        if (DribbblishShared.rightBigCover) {
+            document.documentElement.classList.add("right-expanded-cover");
+        } else {
+            document.documentElement.classList.remove("right-expanded-cover");
+        }
+    }
+};
+
+DribbblishShared.configMenu.register();
+DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
+    "Right expanded cover",
+    DribbblishShared.rightBigCover,
+    (self) => {
+        self.isEnabled = !self.isEnabled;
+        DribbblishShared.rightBigCover = self.isEnabled;
+        localStorage.setItem("dribs-right-big-cover", self.isEnabled);
+        DribbblishShared.setRightBigCover();
+    }
+));
+DribbblishShared.setRightBigCover();
+
+function waitForElement(els, func, timeout = 100) {
+    const queries = els.map(el => document.querySelector(el));
+    if (queries.every(a => a)) {
+        func(queries);
+    } else if (timeout > 0) {
+        setTimeout(waitForElement, 300, els, func, --timeout);
+    }
+}
+
+waitForElement([
+    `ul[tabindex="0"]`,
+    `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
+], ([root, firstItem]) => {
+    const listElem = firstItem.parentElement;
+    root.classList.add("dribs-playlist-list");
+
+    /** Replace Playlist name with their pictures */
+    function loadPlaylistImage() {
+        for (const item of listElem.children) {
+            let link = item.querySelector("a");
+            if (!link) continue;
+
+            let [_, app, uid ] = link.pathname.split("/");
+            let uri;
+            if (app === "playlist") {
+                uri = Spicetify.URI.playlistV2URI(uid);
+            } else if (app === "folder") {
+                const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
+                let img = link.querySelector("img");
+                if (!img) {
+                    img = document.createElement("img");
+                    img.classList.add("playlist-picture");
+                    link.prepend(img);
+                }
+                img.src = base64  || "/images/tracklist-row-song-fallback.svg";
+                continue;
+            }
+
+            Spicetify.CosmosAsync.get(
+                `sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`,
+                { policy: { picture: true } }
+            ).then(res => {
+                const meta = res.metadata;
+                let img = link.querySelector("img");
+                if (!img) {
+                    img = document.createElement("img");
+                    img.classList.add("playlist-picture");
+                    link.prepend(img);
+                }
+                img.src = meta.picture || "/images/tracklist-row-song-fallback.svg";
+            });
+        }
+    }
+
+    DribbblishShared.loadPlaylistImage = loadPlaylistImage;
+    loadPlaylistImage();
+
+    new MutationObserver(loadPlaylistImage)
+        .observe(listElem, {childList: true});
+});
+
+waitForElement([".Root__main-view"], ([mainView]) => {
+    const shadow = document.createElement("div");
+    shadow.id = "dribbblish-back-shadow";
+    mainView.prepend(shadow);
+});
+
+waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
+    const fade = document.createElement("div");
+    fade.id = "dribbblish-sidebar-fade-in";
+    queries[0].append(fade);
+});
+
+waitForElement([
+    ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
+], ([resizer]) => {
+    const observer = new MutationObserver(updateVariable);
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
+    function updateVariable() {
+        let value = resizer.value;
+        if (value < 121) {
+            value = 72;
+            document.documentElement.classList.add("sidebar-hide-text");
+        } else {
+            document.documentElement.classList.remove("sidebar-hide-text");
+        }
+        document.documentElement.style.setProperty(
+            "--sidebar-width", value + "px");
+    }
+    updateVariable();
+});
+
+waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
+    const observer = new ResizeObserver(updateVariable);
+    observer.observe(resizeHost);
+    function updateVariable([ event ]) {
+        document.documentElement.style.setProperty(
+            "--main-view-width", event.contentRect.width + "px");
+        document.documentElement.style.setProperty(
+            "--main-view-height", event.contentRect.height + "px");
+        if (event.contentRect.width < 700) {
+            document.documentElement.classList.add("minimal-player");
+        } else {
+            document.documentElement.classList.remove("minimal-player");
+        }
+        if (event.contentRect.width < 550) {
+            document.documentElement.classList.add("extra-minimal-player");
+        } else {
+            document.documentElement.classList.remove("extra-minimal-player");
+        }
+    }
+});
+
+(function Dribbblish() {
+    const progBar = document.querySelector(".playback-bar");
+    const root = document.querySelector(".Root");
+
+    if (!Spicetify.Player.origin || !progBar || !root) {
+        setTimeout(Dribbblish, 300);
+        return;
+    }
+
+    const tooltip = document.createElement("div");
+    tooltip.className = "prog-tooltip";
+    progBar.append(tooltip);
+
+    const progKnob = progBar.querySelector(".progress-bar__slider");
+
+    function updateProgTime({ data: e }) {
+        const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
+        const maxWidth = progBar.offsetWidth;
+        const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
+        const ttWidth = tooltip.offsetWidth / 2;
+        if (curWidth < ttWidth) {
+            tooltip.style.left = String(offsetX) + "px";
+        } else if (curWidth > maxWidth - ttWidth) {
+            tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
+        } else {
+            tooltip.style.left = String(offsetX - ttWidth) + "px";
+        }
+        tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
+            Spicetify.Player.formatTime(Spicetify.Player.getDuration());
+    }
+    Spicetify.Player.addEventListener("onprogress", updateProgTime);
+    updateProgTime({ data: Spicetify.Player.getProgress() });
+
+    Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
+        const isExternal = state.devices.some(a => a.is_active);
+        if (isExternal) {
+            root.classList.add("is-connectBarVisible");
+        } else {
+            root.classList.remove("is-connectBarVisible");
+        }
+    });
+
+    const filePickerForm = document.createElement("form");
+    filePickerForm.setAttribute("aria-hidden", true);
+    filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
+    document.body.appendChild(filePickerForm);
+    /** @type {HTMLInputElement} */
+    const filePickerInput = filePickerForm.childNodes[0];
+    filePickerInput.accept = [
+        "image/jpeg",
+        "image/apng",
+        "image/avif",
+        "image/gif",
+        "image/png",
+        "image/svg+xml",
+        "image/webp"
+    ].join(",");
+
+    filePickerInput.onchange = () => {
+        if (!filePickerInput.files.length) return;
+
+        const file = filePickerInput.files[0];
+        const reader = new FileReader;
+        reader.onload = (event) => {
+            const result = event.target.result;
+            const id = Spicetify.URI.from(filePickerInput.uri).id;
+            try {
+                localStorage.setItem(
+                    "dribbblish:folder-image:" + id,
+                    result
+                );
+            } catch {
+                Spicetify.showNotification("File too large");
+            }
+            DribbblishShared.loadPlaylistImage?.call();
+        }
+        reader.readAsDataURL(file);
+    }
+
+    new Spicetify.ContextMenu.Item("Remove folder image",
+        ([uri]) => {
+            const id = Spicetify.URI.from(uri).id;
+            localStorage.removeItem("dribbblish:folder-image:" + id);
+            DribbblishShared.loadPlaylistImage?.call();
+        },
+        ([uri]) => Spicetify.URI.isFolder(uri),
+        "x",
+    ).register();
+    new Spicetify.ContextMenu.Item("Choose folder image",
+        ([uri]) => {
+            filePickerInput.uri = uri;
+            filePickerForm.reset();
+            filePickerInput.click();
+        },
+        ([uri]) => Spicetify.URI.isFolder(uri),
+        "edit",
+    ).register();
+})();

.config/spicetify/Themes/Dribbblish/install.ps1

@@ -0,0 +1,59 @@
+$checkSpice = Get-Command spicetify -ErrorAction Silent
+if ($null -eq $checkSpice) {
+    Write-Host -ForegroundColor Red "Spicetify not found"
+    Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows"
+    return
+}
+
+Write-Host "Downloading themes package:" -ForegroundColor Green
+$zipFile = "$env:TEMP\spicetify-themes.zip"
+Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile
+
+Write-Host "Extracting themes package:" -ForegroundColor Green
+$extractPath = "$env:TEMP\spicetify-themes-master"
+if (Test-Path $extractPath) {
+    Remove-Item $extractPath -Recurse -Force
+}
+Expand-Archive $zipFile -DestinationPath $env:TEMP
+
+# Copy to personal Themes folder
+$spicePath = spicetify -c | Split-Path
+$dribPath = "$extractPath\Dribbblish"
+
+$destPath = "$spicePath\Themes\Dribbblish"
+if (Test-Path $destPath) {
+    Remove-Item $destPath -Recurse -Force
+}
+Copy-Item $dribPath $destPath -Recurse
+
+# Copy extension file
+New-Item -ItemType Directory -Force "$spicePath\Extensions"
+Copy-Item "$destPath\dribbblish.js" "$spicePath\Extensions"
+
+Write-Host "Configuring:" -ForegroundColor Green
+spicetify
+spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 current_theme Dribbblish extensions dribbblish.js
+
+# Add patch
+$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}56,
+"@
+    # 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
+}
+
+$backupVer = $configFile -match "^version"
+$version = ConvertFrom-StringData $backupVer[0]
+if ($version.version.Length -gt 0) {
+    spicetify apply
+} else {
+    spicetify backup apply
+}

.config/spicetify/Themes/Dribbblish/uninstall.ps1

@@ -0,0 +1,15 @@
+spicetify config current_theme " " extensions dribbblish.js-
+
+$configPath = spicetify -c
+$configFile = Get-Content $configPath
+$find = $configFile -match "xpui.js_find_8008"
+if ($find) {
+    $configFile = $configFile -replace [regex]::escape($find),""
+}
+$repl = $configFile -match "xpui.js_repl_8008"
+if ($repl) {
+    $configFile = $configFile -replace [regex]::escape($repl),""
+}
+Set-Content $configPath $configFile
+
+spicetify apply

.config/spicetify/Themes/Dribbblish/user.css

@@ -0,0 +1,886 @@
+.Root {
+  padding-top: 30px;
+}
+
+:root {
+    --bar-height: 70px;
+    --bar-cover-art-size: 40px;
+    --main-gap: 10px;
+    --main-corner-radius: 10px;
+    --scrollbar-vertical-size: 8px;
+    --cover-border-radius: 8px;
+    --os-windows-icon-dodge: 0;
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Google Sans Display";
+    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 500;
+}
+
+body {
+    --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+    --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
+    font-family: var(--glue-font-family);
+    letter-spacing: normal;
+}
+
+.main-type-mesto,
+.main-type-mestoBold,
+.main-type-ballad,
+.main-type-balladBold,
+.main-type-canon {
+    font-family: var(--info-font-family);
+    letter-spacing: normal;
+}
+
+.main-type-bass {
+    font-family: var(--glue-font-family);
+}
+
+.main-type-ballad {
+    font-weight: 500;
+}
+
+.lyrics-lyricsContainer-LyricsLine {
+    font-family: var(--glue-font-family);
+    letter-spacing: -.03em !important;
+}
+
+.main-rootlist-rootlistDivider {
+    display: none;
+}
+
+input {
+    background-color: unset !important;
+    border-bottom: solid 1px var(--spice-text) !important;
+    border-radius: 0 !important;
+    padding: 6px 10px 6px 48px;
+    color: var(--spice-text) !important;
+}
+
+.x-searchInput-searchInputSearchIcon,
+.x-searchInput-searchInputClearButton {
+    color: var(--spice-text) !important;
+}
+
+.main-home-homeHeader,
+.x-entityHeader-overlay,
+.x-actionBarBackground-background,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor
+{
+    background-color: unset !important;
+    background-image: unset !important;
+}
+
+.main-playButton-PlayButton.main-playButton-primary {
+    color: white;
+}
+
+.connect-title, .connect-header {
+    display: none;
+}
+
+.connect-device-list {
+    margin: 0px -5px;
+}
+
+/* Remove Topbar background colour */
+.main-topBar-background {
+    background-color: unset !important;
+}
+.main-topBar-overlay {
+    background-color: var(--spice-main);
+}
+
+.main-entityHeader-shadow,
+.main-contextMenu-menu,
+.connect-device-list-container {
+    box-shadow: 0 4px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+    filter: grayscale(1);
+}
+
+span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
+    fill: var(--spice-button);
+}
+span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
+    fill: var(--spice-text);
+}
+
+/* Full window artist background */
+.main-entityHeader-background.main-entityHeader-gradient {
+    opacity: 0.3;
+}
+
+.main-entityHeader-container.main-entityHeader-withBackgroundImage,
+.main-entityHeader-background,
+.main-entityHeader-background.main-entityHeader-overlay:after {
+    height: 100vh;
+}
+
+.main-entityHeader-withBackgroundImage .main-entityHeader-headerText {
+    justify-content: center;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped.main-entityHeader-withBackgroundImage {
+    padding-left: 9%;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+    background-image: linear-gradient(transparent,transparent),linear-gradient(var(--spice-main), var(--spice-main));
+}
+
+.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
+    font-size: 120px !important;
+    line-height: 120px !important;
+}
+
+/** Hightlight selected playlist */
+.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive {
+    background: var(--spice-button);
+    border-radius: 4px;
+}
+
+.main-navBar-navBarLinkActive {
+    background: var(--spice-button);
+}
+
+.main-contextMenu-menu {
+    background-color: var(--spice-button);
+}
+
+.main-contextMenu-menuHeading,
+.main-contextMenu-menuItemButton,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+    color: var(--spice-main);
+}
+
+.main-playPauseButton-button {
+    background-color: var(--spice-button);
+    color: white;
+}
+
+/** Queue page header */
+.queue-queue-title,
+.queue-playHistory-title {
+    color: var(--spice-text) !important;
+}
+
+/** Artist page */
+.artist-artistOverview-heading {
+    color: var(--spice-text) !important;
+}
+.artist-artistAbout-content .artist-artistAbout-cityBlock div,
+.artist-artistAbout-content .artist-artistAbout-stats div {
+    color: var(--spice-text) !important;
+}
+.artist-artistAbout-content div {
+    color: var(--spice-text) !important;
+}
+
+/** Cards */
+.main-cardImage-imageWrapper {
+    background-color: transparent;
+    box-shadow: unset;
+    -webkit-box-shadow: unset;
+}
+
+.main-cardImage-imagePlaceholder, .main-cardImage-image {
+    border-radius: var(--cover-border-radius);
+}
+
+.main-rootlist-rootlistDivider {
+    background-color: unset;
+}
+
+.main-nowPlayingBar-nowPlayingBar {
+    height: var(--bar-height);
+}
+
+.Root__top-bar {
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.main-topBar-background {
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+}
+
+.Root__main-view {
+    background-color: var(--spice-main);
+    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
+    overflow: hidden;
+}
+
+.main-buddyFeed-buddyFeed {
+    box-shadow: unset;
+    -webkit-box-shadow: unset;
+    z-index: 0;
+}
+
+.main-buddyFeed-activityMetadata {
+    margin-left: 24px;
+}
+
+.main-buddyFeed-headerTitle,
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
+    color: var(--spice-sidebar-text);
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
+.main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
+    color: rgba(var(--spice-rgb-sidebar-text), 0.8);
+}
+
+.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
+.main-buddyFeed-buddyFeedRoot .main-buddyFeed-overlay {
+    width: 32px !important;
+    height: 32px !important;
+}
+
+.main-avatar-avatar.main-avatar-withBadge:after {
+    box-shadow: 0 0 0 2px var(--spice-sidebar);
+    background-color: var(--spice-notification);
+    right: 0;
+}
+
+.Root__now-playing-bar {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    background-color: unset;
+}
+
+.main-nowPlayingBar-container {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    background-color: unset;
+    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
+    border-top: 0;
+    min-width: 518px;
+}
+
+.main-connectBar-connectBar {
+    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    border: 2px solid var(--spice-main);
+    border-top: 0;
+    color: var(--spice-sidebar-text);
+}
+
+.Root__nav-bar {
+    height: 100%;
+    z-index: 1;
+    width: var(--sidebar-width) !important;
+}
+
+.main-buddyFeed-buddyFeedRoot {
+    height: 100%;
+}
+
+.main-buddyFeed-buddyFeedRoot .os-content {
+    padding-top: 0 !important;
+}
+
+html,
+.Root__nav-bar,
+.main-buddyFeed-buddyFeed {
+    background-color: var(--spice-sidebar) !important;
+}
+
+html {
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.Root__nav-bar .link-subtle,
+.main-rootlist-rootlistItemLink:link,
+.main-rootlist-rootlistItemLink:visited,
+.main-rootlist-rootlistContent span,
+.main-navBar-entryPoints span {
+    color: var(--spice-sidebar-text)
+}
+
+.main-navBar-navBarItem {
+    padding: 0 8px;
+}
+
+#spicetify-show-list >* {
+    padding: 0 8px;
+}
+
+.main-rootlist-statusIcons {
+    color: var(--spice-sidebar-text);
+    padding-right: 16px;
+}
+
+.main-rootlist-statusIcons .main-playButton-button {
+    color: var(--spice-sidebar-text);
+}
+
+.main-rootlist-expandArrow {
+    position: absolute;
+    top: 20px;
+    right: 12px;
+    width: 16px;
+    height: 16px;
+    color: var(--spice-sidebar-text) !important;
+    background-color: var(--spice-button);
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--spice-sidebar);
+    opacity: 0;
+}
+
+li.GlueDropTarget:hover .main-rootlist-expandArrow {
+    opacity: 1;
+}
+
+html:not(.sidebar-hide-text) .main-rootlist-expandArrow {
+    opacity: 1;
+}
+
+.main-rootlist-expandArrow::before {
+    font-size: 10px;
+    padding-bottom: 3px;
+}
+
+html.sidebar-hide-text .main-rootlist-expandArrow {
+    right: 4px;
+}
+
+html.sidebar-hide-text .main-navBar-navBarItem a span,
+html.sidebar-hide-text .main-rootlist-rootlistContent a span,
+html.sidebar-hide-text .main-rootlist-rootlistItem a span,
+html.sidebar-hide-text .main-rootlist-statusIcons {
+    display: none;
+}
+
+.main-rootlist-rootlist {
+    margin-top: 0;
+}
+
+.Root__nav-bar .os-scrollbar-vertical,
+.main-buddyFeed-buddyFeedRoot .os-scrollbar-vertical {
+    display: none;
+}
+
+/** */
+.main-topBar-historyButtons .main-topBar-button {
+    background-color: unset;
+    width: 24px;
+    height: 24px;
+}
+
+.main-topBar-historyButtons svg {
+    color: var(--spice-button);
+    fill: var(--spice-button);
+}
+
+.playback-bar__progress-time,
+.main-playbackBarRemainingTime-container,
+.playback-bar__progress-time-elapsed {
+    display: none;
+}
+
+.playback-bar {
+    position: absolute;
+    width: var(--main-view-width);
+    left: var(--sidebar-width);
+    bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
+}
+
+.Root.is-connectBarVisible .playback-bar {
+    bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
+}
+
+.main-nowPlayingWidget-coverArt .cover-art {
+    width: var(--bar-cover-art-size) !important;
+    height: var(--bar-cover-art-size) !important;
+}
+
+.player-controls__buttons {
+    margin-bottom: 0;
+    width: 192px;
+}
+
+.progress-bar {
+    --progress-bar-height: 2px;
+    --fg-color: var(--spice-button);
+    --bg-color: rgba(var(--spice-rgb-text), .2);
+}
+
+.minimal-player .player-controls__buttons {
+    width: 120px;
+    gap: 0px;
+}
+
+.minimal-player .player-controls__left,
+.minimal-player .player-controls__right {
+    --button-size: 16px !important;
+    gap: 0px;
+}
+
+.minimal-player .volume-bar {
+    flex: 0 1 70px;
+}
+.extra-minimal-player .player-controls__buttons {
+    width: 64px;
+}
+.extra-minimal-player .main-shuffleButton-button,
+.extra-minimal-player .main-repeatButton-button,
+.extra-minimal-player .ExtraControls__connect-device-picker,
+.extra-minimal-player .volume-bar .progress-bar-wrapper {
+    display: none;
+}
+.extra-minimal-player .volume-bar {
+    flex: 0 0 32px;
+}
+
+.main-trackInfo-name {
+    font-weight: 500;
+}
+
+.main-topBar-topbarContent .main-playButton-PlayButton {
+    --size: 35px !important;
+}
+
+.main-entityHeader-image {
+    border-radius: 5px;
+}
+
+.main-entityHeader-metaDataText,
+.main-duration-container {
+    color: var(--spice-subtext);
+}
+
+/** Sidebar */
+.main-rootlist-rootlist .os-content {
+    padding: 0 0 8px 0 !important;
+}
+
+.main-rootlist-rootlistDividerContainer {
+    display: none;
+}
+
+.main-rootlist-rootlistItem a {
+    align-items: center;
+    border-radius: 4px;
+    display: flex;
+    height: 56px;
+    padding: 0 20px;
+}
+
+img.playlist-picture {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 32px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+}
+
+.main-rootlist-rootlistItem a span {
+    margin-left: 24px;
+}
+
+.main-rootlist-rootlistItem {
+    padding-left: calc(var(--indentation)*var(--left-sidebar-item-indentation-width)) !important;
+    padding-right: 0 !important;
+    transition: padding-left .5s ease;
+}
+
+html.sidebar-hide-text .main-rootlist-rootlistItem {
+    padding: 0;
+}
+
+.main-rootlist-dropIndicator {
+    background: var(--spice-selected-row);
+    height: 2px;
+}
+
+.main-navBar-navBarLink {
+    height: 56px;
+}
+
+.main-navBar-navBarItem .collection-active-icon,
+.main-navBar-navBarItem .collection-icon,
+.main-navBar-navBarItem .home-active-icon,
+.main-navBar-navBarItem .home-icon,
+.main-navBar-navBarItem .search-active-icon,
+.main-navBar-navBarItem .search-icon {
+    flex: 0 0 auto;
+    margin-right: 8px;
+}
+
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon,
+.main-collectionLinkButton-icon {
+    margin-right: 24px;
+}
+
+li.GlueDropTarget {
+    padding: 0 8px;
+}
+
+/** OS-specific window controls dodge */
+.spotify__os--is-windows .main-navBar-navBar {
+    padding-top: calc(var(--os-windows-icon-dodge) * 24px);
+}
+
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
+    padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px);
+}
+
+.spotify__os--is-windows .main-buddyFeed-header {
+    padding-top: calc(var(--os-windows-icon-dodge) * 32px);
+}
+
+.spotify__container--is-desktop.spotify__os--is-windows[dir=ltr] .main-topBar-container {
+    padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px);
+}
+
+.main-topBar-container {
+    max-width: unset;
+}
+
+/** Linux-specific remove padding */
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-entryPoints,
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-navBar {
+    padding-top: 0;
+}
+
+/** Custom elements */
+#dribbblish-sidebar-fade-in {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 15%;
+    background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
+    z-index: 3;
+    pointer-events: none;
+}
+.dribs-playlist-list {
+    padding-bottom: 56px;
+}
+#dribbblish-back-shadow {
+    position: fixed;
+    width: var(--main-view-width);
+    height: calc(var(--main-view-height) + var(--bar-height));
+    box-shadow: 0 0 10px 3px #0000003b;
+    border-radius: var(--main-corner-radius);
+    z-index: 2;
+    pointer-events: none;
+}
+
+.playback-bar .prog-tooltip {
+    position: absolute;
+    min-width: 100px;
+    width: unset;
+    height: 25px;
+    top: -35px;
+    padding: 0 5px;
+    border-radius: 4px;
+    text-align: center;
+    color: var(--spice-text);
+    background-color: var(--spice-button);
+    opacity: 0;
+    transition: opacity,left 0.2s ease;
+}
+
+.playback-bar:hover .prog-tooltip {
+    opacity: 1;
+}
+
+/** Rearrange player bar */
+.main-nowPlayingBar-left {
+    order: 1;
+    flex: 1;
+    width: auto;
+    min-width: 0 !important;
+}
+
+.main-nowPlayingBar-center {
+    order: 0;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingBar-right {
+    order: 2;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingWidget-nowPlaying {
+    justify-content: center;
+}
+
+.main-trackInfo-container > div > div::before,
+.main-trackInfo-container > div > div::after {
+    background: unset;
+}
+
+.player-controls {
+    justify-content: flex-start;
+    flex-direction: row;
+}
+
+.main-playPauseButton-button {
+    background-color: transparent;
+}
+
+.main-playPauseButton-button svg {
+    width: 32px !important;
+    height: 32px !important;
+    color: var(--spice-button);
+}
+
+/** Main container */
+.contentSpacing,
+.artist-artistDiscography-headerContainer {
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+@media (min-width: 1280px) {
+    .contentSpacing,
+    .artist-artistDiscography-headerContainer {
+        padding-left: 128px;
+        padding-right: 128px;
+    }
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button {
+    opacity: 1;
+}
+
+.main-likedSongsButton-likedSongsIcon,
+.main-yourEpisodesButton-yourEpisodesIcon,
+.main-createPlaylistButton-createPlaylistIcon {
+    background: unset !important;
+}
+
+.main-createPlaylistButton-icon,
+.main-collectionLinkButton-icon,
+.main-createPlaylistButton-icon {
+    height: 40px;
+}
+
+.main-likedSongsButton-likedSongsIcon svg,
+.main-yourEpisodesButton-yourEpisodesIcon svg,
+.main-createPlaylistButton-createPlaylistIcon svg {
+    fill: var(--spice-sidebar-text);
+    width: 32px;
+    height: 32px;
+}
+.main-yourEpisodesButton-yourEpisodesIcon svg path {
+    fill: var(--spice-sidebar-text);
+}
+
+/** Grid */
+.Root__top-container {
+    grid-template-areas:
+        "nav-bar main-view buddy-feed"
+        "nav-bar now-playing-bar buddy-feed";
+    padding: var(--main-gap) 0;
+}
+
+html:not(.buddyfeed-visible) .Root__top-container {
+    padding-right: var(--main-gap);
+}
+
+/** Minimal profile button */
+span.main-userWidget-displayName,
+.main-userWidget-box svg {
+    display: none;
+}
+
+/** Sidebar config */
+#dribs-hidden-list {
+    background-color: rgba(var(--spice-rgb-main), .3);
+}
+
+#dribs-sidebar-config {
+    position: relative;
+    width: 100%;
+    height: 0;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    top: -30px;
+    left: 0;
+}
+
+#dribs-sidebar-config button {
+    min-width: 60px;
+    border-radius: 3px;
+    background-color: var(--spice-main);
+    color: var(--spice-text);
+    border: 1px solid var(--spice-text);
+}
+#dribs-sidebar-config button:disabled {
+    color: var(--spice-button-disabled);
+}
+
+.main-navBar-entryPoints {
+    --left-sidebar-padding-left: 24px;
+    --left-sidebar-padding-right: 24px;
+}
+
+div.GlueDropTarget.personal-library  {
+    padding: 0 8px;
+}
+div.GlueDropTarget.personal-library >* {
+    padding: 0 16px;
+    height: 56px;
+    border-radius: 4px;
+}
+
+div.GlueDropTarget.personal-library >*.active {
+    background: var(--spice-button);
+}
+
+/** Big cover, small cover */
+.main-coverSlotExpanded-container {
+    position: fixed;
+    z-index: 2;
+    width: 250px;
+    height: 250px;
+    bottom: calc(var(--main-gap) + var(--bar-height) + 10px);
+    left: calc(var(--sidebar-width) + 10px);
+}
+
+.Root.is-connectBarVisible .main-coverSlotExpanded-container {
+    bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
+}
+
+html.right-expanded-cover .main-coverSlotExpanded-container {
+    right: calc(var(--main-gap) + 10px);
+    left: unset;
+}
+
+html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
+    right: calc(var(--main-gap) + var(--buddy-feed-width) + 10px);
+    left: unset;
+}
+
+.main-coverSlotExpanded-container img {
+    border-radius: 4px;
+}
+
+.cover-art {
+    border-radius: 4px;
+}
+
+.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container {
+    opacity: 0;
+}
+
+.main-nowPlayingWidget-coverExpanded {
+    transform: translateX(-27px);
+}
+
+/** Mini dribbblish */
+.x-categoryCard-CategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 14px);
+    height: calc(100% - 6px);
+    margin: 3px 10px;
+    border-radius: 5px;
+}
+
+.x-categoryCard-CategoryCard {
+    height: 100px;
+}
+
+.x-categoryCard-image {
+    width: 50px !important;
+    height: 50px !important;
+}
+
+.x-heroCategoryCard-HeroCategoryCard > div {
+    background-color: var(--spice-main);
+    width: calc(100% - 20px);
+    height: calc(100% - 6px);
+    margin: 3px 16px;
+    border-radius: 5px;
+}
+
+.main-dropDown-dropDown,
+.x-sortBox-sortDropdown {
+    background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
+}
+
+.connect-device-list-item:focus,
+.connect-device-list-item:hover {
+    background-color: rgba(var(--spice-rgb-selected-row), .3);
+}
+
+.bookmark-filter {
+    color: var(--spice-main) !important;
+}
+
+/* 1.1.56 */
+.main-navBar-navBar {
+    width: var(--sidebar-width) !important;
+}
+
+.main-entityHeader-container.main-entityHeader-nonWrapped {
+    padding-left: 64px;
+    padding-right: 64px;
+}
+
+@media (min-width: 1024px) {
+    .main-entityHeader-container.main-entityHeader-nonWrapped {
+        padding-left: 128px;
+        padding-right: 128px;
+    }
+}
+
+.main-userWidget-dropDownMenu > li > button {
+    color: rgba(var(--spice-rgb-selected-row), .7);
+    padding-left: 8px;
+    text-decoration: none;
+}
+.main-userWidget-dropDownMenu > li > button:hover,
+.main-userWidget-dropDownMenu > li > button:focus {
+    color: var(--spice-text);
+}
+
+.main-userWidget-dropDownMenu svg {
+    position: unset;
+}
+.main-userWidget-dropDownMenu > li svg {
+    position: absolute;
+}
+.main-buddyFeed-buddyFeed.main-buddyFeed-buddyFeed-expanded {
+    z-index: 4;
+}

.config/spicetify/Themes/Flow/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30
+
+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.

.config/spicetify/Themes/Flow/README.md

@@ -0,0 +1,25 @@
+# Flow
+
+## Screenshots
+
+### Ocean
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img"> 
+
+
+### Pink
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img"> 
+
+
+### Silver
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img"> 
+
+
+### Violet
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img"> 
+
+## Author
+Made by:
+* https://github.com/Ruixi-Zhang
+* https://github.com/yslDevelop
+* https://github.com/ian-Liaozy
+* https://github.com/alexcasieri30

.config/spicetify/Themes/Flow/color.ini

@@ -0,0 +1,80 @@
+[Pink]
+text               = 8f7878
+gradientTop        = ebaf98
+gradientBottom     = f5d4b7
+main               = ffe8d9
+subtext            = a9a9a9
+button-active      = 8f7878
+button             = ebaf98
+sidebar            = f5d4b7
+player             = ebaf98
+card-background    = e6cfd7
+shadow             = d9a28d
+notification       = f5d4b7
+notification-error = f5d4b7
+card-hover         = ffece4
+
+[Green]
+text               = 516847
+gradientTop        = 9bb78e
+gradientBottom     = b7cfac
+main               = e8f2e4
+subtext            = 797a78
+button-active      = 516847
+button             = 7d9971
+sidebar            = b7cfac
+player             = 9bb78e
+card-background    = e8ede6
+shadow             = 7d9971
+notification       = b7cfac
+notification-error = b7cfac
+card-hover         = ecf8e8
+
+[Silver]
+text               = 4c4d4f
+gradientTop        = b7bbbd
+gradientBottom     = d3d8db
+main               = d3d8db
+subtext            = 8d9092
+button-active      = a8acad
+button             = 8d9092
+sidebar            = ffffff
+player             = b7bbbd
+card-background    = e8ede6
+shadow             = b7bbbd
+notification       = ffffff
+notification-error = ffffff
+card-hover         = e0e4e4
+
+
+[Violet]
+text               = 78658b
+gradientTop        = b9adc4
+gradientBottom     = d4cade
+main               = e5dfeb
+subtext            = 8e7c9a
+button-active      = a090b0
+button             = 516847
+sidebar            = e8ede6
+player             = b9adc4
+card-background    = e8ede6
+shadow             = 847096
+notification       = b9adc4
+notification-error = b9adc4
+card-hover         = f0e4ec
+
+[Ocean]
+text               = 62828a
+gradientTop        = 9cb9ba
+gradientBottom     = c1d5d6
+main               = cadbdb
+subtext            = 7aa1a2
+button-active      = 9cb9ba
+button             = c1d5d6
+sidebar            = c1d5d6
+player             = 9cb9ba
+card-background    = e1ebeb
+shadow             = 6f9599
+notification       = cadbdb
+notification-error = c1d5d6
+card-hover         = d8e4e4

.config/spicetify/Themes/Flow/user.css

@@ -0,0 +1,309 @@
+:root {
+    --gradient-colors: var(--spice-gradienttop),var(--spice-gradientbottom);
+}
+
+.Re403AJffPPuZmX7LRJj {
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.VNztd{
+	color: rgb(100,100,100);
+}
+.main-rootlist-rootlistItem:hover{
+	background-color: var(--spice-card-background);
+}
+.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus,
+.main-navBar-navBarLinkActive:hover, .logo{
+	background-color: var(--spice-card-background);
+}
+
+.main-navBar-navBar{
+    background-image: linear-gradient(var(--gradient-colors));
+}
+
+.vUzb9hvfXJN11OcnaszM .Re403AJffPPuZmX7LRJj {
+    font-size: 30px;
+    font-weight: 700;
+    letter-spacing: -.04em;
+    line-height: 40px;
+}
+
+/* category sidebar */
+
+.EKdvOmPl7kNCDg_yuma8, .AEfhRyqGa3vzQrgfdwWE .Re403AJffPPuZmX7LRJj {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: -.04em;
+    line-height: 40px;
+    /*color: var(--lyrics-color-background);*/
+}
+/* buttons */
+.main-navBar-navBarLink {
+    border-radius: var(--border-radius-2);
+    color: var(--spice-text);
+}
+.main-addButton-active, .main-addButton-active:focus, .main-addButton-active:hover {
+    color: var(--spice-player);
+}
+/* menus */
+
+.Z35BWOA10YGn5uc9YgAp {
+    background-image: linear-gradient(var(--gradient-colors));
+    border-radius: 10px;
+}
+
+.main-card-card {
+    background-image: linear-gradient(var(--gradient-colors));
+    border-radius: 10px;
+}
+
+.main-card-card:hover {
+    background-color: var(--spice-card-hover);
+    border-radius: 10px;
+}
+
+.main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton {
+    /*border-radius: var(--border-radius-2);*/
+    color: var(--spice-text);
+    height: 32px;
+    padding-left: 8px;
+}
+.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+    background: transparent;
+    -webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
+    box-shadow: 0 -1px 0 0 var(--spice-player);
+}
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+    border-bottom: 1px solid transparent;
+    background: var(--spice-main);
+}
+.G1W6k59msDX3wNFCJ1mb.X1PI4ZcmJchyHhBzbrVI {
+    background: var(--spice-button);
+}
+.Fz5_rAxpenrV3rKWvEE0 {
+    background: -webkit-gradient(linear,left top,left bottom,from(var(--spice-player)),to(var(--spice-main)));
+    background: linear-gradient(var(--spice-button),var(--spice-main));
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 32px;
+}
+.Root__now-playing-bar {
+    background-color: var(--spice-player);
+    grid-area: now-playing-bar;
+    width: 200px;
+    z-index: 4;
+}
+.M_Sdhr1fQomXfFpJhlAV.y1_VPBbLK5eyOtpider1 {
+    background-color: var(--spice-gradientTop);
+    border-bottom: 1px solid rgba(255,255,255,.1);
+}
+#spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled {
+    /*background-color: var(--spice-button-disabled) !important;*/
+    color: var(--spice-text) !important;
+}
+
+/* remove gradients */
+.main-home-homeHeader, .main-actionBarBackground-background {
+    background-image: none;
+}
+.main-actionBarBackground-background, .main-home-homeHeader, .main-topBar-background, .main-topBar-overlay, .x-entityHeader-overlay, .x-actionBarBackground-background, ._UFTK833WfTNGb4agRTd, .Ic3iDUCnC09k55peZBfC {
+    background-color: var(--spice-main) !important;
+}
+.x-actionBarBackground-background, .x-entityHeader-overlay, .Ic3iDUCnC09k55peZBfC, ._UFTK833WfTNGb4agRTd {
+    background-image: none !important;
+}
+.main-entityHeader-backgroundColor {
+    background: var(--spice-main);
+}
+.player-controls__buttons--new-icons {
+    gap: 16px;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.ythYrlFSBm1P_ltHc8e1, .aUdGtzUFX8HhUq5AdHcE, .main-buddyFeed-buddyFeedRoot {
+    display: none;
+}
+
+.Root__top-container {
+    display: grid;
+    grid-template-areas: "nav-bar         main-view       now-playing-bar";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+    min-height: 100%;
+    position: relative;
+    width: 100%;
+}
+
+
+player-controls__left {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    flex-direction: column;
+}
+
+.main-nowPlayingBar-container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    background-color: var(--spice-player);
+    border-top: 1px solid var(--spice-card);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.player-controls__left,
+.player-controls__right {
+
+    flex-direction: column;
+}
+
+.playback-bar {
+    flex-direction: column;
+}
+
+.playback-bar__progress-time-elapsed {
+    min-width: 0px;
+}
+
+
+.main-playbackBarRemainingTime-container {
+    min-width: 0px;
+}
+
+.main-nowPlayingBar-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mvRQWscG4lmAxOs4neBL,
+.main-nowPlayingBar-nowPlayingBar {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    align-items: center;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    height: 100%;
+    background-image: linear-gradient(var(--gradient-colors));
+}
+
+.main-nowPlayingBar-right,
+.main-pageErrorTemplate-errorBody {
+    -webkit-box-direction: normal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-bottom: 10px;
+    padding: 10px;
+}
+
+/*button*/
+.encore-dark-theme .encore-bright-accent-set {
+    --background-base: var(--spice-button-active);
+    --background-highlight: var(--spice-player);
+    --background-press: var(--spice-player);
+    --decorative-subdued: var(--spice-player);
+}
+
+/*tracklist*/
+.main-trackList-trackListRow {
+    border-radius: var(--border-radius-2);
+}
+.main-trackList-trackListRow:hover {
+    background-color: var(--spice-card-background);
+
+}
+.prog-tooltip{
+    display:none;
+}
+
+.main-rootlist-rootlistDividerContainer {
+    position: relative;
+    /*color: var(--spice-gradientTop)*/
+    display: none;
+}
+
+.progress-bar {
+    width: 150px;
+}
+
+.playback-progressbar {
+    width: 150px;
+}
+
+.main-nowPlayingBar-right{
+    transform:  translate(0px, -80px) rotate(90deg);
+}
+
+.volume-bar{
+    width: 0px;
+    height: 0px;
+}
+
+.ExtraControls > div {
+    transform: rotate(-90deg);
+}
+
+.ExtraControls > button {
+    transform: rotate(-90deg);
+}
+
+
+.volume-bar > .playback-progressbar {
+    width: 75px;
+    transform: translate(-40px, 0px);
+}
+
+.volume-bar > button {
+    transform: translate(-40px, 0px);
+}
+
+.main-nowPlayingBar-left {
+    transform: translate(0px, 150%)rotate(90deg);
+}
+.main-nowPlayingWidget-nowPlaying > div{
+    transform: rotate(-90deg);
+}
+.main-nowPlayingWidget-nowPlaying > button{
+    transform: rotate(-90deg);
+}
+
+.main-trackInfo-container {
+    margin: -10px -10px -10px -10px;
+}
+
+.main-nowPlayingWidget-nowPlaying > button{
+    color: var(--spice-text)
+}
+
+.main-nowPlayingBar-center{
+    transform: translate(0px, -10px);
+}

.config/spicetify/Themes/Glaze/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 CharlieS1103
+
+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.

.config/spicetify/Themes/Glaze/README.md

@@ -0,0 +1,21 @@
+# Glaze
+
+## Screenshots
+
+### Base
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/base.png" alt="img"> 
+
+
+### Dark
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/dark.png" alt="img"> 
+
+### Gray
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/gray.png" alt="img"> 
+
+## Important
+It may be necessary to enable sidebar config in order to make certain aspects of the theme.
+
+##### To enable: `spicetify config sidebar_config 1`
+
+## Author
+Made by: https://github.com/CharlieS1103

.config/spicetify/Themes/Glaze/color.ini

@@ -0,0 +1,87 @@
+[Base]
+;Green and black
+button             = 1DB954
+notification       = 171717
+playback-bar       = 171717
+button-disabled    = 171717
+shadow             = 202020
+selected-row       = 132e18
+sub-button         = 080808
+main               = 080808
+notification-error = 171717
+subtext            = BDC1C6
+card               = 080808
+sidebar            = 080808
+button-active      = 0b441f
+tab-active         = 0b441f
+subbutton-text     = 132e18
+text               = 1DB954
+misc               = 383145
+player             = 080808
+button-text        = BDC1C6
+
+[Gray]
+; Gray colors
+text               = EEEEEE
+subtext            = EEEEEE
+button-text        = EEEEEE
+main               = 888888
+sidebar            = 333333
+player             = 171717
+subbutton-text     = EEEEEE
+card               = 888888
+shadow             = EEEEEE
+selected-row       = 888888
+sub-button         = 888888
+button             = eeeeee
+button-active      = 171717
+button-disabled    = 171717
+tab-active         = 171717
+notification       = 171717
+notification-error = 171717
+playback-bar       = 171717
+misc               = 171717
+
+[Dark]
+;Grays and Blues
+button             = 8AB4F8
+notification       = b4b7b4
+playback-bar       = b4b7b4
+button-disabled    = b4b7b4
+shadow             = 202020
+selected-row       = 313235
+sub-button         = 202124
+main               = 202124
+notification-error = b4b7b4
+subtext            = BDC1C6
+card               = 202124
+sidebar            = 202124
+button-active      = 4285f4
+tab-active         = 4285f4
+subbutton-text     = 313235
+text               = 8AB4F8
+misc               = 383145
+player             = 202124
+button-text        = BDC1C6
+
+; Description
+
+; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
+; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
+; button-text = text in main buttons in sidebar when active
+; main = main field or main bg
+; sidebar = sidebar bg
+; subbutton-text = text of buttons that use the text color or subtext color as a background
+; player = player bg
+; card = card bg
+; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
+; selected-row = color of the song selected
+; sub-button = caption and details of playlist, download and options button
+; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
+; button-active = hover on song selected
+; button-disabled = seekbar bg, volume bar bg, scrollbar
+; tab-active = button bg in main field (playlists, podcasts, artists, albums)
+; notification = notification ('Added to liked songs' etc.)
+; notification-error = error
+; playback-bar = seekbar fg, main play/pause button bg
+; misc = miscellaneous

.config/spicetify/Themes/Glaze/user.css

@@ -0,0 +1,284 @@
+/* Glaze Theme*/
+#main{
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--spice-main);
+}
+
+
+.main-trackList-playingIcon {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+    background: var(--spice-text);
+    content-visibility: hidden;
+}
+
+/* Sidebar changes*/
+.main-yourEpisodesButton-yourEpisodesIcon { 
+    background: var(--spice-text); 
+    } 
+    .main-yourEpisodesButton-yourEpisodesIcon path { 
+        fill: var(--spice-player); opacity: 0.7; 
+    }
+.main-rootlist-rootlistDivider, .main-rootlist-rootlistDividerContainer{
+    visibility: hidden !important;
+}
+
+.main-yourEpisodes-coverContainer{
+background-color: var(--spice-text);
+}
+
+.collection-collectionEntityHeroCard-likedSongs {
+    background: linear-gradient(
+149.46deg
+, var(--spice-sidebar), var(--spice-main) 99.16%) !important;
+}
+.main-likedSongsButton-likedSongsIcon {
+    color: var(--spice-sidebar);
+}
+.main-likedSongsButton-likedSongsIcon {
+    background: var(--spice-text);
+}
+
+
+#spicetify-show-list{
+    width:90%;
+    margin-right: 1px;
+    position: relative !Important;
+    top: -5px;
+    z-index:20;
+}
+#spicetify-show-list > li{
+    padding-bottom: 5px;
+    width:110%;
+
+}
+.main-navBar-navBarLinkActive{
+    background-image: linear-gradient(90deg, var(--spice-sidebar), var(--spice-selected-row))
+}
+.main-navBar-navBarLink:hover{
+    background-color: var(--spice-main);
+}
+.main-navBar-navBarLink{
+    height:50px;
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+}
+#spicetify-show-list > div.GlueDropTarget {
+    display:table-cell;
+    width:0px !important;
+    padding: 0x !important;
+    margin:0px !important;
+    border-top: var(--spice-selected-row) solid 1px;
+    border-bottom: var(--spice-selected-row) solid 1px;
+}
+#spicetify-show-list > div > a > span, #spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes.personal-library > button > span{
+    display: none;
+    padding: 0px;
+    margin:0px;
+}
+span.main-createPlaylistButton-text.standalone-ellipsis-one-line.main-type-mestoBold {
+    display: none;
+}
+.main-coverSlotCollapsed-expandButton {
+    display: none;
+}
+.main-createPlaylistButton-button, div.GlueDropTarget.personal-library >*  {
+    padding: 0px !important;
+  
+}
+
+#spicetify-show-list > div.GlueDropTarget.GlueDropTarget--episodes.personal-library.podcast-item{
+    padding-left: 25px !important;
+}
+.main-entityHeader-backgroundColor{
+    background-color: var(--spice-selected-row);
+        background-image: linear-gradient(0deg, var(--spice-main), transparent);
+    }
+
+    .main-actionBarBackground-background {
+        background-color: unset !important;
+        background-image: unset !important;
+}
+
+
+#spicetify-show-list > div > a > div.main-collectionLinkButton-icon > div, .main-createPlaylistButton-createPlaylistIcon {
+    width:30px;
+    height:30px;
+    background: var(--spice-text);
+    color: var(--spice-sidebar)
+}
+.main-shuffleButton-button.pp1ooFGqFEUG5ucC6_KW, .main-repeatButton-button.yKo7LWUCQCEALszRxAaS {
+    color: var(--spice-button);
+}
+.main-skipBackButton-button, .main-skipForwardButton-button{
+        color: var(--spice-subtext);
+}
+
+#spicetify-show-list > div:nth-child(9) {
+    padding-right: 1100px;
+}
+#spicetify-show-list > div:nth-child(7) {
+    padding-left: 20px;
+}
+#spicetify-show-list > div > a > div.main-collectionLinkButton-icon > div > svg, #spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes.personal-library > button > div > div > svg,#spicetify-show-list > div.GlueDropTarget.GlueDropTarget--albums.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes > button > div > div > svg{
+width:20px !important;
+height:20px !important;
+}
+#spicetify-show-list > li:nth-child(3){
+	border-bottom: var(--spice-selected-row) solid 1px;
+}
+.main-card-card {
+    background: var(--spice-card);
+    }
+.Z35BWOA10YGn5uc9YgAp {
+    background-color: var(--spice-player) !important;
+}
+.main-card-card:hover{
+    background: var(--spice-sidebar);
+ }
+.main-home-homeHeader {
+    background: unset !important;
+    background-color:unset !important;
+    }
+/* Playback bar and controls*/
+.main-nowPlayingBar-nowPlayingBar {
+    width: 100%;
+    bottom: -1%;
+    position: absolute;
+    left: 0.35%;
+    background-color: var(--spice-player);
+    z-index: 1;
+    padding-left:0px;
+}
+.playback-bar{
+    position:absolute;
+    width:99%;
+    top:5%;
+}
+.main-nowPlayingBar-left {
+    order: 1;
+    flex: 1;
+    width: auto;
+    min-width: 0 !important;
+}
+
+.main-nowPlayingBar-center {
+    order: 0;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingBar-right {
+    order: 2;
+    flex: 1;
+    width: auto;
+    min-width: unset !important;
+}
+
+.main-nowPlayingWidget-nowPlaying {
+    justify-content: center;
+}
+.cover-art-image {
+    border-radius: 7.5%;
+}
+
+.main-trackInfo-container > div > div::before,
+.main-trackInfo-container > div > div::after {
+    background: unset;
+}
+
+.player-controls {
+    justify-content: flex-start;
+    flex-direction: row;
+}
+
+.main-playPauseButton-button {
+    background-color: transparent;
+}
+
+.main-playPauseButton-button svg {
+    width: 32px !important;
+    height: 32px !important;
+    color: var(--spice-button);
+}
+.main-playButton-PlayButton.main-playButton-primary{
+	background-color:var(--spice-main);
+}
+.player-controls__left{
+    flex:0;
+}
+.epWhU7hHGktzlO_dop6z{
+    background-color: var(--spice-text);
+}
+.main-playPauseButton-button[disabled] {
+    background-color: unset !important;
+}
+/*Hide things and general cleanup */
+nav.Root__nav-bar {
+    min-width: 200px !important;
+    max-width: 235px;
+    border-right: 1px solid var(--spice-selected-row);
+    background-color: var(--spice-sidebar);
+}
+.x-toggle-indicatorWrapper {
+    background-color: var(--spice-button-disabled) !important;
+}
+.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal {
+
+    display: none;
+}
+#main > div > div.Root__top-container > nav > div.main-navBar-navBar > div.main-rootlist-rootlist > div > div.os-host.os-host-foreign.os-theme-spotify.os-host-resize-disabled.main-rootlist-rootlistPlaylistsScrollNode.os-host-scrollbar-vertical-hidden.os-host-transition.os-host-overflow.os-host-overflow-x > div.os-padding > div > div {
+    overflow: hidden;
+}
+.main-topBar-background{
+	background-color:unset !important;
+	width:110%;
+}
+.main-trackList-trackListHeader{
+	position: unset !important;
+}
+div.main-cardImage-imageWrapper.main-cardImage-roundedCorners > div > div > svg > path {
+    color: blue;
+    background-color: blue;
+    fill: var(--spice-sidebar);
+    opacity: 0.7;
+}
+/* Block ads */
+.main-leaderboardComponent-container{
+  display: none;
+}
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer{
+  display: none !important;
+}
+.main-yourEpisodesButton-yourEpisodesIcon path {
+    fill: var(--spice-sidebar);
+}
+.main-topBar-UpgradeButton{
+    display:none !important;
+}
+/* Modal changes*/
+.main-trackCreditsModal-container {
+background-color:var(--spice-misc);
+}
+/*Notification Changes*/
+.main-notificationBubble-NotificationBubble {
+    color: var(--spice-main) !important;
+}
+/* Fixes same color on button and button text in some scenarios(Especially on modals)*/
+.main-button-primary{
+    color:var(--spice-subtext)
+}
+/* Fix progress bar displacement on playing on another device popup*/
+.main-connectBar-connectBar {
+    overflow: visible !important;
+    --triangle-position: 147px !important;
+    align-items: unset !important;
+    height: 0px !important;
+    position: absolute !important;
+    left: 80% !important;
+    display: flex !important;
+    bottom: 2% !important;
+    padding: unset !important;
+
+}

.config/spicetify/Themes/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 morpheusthewhite
+
+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.

.config/spicetify/Themes/Onepunch/.gitignore

@@ -0,0 +1 @@
+.DS_STORE

.config/spicetify/Themes/Onepunch/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 okarin001
+
+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.

.config/spicetify/Themes/Onepunch/README.md

@@ -0,0 +1,46 @@
+# Onepunch
+
+## Screenshots
+
+#### Dark
+
+|   ![dark_home](./screenshots/dark_home.png)   |   ![dark_album](./screenshots/dark_album.png)   | ![dark_playlist](./screenshots/dark_playlist.png) |
+| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: |
+|                     home                      |                      album                      |                     playlist                      |
+| ![dark_podcast](screenshots/dark_podcast.png) | ![dark_profile](./screenshots/dark_profile.png) |
+|                    podcat                     |                     profile                     |
+
+#### Light
+
+|   ![light_home](./screenshots/light_home.png)   |   ![light_album](./screenshots/light_album.png)   | ![light_playlist](./screenshots/light_playlist.png) |
+| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: |
+|                      home                       |                       album                       |                      playlist                       |
+| ![light_podcast](screenshots/light_podcast.png) | ![light_profile](./screenshots/light_profile.png) |
+|                     podcat                      |                      profile                      |
+
+## More
+
+### About
+
+A simple gruvified spotify theme.
+
+### Information
+
+*   To apply this theme:
+
+    ```shell
+    # for dark theme
+    spicetify config current_theme Onepunch color_scheme dark
+    spicetify apply
+
+    #for light theme
+    spicetify config current_theme Onepunch color_scheme light
+    spicetify apply
+
+    ```
+
+*   Tested on macOS only and pretty much everything worked. ﾍ(･\_|
+
+### Contact
+
+Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any problem.

.config/spicetify/Themes/Onepunch/color.ini

@@ -0,0 +1,43 @@
+[dark]
+;   onepunch dark mode
+
+text               = d5c4a1
+subtext            = b8bb26
+extratext          = fabd2f
+main               = 1d2021
+sidebar            = 1d2021
+player             = 1d2021
+sec-player         = 32302f 
+card               = 32302f
+sec-card           = fb4934
+shadow             = 1d2021
+selected-row       = d3869b
+button             = 8ec07c
+button-active      = 8ec07c
+button-disabled    = 665c54
+tab-active         = fb4934
+notification       = fb4934
+notification-error = cc2418
+misc               = 83a598
+
+[light]
+; onepunch light mode
+
+text               = 504945 
+subtext            = 79740e
+extratext          = b57614
+main               = f9f5d7
+sidebar            = f9f5d7
+player             = f9f5d7
+sec-player         = f2e5bc 
+card               = f2e5bc
+sec-card           = 9d0006
+shadow             = f9f5d7
+selected-row       = b16286
+button             = 427b58
+button-active      = 427b58
+button-disabled    = bdae93
+tab-active         = 9d0006
+notification       = 9d0006
+notification-error = cc2418
+misc               = 076678

.config/spicetify/Themes/Onepunch/user.css

@@ -0,0 +1,407 @@
+/* sidebar edits */
+.main-navBar-navBarLinkActive,
+.main-navBar-navBarLinkActive:focus,
+.logo {
+  background-color: var(--spice-sec-card) !important;
+  color: var(--spice-main) !important;
+}
+
+.main-likedSongsButton-likedSongsIcon,
+.main-createPlaylistButton-createPlaylistIcon,
+.main-yourEpisodesButton-yourEpisodesIcon {
+  background: var(--spice-text) !important;
+  border-radius: unset !important;
+  color: var(--spice-main) !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton {
+  color: var(--spice-main) !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button,
+.main-rootlist-rootlistItemLink,
+.main-rootlist-rootlistItemLink:visited {
+  color: var(--spice-text) !important;
+}
+
+.main-rootlist-rootlistItemLinkActive,
+.main-rootlist-rootlistItemLink:hover,
+.main-rootlist-textWrapper:hover {
+  color: var(--spice-subtext) !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-selected .main-collectionLinkButton-icon {
+  opacity: 0.7 !important;
+}
+
+.main-rootlist-rootlistDividerGradient {
+  background: linear-gradient(180deg, var(--spice-main), transparent);
+}
+
+.main-rootlist-rootlistDivider {
+  background-color: unset !important;
+}
+
+/* top queue */
+.queue-tabBar-active {
+  background-color: var(--spice-card) !important;
+}
+
+.queue-tabBar-headerItemLink {
+  color: var(--spice-text) !important;
+}
+
+/* header colored backgrounds */
+.main-home-homeHeader,
+.x-441-entityHeader-overlay,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor,
+.x-914-entityHeader-overlay,
+.x-entityHeader-overlay,
+.x-914-actionBarBackground-background,
+.x-actionBarBackground-background {
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+/* play button in main page */
+.main-playButton-PlayButton.main-playButton-primary {
+  color: var(--spice-main);
+  background-color: var(--spice-button);
+}
+
+.connect-title,
+.connect-header {
+  display: none;
+}
+
+/* Topbar visibility bug */
+.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
+  opacity: unset !important;
+}
+
+.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
+  opacity: 0 !important;
+}
+
+/* Remove Topbar background colour */
+.main-topBar-background {
+  background-color: unset !important;
+}
+
+.main-topBar-overlay,
+.x-441-actionBarBackground-background {
+  background-color: var(--spice-main) !important;
+}
+
+.main-entityHeader-shadow {
+  box-shadow: 0 0 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
+}
+
+.main-trackList-playingIcon {
+  filter: hue-rotate(270deg);
+}
+
+span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
+  fill: black;
+}
+
+/* details metadata */
+.main-entityTitle-subtitle.main-entityTitle-gray,
+.main-entityHeader-metaDataText {
+  color: var(--spice-text) !important;
+}
+
+.main-duration-container {
+  color: var(--spice-subtext);
+}
+
+/* artist page edits*/
+
+.artist-artistOverview-artistOverviewContent {
+  box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.7);
+}
+
+.main-entityHeader-background.main-entityHeader-gradient {
+  opacity: 0.4;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+  background-image: linear-gradient(transparent, transparent),
+    linear-gradient(var(--spice-main), var(--spice-main));
+}
+
+.artist-artistPick-pickComment {
+  background: var(--spice-sec-player) !important;
+  border-radius: 25px !important;
+  border-bottom: solid 2px var(--spice-sec-player) !important;
+  color: var(--spice-text) !important;
+}
+
+.artist-artistSavedTracks-imageContainer .artist-artistSavedTracks-heartIcon {
+  color: var(--spice-card);
+}
+
+/* home screen edits */
+
+.view-homeShortcutsGrid-name {
+  color: var(--spice-text);
+}
+
+.main-shelf-title {
+  color: var(--spice-subtext);
+}
+
+.view-homeShortcutsGrid-shortcut,
+.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper,
+.main-cardImage-imageWrapper,
+.main-cardImage-imagePlaceholder,
+.main-cardImage-image {
+  border-radius: 10px !important;
+}
+
+.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
+  border-radius: 10px 0 0 10px !important;
+}
+
+.main-cardImage-circular,
+.main-entityHeader-circle {
+  border-radius: 50% !important;
+}
+
+.main-entityHeader-image {
+  border-radius: 10px;
+}
+
+/* inside a page edits */
+.main-addButton-button {
+  color: var(--spice-subtext) !important;
+}
+
+.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
+  color: var(--spice-subtext) !important;
+}
+
+.main-trackList-rowTitle {
+  color: var(--spice-text) !important;
+}
+
+/* friend activity */
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp a {
+  color: var(--spice-text) !important;
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
+  color: var(--spice-subtext) !important;
+}
+
+.main-avatar-avatar.main-avatar-withBadge:after {
+  background: var(--spice-extratext);
+}
+
+/* setting page */
+
+.x-settings-container {
+  margin: 16px 180px !important;
+}
+
+.x-settings-title {
+  color: var(--spice-subtext) !important;
+}
+
+.main-dropDown-dropDown {
+  border: 0;
+  border-radius: 10px;
+}
+
+.main-dropDown-dropDown {
+  background-color: var(--spice-button-disabled) !important;
+  color: var(--spice-text) !important;
+}
+
+.x-toggle-indicator {
+  background: var(--spice-button) !important;
+  box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
+}
+
+input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
+  background-color: var(--spice-button) !important;
+  box-shadow: 0 2px 4px 0 rgba(var(--spice-rgb-shadow), 0.5);
+}
+
+input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
+  background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
+}
+
+input:checked~.x-toggle-indicatorWrapper {
+  background-color: rgba(var(--spice-rgb-button), 0.6) !important;
+}
+
+input:checked:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
+  background-color: rgba(var(--spice-rgb-button), 0.4) !important;
+}
+
+
+/* queue, album, recent, playlist, page edits */
+.queue-queue-container,
+.queue-playHistory-container {
+  margin: 40px 60px !important;
+}
+
+.main-actionBar-ActionBar,
+.x-actionBar-ActionBar {
+  margin: 0 40px !important;
+}
+
+/* podcast edits */
+.x-hTMLDescription-HTMLDescription,
+.x-expandableDescription-paragraph {
+  color: var(--spice-text) !important;
+}
+
+.x-seeMore-button,
+.x-expandableDescription-button {
+  color: var(--spice-button) !important;
+}
+
+.main-type-minuetBold {
+  color: var(--spice-extratext) !important;
+}
+
+.main-entityTitle-subtitle,
+.main-entityTitle-subtitle.main-entityTitle-large,
+.main-entityTitle-subtitle.main-entityTitle-bold {
+  color: var(--spice-subtext) !important;
+}
+
+/* search page edits */
+
+input {
+  background-color: unset !important;
+  border-bottom: solid 2px var(--spice-text) !important;
+  border-radius: 0 !important;
+  color: var(--spice-text) !important;
+}
+
+.x-833-searchInput-searchInputSearchIcon {
+  color: var(--spice-text) !important;
+}
+
+.x-833-heroCategoryCard-heroTitle,
+.x-833-categoryCard-title {
+  color: var(--spice-main) !important;
+}
+
+/* menu and dropdown menus including the user menu */
+.main-type-mesto,
+.x-533-dropDown-dropDown {
+  color: var(--spice-text) !important;
+}
+
+.main-userWidget-box {
+  background-color: var(--spice-card) !important;
+  border: unset !important;
+  color: var(--spice-subtext) !important;
+}
+
+/* card edits */
+
+.main-card-card a,
+.main-card-card button {
+  color: var(--spice-extratext);
+}
+
+.main-card-card:hover,
+.main-card-card[data-context-menu-open="true"] {
+  background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important;
+}
+
+.main-contextMenu-menu,
+.main-card-card:focus-within,
+.main-deletePlaylistDialog-container,
+.main-aboutRecsModal-container {
+  background-color: var(--spice-card) !important;
+}
+
+.main-deletePlaylistDialog-secondaryButton {
+  color: var(--spice-text) !important;
+}
+
+.main-button-primary {
+  background-color: var(--spice-sec-card) !important;
+  color: var(--spice-card) !important;
+}
+
+.main-deletePlaylistDialog-title {
+  color: var(--spice-subtext) !important;
+}
+
+.main-keyboardShortcutsHelpModal-container,
+.main-trackCreditsModal-container {
+  background-color: var(--spice-card) !important;
+  color: var(--spice-text) !important;
+}
+
+.main-keyboardShortcutsHelpModal-header,
+.main-trackCreditsModal-header {
+  color: var(--spice-subtext) !important;
+}
+
+.main-type-canon {
+  color: var(--spice-extratext) !important;
+}
+
+/* profile page edits */
+.main-cardImage-imageWrapper {
+  background-color: var(--spice-card) !important;
+}
+
+/* now playing bar edits */
+
+.Root__now-playing-bar {
+  background-color: var(--spice-sec-player) !important;
+  box-shadow: 0 -2px 5px 0 rgba(var(--spice-rgb-shadow), 0.5) !important;
+  border-radius: 15px 15px 0 0 !important;
+}
+
+.main-nowPlayingBar-container {
+  background-color: var(--spice-sec-player) !important;
+  border-radius: 15px 15px 0 0 !important;
+}
+
+.main-connectBar-connectBar.main-connectBar-FullscreenModeButtonEnabled.main-type-mesto {
+  color: var(--spice-sidebar) !important;
+}
+
+.progress-bar {
+  --progress-bar-height: 5px !important;
+}
+
+.progress-bar__bg {
+  background-color: rgba(var(--spice-rgb-button-disabled), 0.7) !important;
+}
+
+.progress-bar--is-active .progress-bar__fg,
+:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
+  background-color: var(--fg-color);
+}
+
+.main-shuffleButton-button.main-shuffleButton-on,
+.main-repeatButton-button.main-repeatButton-on {
+  color: var(--spice-button) !important;
+}
+
+.cover-art--with-auto-height {
+  border: solid var(--spice-sec-player) 5px !important;
+}
+
+.cover-art,
+.cover-art .cover-art-image {
+  border-radius: 10px !important;
+  background-color: var(--spice-sec-player) !important;
+}

.config/spicetify/Themes/README.md

@@ -0,0 +1,76 @@
+# spicetify community themes
+
+This is a collection of themes for [spicetify](https://github.com/spicetify/spicetify-cli), a command-line tool to customize Spotify.
+
+You can add your own theme simply by opening a Pull Request (more info in [CONTRIBUTING.md](./CONTRIBUTING.md)).
+
+### **You can find a preview of all the themes in [THEMES.md](./THEMES.md).**
+
+## Notes:
+
+*   **These themes require that you have the latest version of Spotify and Spicetify.**
+*   **To install Dribbblish and Turntable themes, follow the instructions in their READMEs**.
+*   **Spotify ad-blocked version is not supported.**
+
+## Installation and usage
+
+(If you use Arch Linux you can find this project on the [AUR](https://aur.archlinux.org/packages/spicetify-themes-git/))
+
+1.  Clone this repository. Make sure [git](https://git-scm.com/) is installed and run:
+    ```bash
+    git clone https://github.com/spicetify/spicetify-themes.git
+    ```
+
+2.  Copy the files into the [Spicetify Themes folder](https://spicetify.app/docs/development/customization#themes). Run:
+
+    **Linux**
+
+    ```bash
+    cd spicetify-themes
+    cp -r * ~/.config/spicetify/Themes
+    ```
+
+    **MacOS**
+
+    ```bash
+    cd spicetify-themes
+    cp -r * ~/.config/spicetify/Themes
+    ```
+
+    **Windows**
+
+    ```powershell
+    cd spicetify-themes
+    cp * "$(spicetify -c | Split-Path)\Themes\" -Recurse
+    ```
+
+3.  Choose which theme to apply just by running:
+    ```bash
+    spicetify config current_theme THEME_NAME
+    ```
+    Some themes have 2 or more different color schemes. After selecting the theme you can switch between them with:
+    ```bash
+    spicetify config color_scheme SCHEME_NAME
+    ```
+
+### Extra
+
+The `_Extra` folder contains additional resources for tweaking the look of
+Spotify. More info in its [README](./\_Extra/README.md).
+
+## Contributions
+
+We've set up a separate document for our [contribution guidelines](./CONTRIBUTING.md).
+
+## Troubleshooting
+
+Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. If you find problems when using or installing these themes, or you need help in modifying a theme then ask for suggestions on the [subreddit](https://www.reddit.com/r/spicetify/) or on the [Discord Server](https://discord.com/invite/VnevqPp2Rr).
+
+Use GitHub issues ONLY for bugs and requesting new features.
+
+If you are unsure about which channel to use, go for Reddit or Discord.
+
+## Useful resources
+
+*   [Spicetify theme without free version UI elements (e.g. "Upgrade" button)](https://github.com/Daksh777/SpotifyNoPremium)
+*   [DribbblishDynamic theme for v2](https://github.com/JulienMaille/dribbblish-dynamic-theme)

.config/spicetify/Themes/Sleek/README.md

@@ -0,0 +1,68 @@
+# Sleek
+
+### BladeRunner
+
+![BladeRunner](bladerunner.png)
+
+### Cherry
+
+![Cherry](cherry.png)
+
+### Coral
+
+![Coral](coral.png)
+
+### Deep
+
+![Deep](deep.png)
+
+### Deeper
+
+![Deeper](deeper.png)
+
+### Elementary
+
+![Elementary](elementary.png)
+
+### Futura
+
+![Futura](futura.png)
+
+### Nord
+
+![Nord](nord.png)
+
+### Psycho
+
+![Psycho](psycho.png)
+
+### UltraBlack
+
+![UltraBlack](ultrablack.png)
+
+### Wealthy
+
+![Wealthy](wealthy.png)
+
+### Dracula
+
+![Dracula](dracula.png)
+
+### VantaBlack
+
+![VantaBlack](vantablack.png)
+
+## Info
+
+A simple, 'sleek' theme that builds upon the basic Spotify UI to create a more stylised experience. Also removes all annoyances from free version, including banner advertisements and upgrade buttons.
+
+Created by [@harbassan](https://github.com/harbassan)
+
+### Changing Color Schemes
+
+Change the scheme with these commands:
+
+```
+spicetify config color_scheme <scheme name>
+spicetify apply
+```

.config/spicetify/Themes/Sleek/color.ini

@@ -0,0 +1,343 @@
+[NPink]
+; Pink on dark blue background
+text               = fe9bce
+subtext            = b1d4e9
+nav-active-text    = fe9bce
+main               = 25283f
+sidebar            = 25283f
+player             = 25283f
+card               = 25283f
+shadow             = 25283f
+main-secondary     = 545d89
+button             = b1d4e9
+button-secondary   = b1d4e9
+button-active      = fe9bce
+button-disabled    = b1d4e9
+nav-active         = 383e5b
+play-button        = fe9bce
+tab-active         = 383e5b
+notification       = 25283f
+notification-error = 25283f
+playback-bar       = fe9bce
+misc               = FFFFFF
+
+[Wealthy]
+; Green on dark grey background
+text               = 8bc34a
+subtext            = b4b4b4
+nav-active-text    = 202020
+main               = 202020
+sidebar            = 202020
+player             = 242424
+card               = 242424
+shadow             = 000000
+main-secondary     = 171717
+button             = 8bc34a
+button-secondary   = 6a913d
+button-active      = 98da4b
+button-disabled    = 353535
+nav-active         = 8bc34a
+play-button        = 8bc34a
+tab-active         = 171717
+notification       = 242424
+notification-error = 242424
+playback-bar       = 8bc34a
+misc               = FFFFFF
+
+[Cherry]
+; Pink on dark blue background
+text               = d98ba1
+subtext            = d7d7d7
+nav-active-text    = 131c26
+main               = 131c26
+sidebar            = 131c26
+player             = 131c26
+card               = 131c26z
+shadow             = 0e0e13
+main-secondary     = 09111b
+button             = d98ba1
+button-secondary   = d98ba1
+button-active      = ff84ac
+button-disabled    = 192531
+nav-active         = ff84ac
+play-button        = d98ba1
+tab-active         = 09111b
+notification       = 192531
+notification-error = 192531
+playback-bar       = d98ba1
+misc               = FFFFFF
+
+[Coral]
+; Salmon on dark blue background
+text               = f88379
+subtext            = d7d7d7
+nav-active-text    = 131c26
+main               = 131c26
+sidebar            = 131c26
+player             = 131c26
+card               = 131c26
+shadow             = 0e0e13
+main-secondary     = 09111b
+button             = f88379
+button-secondary   = f88379
+button-active      = fb958b
+button-disabled    = 192531
+nav-active         = fb958b
+play-button        = f88379
+tab-active         = 09111b
+notification       = 192531
+notification-error = 192531
+playback-bar       = f88379
+misc               = FFFFFF
+
+[Deep]
+; White on dark blue background
+text               = ffffff
+subtext            = ffffff
+nav-active-text    = ffffff
+main               = 020816
+sidebar            = 051024
+player             = 030b1e
+card               = 0a1527
+shadow             = 000000
+main-secondary     = 06142d
+button             = 1464b5
+button-secondary   = ffffff
+button-active      = 4a99e9
+button-disabled    = 21282f
+nav-active         = 37b778
+play-button        = 37b778
+tab-active         = 0a1527
+notification       = 051024
+notification-error = 051024
+playback-bar       = 37b778
+misc               = FFFFFF
+
+[Deeper]
+; Light blue on dark background
+text               = 4f9a87
+subtext            = 4f9a87
+nav-active-text    = 4f9a87
+main               = 040614
+sidebar            = 0F111A
+player             = 0F111A
+card               = 0C1C19
+shadow             = 000000
+main-secondary     = 131520
+button             = 4f9a87
+button-secondary   = 4f9a87
+button-active      = 4a99e9
+button-disabled    = 0C1C19
+nav-active         = 040614
+play-button        = 4f9a87
+tab-active         = 0a1527
+notification       = 051024
+notification-error = 051024
+playback-bar       = 4f9a87
+misc               = FFFFFF
+
+[Psycho]
+; Red on dark grey background
+text               = c20000
+subtext            = ffffff
+nav-active-text    = 101010
+main               = 101010
+sidebar            = 171717
+player             = 171717
+card               = 171717
+shadow             = 000000
+main-secondary     = 1f1f1f
+button             = c20000
+button-secondary   = a20606
+button-active      = c20000
+button-disabled    = 404040
+nav-active         = 9f0909
+play-button        = c20000
+tab-active         = 171717
+notification       = 5e0000
+notification-error = 5e0000
+playback-bar       = c20000
+misc               = FFFFFF
+
+[UltraBlack]
+; White on black background
+text               = FFFFFF
+subtext            = DEDEDE
+nav-active-text    = 000000
+main               = 000000
+sidebar            = 000000
+player             = 000000
+card               = 000000
+shadow             = 000000
+main-secondary     = 292929
+button             = 1DB954
+button-secondary   = DEDEDE
+button-active      = 1DB954
+button-disabled    = 2f2f2f
+nav-active         = DEDEDE
+play-button        = DEDEDE
+tab-active         = 292929
+notification       = 292929
+notification-error = 292929
+playback-bar       = DEDEDE
+misc               = FFFFFF
+
+[Nord]
+; Light grey on blue background
+text               = D8DEE9
+subtext            = E5E9F0
+nav-active-text    = D8DEE9
+main               = 2E3440
+sidebar            = 2E3440
+player             = 2E3440
+card               = 2E3440
+shadow             = 1d2128
+main-secondary     = 434c5e
+button             = 5E81AC
+button-secondary   = D8DEE9
+button-active      = 81A1C1
+button-disabled    = 434C5E
+nav-active         = 4c566a
+play-button        = 5E81AC
+tab-active         = 3b4252
+notification       = 3b4252
+notification-error = 3b4252
+playback-bar       = DEDEDE
+misc               = FFFFFF
+
+[Futura]
+; Cyan on dark background
+text               = 34ad7e
+subtext            = DEDEDE
+nav-active-text    = 2E2837
+main               = 2E2837
+sidebar            = 2E2837
+player             = 2E2837
+card               = 2E2837
+shadow             = 000000
+main-secondary     = 51485b
+button             = 34ad7e
+button-secondary   = 34ad7e
+button-active      = 00bf76
+button-disabled    = 3f3c45
+nav-active         = 34ad7e
+play-button        = 34ad7e
+tab-active         = 51485b
+notification       = 51485b
+notification-error = 51485b
+playback-bar       = 34ad7e
+misc               = FFFFFF
+
+[Elementary]
+; Purple and pink on dark background
+text               = c59dff
+subtext            = dedede
+nav-active-text    = 1d1821
+main               = 1f1f29
+sidebar            = 1d1821
+player             = 1d1821
+card               = 2E2837
+shadow             = 000000
+main-secondary     = 1d1821
+button             = d4516f
+button-secondary   = c59dff
+button-active      = f16d8c
+button-disabled    = 2E303E
+nav-active         = d4516f
+play-button        = d4516f
+tab-active         = 1d1821
+notification       = 2E2837
+notification-error = 2E2837
+playback-bar       = c59dff
+misc               = FFFFFF
+
+[BladeRunner]
+; Yellow, pink and blue on dark background
+text               = dcd88c
+subtext            = 9fbfb7
+nav-active-text    = 1d1821
+main               = 181b1e
+sidebar            = 181b1e
+player             = 181b1e
+card               = 17191d
+shadow             = 000000
+main-secondary     = 0b0d0e
+button             = f6867c
+button-secondary   = dcd88c
+button-active      = f6867c
+button-disabled    = 242a2e
+nav-active         = f6867c
+play-button        = f6867c
+tab-active         = 131417
+notification       = 131417
+notification-error = 131417
+playback-bar       = dcd88c
+misc               = FFFFFF
+
+[Dracula]
+; https://draculatheme.com/contribute
+text               = 50fa7b
+subtext            = bd93f9
+nav-active-text    = 282a36
+main               = 282a36
+sidebar            = 282a36
+player             = 282a36
+card               = 282a36
+shadow             = 000000
+main-secondary     = 1c1e26
+button             = 50fa7b
+button-secondary   = ff79c6
+button-active      = 00bf76
+button-disabled    = 3f3c45
+nav-active         = 50fa7b
+play-button        = 50fa7b
+tab-active         = 1c1e26
+notification       = 1c1e26
+notification-error = 1c1e26
+playback-bar       = 50fa7b
+misc               = FFFFFF
+
+[VantaBlack]
+; Gray on black background 
+text               = 666666 
+subtext            = 666666 
+nav-active-text    = 666666
+main               = 000000
+sidebar            = 000000
+player             = 000000
+card               = 000000
+shadow             = 333333
+main-secondary     = 000000
+button             = 000000
+button-secondary   = 000000
+button-active      = 333333
+button-disabled    = 000000
+nav-active         = 333333
+play-button        = 000000
+tab-active         = 333333
+notification       = 000000
+notification-error = 000000
+playback-bar       = 000000
+misc               = 000000
+
+; Description
+
+; text             = main text, playlist names in main field, name of playlist selected in sidebar, headings
+; subtext          = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos
+; nav-active-text  = text in main buttons in sidebar when active
+; main             = main bg
+; main-secondary   = bg color of selected song rows, bg color of artist/track cards
+; sidebar          = sidebar bg
+; player           = player bg
+; card             = popup-card bg
+; shadow           = all shadows
+; button           = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
+; button-secondary = download and options button
+; button-active    = hover on song selected
+; button-disabled  = seekbar bg, volume bar bg, scrollbar
+; nav-active       = sidebar buttons bg
+; play-button      = color of main play button in main field
+; tab-active       = button bg in main field (playlists, podcasts, artists, albums)
+; notification     = notification ('Added to liked songs' etc.)
+; playback-bar     = seekbar fg, volume bar fg, main play/pause button
+; misc             = miscellaneous

.config/spicetify/Themes/Sleek/user.css

@@ -0,0 +1,772 @@
+/* Version 14/10/21 */
+
+.encore-dark-theme .encore-bright-accent-set {
+  --background-highlight: var(--spice-play-button);
+  --background-press: var(--spice-play-button);
+  --background-base: var(--spice-play-button);
+}
+
+/* TOPBAR */
+
+/* fix topbar bug */
+.main-entityHeader-topbarContent.main-entityHeader-topbarContentFadeIn > * {
+  opacity: unset !important;
+}
+
+/* unset colors of history buttons */
+.main-topBar-historyButtons .main-topBar-button {
+  background-color: unset;
+}
+
+/* change appearance of search icon on 'search' tab */
+.x-searchInput-searchInputSearchIcon svg {
+  color: var(--spice-text);
+  height: 17px !important;
+  stroke: var(--spice-text);
+}
+
+/* change appearance of x icon on 'search' tab */
+.x-searchInput-searchInputClearButton {
+  color: var(--spice-text);
+}
+
+[role='searchbox']::placeholder {
+  color: rgba(var(--spice-rgb-text), 0.5);
+}
+
+/* add topbar transition */
+.queue-tabBar-headerItemLink {
+  transition-duration: 0.15s;
+}
+
+/* remove topbar background colour */
+.main-topBar-background {
+  background-color: unset !important;
+}
+
+/* resize play-button on topbar */
+.main-topBar-overlay {
+  background-color: var(--spice-player);
+}
+
+
+.main-topBar-topbarContent .main-playButton-primary {
+  --size: 35px !important;
+}
+
+/* simplify profile menu */
+.main-userWidget-displayName,
+.main-userWidget-notificationIndicator {
+  display: none;
+}
+
+.main-avatar-userIcon {
+  color: white;
+}
+
+.main-userWidget-box {
+  color: var(--spice-subtext);
+  background-color: transparent !important;
+}
+
+.main-userWidget-chevron {
+  display: none;
+}
+
+/* NAVBAR */
+
+/* navbar bug fix */
+ul.main-navBar-entryPoints > div.GlueDropTarget{
+  padding: 0 8px;
+}
+ul.main-navBar-entryPoints > div.GlueDropTarget >* {
+  padding: 0 16px;
+  height: 40px;
+  border-radius: 4px;
+}
+ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
+  background: var(--spice-card);
+}
+
+/* remove divider gradient */
+.main-rootlist-rootlistDividerGradient {
+  display: none;
+}
+
+/* change color of divider */
+.main-rootlist-rootlistDivider {
+  background-color: rgba(var(--spice-rgb-button-disabled), 0.8);
+}
+
+/* add gradient to navbar */
+.Root__nav-bar {
+  background-image: linear-gradient(
+    to bottom left,
+    var(--spice-sidebar) 0%,
+    var(--spice-player) 100%
+  ) !important;
+}
+
+/* change color of navbar playing icon */
+[aria-label='Playing'] {
+  color: var(--spice-text);
+}
+
+/* change color of navbar icons */
+.main-likedSongsButton-likedSongsIcon {
+  background: var(--spice-text);
+  color: var(--spice-sidebar);
+}
+
+.main-yourEpisodesButton-yourEpisodesIcon {
+  background: var(--spice-text);
+}
+
+.main-yourEpisodesButton-yourEpisodesIcon path {
+  fill: var(--spice-sidebar);
+}
+
+/* remove opacity of navbar buttons */
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText, .main-createPlaylistButton-button {
+  opacity: unset;
+}
+
+/* change top margin of navbar options */
+.main-navBar-entryPoints > div:first-of-type {
+  margin-top: 20px;
+}
+/* change colors of active tab */
+.main-navBar-navBarLinkActive {
+  background-color: var(--spice-nav-active);
+}
+
+.main-navBar-navBarLinkActive,
+.main-navBar-navBarLinkActive:focus,
+.main-navBar-navBarLinkActive:hover {
+  color: var(--spice-nav-active-text) !important;
+  transition: none;
+}
+
+
+/* PLAYBACK-BAR */
+
+/* shift bar up when connect bar is visible */
+.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar {
+  bottom: 107px;
+}
+
+/* revert playback bar position when in full-screen mode */
+._U2P19b627vsKWCNNffn .playback-bar {
+  bottom: auto;
+}
+
+/* round cover art when collapsed */
+.main-coverSlotCollapsed-container .cover-art-image {
+  border-radius: 10%;
+  transition-duration: 0.15s;
+}
+
+.main-coverSlotExpandedCollapseButton-collapseButton {
+  right: 10px !important;
+  top: 10px !important;
+}
+
+/* hide and move progress time location */
+.playback-bar__progress-time-elapsed {
+  opacity: 0;
+  position: absolute;
+  bottom: 13px;
+  left: 0;
+  transition-duration: 0.15s;
+}
+
+.main-playbackBarRemainingTime-container {
+  opacity: 0;
+  position: absolute;
+  bottom: 13px;
+  right: 0;
+  transition-duration: 0.15s;
+}
+
+/* show time on hover */
+.playback-bar:hover .playback-bar__progress-time-elapsed,
+.playback-bar:hover .main-playbackBarRemainingTime-container {
+  opacity: 1;
+}
+
+/* move progress bar */
+.playback-bar {
+  width: 100%;
+  bottom: 83px;
+  position: absolute;
+}
+
+.player-controls__buttons {
+  transform: translateY(3px);
+  align-items: center;
+}
+
+/* change progress bar color */
+.playback-bar .progress-bar__fg {
+  background-color: var(--spice-playback-bar);
+}
+
+/* change appearance of play-button */
+.main-playPauseButton-button {
+  background-color: inherit;
+  color: var(--spice-text);
+  transition-duration: 0.15s !important;
+}
+
+.main-playPauseButton-button svg {
+  height: 19px;
+  width: 19px;
+}
+
+.main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
+  transform: scale(1) !important;
+  -webkit-transform: scale(1) !important;
+}
+
+/* change progress bar slider color */
+.progress-bar__slider {
+  background-color: var(--spice-subtext);
+}
+
+/* BUDDY FEED */
+
+/* change text color */
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
+p.main-buddyFeed-timestamp.main-type-finale,
+.main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon {
+  color: var(--spice-subtext);
+}
+
+/* add gradient */
+.main-buddyFeed-buddyFeed {
+  background-image: linear-gradient(
+    to bottom left,
+    var(--spice-sidebar) 0%,
+    var(--spice-player) 100%
+  ) !important;
+}
+
+/* hide buddyfeed scrollbar */
+.main-buddyFeed-scrollableArea > .os-scrollbar {
+  display: none;
+}
+
+/* MAIN */
+
+
+/* hide banner ads */
+.main-leaderboardComponent-container {
+  display: none;
+}
+
+.WiPggcPDzbwGxoxwLWFf.contentSpacing {
+  display: none;
+}
+
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
+.desktoproutes-homepage-takeover-ad-hptoComponent-container {
+  display: none !important;
+}
+
+/* hide upgrade button */
+.main-topBar-UpgradeButton {
+  display: none;
+}
+
+/* change input box appearance */
+input {
+  background-color: var(--spice-main-secondary) !important;
+  border-bottom: solid 1px var(--spice-text) !important;
+  border-radius: 0 !important;
+  padding: 6px 10px 6px 48px;
+  color: var(--spice-text) !important;
+}
+
+/* remove background color from main headers */
+.main-home-homeHeader,
+.x-441-entityHeader-overlay,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor {
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+/* change playlist image shadow */
+.main-entityHeader-shadow {
+  box-shadow: 0 5px 10px rgba(var(--spice-rgb-shadow), 0.5) !important;
+}
+
+/* change playlist image border-radius */
+.main-entityHeader-image {
+  border-radius: 10%;
+}
+
+/* change playing icon from gif to svg */
+.main-trackList-playingIcon {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+  background: var(--spice-button);
+  content-visibility: hidden;
+  -webkit-mask-repeat: no-repeat;
+}
+
+/* change appearance of 'playlist' tag  */
+.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold {
+  border: 2px var(--spice-text) solid;
+  border-radius: 3px;
+  width: fit-content;
+  display: inline;
+  text-align: center;
+  padding: 0 5px;
+}
+
+/* change scrollbar appearance */
+.os-theme-spotify.os-host-transition
+  > .os-scrollbar-vertical
+  > .os-scrollbar-track
+  > .os-scrollbar-handle {
+  border-radius: 4px;
+  width: 6px;
+  background-color: var(--spice-button-disabled)
+}
+
+.os-theme-spotify.os-host-transition
+  > .os-scrollbar-vertical
+  > .os-scrollbar-track {
+  width: 6px;
+}
+
+/* add border under header row */
+.main-trackList-trackListHeaderRow {
+  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.8);
+}
+
+/* change appearance of main/topbar play-button */
+.main-playButton-PlayButton.main-playButton-primary {
+  color: var(--spice-main);
+  background-color: var(--spice-play-button);
+  box-shadow: var(--spice-shadow) 0 5px 4px 0px;
+  transition-duration: 0.15s !important;
+}
+
+/* change appearance of download button */
+.x-downloadButton-button {
+  box-shadow: var(--spice-shadow) 0 5px 4px 0px;
+  background: var(--spice-player);
+  border-radius: 50%;
+}
+
+/* change text color on category cards in 'search' tab */
+a.x-categoryCard-CategoryCard, 
+a.x-heroCategoryCard-HeroCategoryCard {
+  color: var(--spice-subtext);
+}
+
+/* recolor sub-buttons */
+.main-moreButton-button {
+  color: var(--spice-button-secondary);
+}
+
+.x-downloadButton-button {
+  color: var(--spice-button-secondary) !important;
+}
+
+.x-downloadButton-button:hover {
+  color: var(--spice-text) !important;
+}
+
+.main-addButton-button {
+  color: var(--spice-button-secondary);
+}
+
+.main-entityHeader-metaDataText {
+  color: var(--spice-button-secondary);
+}
+
+.x-sortBox-sortDropdown {
+  background-color: var(--spice-main-secondary) !important;
+}
+
+.x-filterBox-searchIconContainer {
+  color: var(--spice-button-secondary) !important;
+}
+
+.x-filterBox-expandButton:focus,
+.x-filterBox-expandButton:hover {
+  background-color: var(--spice-main-secondary) !important;
+}
+
+.x-sortBox-sortDropdown,
+.x-filterBox-expandButton {
+  color: var(--spice-text) !important;
+}
+
+/* change background color of 'home' tab shortcut items */
+.view-homeShortcutsGrid-shortcut {
+  background-color: rgba(var(--spice-rgb-main-secondary), .3) !important;
+}
+
+.view-homeShortcutsGrid-shortcut:focus-within,
+.view-homeShortcutsGrid-shortcut:hover,
+.view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
+  background-color: rgba(var(--spice-rgb-main-secondary), .5) !important;
+}
+
+/* 'see more' button fix */
+
+.artist-popularTrackList-seeMore {
+  color: rgba(var(--spice-rgb-text), 0.7);
+}
+
+/* card background color for editing playlist details */
+.main-playlistEditDetailsModal-descriptionTextarea {
+  background: var(--spice-main-secondary);
+}
+
+.main-playlistEditDetailsModal-textElementLabel {
+  display: none;
+}
+
+/* change color of search icon for new playlists */
+.playlist-inlineSearchBox-searchIcon {
+  fill: var(--spice-text) !important;
+}
+
+/* change appearance of verified artist badge */
+.artist-artistVerifiedBadge-badge {
+  border: 2px solid var(--spice-text);
+  border-radius: 3px;
+  width: fit-content;
+  text-align: center;
+  padding: 0 5px;
+}
+
+span.artist-artistVerifiedBadge-badge path:nth-child(1) {
+  display: none;
+}
+
+span.artist-artistVerifiedBadge-badge path:last-child {
+  fill: var(--spice-text) !important;
+  stroke: var(--spice-text);
+}
+
+.artist-artistVerifiedBadge-badge span {
+  font-weight: bold;
+}
+
+/* change text color of hero card on 'library' tab */
+.main-heroCard-card a,
+.collection-collectionEntityHeroCard-descriptionContainer {
+  color: var(--spice-subtext) !important;
+}
+
+/* CONTEXT MENU */
+
+
+/* change hover color when selecting in context menu */
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
+.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
+  background-color: rgba(0,0,0,.2) !important;
+}
+
+.main-contextMenu-menuItemButton[aria-expanded=true] {
+  background-color: rgba(0,0,0,.2) !important;
+}
+
+/* disabled options */
+.main-contextMenu-disabled > span {
+  color: rgba(var(--spice-rgb-text), 0.5);
+}
+
+/* dividers between option subgroups */
+.main-contextMenu-menuItem:not(:first-child)
+  > .main-contextMenu-dividerBefore:before {
+  border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), 0.5);
+}
+
+/* confirmation box appearance fixes */
+.main-deleteFolderDialog-buttonContainer,
+.main-deletePlaylistDialog-buttonContainer {
+  justify-content: space-between !important;
+}
+
+.main-deletePlaylistDialog-container {
+  background-color: var(--spice-player);
+}
+
+.main-deletePlaylistDialog-container > *:not(div) {
+  color: var(--spice-text);
+}
+
+.main-deletePlaylistDialog-buttonContainer > *:not(div) {
+  color: var(--spice-text);
+}
+
+.main-button-primary:hover {
+  background-color: var(--spice-button);
+}
+
+.main-button-primary {
+  color: white !important;
+}
+
+/* change colors on 'duplicate track' dialog */
+.main-duplicateTracksDialog-container {
+  background-color: var(--spice-card);
+  color: var(--spice-subtext);
+}
+
+.main-duplicateTracksDialog-secondaryButton {
+  color: var(--spice-text);
+}
+
+/* TRACKS GRID */
+
+
+/* change color of track titles */
+.main-trackList-rowTitle {
+  color: var(--spice-subtext);
+}
+
+/* change color of 'explicit' badge */
+.main-tag-container {
+  background-color: var(--spice-subtext);
+}
+
+/* change background color of selected row */
+.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.6) !important;
+}
+
+.main-trackList-trackListRow:focus-within,
+.main-trackList-trackListRow:hover {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.4);
+}
+
+/* When song is currently playing */
+.main-trackList-active .main-type-mesto,
+.main-trackList-active .main-trackList-rowSubTitle,
+.main-trackList-active .main-trackList-rowSubTitle a,
+.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-active .main-trackList-rowSectionVariable,
+.main-trackList-active .main-trackList-rowSectionVariable a,
+.main-trackList-active .main-trackList-rowSectionVariable span,
+.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-active .main-trackList-rowDuration {
+  color: var(--spice-button) !important;
+}
+
+.main-trackList-active .main-tag-container {
+  background-color: var(--spice-button);
+}
+
+/* When song is hovered/selected */
+.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active) 
+  .main-tag-container,
+.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active) 
+  .main-tag-container {
+  background-color: var(--spice-text);
+}
+
+.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
+  .main-trackList-rowTitle,
+.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
+  .main-trackList-rowTitle {
+  color: var(--spice-text);
+}
+
+.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
+  .main-trackList-rowSubTitle,
+.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
+  .main-trackList-rowSubTitle {
+  color: var(--spice-text) !important;
+}
+
+.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
+  .main-trackList-rowSubTitle a,
+.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
+  .main-trackList-rowSubTitle a {
+  color: unset !important;
+}
+
+.main-trackList-trackListRow.main-trackList-selected:not(.main-trackList-active)
+  .main-trackList-rowSectionVariable a,
+.main-trackList-trackListRow:hover:not(.main-trackList-disabled):not(.main-trackList-active)
+  .main-trackList-rowSectionVariable a {
+    color: var(--spice-text) !important;
+}
+
+
+/* NOTIFICATION */
+
+
+._9eb5acf729a98d62135ca21777fef244-scss {
+  color: var(--spice-card);
+}
+
+
+
+/* TEMPORARY */
+
+/* change delete playlist dialog box colors */
+.K8PtC1Way9XetxDGwCGx {
+  background-color: var(--spice-card);
+}
+
+.K8PtC1Way9XetxDGwCGx > *:not(div) {
+  color: var(--spice-text);
+}
+
+.awGNDbf1c8TGBAFR0pv8 > *:not(div) {
+  color: white;
+}
+
+.main-deleteFolderDialog-buttonContainer,
+.reDC8RlgDXoQ_bz0umLz {
+  justify-content: space-between !important;
+}
+
+/* change appearance of verified artist badge */
+.Ov0avbbVFKCQwhi1UwYi {
+  border: 2px solid var(--spice-text);
+  border-radius: 3px;
+  width: fit-content;
+  text-align: center;
+  padding: 0 5px;
+}
+
+span.Ov0avbbVFKCQwhi1UwYi path:nth-child(1) {
+  display: none;
+}
+
+span.Ov0avbbVFKCQwhi1UwYi path:last-child {
+  fill: var(--spice-text) !important;
+  stroke: var(--spice-text);
+}
+
+.Ov0avbbVFKCQwhi1UwYi span {
+  font-weight: bold;
+}
+
+/* change progress bar color */
+.epWhU7hHGktzlO_dop6z {
+  background-color: var(--spice-playback-bar) !important;
+}
+
+.player-controls__buttons.player-controls__buttons--new-icons div svg{
+  width: 14px;
+  height: 14px;
+}
+
+.fGLwlk:active .ButtonInner-sc-14ud5tc-0,
+.fGLwlk:hover .ButtonInner-sc-14ud5tc-0  {
+  background-color: var(--spice-play-button);
+}
+
+span.ellipsis-one-line.main-type-mestoBold {
+  font-weight: 700;
+  font-size: 0.875rem;
+}
+
+.UyzJidwrGk3awngSGIwv {
+  color: inherit;
+}
+
+.fcehhQ {
+  color: inherit;
+}
+
+.icon.collection-icon svg {
+  stroke: var(--spice-subtext);
+  stroke-width: 10px;
+}
+
+:hover > .icon.collection-icon svg {
+  stroke: var(--spice-button-secondary);
+  stroke-width: 10px;
+}
+
+.wCl7pMTEE68v1xuZeZiB,
+._bjbHn5TABOW2s5LsEGX,
+.HbKLiGoYM4dpuK8L4TMX,
+.w6j_vX6SF5IxSXrrkYw5  {
+  color: var(--spice-button-secondary);
+}
+
+.bRkxrs {
+  color: var(--spice-subtext);
+}
+
+.x-sortBox-sortDropdown {
+  background-color: var(--spice-main-secondary) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp:focus-within,
+.Z35BWOA10YGn5uc9YgAp:hover,
+.Z35BWOA10YGn5uc9YgAp[data-context-menu-open='true'] {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
+}
+
+.main-card-card:hover, .main-card-card[data-context-menu-open=true] {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.main-card-card {
+  background-color: rgba(var(--spice-rgb-main-secondary), 0.5) !important;
+}
+
+.CbHJjxYxldG7uUPMYMaP {
+  background-color: rgba(var(--spice-rgb-main-secondary), 1) !important;
+}
+
+.Z35BWOA10YGn5uc9YgAp {
+  transition: none;
+}
+
+.main-card-card {
+  transition: none;
+}
+
+img.main-image-image.CmkY1Ag0tJDfnFXbGgju.main-entityHeader-shadow {
+  border-radius: 7%;
+}
+
+/* change appearance of 'playlist' tag  */
+.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
+  border: 2px var(--spice-text) solid;
+  border-radius: 3px;
+  width: fit-content;
+  display: inline;
+  text-align: center;
+  padding: 3px 7px;
+}
+
+.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW {
+  top: 9px;
+  left: 9px;
+}
+
+.main-topBar-topbarContent span.IconWrapper__Wrapper-sc-1hf1hjl-0.jWeDTW svg {
+  height: 20px;
+  width: 20px;
+}
+
+.main-topBar-topbarContent .ButtonInner-sc-14ud5tc-0.cSeieV.encore-bright-accent-set {
+  width: 38px;
+  height: 38px;
+}
+
+.x-progressBar-progressBarBg, .w699O0LgQRghXyl3bs9u {
+  border-radius: 0;
+}

.config/spicetify/Themes/THEMES.md

@@ -0,0 +1,180 @@
+# Themes preview
+
+Here you can find a preview of all the themes. Some of them may have different colour schemes (in that case you'll find different entries in the same theme, each one named after the colour scheme).
+
+## BurntSienna
+
+![BurntSienna Screenshot](BurntSienna/screenshot.png)
+
+## Default
+
+![Ocean Screenshot](Default/ocean.png)
+
+## Dreary
+
+#### BIB
+
+![BIB Screenshot](Dreary/bib.png)
+
+#### Psycho
+
+![Psycho Screenshot](Dreary/psycho.png)
+
+#### Deeper
+
+![Deeper Screenshot](Dreary/deeper.png)
+
+#### Mono
+
+![Mono Screenshot](Dreary/mono.png)
+
+#### Golden
+
+![Golden Screenshot](Dreary/golden.png)
+
+#### Graytone-Blue
+
+![Graytone-blue Sreenshot](Dreary/graytone-blue.png)
+
+## Dribbblish
+
+#### Base
+
+![base](Dribbblish/base.png)
+
+#### White
+
+![white](Dribbblish/white.png)
+
+#### Dark
+
+![dark](Dribbblish/dark.png)
+
+#### Nord-Light
+
+![nord-light](Dribbblish/nord-light.png)
+
+#### Nord-Dark
+
+![nord-dark](Dribbblish/nord-dark.png)
+
+#### Beach-Sunset
+
+![beach-sunset](Dribbblish/beach-sunset.png)
+
+#### Purple
+
+![purple](Dribbblish/purple.png)
+
+#### Samourai
+
+![samourai](Dribbblish/samourai.png)
+
+## Glaze
+
+### Base
+
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/base.png" alt="img" >
+
+### Dark
+
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/dark.png" alt="img" >
+
+### Gray
+
+<img src="https://github.com/CharlieS1103/Glaze-theme/blob/main/screenshots/gray.png" alt="img" >
+
+## Onepunch
+
+#### Dark
+
+![dark_home](Onepunch/screenshots/dark_home.png)
+
+#### Light
+
+![light_home](Onepunch/screenshots/light_home.png)
+
+## Sleek
+
+|                                       |                                     |
+| :-----------------------------------: | :---------------------------------: |
+| ![BladeRunner](Sleek/bladerunner.png) |     ![Cherry](Sleek/cherry.png)     |
+|              BladeRunner              |               Cherry                |
+|       ![Coral](Sleek/coral.png)       |       ![Deep](Sleek/deep.png)       |
+|                 Coral                 |                Deep                 |
+|      ![Deeper](Sleek/deeper.png)      | ![Elementary](Sleek/elementary.png) |
+|                Deeper                 |             Elementary              |
+|      ![Futura](Sleek/futura.png)      |       ![Nord](Sleek/nord.png)       |
+|                Futura                 |                Nord                 |
+|      ![Psycho](Sleek/psycho.png)      | ![UltraBlack](Sleek/ultrablack.png) |
+|                Psycho                 |             UltraBlack              |
+|     ![Wealthy](Sleek/wealthy.png)     |    ![Dracula](Sleek/dracula.png)    |
+|                Wealthy                |               Dracula               |
+|  ![VantaBlack](Sleek/vantablack.png)  |
+|              VantaBlack               |
+
+## Turntable
+
+![Turntable](Turntable/screenshots/fad.png)
+
+## Ziro
+
+#### Blue
+
+| ![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) | ![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) |
+| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
+|                                             Dark                                             |                                              Light                                              |
+
+#### Gray
+
+| ![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/cards-gray-dark.png) | ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-gray-light.png) |
+| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
+|                                             Dark                                             |                                              Light                                              |
+
+#### Green
+
+| ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-dark.png) | ![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-light.png) |
+| :-----------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: |
+|                                               Dark                                                |                                               Light                                                |
+
+#### Orange
+
+| ![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-orange-dark.png) | ![Library](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/library-orange-light.png) |
+| :----------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |
+|                                               Dark                                               |                                                Light                                                |
+
+#### Purple
+
+| ![Single](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/single-purple-dark.png) | ![Playlist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/playlist-purple-light.png) |
+| :----------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: |
+|                                               Dark                                               |                                                 Light                                                 |
+
+#### Red
+
+| ![Profile](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/profile-red-dark.png) | ![Queue](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/queue-red-light.png) |
+| :---------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------: |
+|                                              Dark                                               |                                            Light                                             |
+
+#### Rose Pine
+
+| ![Playlists](Ziro/screenshots/rose-pine-moon.jpg) | ![Playlists](Ziro/screenshots/rose-pine-dawn.jpg) |
+| :-----------------------------------------------: | :-----------------------------------------------: |
+|                       Moon                        |                       Dawn                        |
+
+
+## Flow
+
+#### Ocean
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/ocean.png" alt="img"> 
+
+
+#### Pink
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png" alt="img"> 
+
+
+#### Silver
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/silver.png" alt="img"> 
+
+
+#### Violet
+<img src="https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/violet.png" alt="img"> 

.config/spicetify/Themes/Turntable/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Grason Chan
+
+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.

.config/spicetify/Themes/Turntable/README.md

@@ -0,0 +1,88 @@
+# Turntable
+
+Based on Spotify original theme.
+
+**Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate!
+
+View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md).
+
+## Screenshots
+
+<div align="center">
+  <img src="screenshots/turntable.png" alt="turntable">
+</div>
+<div align="center">
+  <img src="screenshots/fad.png" alt="full app display">
+</div>
+<div align="center">
+  <img src="screenshots/fad_vertical.png" alt="full app display - vertical mode">
+</div>
+
+## More
+
+### About Turntable
+
+Use CSS to achieve, not picture. This means it can be scaled to any size, but make sure the album cover is not blurry.
+
+Actually, the rotation of the turntable was created at spicetify v1, but in some cases, animation is affected by other factors. I think "fullAppDisplay.js high GPU usage" is the reason. Fortunately, it's normal now!
+
+### Info
+
+Designed and developed by [Grason Chan](https://github.com/grasonchan).
+
+The turntable inspired by [Netease Music](https://music.163.com) and [Smartisan OS build-in Music Player](https://www.smartisan.com/os/#/beauty) (not include code).
+
+Develop and test on macOS. If there's any problem, please open issue or PR.
+
+### Installation
+
+1. add extension - [Full App Display](https://spicetify.app/docs/getting-started/extensions#full-app-display)
+
+```shell
+spicetify config extensions fullAppDisplay.js
+spicetify apply
+```
+
+2. put **Turntable** and **turntable.js** into the **.config/spicetify**
+
+```shell
+cd spicetify-themes
+cp -r Turntable ~/.config/spicetify/Themes
+cp Turntable/turntable.js ~/.config/spicetify/Extensions
+```
+
+3. select the theme and extension, then apply
+
+```shell
+spicetify config current_theme Turntable
+spicetify config extensions turntable.js
+spicetify apply
+```
+
+### How to Uninstall
+
+1. remove **Turntable** and **rotateTurntable.js**
+
+```shell
+rm -r ~/.config/spicetify/Themes/Turntable
+rm ~/.config/spicetify/Extensions/turntable.js
+```
+
+2. config to spicetify default theme
+
+```shell
+spicetify config current_theme SpicetifyDefault
+```
+
+3. remove extension - Full App Display and Turntable(optional)
+
+```shell
+spicetify config extensions fullAppDisplay.js-
+spicetify config extensions turntable.js-
+```
+
+4. apply
+
+```shell
+spicetify apply
+```

.config/spicetify/Themes/Turntable/color.ini

@@ -0,0 +1,3 @@
+; empty config to fix `spicetify apply` error ouput
+
+[turntable]

.config/spicetify/Themes/Turntable/turntable.js

@@ -0,0 +1,315 @@
+window.addEventListener("load", rotateTurntable = () => {
+  const SpicetifyOrigin = Spicetify.Player.origin;
+  const fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']");
+
+  if (!SpicetifyOrigin?._state || !fadBtn) {
+    setTimeout(rotateTurntable, 250);
+    return;
+  }
+
+  const adModalStyle = document.createElement("style");
+  const STYLE_FOR_AD_MODAL = `
+.ReactModalPortal {
+  display: none
+}
+`;
+  adModalStyle.innerHTML = STYLE_FOR_AD_MODAL;
+
+  const fadHeartContainer = document.createElement("div");
+  const fadHeart = document.createElement("button");
+  const fadHeartSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadHeartContainer.classList.add("fad-heart-container");
+  fadHeart.classList.add("fad-heart");
+  fadHeartSvg.setAttribute("width", "16");
+  fadHeartSvg.setAttribute("height", "16");
+  fadHeartSvg.setAttribute("viewBox", "0 0 16 16");
+  fadHeart.appendChild(fadHeartSvg);
+  fadHeartContainer.appendChild(fadHeart);
+
+  const songPreviewContainer = document.createElement("div");
+  const previousSong = document.createElement("button");
+  const nextSong = document.createElement("button");
+  songPreviewContainer.classList.add("song-preview");
+  songPreviewContainer.append(previousSong, nextSong);
+
+  const fadArtistSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadArtistSvg.setAttribute("width", "16");
+  fadArtistSvg.setAttribute("height", "16");
+  fadArtistSvg.setAttribute("viewBox", "0 0 16 16");
+  fadArtistSvg.setAttribute("fill", "currentColor");
+  fadArtistSvg.innerHTML = Spicetify.SVGIcons.artist;
+  const fadAlbumSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  fadAlbumSvg.setAttribute("width", "16");
+  fadAlbumSvg.setAttribute("height", "16");
+  fadAlbumSvg.setAttribute("viewBox", "0 0 16 16");
+  fadAlbumSvg.setAttribute("fill", "currentColor");
+  fadAlbumSvg.innerHTML = Spicetify.SVGIcons.album;
+
+  let isPlaying, clickedFadBtn;
+
+  function handleRotate(eventType) {
+    if (eventType === "load" && !SpicetifyOrigin._state.item) return;
+
+    const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art");
+    const fadArt = document.querySelector("#fad-art");
+
+    if (
+      eventType === "load" && !SpicetifyOrigin._state.isPaused
+      ||
+      eventType === "playpause" && !isPlaying
+      ||
+      !eventType && isPlaying
+    ) {
+      coverArt?.style.setProperty("animation-play-state", "running");
+      fadArt?.style.setProperty("animation-play-state", "running");
+      if (eventType) isPlaying = true;
+    } else {
+      coverArt?.style.setProperty("animation-play-state", "paused");
+      fadArt?.style.setProperty("animation-play-state", "paused");
+      if (eventType) isPlaying = false;
+    }
+  }
+
+  function handleFadBtn(event) {
+    event.stopPropagation();
+  }
+
+  function handleFadControl() {
+    const fadControlsBtns = document.querySelectorAll("#fad-controls button");
+
+    for (const fadControl of fadControlsBtns) {
+      fadControl.addEventListener("dblclick", handleFadBtn);
+    }
+  }
+
+  function handleFadHeart() {
+    const isFadHeartContainer = document.querySelector(".fad-heart-container");
+
+    const stateItem = SpicetifyOrigin._state.item;
+
+    if (stateItem.isLocal || stateItem.type === "ad") {
+      isFadHeartContainer?.remove();
+      return;
+    }
+
+    if (!isFadHeartContainer) document.querySelector("#fad-foreground")?.appendChild(fadHeartContainer);
+
+    if (Spicetify.Player.getHeart()) {
+      fadHeartSvg.innerHTML = Spicetify.SVGIcons["heart-active"];
+      fadHeart.classList.add("checked");
+    } else {
+      fadHeartSvg.innerHTML = Spicetify.SVGIcons.heart;
+      fadHeart.classList.remove("checked");
+    }
+  }
+
+  function handleTracksNamePreview() {
+    const prevTracks = Spicetify.Queue.prevTracks;
+    const currentTrack = Spicetify.Queue.track;
+    const nextTracks = Spicetify.Queue.nextTracks;
+
+    trackCondition = element => !element.contextTrack.metadata.hidden && element.provider !== "ad";
+
+    const prevTrack = prevTracks.slice().reverse().find(trackCondition);
+    const nextTrack = nextTracks.find(trackCondition);
+
+    const prevTrackTitle = prevTrack.contextTrack.metadata.title;
+    const currentTrackTitle = currentTrack.contextTrack.metadata.title;
+    const nextTrackTitle = nextTrack.contextTrack.metadata.title;
+
+    if (currentTrackTitle === prevTrackTitle && currentTrackTitle === nextTrackTitle) {
+      previousSong.innerHTML = "";
+      nextSong.innerHTML = "";
+    } else {
+      previousSong.innerHTML = `< ${prevTrackTitle}`;
+      nextSong.innerHTML = `${nextTrackTitle} >`;
+    }
+  }
+
+  function handleConfigSwitch() {
+    const fullAppDisplay = document.querySelector("#full-app-display");
+    const fadFg = document.querySelector("#fad-foreground");
+    const genericModal = document.querySelector("generic-modal");
+
+    const stateItem = SpicetifyOrigin._state.item;
+
+    if (!stateItem.isLocal && stateItem.type !== "ad") fadFg.appendChild(fadHeartContainer);
+    fullAppDisplay.appendChild(songPreviewContainer);
+
+    genericModal.remove();
+
+    handleIcons();
+    handleRotate();
+    handleFadControl();
+  }
+
+  function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) {
+    if (!+localStorage.getItem("enableBlurFad")) {
+      fullAppDisplay.dataset.isBlurFad = "true";
+      setBlurBackdropBtn.classList.remove("disabled");
+
+      localStorage.setItem("enableBlurFad", "1");
+    } else {
+      fullAppDisplay.dataset.isBlurFad = "false";
+      setBlurBackdropBtn.classList.add("disabled");
+
+      localStorage.setItem("enableBlurFad", "0");
+    }
+  }
+
+  function handleIcons() {
+    const iconsConfig = JSON.parse(localStorage.getItem("full-app-display-config")).icons;
+
+    if (!iconsConfig) return;
+
+    const isFadArtistSvg = document.querySelector("#fad-artist svg");
+    const isFadAlbumSvg = document.querySelector("#fad-album svg");
+
+    if (SpicetifyOrigin._state.item.type === "ad") {
+      isFadArtistSvg?.remove();
+      isFadAlbumSvg?.remove();
+
+      return;
+    }
+
+    if (!isFadArtistSvg) {
+      const fadArtist = document.querySelector("#fad-artist");
+      const fadArtistTitle = document.querySelector("#fad-artist span");
+
+      fadArtist?.insertBefore(fadArtistSvg, fadArtistTitle);
+    }
+
+    if (!isFadAlbumSvg) {
+      const fadAlbum = document.querySelector("#fad-album");
+      const fadAlbumTitle = document.querySelector("#fad-album span");
+
+      fadAlbum?.insertBefore(fadAlbumSvg, fadAlbumTitle);
+    }
+  }
+
+  function handleContextMenu(fullAppDisplay) {
+    const configContainer = document.querySelector("#popup-config-container");
+    const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0];
+
+    const settingRowContainer = document.createElement("div");
+    const settingRow = `
+<div class="setting-row">
+  <label class="col description">Enable blur backdrop</label>
+  <div class="col action">
+    <button class="${+localStorage.getItem("enableBlurFad") ? "switch" : "switch disabled"}" data-blur-fad>
+      <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z"></path>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+    settingRowContainer.innerHTML = settingRow;
+    configContainer.insertBefore(settingRowContainer, settingRowReferenceNode);
+
+    const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
+    const setBlurBackdropBtn = document.querySelector("[data-blur-fad]");
+
+    for (const configSwitch of configSwitchBtns) {
+      configSwitch.addEventListener("click", handleConfigSwitch);
+    }
+
+    setBlurBackdropBtn.addEventListener("click", () => handleBackdrop(fullAppDisplay, setBlurBackdropBtn));
+  }
+
+  // Todo
+  function handleToggleFad(isActive) {
+    if (isActive) {
+      document.body.append(adModalStyle);
+      return;
+    }
+    
+    const billboard = document.querySelector("#view-billboard-ad");
+
+    billboard?.closest(".ReactModalPortal").remove();
+    adModalStyle.remove();
+  }
+
+  handleRotate("load");
+
+  const nowPlayingBarLeft = document.querySelector(".main-nowPlayingBar-left");
+  const heartHiddenObserver = new MutationObserver(mutationsList => {
+    mutationsLoop:
+    for (const mutation of mutationsList) {
+      for (const addedNode of mutation.addedNodes) {
+        if (
+          addedNode.matches('svg[class]')
+          ||
+          addedNode.matches('button[class^="main-addButton-button"]')
+        ) {
+          handleFadHeart();
+
+          break mutationsLoop;
+        }
+      }
+
+      for (const removedNode of mutation.removedNodes) {
+        if (
+          removedNode.matches('button[class^="main-addButton-button"]')
+        ) {
+          handleFadHeart();
+
+          break mutationsLoop;
+        }
+      }
+    }
+  });
+  heartHiddenObserver.observe(nowPlayingBarLeft, {
+    childList: true,
+    subtree: true,
+  });
+
+  const shuffleBtn = document.querySelector(".main-shuffleButton-button");
+  const shuffleObserver = new MutationObserver(() => {
+    setTimeout(handleTracksNamePreview, 500);
+  });
+  shuffleObserver.observe(shuffleBtn, {
+    attributes: true,
+  });
+
+  Spicetify.Player.addEventListener("onplaypause", () => handleRotate("playpause"));
+  Spicetify.Player.addEventListener("songchange", () => {
+    setTimeout(() => {
+      handleIcons();
+      handleRotate();
+      handleTracksNamePreview();
+    }, 500);
+  });
+
+  fadHeart.addEventListener("click", Spicetify.Player.toggleHeart);
+  previousSong.addEventListener("click", () => SpicetifyOrigin.skipToPrevious());
+  nextSong.addEventListener("click", () => SpicetifyOrigin.skipToNext());
+
+  fadHeart.addEventListener("dblclick", handleFadBtn);
+  previousSong.addEventListener("dblclick", handleFadBtn);
+  nextSong.addEventListener("dblclick", handleFadBtn);
+
+  fadBtn.addEventListener("click", () => {
+    const fullAppDisplay = document.querySelector("#full-app-display");
+
+    fullAppDisplay.appendChild(songPreviewContainer);
+
+    if (!clickedFadBtn) {
+      if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.dataset.isBlurFad = "true";
+
+      handleFadControl();
+
+      fullAppDisplay.addEventListener("contextmenu", () => handleContextMenu(fullAppDisplay), { once: true });
+
+      // fullAppDisplay.addEventListener("dblclick", () => handleToggleFad());
+
+      clickedFadBtn = true;
+    }
+
+    // handleToggleFad(true);
+    handleIcons();
+    handleFadHeart();
+    handleTracksNamePreview();
+    handleRotate();
+  });
+});

.config/spicetify/Themes/Turntable/user.css

@@ -0,0 +1,427 @@
+:root {
+  --spotify-main-color: #1db954;
+  --round-value: 50%;
+  --main-blur-backdrop: blur(20px) saturate(180%);
+  --shine: conic-gradient(
+    from 15deg,
+    transparent,
+    #222 45deg,
+    transparent 90deg 180deg,
+    #222 225deg,
+    transparent 270deg 360deg
+  )
+}
+
+
+/* Remove Upgrade Button, User Name */
+.main-topBar-UpgradeButton,
+.main-userWidget-displayName {
+  display: none
+}
+
+
+/* Notification Dot */
+.main-userWidget-notificationDot {
+  color: #f00
+}
+
+
+/* Navbar */
+.Root__nav-bar {
+  background-color: #0f0f0f
+}
+
+.main-rootlist-rootlistDividerGradient {
+  display: none
+}
+
+
+/* Search Input */
+.x-searchInput-searchInputInput {
+  background-color: #2a2a2a
+}
+
+.x-searchInput-searchInputInput,
+.x-searchInput-searchInputSearchIcon,
+.x-searchInput-searchInputClearButton {
+  color: #c0c0c0 !important
+}
+
+.x-searchInput-searchInputInput::placeholder {
+  color: #888
+}
+
+
+/* Playlist */
+.main-entityHeader-backgroundColor,
+.main-actionBarBackground-background,
+.main-topBar-overlay {
+  background-color: unset !important
+}
+
+.main-entityHeader-overlay {
+  background: unset
+}
+
+.main-actionBarBackground-background {
+  background-image: unset
+}
+
+.main-entityHeader-shadow {
+  box-shadow: unset
+}
+
+.main-topBar-background {
+  background-color: #181818 !important
+}
+
+.main-rootlist-wrapper [role="row"]:nth-child(odd) {
+  background: linear-gradient(to right, #121212, #191919, #121212)
+}
+
+
+/* Cover Image */
+.main-nowPlayingWidget-coverExpanded{
+  transform: translateX(-78px)
+}
+
+.main-coverSlotCollapsed-container {
+  margin-right: 5px
+}
+
+.main-nowPlayingWidget-coverArt .cover-art.shadow,
+.main-nowPlayingWidget-coverArt .cover-art-image {
+  border-radius: var(--round-value)
+}
+
+.main-nowPlayingWidget-coverArt .cover-art.shadow {
+  width: 62px !important;
+  height: 62px !important;
+  box-shadow: unset
+}
+
+.main-nowPlayingWidget-coverArt .cover-art-image {
+  border: 2px solid #aaa;
+  box-shadow: 0 0 5px rgba(200, 200, 200, .4)
+}
+
+/* Expand & Collapse Button */
+.main-coverSlotCollapsed-expandButton {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important
+}
+
+.main-coverSlotCollapsed-expandButton,
+.main-coverSlotExpandedCollapseButton-collapseButton {
+  backdrop-filter: var(--main-blur-backdrop);
+  background: unset;
+  background-color: rgba(9, 9, 9, .2);
+  transition: background-color .5s, opacity .5s;
+  border-radius: var(--round-value)
+}
+
+.main-coverSlotCollapsed-expandButton:hover,
+.main-coverSlotExpandedCollapseButton-collapseButton:hover {
+  background: unset;
+  background-color: rgba(9, 9, 9, .3);
+  transform: unset
+}
+
+.main-coverSlotCollapsed-chevron,
+.main-coverSlotExpandedCollapseButton-chevron {
+  padding: 5px;
+  fill: #fff;
+  transition: fill .5s
+}
+
+.main-coverSlotCollapsed-expandButton:hover .main-coverSlotCollapsed-chevron,
+.main-coverSlotExpandedCollapseButton-collapseButton:hover .main-coverSlotExpandedCollapseButton-chevron {
+  fill: #ddd
+}
+
+
+/* Progress Bar */
+.Root__now-playing-bar {
+  position: relative
+}
+
+.playback-bar {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0
+}
+
+.playback-progressbar {
+  height: 4px
+}
+
+.x-progressBar-progressBarBg > div > div {
+  background-color: var(--spotify-main-color)
+}
+
+.playback-bar__progress-time-elapsed,
+.main-playbackBarRemainingTime-container {
+  position: absolute;
+  top: 12px;
+  left: 50%
+}
+
+.playback-bar__progress-time-elapsed {
+  transform: translateX(calc(-100% - 10px))
+}
+
+.playback-bar__progress-time-elapsed::after {
+  position: absolute;
+  left: calc(100% + 10px);
+  font-weight: bold;
+  color: var(--spotify-main-color);
+  content: "/";
+  transform: translateX(-50%)
+}
+
+.main-playbackBarRemainingTime-container {
+  transform: translateX(10px)
+}
+
+.player-controls {
+  margin-top: 38px
+}
+
+
+/* Full App Display */
+#full-app-display {
+  background: radial-gradient(#242424, #1f1f1f)
+}
+
+#fad-background {
+  display: none
+}
+
+#fad-art,
+#fad-art-image,
+#fad-art-inner {
+  border-radius: var(--round-value) !important
+}
+
+#fad-art {
+  width: 268px !important;
+  margin: 80px 100px;
+  position: relative
+}
+
+#fad-art-image {
+  box-shadow: 0 0 10px rgba(3, 3, 3, .5) inset
+}
+
+#fad-art-inner {
+  display: none
+}
+
+#fad-art::before, #fad-art::after {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  content: ''
+}
+
+#fad-art::before {
+  background:
+    var(--shine),
+    radial-gradient(#333, #000);
+  box-shadow:
+    0 0 5px #0a0a0a inset,
+    0 0 5px #000;
+  transform: scale(1.5)
+}
+
+#fad-art::after {
+  background-color: rgba(60, 60, 60, .1);
+  transform: scale(1.65);
+  z-index: -1
+}
+
+#fad-details {
+  max-width: 520px !important
+}
+
+#fad-details #fad-title {
+  font-size: 32px
+}
+
+#fad-details #fad-artist {
+  margin-top: 10px;
+  font-size: 24px
+}
+
+#fad-details #fad-album {
+  margin-top: 6px;
+  font-size: 16px
+}
+
+#fad-details #fad-artist > *,
+#fad-details #fad-album > *,
+#fad-details #fad-status > #fad-controls > * > svg {
+  vertical-align: middle
+}
+
+#fad-details #fad-artist > svg {
+  width: 24px;
+  height: 24px
+}
+
+#fad-details #fad-album > svg {
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  margin-right: 9px
+}
+
+#fad-play > svg {
+  width: 24px;
+  height: 24px
+}
+
+#fad-controls > button > svg {
+  fill: #ccc
+}
+
+#fad-controls > button:hover > svg {
+  fill: #fff
+}
+
+#fad-progress-container {
+  font-size: 12px
+}
+
+#fad-elapsed,
+#fad-duration {
+  min-width: 32px !important
+}
+
+#fad-progress {
+  height: 2px !important;
+  background-color: rgba(100, 100, 100, .5) !important
+}
+
+#fad-progress-inner {
+  background-color: var(--spotify-main-color) !important;
+  box-shadow: unset !important
+}
+
+
+/* Blur the Full App Display */
+[data-is-blur-fad = "true"] #fad-background {
+  display: unset
+}
+
+[data-is-blur-fad = "true"] #fad-art::before {
+  background:
+    var(--shine),
+    radial-gradient(#242424, #000)
+}
+
+[data-is-blur-fad = "true"] #fad-art::after {
+  background-color: rgba(100, 100, 100, .1);
+  border: 1px solid rgba(100, 100, 100, .1);
+  box-shadow:
+    0 0 1px rgba(40, 40, 40, .2) inset,
+    0 0 1px rgba(200, 200, 200, .2)
+}
+
+[data-is-blur-fad = "true"] #fad-progress {
+  background-color: rgba(200, 200, 200, .3) !important
+}
+
+
+/* Full App Display - heart */
+.fad-heart-container {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.fad-heart {
+  width: 16px;
+  height: 16px;
+  padding: unset !important;
+  background-color: unset;
+  border: unset
+}
+
+.fad-heart svg {
+  fill: #ccc
+}
+
+.fad-heart svg:hover,
+.fad-heart.checked svg {
+  fill: var(--spotify-main-color)
+}
+
+
+/* Full App Display - song preview */
+.song-preview {
+  width: 100%;
+  padding: 0 10%;
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.song-preview > button {
+  font-size: 14px;
+  color: #ccc !important;
+  background-color: unset;
+  border: unset
+}
+
+.song-preview > button:hover {
+  color: #fff !important
+}
+
+
+/* Responsive */
+@media (max-width: 908px) {
+  #fad-foreground {
+    flex-wrap: wrap;
+    align-content: center
+  }
+
+  #fad-details {
+    padding-top: 50px
+  }
+}
+
+@media (min-width: 1460px) and (min-height: 960px) {
+  #fad-foreground,
+  .main-trackCreditsModal-container {
+    transform: scale(1.2) !important
+  }
+
+  .song-preview > button {
+    font-size: 16px
+  }
+}
+
+
+/* Rotate turntable */
+.main-nowPlayingWidget-coverArt > .cover-art,
+#fad-art {
+  animation: rotate-cover_img 24s linear infinite paused
+}
+
+@keyframes rotate-cover_img {
+  from {
+    transform: rotate(0)
+  }
+  to {
+    transform: rotate(360deg)
+  }
+}

.config/spicetify/Themes/Ziro/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2022 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.