diff --git a/.config/nvim/init.vim b/.config/nvim/init.vim new file mode 100644 index 0000000..60b85e9 --- /dev/null +++ b/.config/nvim/init.vim @@ -0,0 +1,2 @@ +set clipboard=unnamedplus +syntax on diff --git a/.config/oomox/colors/Featured/Bluloco-dark b/.config/oomox/colors/Featured/Bluloco-dark new file mode 100644 index 0000000..9012a8f --- /dev/null +++ b/.config/oomox/colors/Featured/Bluloco-dark @@ -0,0 +1,77 @@ +ACCENT_BG=383e5b +BASE16_GENERATE_DARK=False +BASE16_INVERT_TERMINAL=False +BASE16_MILD_TERMINAL=False +BG=25283f +BTN_BG=89a1e2 +BTN_FG=383e5b +BTN_OUTLINE_OFFSET=0 +BTN_OUTLINE_WIDTH=6 +CARET1_FG=383e5b +CARET2_FG=383e5b +CARET_SIZE=0.0 +CINNAMON_OPACITY=1.0 +FG=fe9bce +GRADIENT=0.0 +GTK3_GENERATE_DARK=True +HDR_BG=25283f +HDR_BTN_BG=2d333d +HDR_BTN_FG=89a1e2 +HDR_FG=b1d4e9 +ICONS_ARCHDROID=dddddd +ICONS_DARK=282c34 +ICONS_LIGHT=5294e2 +ICONS_LIGHT_FOLDER=545d89 +ICONS_MEDIUM=545d89 +ICONS_NUMIX_STYLE=4 +ICONS_STYLE=suruplus_icons +ICONS_SYMBOLIC_ACTION=545d89 +ICONS_SYMBOLIC_PANEL=545d89 +MATERIA_PANEL_OPACITY=0.6 +MATERIA_SELECTION_OPACITY=0.32 +MATERIA_STYLE_COMPACT=True +MENU_BG=303641 +MENU_FG=d3dae3 +NAME="Featured/Bluloco-dark" +OUTLINE_WIDTH=6 +ROUNDNESS=3 +SEL_BG=89a1e2 +SEL_FG=383e5b +SPACING=1 +SPOTIFY_PROTO_BG=282c34 +SPOTIFY_PROTO_FG=ffcc00 +SPOTIFY_PROTO_SEL=285bff +SURUPLUS_GRADIENT1=d3dae3 +SURUPLUS_GRADIENT2=5294e2 +SURUPLUS_GRADIENT_ENABLED=False +TERMINAL_ACCENT_COLOR=5294e2 +TERMINAL_BACKGROUND=282c34 +TERMINAL_BASE_TEMPLATE=basic +TERMINAL_COLOR0=40444c +TERMINAL_COLOR1=f81141 +TERMINAL_COLOR10=37bd58 +TERMINAL_COLOR11=f6be48 +TERMINAL_COLOR12=199ffd +TERMINAL_COLOR13=fc58f6 +TERMINAL_COLOR14=50acae +TERMINAL_COLOR15=ffffff +TERMINAL_COLOR2=23974a +TERMINAL_COLOR3=fd7e57 +TERMINAL_COLOR4=285bff +TERMINAL_COLOR5=8c62fd +TERMINAL_COLOR6=3a8ab2 +TERMINAL_COLOR7=cdd3e0 +TERMINAL_COLOR8=8f9aae +TERMINAL_COLOR9=fc4a6d +TERMINAL_CURSOR=ffcc00 +TERMINAL_FOREGROUND=ffcc00 +TERMINAL_THEME_ACCURACY=128 +TERMINAL_THEME_AUTO_BGFG=False +TERMINAL_THEME_EXTEND_PALETTE=True +TERMINAL_THEME_MODE=manual +THEME_STYLE=oomox +TXT_BG=89a1e2 +TXT_FG=383e5b +UNITY_DEFAULT_LAUNCHER_STYLE=False +WM_BORDER_FOCUS=fe9bce +WM_BORDER_UNFOCUS=25283f diff --git a/.config/oomox/colors/rice b/.config/oomox/colors/rice new file mode 100644 index 0000000..4d83612 --- /dev/null +++ b/.config/oomox/colors/rice @@ -0,0 +1,77 @@ +ACCENT_BG=fe9bce +BASE16_GENERATE_DARK=False +BASE16_INVERT_TERMINAL=False +BASE16_MILD_TERMINAL=False +BG=25283f +BTN_BG=25283f +BTN_FG=fe9bce +BTN_OUTLINE_OFFSET=5 +BTN_OUTLINE_WIDTH=2 +CARET1_FG=fe9bce +CARET2_FG=fe9bce +CARET_SIZE=0.05 +CINNAMON_OPACITY=1.0 +FG=b1d4e9 +GRADIENT=0.0 +GTK3_GENERATE_DARK=True +HDR_BG=25283f +HDR_BTN_BG=25283f +HDR_BTN_FG=fe9bce +HDR_FG=b1d4e9 +ICONS_ARCHDROID=dddddd +ICONS_DARK=282c34 +ICONS_LIGHT=5294e2 +ICONS_LIGHT_FOLDER=b1d4e9 +ICONS_MEDIUM=545d89 +ICONS_NUMIX_STYLE=4 +ICONS_STYLE=papirus_icons +ICONS_SYMBOLIC_ACTION=545d89 +ICONS_SYMBOLIC_PANEL=545d89 +MATERIA_PANEL_OPACITY=0.6 +MATERIA_SELECTION_OPACITY=0.32 +MATERIA_STYLE_COMPACT=True +MENU_BG=303641 +MENU_FG=d3dae3 +NAME="rice" +OUTLINE_WIDTH=2 +ROUNDNESS=4 +SEL_BG=89a1e2 +SEL_FG=383e5b +SPACING=3 +SPOTIFY_PROTO_BG=282c34 +SPOTIFY_PROTO_FG=ffcc00 +SPOTIFY_PROTO_SEL=285bff +SURUPLUS_GRADIENT1=d3dae3 +SURUPLUS_GRADIENT2=5294e2 +SURUPLUS_GRADIENT_ENABLED=False +TERMINAL_ACCENT_COLOR=89a1e2 +TERMINAL_BACKGROUND=25283f +TERMINAL_BASE_TEMPLATE=lolitastic +TERMINAL_COLOR0=33405e +TERMINAL_COLOR1=8b2965 +TERMINAL_COLOR10=a3c79a +TERMINAL_COLOR11=e5cf86 +TERMINAL_COLOR12=90b3de +TERMINAL_COLOR13=a12b89 +TERMINAL_COLOR14=89a1e2 +TERMINAL_COLOR15=327178 +TERMINAL_COLOR2=9db565 +TERMINAL_COLOR3=e48d5f +TERMINAL_COLOR4=4c91de +TERMINAL_COLOR5=9d2891 +TERMINAL_COLOR6=445898 +TERMINAL_COLOR7=a3d7db +TERMINAL_COLOR8=616e8c +TERMINAL_COLOR9=b24d89 +TERMINAL_CURSOR=ffcc00 +TERMINAL_FOREGROUND=b1d4e9 +TERMINAL_THEME_ACCURACY=128 +TERMINAL_THEME_AUTO_BGFG=False +TERMINAL_THEME_EXTEND_PALETTE=True +TERMINAL_THEME_MODE=auto +THEME_STYLE=oomox +TXT_BG=25283f +TXT_FG=b1d4e9 +UNITY_DEFAULT_LAUNCHER_STYLE=False +WM_BORDER_FOCUS=fe9bce +WM_BORDER_UNFOCUS=25283f diff --git a/.config/oomox/export_config/gtk_theme_oomox.json b/.config/oomox/export_config/gtk_theme_oomox.json new file mode 100644 index 0000000..df92e84 --- /dev/null +++ b/.config/oomox/export_config/gtk_theme_oomox.json @@ -0,0 +1 @@ +{"gtk2_hidpi": false, "OPTION_GTK3_CURRENT_VERSION_ONLY": false, "OPTION_EXPORT_CINNAMON_THEME": false, "default_path": "/home/poslop/.themes"} \ No newline at end of file diff --git a/.config/oomox/export_config/icons_suru.json b/.config/oomox/export_config/icons_suru.json new file mode 100644 index 0000000..1244dbe --- /dev/null +++ b/.config/oomox/export_config/icons_suru.json @@ -0,0 +1 @@ +{"default_path": "/home/poslop/.icons"} \ No newline at end of file diff --git a/.config/oomox/ui_config.json b/.config/oomox/ui_config.json new file mode 100644 index 0000000..2d06789 --- /dev/null +++ b/.config/oomox/ui_config.json @@ -0,0 +1 @@ +{"window_width": 1892, "window_height": 962, "preset_list_minimal_width": 150, "preset_list_width": 150, "preset_list_sections_expanded": {"presets": true, "plugins": true, "user": true}} \ No newline at end of file diff --git a/.config/spicetify/Themes/BurntSienna/README.md b/.config/spicetify/Themes/BurntSienna/README.md new file mode 100644 index 0000000..a2aba8b --- /dev/null +++ b/.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
+Author: https://github.com/pjaspinski \ No newline at end of file diff --git a/.config/spicetify/Themes/BurntSienna/color.ini b/.config/spicetify/Themes/BurntSienna/color.ini new file mode 100644 index 0000000..99f7b7b --- /dev/null +++ b/.config/spicetify/Themes/BurntSienna/color.ini @@ -0,0 +1,6 @@ +[Base] +button = ef8450 +sidebar = 242629 +player = 242629 +main = 303336 +button-active = ef8450 \ No newline at end of file diff --git a/.config/spicetify/Themes/BurntSienna/screenshot.png b/.config/spicetify/Themes/BurntSienna/screenshot.png new file mode 100644 index 0000000..7634317 Binary files /dev/null and b/.config/spicetify/Themes/BurntSienna/screenshot.png differ diff --git a/.config/spicetify/Themes/BurntSienna/user.css b/.config/spicetify/Themes/BurntSienna/user.css new file mode 100644 index 0000000..fe2bc5f --- /dev/null +++ b/.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; +} diff --git a/.config/spicetify/Themes/CODE_OF_CONDUCT.md b/.config/spicetify/Themes/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..35b5167 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/CONTRIBUTING.md b/.config/spicetify/Themes/CONTRIBUTING.md new file mode 100644 index 0000000..b3972a7 --- /dev/null +++ b/.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 + + (): + + [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 | `` + * 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). diff --git a/.config/spicetify/Themes/Default/README.md b/.config/spicetify/Themes/Default/README.md new file mode 100644 index 0000000..f79e058 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Default/color.ini b/.config/spicetify/Themes/Default/color.ini new file mode 100644 index 0000000..4d58be9 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Default/ocean.png b/.config/spicetify/Themes/Default/ocean.png new file mode 100644 index 0000000..937ed3f Binary files /dev/null and b/.config/spicetify/Themes/Default/ocean.png differ diff --git a/.config/spicetify/Themes/Dreary/README.md b/.config/spicetify/Themes/Dreary/README.md new file mode 100644 index 0000000..0c4b504 --- /dev/null +++ b/.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 + diff --git a/.config/spicetify/Themes/Dreary/bib.png b/.config/spicetify/Themes/Dreary/bib.png new file mode 100644 index 0000000..80b3ac6 Binary files /dev/null and b/.config/spicetify/Themes/Dreary/bib.png differ diff --git a/.config/spicetify/Themes/Dreary/color.ini b/.config/spicetify/Themes/Dreary/color.ini new file mode 100644 index 0000000..f7b4094 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Dreary/deeper.png b/.config/spicetify/Themes/Dreary/deeper.png new file mode 100644 index 0000000..1f7fda7 Binary files /dev/null and b/.config/spicetify/Themes/Dreary/deeper.png differ diff --git a/.config/spicetify/Themes/Dreary/golden.png b/.config/spicetify/Themes/Dreary/golden.png new file mode 100644 index 0000000..763c98c Binary files /dev/null and b/.config/spicetify/Themes/Dreary/golden.png differ diff --git a/.config/spicetify/Themes/Dreary/graytone-blue.png b/.config/spicetify/Themes/Dreary/graytone-blue.png new file mode 100644 index 0000000..8bcfea2 Binary files /dev/null and b/.config/spicetify/Themes/Dreary/graytone-blue.png differ diff --git a/.config/spicetify/Themes/Dreary/mono.png b/.config/spicetify/Themes/Dreary/mono.png new file mode 100644 index 0000000..3fcf697 Binary files /dev/null and b/.config/spicetify/Themes/Dreary/mono.png differ diff --git a/.config/spicetify/Themes/Dreary/psycho.png b/.config/spicetify/Themes/Dreary/psycho.png new file mode 100644 index 0000000..a645f5d Binary files /dev/null and b/.config/spicetify/Themes/Dreary/psycho.png differ diff --git a/.config/spicetify/Themes/Dreary/user.css b/.config/spicetify/Themes/Dreary/user.css new file mode 100644 index 0000000..b2113fe --- /dev/null +++ b/.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; +} diff --git a/.config/spicetify/Themes/Dribbblish/README.md b/.config/spicetify/Themes/Dribbblish/README.md new file mode 100644 index 0000000..2a9c030 --- /dev/null +++ b/.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 + +### 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 + +### 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 + +### 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 +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 +``` diff --git a/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2 b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2 new file mode 100644 index 0000000..2430944 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayMedium.woff2 differ diff --git a/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2 b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2 new file mode 100644 index 0000000..911e5f8 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/GoogleSansDisplayRegular.woff2 differ diff --git a/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/Roboto.woff2 b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/Roboto.woff2 new file mode 100644 index 0000000..9a0064e Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/Roboto.woff2 differ diff --git a/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2 b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2 new file mode 100644 index 0000000..6a88805 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/assets/glue-resources/fonts/RobotoMedium.woff2 differ diff --git a/.config/spicetify/Themes/Dribbblish/base.png b/.config/spicetify/Themes/Dribbblish/base.png new file mode 100644 index 0000000..ce56373 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/base.png differ diff --git a/.config/spicetify/Themes/Dribbblish/beach-sunset.png b/.config/spicetify/Themes/Dribbblish/beach-sunset.png new file mode 100644 index 0000000..3cf9f78 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/beach-sunset.png differ diff --git a/.config/spicetify/Themes/Dribbblish/color.ini b/.config/spicetify/Themes/Dribbblish/color.ini new file mode 100644 index 0000000..b8c152d --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.config/spicetify/Themes/Dribbblish/dark.png b/.config/spicetify/Themes/Dribbblish/dark.png new file mode 100644 index 0000000..00dbb78 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/dark.png differ diff --git a/.config/spicetify/Themes/Dribbblish/dribbblish.js b/.config/spicetify/Themes/Dribbblish/dribbblish.js new file mode 100644 index 0000000..b5d059f --- /dev/null +++ b/.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 = ''; + 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(); +})(); diff --git a/.config/spicetify/Themes/Dribbblish/gruvbox.png b/.config/spicetify/Themes/Dribbblish/gruvbox.png new file mode 100644 index 0000000..f94bbe4 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/gruvbox.png differ diff --git a/.config/spicetify/Themes/Dribbblish/install.ps1 b/.config/spicetify/Themes/Dribbblish/install.ps1 new file mode 100644 index 0000000..604ddd3 --- /dev/null +++ b/.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 +} diff --git a/.config/spicetify/Themes/Dribbblish/nord-dark.png b/.config/spicetify/Themes/Dribbblish/nord-dark.png new file mode 100644 index 0000000..3f01074 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/nord-dark.png differ diff --git a/.config/spicetify/Themes/Dribbblish/nord-light.png b/.config/spicetify/Themes/Dribbblish/nord-light.png new file mode 100644 index 0000000..26aceb6 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/nord-light.png differ diff --git a/.config/spicetify/Themes/Dribbblish/purple.png b/.config/spicetify/Themes/Dribbblish/purple.png new file mode 100644 index 0000000..230311f Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/purple.png differ diff --git a/.config/spicetify/Themes/Dribbblish/samourai.png b/.config/spicetify/Themes/Dribbblish/samourai.png new file mode 100644 index 0000000..fa9505c Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/samourai.png differ diff --git a/.config/spicetify/Themes/Dribbblish/uninstall.ps1 b/.config/spicetify/Themes/Dribbblish/uninstall.ps1 new file mode 100644 index 0000000..ccf5757 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Dribbblish/user.css b/.config/spicetify/Themes/Dribbblish/user.css new file mode 100644 index 0000000..7ad49e8 --- /dev/null +++ b/.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; +} diff --git a/.config/spicetify/Themes/Dribbblish/white.png b/.config/spicetify/Themes/Dribbblish/white.png new file mode 100644 index 0000000..07d6db6 Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/white.png differ diff --git a/.config/spicetify/Themes/Dribbblish/windows-shortcut-instruction.png b/.config/spicetify/Themes/Dribbblish/windows-shortcut-instruction.png new file mode 100644 index 0000000..cb1d39d Binary files /dev/null and b/.config/spicetify/Themes/Dribbblish/windows-shortcut-instruction.png differ diff --git a/.config/spicetify/Themes/Flow/LICENSE b/.config/spicetify/Themes/Flow/LICENSE new file mode 100644 index 0000000..fc56020 --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Flow/README.md b/.config/spicetify/Themes/Flow/README.md new file mode 100644 index 0000000..284d791 --- /dev/null +++ b/.config/spicetify/Themes/Flow/README.md @@ -0,0 +1,25 @@ +# Flow + +## Screenshots + +### Ocean +img + + +### Pink +img + + +### Silver +img + + +### Violet +img + +## Author +Made by: +* https://github.com/Ruixi-Zhang +* https://github.com/yslDevelop +* https://github.com/ian-Liaozy +* https://github.com/alexcasieri30 diff --git a/.config/spicetify/Themes/Flow/color.ini b/.config/spicetify/Themes/Flow/color.ini new file mode 100644 index 0000000..2e9e835 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Flow/screenshots/ocean.png b/.config/spicetify/Themes/Flow/screenshots/ocean.png new file mode 100644 index 0000000..1e78dd1 Binary files /dev/null and b/.config/spicetify/Themes/Flow/screenshots/ocean.png differ diff --git a/.config/spicetify/Themes/Flow/screenshots/pink.png b/.config/spicetify/Themes/Flow/screenshots/pink.png new file mode 100644 index 0000000..c7d2a11 Binary files /dev/null and b/.config/spicetify/Themes/Flow/screenshots/pink.png differ diff --git a/.config/spicetify/Themes/Flow/screenshots/silver.png b/.config/spicetify/Themes/Flow/screenshots/silver.png new file mode 100644 index 0000000..de0f889 Binary files /dev/null and b/.config/spicetify/Themes/Flow/screenshots/silver.png differ diff --git a/.config/spicetify/Themes/Flow/screenshots/violet.png b/.config/spicetify/Themes/Flow/screenshots/violet.png new file mode 100644 index 0000000..af1c42b Binary files /dev/null and b/.config/spicetify/Themes/Flow/screenshots/violet.png differ diff --git a/.config/spicetify/Themes/Flow/user.css b/.config/spicetify/Themes/Flow/user.css new file mode 100644 index 0000000..c4bd28a --- /dev/null +++ b/.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); +} diff --git a/.config/spicetify/Themes/Glaze/LICENSE b/.config/spicetify/Themes/Glaze/LICENSE new file mode 100644 index 0000000..26c9e9b --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Glaze/README.md b/.config/spicetify/Themes/Glaze/README.md new file mode 100644 index 0000000..dff021b --- /dev/null +++ b/.config/spicetify/Themes/Glaze/README.md @@ -0,0 +1,21 @@ +# Glaze + +## Screenshots + +### Base +img + + +### Dark +img + +### Gray +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 diff --git a/.config/spicetify/Themes/Glaze/color.ini b/.config/spicetify/Themes/Glaze/color.ini new file mode 100644 index 0000000..e5a5450 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.config/spicetify/Themes/Glaze/screenshots/base.png b/.config/spicetify/Themes/Glaze/screenshots/base.png new file mode 100644 index 0000000..1f0fcea Binary files /dev/null and b/.config/spicetify/Themes/Glaze/screenshots/base.png differ diff --git a/.config/spicetify/Themes/Glaze/screenshots/dark.png b/.config/spicetify/Themes/Glaze/screenshots/dark.png new file mode 100644 index 0000000..b9c9137 Binary files /dev/null and b/.config/spicetify/Themes/Glaze/screenshots/dark.png differ diff --git a/.config/spicetify/Themes/Glaze/screenshots/gray.png b/.config/spicetify/Themes/Glaze/screenshots/gray.png new file mode 100644 index 0000000..a3d9b07 Binary files /dev/null and b/.config/spicetify/Themes/Glaze/screenshots/gray.png differ diff --git a/.config/spicetify/Themes/Glaze/user.css b/.config/spicetify/Themes/Glaze/user.css new file mode 100644 index 0000000..43c69a3 --- /dev/null +++ b/.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; + +} diff --git a/.config/spicetify/Themes/LICENSE b/.config/spicetify/Themes/LICENSE new file mode 100644 index 0000000..fc21e66 --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Marketplace/color.ini b/.config/spicetify/Themes/Marketplace/color.ini new file mode 100644 index 0000000..567b56f --- /dev/null +++ b/.config/spicetify/Themes/Marketplace/color.ini @@ -0,0 +1,1636 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + spicetify-marketplace/color.ini at main · spicetify/spicetify-marketplace · GitHub + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Skip to content + + + + + + + + + + + +
+ +
+ + + + + + + +
+ + + + +
+ + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + +
+ + + + + + + + +Permalink + +
+ +
+
+ + + main + + + + +
+
+
+ Switch branches/tags + +
+ + + +
+ +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + +
+ + + + +
+
+ +
+ +
+ +

+ spicetify-marketplace/resources/color.ini +

+ Go to file + + +
+ + + + + +
    +
  • + + Go to file + +
    • +
  • +
    • +
  • +
  • + + + Copy path + +
    • +
  • + + + + Copy permalink + + +
    • +
+
+
+ + + + + + + + + +
+ +
+
+ + @kyrie25 + +
+
+ kyrie25 + + + feat(install): use placeholder theme (#270) + +
+ + + + + +
+
+ + Latest commit + b7b82c2 + Jul 3, 2022 + + + + + + History + + +
+
+ +
+ +
+
+ + + 1 + + contributor + + +
+ +

+ Users who have contributed to this file +

+
+ + + + + + + +
+
+
+ + + + + + + + +
+ +
+ + +
+ + + 16 lines (16 sloc) + + 433 Bytes +
+ +
+ + +
+ Raw + + Blame + +
+ +
+ + + +
+
+
+
+ +
+
+
+
+
+ + + Open in GitHub Desktop +
+
+
+
+
+ + + +
+
+ + + +
+
+ +
+
+ + + + + +
+
+
+ + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
[Marketplace]
text = ffffff
subtext = b3b3b3
main = 121212
sidebar = 000000
player = 212121
card = 282828
shadow = 000000
selected-row = ffffff
button = 1877f2
button-active = 1ed760
button-disabled = 535353
tab-active = 333333
notification = 2e77d0
notification-error = cd1a2b
misc = 7f7f7f
+
+ + + +
+ + +
+ + + + +
+ + +
+ + +
 +
+ + +
+ +
+ + +
+ + + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + diff --git a/.config/spicetify/Themes/Onepunch/.gitignore b/.config/spicetify/Themes/Onepunch/.gitignore new file mode 100644 index 0000000..b7ff13a --- /dev/null +++ b/.config/spicetify/Themes/Onepunch/.gitignore @@ -0,0 +1 @@ +.DS_STORE \ No newline at end of file diff --git a/.config/spicetify/Themes/Onepunch/LICENSE b/.config/spicetify/Themes/Onepunch/LICENSE new file mode 100644 index 0000000..c3c2c50 --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Onepunch/README.md b/.config/spicetify/Themes/Onepunch/README.md new file mode 100644 index 0000000..640715e --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Onepunch/color.ini b/.config/spicetify/Themes/Onepunch/color.ini new file mode 100644 index 0000000..e8a3a15 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.config/spicetify/Themes/Onepunch/screenshots/dark_album.png b/.config/spicetify/Themes/Onepunch/screenshots/dark_album.png new file mode 100644 index 0000000..06c9c11 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/dark_album.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/dark_home.png b/.config/spicetify/Themes/Onepunch/screenshots/dark_home.png new file mode 100644 index 0000000..30c09f3 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/dark_home.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/dark_playlist.png b/.config/spicetify/Themes/Onepunch/screenshots/dark_playlist.png new file mode 100644 index 0000000..69652cd Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/dark_playlist.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/dark_podcast.png b/.config/spicetify/Themes/Onepunch/screenshots/dark_podcast.png new file mode 100644 index 0000000..35051d9 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/dark_podcast.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/dark_profile.png b/.config/spicetify/Themes/Onepunch/screenshots/dark_profile.png new file mode 100644 index 0000000..eadfb55 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/dark_profile.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/display.gif b/.config/spicetify/Themes/Onepunch/screenshots/display.gif new file mode 100644 index 0000000..09adc07 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/display.gif differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/light_album.png b/.config/spicetify/Themes/Onepunch/screenshots/light_album.png new file mode 100644 index 0000000..92c1696 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/light_album.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/light_home.png b/.config/spicetify/Themes/Onepunch/screenshots/light_home.png new file mode 100644 index 0000000..0bb8548 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/light_home.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/light_playlist.png b/.config/spicetify/Themes/Onepunch/screenshots/light_playlist.png new file mode 100644 index 0000000..71a829e Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/light_playlist.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/light_podcast.png b/.config/spicetify/Themes/Onepunch/screenshots/light_podcast.png new file mode 100644 index 0000000..4f27f55 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/light_podcast.png differ diff --git a/.config/spicetify/Themes/Onepunch/screenshots/light_profile.png b/.config/spicetify/Themes/Onepunch/screenshots/light_profile.png new file mode 100644 index 0000000..8ec5644 Binary files /dev/null and b/.config/spicetify/Themes/Onepunch/screenshots/light_profile.png differ diff --git a/.config/spicetify/Themes/Onepunch/user.css b/.config/spicetify/Themes/Onepunch/user.css new file mode 100644 index 0000000..b30751c --- /dev/null +++ b/.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; +} diff --git a/.config/spicetify/Themes/README.md b/.config/spicetify/Themes/README.md new file mode 100644 index 0000000..0e6f9af --- /dev/null +++ b/.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) diff --git a/.config/spicetify/Themes/Sleek/README.md b/.config/spicetify/Themes/Sleek/README.md new file mode 100644 index 0000000..a75ce3c --- /dev/null +++ b/.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 +spicetify apply +``` diff --git a/.config/spicetify/Themes/Sleek/bladerunner.png b/.config/spicetify/Themes/Sleek/bladerunner.png new file mode 100644 index 0000000..620dbf9 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/bladerunner.png differ diff --git a/.config/spicetify/Themes/Sleek/cherry.png b/.config/spicetify/Themes/Sleek/cherry.png new file mode 100644 index 0000000..9ccc70e Binary files /dev/null and b/.config/spicetify/Themes/Sleek/cherry.png differ diff --git a/.config/spicetify/Themes/Sleek/color.ini b/.config/spicetify/Themes/Sleek/color.ini new file mode 100644 index 0000000..3dba354 --- /dev/null +++ b/.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 diff --git a/.config/spicetify/Themes/Sleek/coral.png b/.config/spicetify/Themes/Sleek/coral.png new file mode 100644 index 0000000..01744aa Binary files /dev/null and b/.config/spicetify/Themes/Sleek/coral.png differ diff --git a/.config/spicetify/Themes/Sleek/deep.png b/.config/spicetify/Themes/Sleek/deep.png new file mode 100644 index 0000000..f89a44e Binary files /dev/null and b/.config/spicetify/Themes/Sleek/deep.png differ diff --git a/.config/spicetify/Themes/Sleek/deeper.png b/.config/spicetify/Themes/Sleek/deeper.png new file mode 100644 index 0000000..bc26ac6 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/deeper.png differ diff --git a/.config/spicetify/Themes/Sleek/dracula.png b/.config/spicetify/Themes/Sleek/dracula.png new file mode 100644 index 0000000..9689ec0 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/dracula.png differ diff --git a/.config/spicetify/Themes/Sleek/elementary.png b/.config/spicetify/Themes/Sleek/elementary.png new file mode 100644 index 0000000..8ce3a77 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/elementary.png differ diff --git a/.config/spicetify/Themes/Sleek/futura.png b/.config/spicetify/Themes/Sleek/futura.png new file mode 100644 index 0000000..3fa706e Binary files /dev/null and b/.config/spicetify/Themes/Sleek/futura.png differ diff --git a/.config/spicetify/Themes/Sleek/nord.png b/.config/spicetify/Themes/Sleek/nord.png new file mode 100644 index 0000000..2cb0806 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/nord.png differ diff --git a/.config/spicetify/Themes/Sleek/psycho.png b/.config/spicetify/Themes/Sleek/psycho.png new file mode 100644 index 0000000..1ac5429 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/psycho.png differ diff --git a/.config/spicetify/Themes/Sleek/ultrablack.png b/.config/spicetify/Themes/Sleek/ultrablack.png new file mode 100644 index 0000000..7e0dee7 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/ultrablack.png differ diff --git a/.config/spicetify/Themes/Sleek/user.css b/.config/spicetify/Themes/Sleek/user.css new file mode 100644 index 0000000..ffa7487 --- /dev/null +++ b/.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; +} \ No newline at end of file diff --git a/.config/spicetify/Themes/Sleek/vantablack.png b/.config/spicetify/Themes/Sleek/vantablack.png new file mode 100644 index 0000000..65fcfd9 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/vantablack.png differ diff --git a/.config/spicetify/Themes/Sleek/wealthy.png b/.config/spicetify/Themes/Sleek/wealthy.png new file mode 100644 index 0000000..f06c454 Binary files /dev/null and b/.config/spicetify/Themes/Sleek/wealthy.png differ diff --git a/.config/spicetify/Themes/THEMES.md b/.config/spicetify/Themes/THEMES.md new file mode 100644 index 0000000..4c6eb92 --- /dev/null +++ b/.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 + +### Dark + +img + +### Gray + +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 + + +#### Pink +img + + +#### Silver +img + + +#### Violet +img diff --git a/.config/spicetify/Themes/Turntable/LICENSE b/.config/spicetify/Themes/Turntable/LICENSE new file mode 100644 index 0000000..52ab52a --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Turntable/README.md b/.config/spicetify/Themes/Turntable/README.md new file mode 100644 index 0000000..f2e190e --- /dev/null +++ b/.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 + +
+ turntable +
+
+ full app display +
+
+ full app display - vertical mode +
+ +## 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 +``` diff --git a/.config/spicetify/Themes/Turntable/color.ini b/.config/spicetify/Themes/Turntable/color.ini new file mode 100644 index 0000000..ea4a617 --- /dev/null +++ b/.config/spicetify/Themes/Turntable/color.ini @@ -0,0 +1,3 @@ +; empty config to fix `spicetify apply` error ouput + +[turntable] diff --git a/.config/spicetify/Themes/Turntable/screenshots/blur_fad.png b/.config/spicetify/Themes/Turntable/screenshots/blur_fad.png new file mode 100644 index 0000000..1b0a439 Binary files /dev/null and b/.config/spicetify/Themes/Turntable/screenshots/blur_fad.png differ diff --git a/.config/spicetify/Themes/Turntable/screenshots/blur_fad_vertical.png b/.config/spicetify/Themes/Turntable/screenshots/blur_fad_vertical.png new file mode 100644 index 0000000..0f0eae5 Binary files /dev/null and b/.config/spicetify/Themes/Turntable/screenshots/blur_fad_vertical.png differ diff --git a/.config/spicetify/Themes/Turntable/screenshots/fad.png b/.config/spicetify/Themes/Turntable/screenshots/fad.png new file mode 100644 index 0000000..012ff77 Binary files /dev/null and b/.config/spicetify/Themes/Turntable/screenshots/fad.png differ diff --git a/.config/spicetify/Themes/Turntable/screenshots/fad_vertical.png b/.config/spicetify/Themes/Turntable/screenshots/fad_vertical.png new file mode 100644 index 0000000..19be1bc Binary files /dev/null and b/.config/spicetify/Themes/Turntable/screenshots/fad_vertical.png differ diff --git a/.config/spicetify/Themes/Turntable/screenshots/turntable.png b/.config/spicetify/Themes/Turntable/screenshots/turntable.png new file mode 100644 index 0000000..638f8e7 Binary files /dev/null and b/.config/spicetify/Themes/Turntable/screenshots/turntable.png differ diff --git a/.config/spicetify/Themes/Turntable/turntable.js b/.config/spicetify/Themes/Turntable/turntable.js new file mode 100644 index 0000000..8b67c9e --- /dev/null +++ b/.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 = ` +
+ +
+ +
+
+`; + 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(); + }); +}); diff --git a/.config/spicetify/Themes/Turntable/user.css b/.config/spicetify/Themes/Turntable/user.css new file mode 100644 index 0000000..2a2a4a6 --- /dev/null +++ b/.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) + } +} diff --git a/.config/spicetify/Themes/Ziro/LICENSE b/.config/spicetify/Themes/Ziro/LICENSE new file mode 100644 index 0000000..8342111 --- /dev/null +++ b/.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. diff --git a/.config/spicetify/Themes/Ziro/README.md b/.config/spicetify/Themes/Ziro/README.md new file mode 100644 index 0000000..a4bf6ef --- /dev/null +++ b/.config/spicetify/Themes/Ziro/README.md @@ -0,0 +1,35 @@ +# Ziro +## Screenshots +### Blue Dark +![Album](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/album-blue-dark.png) +### Blue Light +![Artist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/artist-blue-light.png) +### Gray Dark +![Cards](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/cards-gray-dark.png) +### Gray Light +![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-gray-light.png) +### Green Dark +![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-dark.png) +### Green Light +![Podcast](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/podcast-green-light.png) +### Orange Dark +![Search](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/search-orange-dark.png) +### Orange Light +![Library](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/library-orange-light.png) +### Purple Dark +![Single](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/single-purple-dark.png) +### Purple Light +![Playlist](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/playlist-purple-light.png) +### Red Dark +![Profile](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/profile-red-dark.png) +### Red Light +![Queue](https://raw.githubusercontent.com/schnensch0/ziro/main/preview/queue-red-light.png) +### Rose Pine Moon +![Playlists](screenshots/rose-pine-moon.jpg) +### Rose Pine Dawn +![Playlists](screenshots/rose-pine-dawn.jpg) + +## More +Inspired by the [Zorin GTK theme](https://github.com/ZorinOS/zorin-desktop-themes) and [spot](https://github.com/xou816/spot) + + diff --git a/.config/spicetify/Themes/Ziro/color.ini b/.config/spicetify/Themes/Ziro/color.ini new file mode 100644 index 0000000..3128bc9 --- /dev/null +++ b/.config/spicetify/Themes/Ziro/color.ini @@ -0,0 +1,246 @@ +; COLOR EXPLANATION +; main, sidebar, player = background +; card = cards, tracklist, dropdowns, input fields +; shadow = text on button, tab active & selected row +; selected row = selected song & tab +; button-active = play button, outline on focused input +; button = all other buttons +; button-disabled = volume & seekbar background, scrollbar handle, borders, hover + +[blue-dark] +text = bde6fb +subtext = 6d8692 +main = 1e2529 +sidebar = 1e2529 +player = 1e2529 +card = 171d20 +shadow = 171d20 +selected-row = bde6fb +button = bde6fb +button-active = bde6fb +button-disabled = 2a3439 +tab-active = bde6fb +notification = 171d20 +notification-error = fb7c7c +misc = 1e2529 + +[blue-light] +text = 123354 +subtext = 8495a7 +main = f5f7fa +sidebar = f5f7fa +player = f5f7fa +card = ffffff +shadow = ffffff +selected-row = 22c5fd +button = 22c5fd +button-active = 22c5fd +button-disabled = c8d0d9 +tab-active = 22c5fd +notification = ffffff +notification-error = fb7c7c +misc = f5f7fa + +[gray-dark] +text = ffffff +subtext = 909090 +main = 202020 +sidebar = 202020 +player = 202020 +card = 191919 +shadow = 191919 +selected-row = ffffff +button = ffffff +button-active = ffffff +button-disabled = 313131 +tab-active = ffffff +notification = 191919 +notification-error = fb7c7c +misc = 202020 + +[gray-light] +text = 29292a +subtext = 909091 +main = f7f7f7 +sidebar = f7f7f7 +player = f7f7f7 +card = ffffff +shadow = ffffff +selected-row = 61717c +button = 61717c +button-active = 61717c +button-disabled = cecece +tab-active = 61717c +notification = ffffff +notification-error = fb7c7c +misc = f7f7f7 + +[green-dark] +text = bbf1dd +subtext = 6b8a7f +main = 1b2421 +sidebar = 1b2421 +player = 1b2421 +card = 151c19 +shadow = 151c19 +selected-row = bbf1dd +button = bbf1dd +button-active = bbf1dd +button-disabled = 27332f +tab-active = bbf1dd +notification = 151c19 +notification-error = fb7c7c +misc = 1b2421 + +[green-light] +text = 19483e +subtext = 88a19c +main = f6f9f9 +sidebar = f6f9f9 +player = f6f9f9 +card = e5eceb +shadow = ffffff +selected-row = 2ae18e +button = 2ae18e +button-active = 2ae18e +button-disabled = cad6d4 +tab-active = 2ae18e +notification = e5eceb +notification-error = fb7c7c +misc = f6f9f9 + +[orange-dark] +text = fcc8b4 +subtext = 927367 +main = 271e1b +sidebar = 271e1b +player = 271e1b +card = 1e1715 +shadow = 1e1715 +selected-row = fcc8b4 +button = fcc8b4 +button-active = fcc8b4 +button-disabled = 372b26 +tab-active = fcc8b4 +notification = 1e1715 +notification-error = fb7c7c +misc = 271e1b + +[orange-light] +text = 563b25 +subtext = a89a8e +main = faf8f7 +sidebar = faf8f7 +player = faf8f7 +card = ffffff +shadow = ffffff +selected-row = ff8265 +button = ff8265 +button-active = ff8265 +button-disabled = d9d2cd +tab-active = ff8265 +notification = ffffff +notification-error = fb7c7c +misc = faf8f7 + +[purple-dark] +text = d8c4f1 +subtext = 7d718c +main = 221f26 +sidebar = 221f26 +player = 221f26 +card = 1a181e +shadow = 1a181e +selected-row = d8c4f1 +button = d8c4f1 +button-active = d8c4f1 +button-disabled = 302b36 +tab-active = d8c4f1 +notification = 1a181e +notification-error = fb7c7c +misc = 221f26 + +[purple-light] +text = 402b4d +subtext = 9d91a3 +main = f9f7f9 +sidebar = f9f7f9 +player = f9f7f9 +card = ffffff +shadow = ffffff +selected-row = 9f74e7 +button = 9f74e7 +button-active = 9f74e7 +button-disabled = d4ced7 +tab-active = 9f74e7 +notification = ffffff +notification-error = fb7c7c +misc = f9f7f9 + +[red-dark] +text = fdb4b4 +subtext = 6d8692 +main = 271b1b +sidebar = 271b1b +player = 271b1b +card = 1e1515 +shadow = 1e1515 +selected-row = fdb4b4 +button = fdb4b4 +button-active = fdb4b4 +button-disabled = 372626 +tab-active = fdb4b4 +notification = 1e1515 +notification-error = fb7c7c +misc = 271b1b + +[red-light] +text = 572920 +subtext = a9908b +main = faf7f6 +sidebar = faf7f6 +player = faf7f6 +card = ffffff +shadow = ffffff +selected-row = ff5966 +button = ff5966 +button-active = ff5966 +button-disabled = d9cecb +tab-active = ff5966 +notification = ffffff +notification-error = fb7c7c +misc = faf7f6 + +[rose-pine-moon] +text = e0def4 +subtext = 908caa +main = 232136 +sidebar = 232136 +player = 232136 +card = 393552 +shadow = 393552 +selected-row = ebbcba +button = ebbcba +button-active = ebbcba +button-disabled = 2a273f +tab-active = ebbcba +notification = 393552 +notification-error = eb6f92 +misc = 232136 + +[rose-pine-dawn] +text = 575279 +subtext = 797593 +main = f2e9e1 +sidebar = f2e9e1 +player = f2e9e1 +card = faf4ed +shadow = faf4ed +selected-row = d7827e +button = d7827e +button-active = d7827e +button-disabled = faf4ed +tab-active = d7827e +notification = faf4ed +notification-error = b4637a +misc = f2e9e1 diff --git a/.config/spicetify/Themes/Ziro/screenshots/rose-pine-dawn.jpg b/.config/spicetify/Themes/Ziro/screenshots/rose-pine-dawn.jpg new file mode 100644 index 0000000..bd0b8c7 Binary files /dev/null and b/.config/spicetify/Themes/Ziro/screenshots/rose-pine-dawn.jpg differ diff --git a/.config/spicetify/Themes/Ziro/screenshots/rose-pine-moon.jpg b/.config/spicetify/Themes/Ziro/screenshots/rose-pine-moon.jpg new file mode 100644 index 0000000..3c7e7ee Binary files /dev/null and b/.config/spicetify/Themes/Ziro/screenshots/rose-pine-moon.jpg differ diff --git a/.config/spicetify/Themes/Ziro/user.css b/.config/spicetify/Themes/Ziro/user.css new file mode 100644 index 0000000..376aba9 --- /dev/null +++ b/.config/spicetify/Themes/Ziro/user.css @@ -0,0 +1,516 @@ +:root { + --br-1: 10px; + --br-2: 8px; + --scrollbar: unset; +} +/* background */ +.main-home-homeHeader, +.main-entityHeader-backgroundColor, +.main-actionBarBackground-background { + display: none; +} +.main-topBar-overlay, .main-view-container, .Root__nav-bar{ + background-color: var(--spice-main); +} +.main-topBar-background { + opacity: 1 !important; +} +* { + box-shadow: none !important; +} +/* dividers */ +.Y_WW1akjiQKXSzCBalCD { + display: none; +} +/* navbar */ +.main-rootlist-rootlistDividerContainer { + display: none; +} +.main-navBar-navBarLinkActive, +.main-collectionLinkButton-selected, +.main-rootlist-rootlistItemLinkActive { + color: var(--spice-shadow) !important; + background: var(--spice-selected-row) !important; +} +.main-navBar-navBarLink, +.main-collectionLinkButton-collectionLinkButton, +.main-rootlist-rootlistItemLink, +.main-createPlaylistButton-button { + border-radius: var(--br-1) !important; +} +.main-navBar-navBarLink:hover, +.main-collectionLinkButton-collectionLinkButton:hover, +.main-rootlist-rootlistItemLink:hover, +.main-createPlaylistButton-button:hover { + background: var(--spice-button-disabled); +} +.main-rootlist-rootlistItem { + padding: 0 8px 0 calc(8px + var(--indentation) * 8px); +} +.main-rootlist-rootlistItemLink { + padding: 0 16px; +} +.main-rootlist-statusIcons, +.main-rootlist-expandArrow { + position: absolute; + top: 10px; + right: 24px; +} +.main-rootlist-expandArrow { + top: 8px; + color: var(--spice-subtext); +} +.main-rootlist-rootlistItemLinkActive + .main-rootlist-statusIcons .main-rootlist-playButton, +.main-rootlist-rootlistItemLinkActive + .main-rootlist-expandArrow { + color: var(--spice-shadow) !important; +} +.main-navBar-navBarLink { + color: var(--spice-text); +} +.main-collectionLinkButton-collectionLinkButton > *, +.main-createPlaylistButton-button { + opacity: 1 !important; +} +.main-rootlist-rootlist .os-scrollbar { + padding: 0 0 0 8px; +} +/* player */ +.main-nowPlayingBar-center .playback-progressbar { + position: absolute; + left: 0; + bottom: 84px; +} +.main-nowPlayingBar-nowPlayingBar:not(:only-child) .playback-progressbar { + bottom: 108px; +} +.playback-bar { + --bar: var(--spice-button); +} +.volume-bar { + --bar: var(--spice-subtext); + margin-right: 8px; +} +.playback-bar .progress-bar { + --progress-bar-radius: 0; +} +.playback-bar:hover .progress-bar, +.playback-bar .DuvrswZugGajIFNXObAr { + --progress-bar-height: 8px; +} +.x-progressBar-progressBarBg { + background-color: var(--spice-button-disabled); +} +.DuvrswZugGajIFNXObAr .progress-bar__slider, +.epWhU7hHGktzlO_dop6z { + background-color: var(--bar) !important; +} +.progress-bar__slider { + display: block; + background-color: var(--spice-shadow); + border: 2px solid var(--bar); + height: 16px; + width: 16px; +} +.playback-bar .progress-bar__slider { + height: 20px; + width: 20px; +} +.playback-bar__progress-time-elapsed, +.main-playbackBarRemainingTime-container { + color: var(--spice-subtext); + position: absolute; + margin-bottom: 30px; + right: 266px; +} +.playback-bar__progress-time-elapsed { + right: 308px; +} +.playback-bar__progress-time-elapsed::after { + content: ' /'; +} +.player-controls__buttons { + margin: 0; +} +.player-controls__buttons button:not(.main-playPauseButton-button) { + color: var(--spice-button) !important; +} +.connect-device-list-content { + border-radius: var(--br-1); + border: 1px solid var(--spice-button-disabled); + padding: 12px; +} +.connect-device-list-item:hover { + background-color: var(--spice-button-disabled); + border-radius: var(--br-2); +} +.cover-art-image { + border-radius: calc(var(--br-2) / 2); +} +.main-coverSlotCollapsed-container[aria-hidden='true'] .cover-art-image { + border-radius: var(--br-1); +} +/* friends */ +.main-buddyFeed-addFriendsContainer { + background-color: var(--spice-sidebar); +} +.main-buddyFeed-friendActivity { + padding: 8px; + margin: 8px; + background: var(--spice-card); + border-radius: var(--br-1); +} +.HdRGC, +.eEsqRZ, +.main-buddyFeed-usernameAndTimestamp a { + color: var(--spice-text) !important; +} +.main-buddyFeed-activityMetadata > :not(:first-child) a, +.main-buddyFeed-timestamp { + color: var(--spice-subtext) !important; +} +.main-avatar-avatar.vreGJrlRqoFkzlSQwvsJ:after { + background: var(--spice-text); + box-shadow: none; +} +/* cards */ +.main-card-card, +.Z35BWOA10YGn5uc9YgAp, +.main-heroCard-card, +.a2ruVaZt_DdrdHz3GqgU, +.x-categoryCard-CategoryCard { + background-color: var(--spice-card); + border-radius: var(--br-1); +} +.Z35BWOA10YGn5uc9YgAp:hover { + background: var(--spice-button-disabled); +} +.main-cardImage-imageWrapper:not(.main-cardImage-circular) { + border-radius: var(--br-2); +} +.Z35BWOA10YGn5uc9YgAp .main-image-image { + border-radius: var(--br-2) 0 0 var(--br-2); +} +.zXwER4Lsqq_e7fVVaPkZ { + background-color: transparent !important; +} +.cSeieV { + background-color: var(--spice-button-active); +} +/* menus */ +.main-contextMenu-menu { + border: 1px solid var(--spice-button-disabled); + border-radius: var(--br-1); + padding: 8px; +} +.main-contextMenu-menuItemButton:hover { + background-color: var(--spice-button-disabled); +} +.main-contextMenu-menuItemButton { + border-radius: var(--br-2); +} +.main-contextMenu-menuItemButton::before, +.main-contextMenu-menuItemButton::after { + display: none; +} +.main-contextMenu-menuItemButton { + color: var(--spice-text) !important; +} +/* input */ +.x-searchInput-searchInputInput, +.x-proxySettings-proxyInput, +.main-dropDown-dropDown, +.QZhV0hWVKlExlKr266jo, +.amTaUy6eMlbKh0wzrOnb { + background: var(--spice-card); + border-radius: var(--br-2); +} +.x-searchInput-searchInputSearchIcon, +.x-searchInput-searchInputInput, +.x-searchInput-searchInputClearButton { + color: var(--spice-text) !important; +} +/* buttons */ +.wCl7pMTEE68v1xuZeZiB:hover, +.w6j_vX6SF5IxSXrrkYw5:hover, +.w6j_vX6SF5IxSXrrkYw5[data-context-menu-open='true'], +.fLS8v3_EfBadEerbGVoR:hover, +.aAr9nYtPsG7P2LRzciXc { + background: var(--spice-button-disabled); + border-radius: var(--br-2); +} +.w6j_vX6SF5IxSXrrkYw5 { + background-color: transparent; +} +.main-actionBar-ActionBarRow button:not(.bqeOGM), +.QhF9ZR7YOiJeFiEnfkOr button, +.CpQBQL6M4D3bquNOpKd9, +.player-controls__buttons button, +.DbMYFmOEEz9PH1h1zK9n button, +.main-moreButton-button, +.w6j_vX6SF5IxSXrrkYw5, +.gIobRDHAxkAvUaF4_OOL button { + color: var(--spice-button); +} +.bqeOGM:hover .ButtonInner-sc-14ud5tc-0, +.dkGAhA:hover .ButtonInner-sc-14ud5tc-0, +.jEaMNl:hover .ButtonInner-sc-14ud5tc-0, +.fBTYgGyvIbHizHIj7AAX, +.main-playPauseButton-button { + background-color: var(--spice-button); +} +.kxBVag { + color: var(--spice-subtext); +} +.main-button-primary, +.fBTYgGyvIbHizHIj7AAX, +.main-playPauseButton-button { + color: var(--spice-shadow) !important; +} +.aAr9nYtPsG7P2LRzciXc { + border: none; +} +.main-button-outlined { + border-color: var(--spice-button); +} +.rEx3EYgBzS8SoY7dmC6x rect { + fill: var(--spice-button); +} +/* scrollbar */ +.os-scrollbar { + display: var(--scrollbar); +} +.os-scrollbar-handle { + border-radius: 8px; + background: var(--spice-button-disabled) !important; +} +/* tab bar */ +.oaNVBli46GtVjaQKB15g, +.marketplace-tabBar-active, +.lyrics-tabBar-active { + color: var(--spice-shadow); + background: var(--spice-tab-active) !important; +} +.JdlKTdpMquftpMwwegZo, +.marketplace-tabBar-headerItemLink, +.lyrics-tabBar-headerItemLink { + border-radius: var(--br-2); +} +.JdlKTdpMquftpMwwegZo:hover, +.marketplace-tabBar-headerItemLink:hover { + background: var(--spice-button-disabled); +} +/* marketplace */ +.main-navBar-navBarItem[data-id='/spicetify-marketplace'] svg { + vertical-align: middle; +} +.main-type-mestoBold { + font-weight: 700; + font-size: 0.875rem; +} +.marketplace-card-desc { + font-size: 0.875rem; + line-height: 1rem; +} +.main-cardHeader-text { + font-weight: 700; +} +.marketplace-header { + height: 36px; +} +.marketplace-header__right { + position: fixed; +} +.marketplace-settings-button { + padding: 12px 12px 8px; + border-radius: var(--br-2); +} +.marketplace-settings-button:hover { + background-color: var(--spice-button-disabled); +} +.GenericModal > * { + background-color: var(--spice-main) !important; + color: var(--spice-text); +} +.GenericModal, +.GenericModal > * { + border-radius: var(--br-1); +} +.main-playButton-PlayButton { + color: var(--spice-shadow) !important; +} +.marketplace-card--installed { + border: none; +} +/* headers */ +.CmkY1Ag0tJDfnFXbGgju:not(.hNTPwmaxPotdJ14dx2W9 *) { + border-radius: var(--br-1); +} +.main-entityHeader-gray, +.main-entityHeader-metaData, +.UyzJidwrGk3awngSGIwv, +.main-entityHeader-divider { + color: var(--spice-text) !important; +} +.main-entityHeader-background { + transform: none !important; + margin-top: 64px; + border-radius: var(--br-1); +} +.main-entityHeader-overlay { + background: none; +} +.main-entityHeader-withBackgroundImage, +.main-entityHeader-withBackgroundImage + div { + transform: translateY(64px); +} +/* tracklist */ +.main-trackList-trackList .JUa6JJNj7R_Y3i4P8YUX { + background: var(--spice-card); + border-radius: var(--br-1); + padding: 8px; +} +.main-trackList-trackListHeaderRow { + border: none; +} +.main-trackList-trackListRow:hover, +.jtZMR8Hj94od6BQce98P:hover { + background-color: var(--spice-button-disabled); +} +.main-trackList-trackListRow.main-trackList-selected, +.jtZMR8Hj94od6BQce98P:active { + background-color: var(--spice-tab-active) !important; +} +.main-trackList-selected * { + color: var(--spice-shadow) !important; +} +.main-trackList-selected .main-trackList-playingIcon, +.main-trackList-selected .main-tag-container { + background-color: var(--spice-shadow); + color: var(--spice-text) !important; +} +.main-trackList-trackListRow, +.jtZMR8Hj94od6BQce98P { + border-radius: var(--br-2); +} +.main-trackList-trackList { + border-radius: var(--br-1); + border-bottom: 16px solid var(--spice-card); +} +.fcehhQ { + color: var(--spice-subtext); +} +.main-tag-container { + background-color: var(--spice-subtext); +} +.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 24 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E"); + background: var(--spice-text); + content-visibility: hidden; +} +.main-trackList-filterHighlight { + background-color: var(--spice-button); + color: var(--spice-shadow); +} +/* podcasts */ +.main-yourEpisodes-coverContainer, +.SpVoh9vvBN0kIwzfCiBh, +.ltjunXlP2FwPEVF992n9 { + border-radius: var(--br-1); +} +.TT1tIewS2iI8Uz8kLuQB { + border-radius: var(--br-2); + margin: 0 8px; +} +.TT1tIewS2iI8Uz8kLuQB:hover { + background-color: var(--spice-button-disabled); +} +.Ng3dPPA2_1CFYkzPukjM { + background: var(--spice-text); +} +.Q3wDjXPNY4lACLUxARrd + div { + background-color: var(--spice-card); + padding: 8px 0; + border-radius: var(--br-1); +} +.knWBkA { + color: var(--spice-subtext); +} +.qfYkuLpETFW3axnfMntO, +.poz9gZKE7xqFwgk231J4, +.UyzJidwrGk3awngSGIwv, +.xWm_uA0Co4SXVxaO7wlB { + color: var(--spice-text) !important; +} +path[fill='#1ed760'] { + fill: var(--spice-button) !important; +} +.E4I5I7G2CfW32hLWZaqE, +.SpVoh9vvBN0kIwzfCiBh { + background-color: var(--spice-card); +} +.rFwxt8s8DYY8p1O7tYZW { + background: none; +} +/* settings */ +.x-toggle-indicator { + height: 18px; + width: 18px; + top: 3px; + left: 3px; + background: var(--spice-shadow) !important; +} +input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator { + right: 3px; +} +.cOFYck { + color: var(--spice-subtext); +} +.main-playlistEditDetailsModal-textElement { + border-radius: var(--br-1); +} +/* fullscreen */ +.npv-main-container .npv-cross-fade-image { + border-radius: calc(var(--br-1) * 3); +} +.npv-main-container .playback-bar__progress-time-elapsed, +.npv-main-container .main-playbackBarRemainingTime-container { + margin-bottom: -125px; + margin-right: -86px; +} +.npv-up-next { + background: var(--spice-card) !important; + border: none !important; + border-radius: var(--br-1); +} +.npv-up-next__image { + border-radius: var(--br-2); +} +.npv-header__metadata { + color: var(--spice-text); +} +/* misc */ +.hW9km7ku6_iggdWDR_Lg, +.lyrics-lyricsContainer-LyricsContainer { + --lyrics-color-active: var(--spice-text) !important; + --lyrics-color-inactive: var(--spice-subtext) !important; + --lyrics-color-background: var(--spice-main) !important; +} +.lyrics-lyricsContainer-LyricsBackground { + background-image: none; +} +.jixVGx, +.euRuBv { + color: var(--spice-text); +} +.XmR5VFpqXOcxRvhuf6OB { + border-radius: var(--br-1); +} +.main-rootlist-rootlistDividerContainer { + display: none; +} +.main-home-homeHeader { + display: none; +} +.AINMAUImkAYJd4ertQxy { + display: none; +} diff --git a/.config/spicetify/Themes/_Extra/README.md b/.config/spicetify/Themes/_Extra/README.md new file mode 100644 index 0000000..5db5419 --- /dev/null +++ b/.config/spicetify/Themes/_Extra/README.md @@ -0,0 +1,8 @@ +# Extras + +This folder contains additional resources for tweaking the look of +Spotify. More info in each subfolder. + +| Folder | Description | +| ----------- | ----------- | +| **SpotifyNoControl** | Hides Spotify Window controls | diff --git a/.config/spicetify/Themes/_Extra/SpotifyNoControl/README.md b/.config/spicetify/Themes/_Extra/SpotifyNoControl/README.md new file mode 100644 index 0000000..a7c2fbe --- /dev/null +++ b/.config/spicetify/Themes/_Extra/SpotifyNoControl/README.md @@ -0,0 +1,21 @@ +# SpotifyNoControl + +Hides Spotify window control buttons. + +## Usage + +Windows user, please edit your Spotify shortcut and add flag `--transparent-window-controls` after the Spotify.exe: +![instruction1](./windows-shortcut-instruction.png) + +Alternatively, you can use `SpotifyNoControl.exe`, included in this folder, to completely remove all windows controls and title menu (three dot at top left corner). Title menu still can be access via Alt key. Closing, minimizing can be done via right click menu at top window region.\ +`SpotifyNoControl.exe` could be used as Spotify launcher, it opens Spotify and hides controls right after. You can drag and drop it to your taskbar but make sure you unpin the original Spotify icon first. Alternatively you can make a shortcut for it and add to desktop or start menu.\ +Moreover, by default, Spotify adjusted sidebar items and profile menu icon to stay out of Windows native controls region. If you decided to use `SpotifyNoControl.exe` from now on, please open `user.css` file and change variable `--os-windows-icon-dodge` value to 0 as instruction to snap icons back to their original position. + +![nocontrol](https://i.imgur.com/qdZyv1t.png) + +## Alternatives + +If the executable does not work for you, try using + +- [AHK implementation](https://github.com/SaifAqqad/AHK_SpotifyNoControl) +- [julienmaille's implementation](https://github.com/spicetify/spicetify-themes/raw/legacy/Dribbblish/SpotifyNoControl.exe) diff --git a/.config/spicetify/Themes/_Extra/SpotifyNoControl/SpotifyNoControl.exe b/.config/spicetify/Themes/_Extra/SpotifyNoControl/SpotifyNoControl.exe new file mode 100644 index 0000000..39272f3 Binary files /dev/null and b/.config/spicetify/Themes/_Extra/SpotifyNoControl/SpotifyNoControl.exe differ diff --git a/.config/spicetify/Themes/_Extra/SpotifyNoControl/windows-shortcut-instruction.png b/.config/spicetify/Themes/_Extra/SpotifyNoControl/windows-shortcut-instruction.png new file mode 100644 index 0000000..cb1d39d Binary files /dev/null and b/.config/spicetify/Themes/_Extra/SpotifyNoControl/windows-shortcut-instruction.png differ diff --git a/.config/spicetify/Themes/manifest.json b/.config/spicetify/Themes/manifest.json new file mode 100644 index 0000000..8cbb533 --- /dev/null +++ b/.config/spicetify/Themes/manifest.json @@ -0,0 +1,146 @@ +[ + { + "name": "BurntSienna", + "description": "BurntSienna", + "preview": "BurntSienna/screenshot.png", + "readme": "BurntSienna/README.md", + "usercss": "BurntSienna/user.css", + "schemes": "BurntSienna/color.ini", + "authors": [ + { + "name": "pjaspinski", + "url": "https://github.com/pjaspinski" + } + ] + }, + { + "name": "Default", + "description": "Default", + "preview": "Default/ocean.png", + "readme": "Default/README.md", + "usercss": "Default/user.css", + "schemes": "Default/color.ini", + "authors": [ + { + "name": "Blacksuan19", + "url": "https://github.com/Blacksuan19" + } + ] + }, + { + "name": "Dreary", + "description": "Dreary", + "preview": "Dreary/deeper.png", + "readme": "Dreary/README.md", + "usercss": "Dreary/user.css", + "schemes": "Dreary/color.ini", + "authors": [ + { + "name": "CharlieS1103", + "url": "https://github.com/CharlieS1103" + } + ] + }, + { + "name": "Dribbblish", + "description": "Dribbblish", + "preview": "Dribbblish/base.png", + "readme": "Dribbblish/README.md", + "usercss": "Dribbblish/user.css", + "schemes": "Dribbblish/color.ini", + "include": [ + "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/dribbblish.js" + ], + "authors": [ + { + "name": "khanhas", + "url": "https://github.com/khanhas" + } + ] + }, + { + "name": "Onepunch", + "description": "Onepunch", + "preview": "Onepunch/screenshots/dark_home.png", + "readme": "Onepunch/README.md", + "usercss": "Onepunch/user.css", + "schemes": "Onepunch/color.ini", + "authors": [ + { + "name": "okarin001", + "url": "https://github.com/okarin001" + } + ] + }, + { + "name": "Sleek", + "description": "Sleek", + "preview": "Sleek/coral.png", + "readme": "Sleek/README.md", + "usercss": "Sleek/user.css", + "schemes": "Sleek/color.ini", + "authors": [ + { + "name": "harbassan", + "url": "https://github.com/harbassan" + } + ] + }, + { + "name": "Turntable", + "description": "Turntable", + "preview": "Turntable/screenshots/turntable.png", + "readme": "Turntable/README.md", + "usercss": "Turntable/user.css", + "schemes": "Turntable/color.ini", + "include": [ + "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Turntable/turntable.js" + ], + "authors": [ + { + "name": "Grason Chan", + "url": "https://github.com/grasonchan" + } + ] + }, + { + "name": "Ziro", + "description": "a smooth theme inspired by zorin os", + "preview": "https://raw.githubusercontent.com/schnensch0/ziro/main/preview/mockup.png", + "readme": "Ziro/README.md", + "usercss": "Ziro/user.css", + "schemes": "Ziro/color.ini", + "authors": [ + { + "name": "schnensch0", + "url": "https://github.com/schnensch0" + } + ] + }, + { + "name": "Flow", + "description": "Spicetify theme that has linear gradient effect and vertical playbar", + "preview": "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Flow/screenshots/pink.png", + "readme": "Flow/README.md", + "usercss": "Flow/user.css", + "schemes": "Flow/color.ini", + "authors": [ + { + "name": "Ian Liao", + "url": "https://github.com/ian-Liaozy" + }, + { + "name": "Victoria Zhang", + "url": "https://github.com/Ruixi-Zhang" + }, + { + "name": "Yu Sung Lee", + "url": "https://github.com/yslDevelop" + }, + { + "name": "Alex Casieri", + "url": "https://github.com/alexcasieri30" + } + ] + } +]