mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
feat(Text): add text theme (#970)
This commit is contained in:
darkthemer
GitHub
parent
0463e3f271
commit
b9db82a9cb
55
THEMES.md
55
THEMES.md
@ -141,6 +141,61 @@ Here you can find a preview of all the themes. Some of them may have different c
|
||||
|  |  |
|
||||
| VantaBlack | RosePine |
|
||||
|
||||
## text
|
||||
|
||||
### Spotify
|
||||
|
||||
|
||||
|
||||
### Spicetify
|
||||
|
||||
|
||||
|
||||
### Catppuccin
|
||||
|
||||
| | |
|
||||
|:--------------------------------------------------------:|:----------------------------------------------------------------:|
|
||||
|  |  |
|
||||
| Catppuccin Mocha | Catppuccin Macchiato |
|
||||
|  | |
|
||||
| Catppuccin Latte | |
|
||||
|
||||
#### Dracula
|
||||
|
||||
|
||||
|
||||
#### Gruvbox
|
||||
|
||||
|
||||
|
||||
#### Kanagawa
|
||||
|
||||
|
||||
|
||||
#### Nord
|
||||
|
||||
|
||||
|
||||
#### Rigel
|
||||
|
||||
|
||||
|
||||
#### RosePine
|
||||
|
||||
|  |  |
|
||||
|:------------------------------------------:|:--------------------------------------------------:|
|
||||
| Rose Pine | Rose Pine Moon |
|
||||
|
||||
#### Solarized
|
||||
|
||||
|
||||
|
||||
#### TokyoNight
|
||||
|
||||
|  |  |
|
||||
|:----------------------------------------------:|:--------------------------------------------------------:|
|
||||
| Tokyo Night | Tokyo Night Storm |
|
||||
|
||||
## Turntable
|
||||
|
||||
|
||||
|
||||
@ -100,6 +100,20 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"description": "a spicetify theme that mimics the look of spotify-tui",
|
||||
"preview": "text/screenshots/gruvbox.png",
|
||||
"readme": "text/README.md",
|
||||
"usercss": "text/user.css",
|
||||
"schemes": "text/color.ini",
|
||||
"authors": [
|
||||
{
|
||||
"name": "darkthemer",
|
||||
"url": "https://github.com/darkthemer"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Turntable",
|
||||
"description": "Turntable",
|
||||
|
||||
164
text/README.md
Normal file
164
text/README.md
Normal file
@ -0,0 +1,164 @@
|
||||
# text
|
||||
|
||||
## Screenshots
|
||||
|
||||
#### Display Images
|
||||
|
||||
##### with images `--display-images: block;`
|
||||
|
||||
|
||||
|
||||
##### without images `--display-images: none;`
|
||||
|
||||
|
||||
|
||||
### Spotify
|
||||
|
||||
|
||||
|
||||
### Spicetify
|
||||
|
||||
|
||||
|
||||
### CatppuccinMocha
|
||||
|
||||
|
||||
|
||||
### CatppuccinMacchiato
|
||||
|
||||
|
||||
|
||||
### CatppuccinLatte
|
||||
|
||||
|
||||
|
||||
### Dracula
|
||||
|
||||
|
||||
|
||||
### Gruvbox
|
||||
|
||||
|
||||
|
||||
### Kanagawa
|
||||
|
||||
|
||||
|
||||
### Nord
|
||||
|
||||
|
||||
|
||||
### Rigel
|
||||
|
||||
|
||||
|
||||
### RosePine
|
||||
|
||||
|
||||
|
||||
### RosePineMoon
|
||||
|
||||
|
||||
|
||||
### Solarized
|
||||
|
||||
|
||||
|
||||
### TokyoNight
|
||||
|
||||
|
||||
|
||||
### TokyoNightStorm
|
||||
|
||||
|
||||
|
||||
## More
|
||||
|
||||
### Description
|
||||
|
||||
a spicetify theme that mimics the look of [spotify-tui](https://github.com/Rigellute/spotify-tui)
|
||||
|
||||
### Credits
|
||||
|
||||
created by [darkthemer](https://github.com/darkthemer/)
|
||||
|
||||
### Notes
|
||||
|
||||
- Feel free to edit `color.ini` to swap the accent color (it's green for most of them) into your preferred color based from the color pallete.
|
||||
|
||||
- https://github.com/catppuccin/catppuccin
|
||||
- https://github.com/dracula/dracula-theme
|
||||
- https://github.com/morhetz/gruvbox/
|
||||
- https://github.com/rebelot/kanagawa.nvim
|
||||
- https://github.com/nordtheme/nord
|
||||
- https://github.com/Rigellute/rigel/
|
||||
- https://github.com/rose-pine/rose-pine-theme
|
||||
- https://github.com/rose-pine/rose-pine-theme
|
||||
- https://github.com/altercation/solarized
|
||||
- https://github.com/enkia/tokyo-night-vscode-theme
|
||||
|
||||
- Check the very top of `user.css` for user settings
|
||||
|
||||
- If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the variables found in `user.css` (also below). Edit these as you wish.
|
||||
|
||||
```css
|
||||
/* user settings */
|
||||
:root {
|
||||
--font-family: "DM Mono", monospace;
|
||||
/*
|
||||
--font-family: 'Anonymous Pro', monospace;
|
||||
--font-family: 'Courier Prime', monospace;
|
||||
--font-family: 'Cousine', monospace;
|
||||
--font-family: 'Cutive Mono', monospace;
|
||||
--font-family: 'DM Mono', monospace;
|
||||
--font-family: 'Fira Mono', monospace;
|
||||
--font-family: 'IBM Plex Mono', monospace;
|
||||
--font-family: 'Inconsolata', monospace;
|
||||
--font-family: 'Nanum Gothic Coding', monospace;
|
||||
--font-family: 'PT Mono', monospace;
|
||||
--font-family: 'Roboto Mono', monospace;
|
||||
--font-family: 'Share Tech Mono', monospace;
|
||||
--font-family: 'Source Code Pro', monospace;
|
||||
--font-family: 'Space Mono', monospace;
|
||||
--font-family: 'Ubuntu Mono', monospace;
|
||||
--font-family: 'VT323', monospace;
|
||||
*/
|
||||
--font-size: 14px;
|
||||
--font-weight: 400; /* 200 : 900 */
|
||||
--line-height: 1.2;
|
||||
|
||||
--display-images: none; /* none | block */
|
||||
|
||||
--border-radius: 0px;
|
||||
--border-width: 1px;
|
||||
--border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
|
||||
}
|
||||
```
|
||||
|
||||
- For Windows users, here's how to make the window controls' background match with the topbar background
|
||||
|
||||
- Put this snippet into your `user.css` (or through the Marketplace's `+ Add CSS` feature)
|
||||
|
||||
```css
|
||||
/* transparent window controls background */
|
||||
body::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
backdrop-filter: brightness(2.12);
|
||||
/* page zoom [ctrl][+] or [ctrl][-]
|
||||
edit width and height accordingly
|
||||
69% = 194px 45px
|
||||
76% = 177px 40.5px
|
||||
83% = 162px 37.5px
|
||||
91% = 148px 34px
|
||||
100% = 135px 31px (default)
|
||||
110% = 123px 28.5px
|
||||
*/
|
||||
width: 135px;
|
||||
height: 31px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
239
text/color.ini
Normal file
239
text/color.ini
Normal file
@ -0,0 +1,239 @@
|
||||
; note: most of the accent colors are set to the green of that color scheme, feel free to change it to your preferred color
|
||||
|
||||
[Spotify]
|
||||
accent = 1db954
|
||||
accent-active = 1ed760
|
||||
accent-inactive = 121212
|
||||
banner = 1ed760
|
||||
border-active = 1ed760
|
||||
border-inactive = 535353
|
||||
header = 535353
|
||||
highlight = 1a1a1a
|
||||
main = 121212
|
||||
notification = 4687d6
|
||||
notification-error = e22134
|
||||
subtext = b3b3b3
|
||||
text = FFFFFF
|
||||
|
||||
[Spicetify]
|
||||
accent = 00e089
|
||||
accent-active = 00e089
|
||||
accent-inactive = 2E2837
|
||||
banner = 00e089
|
||||
border-active = 00e089
|
||||
border-inactive = 483b5b
|
||||
header = 483b5b
|
||||
highlight = 483b5b
|
||||
main = 2E2837
|
||||
notification = 00e089
|
||||
notification-error = e22134
|
||||
subtext = DEDEDE
|
||||
text = FFFFFF
|
||||
|
||||
[CatppuccinMocha]
|
||||
;https://github.com/catppuccin/catppuccin
|
||||
accent = a6e3a1
|
||||
accent-active = a6e3a1
|
||||
accent-inactive = 1e1e2e
|
||||
banner = a6e3a1
|
||||
border-active = a6e3a1
|
||||
border-inactive = 313244
|
||||
header = 585b70
|
||||
highlight = 585b70
|
||||
main = 1e1e2e
|
||||
notification = 89b4fa
|
||||
notification-error = f38ba8
|
||||
subtext = a6adc8
|
||||
text = cdd6f4
|
||||
|
||||
[CatppuccinMacchiato]
|
||||
;https://github.com/catppuccin/catppuccin
|
||||
accent = a6da95
|
||||
accent-active = a6da95
|
||||
accent-inactive = 24273a
|
||||
banner = a6da95
|
||||
border-active = a6da95
|
||||
border-inactive = 363a4f
|
||||
header = 5b6078
|
||||
highlight = 5b6078
|
||||
main = 24273a
|
||||
notification = 8aadf4
|
||||
notification-error = ed8796
|
||||
subtext = a5adcb
|
||||
text = cad3f5
|
||||
|
||||
[CatppuccinLatte]
|
||||
;https://github.com/catppuccin/catppuccin
|
||||
accent = a6d189
|
||||
accent-active = a6d189
|
||||
accent-inactive = 303446
|
||||
banner = a6d189
|
||||
border-active = a6d189
|
||||
border-inactive = 414559
|
||||
header = 626880
|
||||
highlight = 626880
|
||||
main = 303446
|
||||
notification = 8caaee
|
||||
notification-error = e78284
|
||||
subtext = a5adce
|
||||
text = c6d0f5
|
||||
|
||||
[Dracula]
|
||||
;https://github.com/dracula/dracula-theme
|
||||
accent = 50fa7b
|
||||
accent-active = 50fa7b
|
||||
accent-inactive = 282a36
|
||||
banner = 50fa7b
|
||||
border-active = 50fa7b
|
||||
border-inactive = 44475a
|
||||
header = 44475a
|
||||
highlight = 44475a
|
||||
main = 282a36
|
||||
notification = 8be9fd
|
||||
notification-error = ff5555
|
||||
subtext = 6272a4
|
||||
text = f8f8f2
|
||||
|
||||
[Gruvbox]
|
||||
;https://github.com/morhetz/gruvbox/
|
||||
accent = 98971a
|
||||
accent-active = b8bb26
|
||||
accent-inactive = 282828
|
||||
banner = b8bb26
|
||||
border-active = b8bb26
|
||||
border-inactive = 3c3836
|
||||
header = 665c54
|
||||
highlight = 7c6f64
|
||||
main = 282828
|
||||
notification = 458588
|
||||
notification-error = cc241d
|
||||
subtext = bdae93
|
||||
text = fbf1c7
|
||||
|
||||
[Kanagawa]
|
||||
;https://github.com/rebelot/kanagawa.nvim
|
||||
accent = 76946A
|
||||
accent-active = 98BB6C
|
||||
accent-inactive = 1F1F28
|
||||
banner = 98BB6C
|
||||
border-active = 98BB6C
|
||||
border-inactive = 2A2A37
|
||||
header = 54546D
|
||||
highlight = 363646
|
||||
main = 1F1F28
|
||||
notification = 7E9CD8
|
||||
notification-error = E82424
|
||||
subtext = C8C093
|
||||
text = DCD7BA
|
||||
|
||||
[Nord]
|
||||
;https://github.com/nordtheme/nord
|
||||
accent = 88c0d0
|
||||
accent-active = 8fbcbb
|
||||
accent-inactive = 2e3440
|
||||
banner = 8fbcbb
|
||||
border-active = 8fbcbb
|
||||
border-inactive = 3b4252
|
||||
header = 4c566a
|
||||
highlight = 4c566a
|
||||
main = 2e3440
|
||||
notification = 5e81ac
|
||||
notification-error = bf616a
|
||||
subtext = d8dee9
|
||||
text = eceff4
|
||||
|
||||
[Rigel]
|
||||
;https://github.com/Rigellute/rigel/
|
||||
accent = 00cccc
|
||||
accent-active = 00ffff
|
||||
accent-inactive = 00384d
|
||||
banner = 00ffff
|
||||
border-active = 00cccc
|
||||
border-inactive = 517f8d
|
||||
header = 517f8d
|
||||
highlight = 00384d
|
||||
main = 002635
|
||||
notification = 7eb2dd
|
||||
notification-error = ff5a67
|
||||
subtext = 77929e
|
||||
text = b7cff9
|
||||
|
||||
[RosePine]
|
||||
;https://github.com/rose-pine/rose-pine-theme
|
||||
accent = ebbcba
|
||||
accent-active = ebbcba
|
||||
accent-inactive = 1f1d2e
|
||||
banner = ebbcba
|
||||
border-active = ebbcba
|
||||
border-inactive = 26233a
|
||||
header = 6e6a86
|
||||
highlight = 403d52
|
||||
main = 191724
|
||||
notification = 31748f
|
||||
notification-error = eb6f92
|
||||
subtext = 908caa
|
||||
text = e0def4
|
||||
|
||||
[RosePineMoon]
|
||||
;https://github.com/rose-pine/rose-pine-theme
|
||||
accent = ea9a97
|
||||
accent-active = ea9a97
|
||||
accent-inactive = 2a273f
|
||||
banner = ea9a97
|
||||
border-active = ea9a97
|
||||
border-inactive = 393552
|
||||
header = 6e6a86
|
||||
highlight = 44415a
|
||||
main = 232136
|
||||
notification = 3e8fb0
|
||||
notification-error = eb6f92
|
||||
subtext = 908caa
|
||||
text = e0def4
|
||||
|
||||
[Solarized]
|
||||
;https://github.com/altercation/solarized
|
||||
accent = 859900
|
||||
accent-active = 859900
|
||||
accent-inactive = 073642
|
||||
banner = 859900
|
||||
border-active = 859900
|
||||
border-inactive = 073642
|
||||
header = 586e75
|
||||
highlight = 073642
|
||||
main = 002b36
|
||||
notification = 268bd2
|
||||
notification-error = dc322f
|
||||
subtext = 586e75
|
||||
text = 839496
|
||||
|
||||
[TokyoNight]
|
||||
;https://github.com/enkia/tokyo-night-vscode-theme
|
||||
accent = 9ece6a
|
||||
accent-active = 9ece6a
|
||||
accent-inactive = 1a1b26
|
||||
banner = 9ece6a
|
||||
border-active = 9ece6a
|
||||
border-inactive = 24283b
|
||||
header = 565f89
|
||||
highlight = 24283b
|
||||
main = 1a1b26
|
||||
notification = 7aa2f7
|
||||
notification-error = f7768e
|
||||
subtext = 565f89
|
||||
text = a9b1d6
|
||||
|
||||
[TokyoNightStorm]
|
||||
;https://github.com/enkia/tokyo-night-vscode-theme
|
||||
accent = 9ece6a
|
||||
accent-active = 9ece6a
|
||||
accent-inactive = 24283b
|
||||
banner = 9ece6a
|
||||
border-active = 9ece6a
|
||||
border-inactive = 414868
|
||||
header = 9aa5ce
|
||||
highlight = 414868
|
||||
main = 24283b
|
||||
notification = 7aa2f7
|
||||
notification-error = f7768e
|
||||
subtext = 9aa5ce
|
||||
text = c0caf5
|
||||
BIN
text/screenshots/CatppuccinLatte.png
Normal file
BIN
text/screenshots/CatppuccinLatte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
text/screenshots/CatppuccinMacchiato.png
Normal file
BIN
text/screenshots/CatppuccinMacchiato.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
text/screenshots/CatppuccinMocha.png
Normal file
BIN
text/screenshots/CatppuccinMocha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
text/screenshots/Dracula.png
Normal file
BIN
text/screenshots/Dracula.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
text/screenshots/Gruvbox.png
Normal file
BIN
text/screenshots/Gruvbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
text/screenshots/Kanagawa.png
Normal file
BIN
text/screenshots/Kanagawa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
text/screenshots/Nord.png
Normal file
BIN
text/screenshots/Nord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
text/screenshots/Rigel.png
Normal file
BIN
text/screenshots/Rigel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
text/screenshots/RosePine.png
Normal file
BIN
text/screenshots/RosePine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
text/screenshots/RosePineMoon.png
Normal file
BIN
text/screenshots/RosePineMoon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
text/screenshots/Solarized.png
Normal file
BIN
text/screenshots/Solarized.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
text/screenshots/Spicetify.png
Normal file
BIN
text/screenshots/Spicetify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
text/screenshots/Spotify.png
Normal file
BIN
text/screenshots/Spotify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
text/screenshots/TokyoNight.png
Normal file
BIN
text/screenshots/TokyoNight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
text/screenshots/TokyoNightStorm.png
Normal file
BIN
text/screenshots/TokyoNightStorm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
text/screenshots/winctrl.png
Normal file
BIN
text/screenshots/winctrl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
text/screenshots/withimg.png
Normal file
BIN
text/screenshots/withimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
text/screenshots/withoutimg.png
Normal file
BIN
text/screenshots/withoutimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
664
text/user.css
Normal file
664
text/user.css
Normal file
@ -0,0 +1,664 @@
|
||||
/* ================================
|
||||
ROOT
|
||||
================================ */
|
||||
|
||||
/* import */
|
||||
/* find more in https://fonts.google.com/?category=Monospace&sort=popularity */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Courier+Prime:wght@400;700&family=Cousine:wght@400;700&family=Cutive+Mono&family=DM+Mono:wght@300;400;500&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Nanum+Gothic+Coding:wght@400;700&family=PT+Mono&family=Roboto+Mono:wght@100;200;300;400;500;600;700&family=Share+Tech+Mono&family=Source+Code+Pro:wght@200;300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Ubuntu+Mono:wght@400;700&family=VT323&display=swap");
|
||||
|
||||
/* user settings */
|
||||
:root {
|
||||
--font-family: "DM Mono", monospace;
|
||||
/*
|
||||
--font-family: 'Anonymous Pro', monospace;
|
||||
--font-family: 'Courier Prime', monospace;
|
||||
--font-family: 'Cousine', monospace;
|
||||
--font-family: 'Cutive Mono', monospace;
|
||||
--font-family: 'DM Mono', monospace;
|
||||
--font-family: 'Fira Mono', monospace;
|
||||
--font-family: 'IBM Plex Mono', monospace;
|
||||
--font-family: 'Inconsolata', monospace;
|
||||
--font-family: 'Nanum Gothic Coding', monospace;
|
||||
--font-family: 'PT Mono', monospace;
|
||||
--font-family: 'Roboto Mono', monospace;
|
||||
--font-family: 'Share Tech Mono', monospace;
|
||||
--font-family: 'Source Code Pro', monospace;
|
||||
--font-family: 'Space Mono', monospace;
|
||||
--font-family: 'Ubuntu Mono', monospace;
|
||||
--font-family: 'VT323', monospace;
|
||||
*/
|
||||
--font-size: 14px;
|
||||
--font-weight: 400; /* 200 : 900 */
|
||||
--line-height: 1.2;
|
||||
|
||||
--display-images: none; /* none | block */
|
||||
|
||||
--border-radius: 0px;
|
||||
--border-width: 1px;
|
||||
--border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
|
||||
}
|
||||
|
||||
/* font */
|
||||
* {
|
||||
font-family: var(--font-family) !important;
|
||||
font-size: var(--font-size) !important;
|
||||
font-weight: var(--font-weight) !important;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* images */
|
||||
img:not(.main-trackList-playingIcon) {
|
||||
display: var(--display-images) !important;
|
||||
}
|
||||
.main-coverSlotCollapsed-container,
|
||||
.under-main-view,
|
||||
.playlist-playlist-playlistImageContainer,
|
||||
.main-entityHeader-creatorWrapper .main-avatar-avatar,
|
||||
.main-entityHeader-imageContainer,
|
||||
.profile-userOverview-imageContainer {
|
||||
display: var(--display-images);
|
||||
}
|
||||
|
||||
/* fix */
|
||||
.Root__top-container {
|
||||
--panel-gap: 16px !important;
|
||||
}
|
||||
.Root__main-view {
|
||||
overflow: visible;
|
||||
}
|
||||
.main-view-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-topBar-container {
|
||||
margin: 2px;
|
||||
width: 99.5%;
|
||||
}
|
||||
.main-topBar-background,
|
||||
.main-topBar-overlay,
|
||||
.main-home-homeHeader {
|
||||
background-color: var(--spice-main) !important;
|
||||
background-image: none;
|
||||
}
|
||||
/* .main-rootlist-wrapper,
|
||||
.main-rootlist-topSentinel,
|
||||
.main-rootlist-bottomSentinel,
|
||||
.main-rootlist-topSentinel div,
|
||||
.main-rootlist-bottomSentinel div {
|
||||
height: auto !important;
|
||||
contain: unset;
|
||||
} */
|
||||
.main-trackList-rowPlayCount {
|
||||
width: 17ch;
|
||||
}
|
||||
.LayoutResizer__resize-bar {
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
/* 1.2.11 backwards compatibility - for linux */
|
||||
/* pane borders */
|
||||
.main-yourLibraryX-entryPoints,
|
||||
.Root__main-view,
|
||||
.Root__now-playing-bar,
|
||||
.Root__right-sidebar > div:nth-child(2) {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-inactive);
|
||||
border-radius: var(--border-radius) !important;
|
||||
background-color: var(--spice-main) !important;
|
||||
}
|
||||
.main-yourLibraryX-entryPoints:hover,
|
||||
.Root__main-view:hover,
|
||||
.Root__now-playing-bar:hover,
|
||||
.Root__right-sidebar > div:nth-child(2) {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-active);
|
||||
}
|
||||
.main-nowPlayingBar-nowPlayingBar {
|
||||
padding: 8px 8px 32px 8px !important;
|
||||
height: 96px !important;
|
||||
}
|
||||
.Root__nav-bar {
|
||||
gap: var(--panel-gap) !important;
|
||||
}
|
||||
.spotify__os--is-linux .Root__top-container {
|
||||
padding-top: var(--panel-gap) !important;
|
||||
}
|
||||
|
||||
/* recolor */
|
||||
:root {
|
||||
--spice-main-elevated: var(--spice-main);
|
||||
--spice-highlight-elevated: var(--spice-highlight);
|
||||
--spice-sidebar: var(--spice-main);
|
||||
--spice-player: var(--spice-main);
|
||||
--spice-card: var(--spice-main);
|
||||
--spice-shadow: var(--spice-main);
|
||||
--spice-selected-row: var(--spice-subtext);
|
||||
--spice-button: var(--spice-accent);
|
||||
--spice-button-active: var(--spice-accent-active);
|
||||
--spice-button-disabled: var(--spice-accent-inactive);
|
||||
--spice-tab-active: var(--spice-main);
|
||||
--spice-rgb-main-elevated: var(--spice-rgb-main);
|
||||
--spice-rgb-highlight-elevated: var(--spice-rgb-highlight);
|
||||
--spice-rgb-sidebar: var(--spice-rgb-main);
|
||||
--spice-rgb-player: var(--spice-rgb-main);
|
||||
--spice-rgb-card: var(--spice-rgb-main);
|
||||
--spice-rgb-shadow: var(--spice-rgb-main);
|
||||
--spice-rgb-selected-row: var(--spice-rgb-subtext);
|
||||
--spice-rgb-button: var(--spice-rgb-accent);
|
||||
--spice-rgb-button-active: var(--spice-rgb-accent-active);
|
||||
--spice-rgb-button-disabled: var(--spice-rgb-accent-inactive);
|
||||
--spice-rgb-tab-active: var(--spice-rgb-main);
|
||||
}
|
||||
.Root__top-container,
|
||||
.Root__nav-bar {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.main-playPauseButton-button {
|
||||
background-color: transparent;
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
.main-playPauseButton-button:focus,
|
||||
.main-playPauseButton-button:hover {
|
||||
transform: none;
|
||||
color: var(--spice-text);
|
||||
}
|
||||
#_R_G *:not([fill="none"]) {
|
||||
fill: var(--spice-button-active) !important;
|
||||
}
|
||||
#_R_G *:not([stroke="none"]) {
|
||||
stroke: var(--spice-button-active);
|
||||
}
|
||||
.main-trackList-playingIcon {
|
||||
filter: grayscale(1) opacity(0.2)
|
||||
drop-shadow(0 0 0 var(--spice-button-active))
|
||||
drop-shadow(0 0 0 var(--spice-button-active))
|
||||
drop-shadow(0 0 0 var(--spice-button-active));
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
.main-entityHeader-background,
|
||||
.main-entityHeader-backgroundColor,
|
||||
.main-entityHeader-overlay,
|
||||
.main-actionBarBackground-background {
|
||||
background-color: transparent !important;
|
||||
background: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.progress-bar {
|
||||
--fg-color: var(--spice-button-active);
|
||||
--bg-color: var(--spice-button-disabled);
|
||||
}
|
||||
.playback-bar__progress-time-elapsed,
|
||||
.main-playbackBarRemainingTime-container {
|
||||
mix-blend-mode: difference;
|
||||
color: var(--spice-button-active);
|
||||
}
|
||||
.main-trackList-placeholder,
|
||||
.Pns6F5g4OEwEpdmOWTLg {
|
||||
opacity: 0.05;
|
||||
filter: contrast(0.1);
|
||||
}
|
||||
.artist-artistAbout-container.artist-artistAbout-backgroundImage
|
||||
.artist-artistAbout-content
|
||||
> div {
|
||||
color: #fff;
|
||||
}
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
||||
background: var(--spice-main);
|
||||
}
|
||||
.main-trackList-trackListRow:focus-within,
|
||||
.main-trackList-trackListRow:hover,
|
||||
.main-contextMenu-menuItemButton:hover,
|
||||
.main-contextMenu-menuItemButton:not([aria-checked="true"]):focus,
|
||||
.BoxComponent-group-naked-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px:hover::after,
|
||||
.main-card-card:hover,
|
||||
.main-card-card[data-context-menu-open="true"] {
|
||||
background-color: rgba(var(--spice-rgb-highlight), 0.5);
|
||||
}
|
||||
.main-trackList-trackListRow.main-trackList-selected,
|
||||
.main-trackList-trackListRow.main-trackList-selected:hover,
|
||||
.BoxComponent-group-tinted-listRow-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px,
|
||||
.BoxComponent-group-tinted-listRow-isInteractive-hasFocus-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px {
|
||||
background-color: var(--spice-highlight);
|
||||
}
|
||||
.x-entityImage-imageContainer,
|
||||
.x-entityImage-imageContainer div {
|
||||
background-color: var(--spice-border-inactive);
|
||||
}
|
||||
.main-userWidget-boxCondensed,
|
||||
.main-userWidget-boxCondensed:focus-visible,
|
||||
.main-userWidget-boxCondensed:hover,
|
||||
.main-userWidget-boxCondensed[data-context-menu-open="true"] {
|
||||
background-color: var(--spice-border-inactive) !important;
|
||||
}
|
||||
.main-cardImage-imageWrapper {
|
||||
--card-color: var(--spice-border-inactive);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.LayoutResizer__inline-end {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* pane borders */
|
||||
.main-yourLibraryX-entryPoints,
|
||||
.Root__main-view,
|
||||
.Root__now-playing-bar,
|
||||
.Root__right-sidebar aside {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-inactive);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.main-yourLibraryX-entryPoints:hover,
|
||||
.Root__main-view:hover,
|
||||
.Root__now-playing-bar:hover,
|
||||
.Root__right-sidebar aside:hover {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-active);
|
||||
}
|
||||
|
||||
/* pane headers */
|
||||
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before,
|
||||
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before,
|
||||
.Root__main-view::before,
|
||||
.Root__now-playing-bar::before,
|
||||
.Root__right-sidebar::before {
|
||||
color: var(--spice-header);
|
||||
position: absolute;
|
||||
margin: -10px 4px;
|
||||
background: var(--spice-main);
|
||||
padding: 0 3px;
|
||||
z-index: 9;
|
||||
}
|
||||
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(1)::before {
|
||||
content: "Pages";
|
||||
}
|
||||
.Root__nav-bar .main-yourLibraryX-entryPoints:nth-child(2)::before {
|
||||
content: "Library";
|
||||
}
|
||||
.Root__main-view::before {
|
||||
content: "Main";
|
||||
}
|
||||
.Root__now-playing-bar::before {
|
||||
content: "Playing";
|
||||
}
|
||||
/* .Root__right-sidebar::before {
|
||||
content: 'Sidebar';
|
||||
} */
|
||||
.Root__nav-bar .main-yourLibraryX-entryPoints:hover::before,
|
||||
.Root__main-view:hover::before,
|
||||
.Root__now-playing-bar:hover::before,
|
||||
.Root__right-sidebar:hover::before {
|
||||
color: var(--spice-border-active);
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle {
|
||||
border-radius: var(--border-radius);
|
||||
width: 2px;
|
||||
}
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle:hover {
|
||||
border-radius: var(--border-radius);
|
||||
width: 6px;
|
||||
}
|
||||
.main-view-container__scroll-node > .os-scrollbar-vertical {
|
||||
top: 5px !important;
|
||||
right: 5px !important;
|
||||
}
|
||||
.os-scrollbar-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* context menus */
|
||||
.main-contextMenu-menu {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-active);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* modals */
|
||||
.GenericModal {
|
||||
border: var(--border-width) var(--border-style) var(--spice-border-active);
|
||||
border-radius: var(--border-radius);
|
||||
outline: 14px solid var(--spice-main) !important;
|
||||
}
|
||||
.GenericModal::before {
|
||||
content: "Modal";
|
||||
color: var(--spice-border-active);
|
||||
position: absolute;
|
||||
margin: -10px 4px;
|
||||
background: var(--spice-main);
|
||||
padding: 0 3px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
LEFT SIDEBAR
|
||||
================================ */
|
||||
|
||||
/* pages pane */
|
||||
.main-yourLibraryX-navLink {
|
||||
height: 24px;
|
||||
gap: 8px;
|
||||
}
|
||||
.main-yourLibraryX-navLink .home-icon,
|
||||
.main-yourLibraryX-navLink .search-icon,
|
||||
.main-yourLibraryX-navLinkActive .home-active-icon,
|
||||
.main-yourLibraryX-navLinkActive .search-active-icon,
|
||||
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper > span {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
/* library pane */
|
||||
.main-yourLibraryX-isScrolled {
|
||||
box-shadow: none;
|
||||
}
|
||||
.Wrapper-md-leading {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.main-yourLibraryX-listRowSubtitle {
|
||||
display: none;
|
||||
}
|
||||
.main-yourLibraryX-listItemGroup {
|
||||
grid-template-rows: 24px !important;
|
||||
min-block-size: auto;
|
||||
padding: 4px 18px;
|
||||
}
|
||||
.x-entityImage-imageContainer,
|
||||
.x-entityImage-imageContainer div {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.x-entityImage-imagePlaceholder {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
/* sidebar config */
|
||||
.main-yourLibraryX-entryPoints:first-child:has(
|
||||
.main-yourLibraryX-navItems:empty
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
MAIN VIEW
|
||||
================================ */
|
||||
|
||||
/* check out a cool project: https://github.com/Rigellute/spotify-tui
|
||||
|
||||
_________ ____ / /_(_) __/_ __ / /___ __(_)\A
|
||||
/ ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A
|
||||
(__ ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A
|
||||
/____/ .___/\\____/\\__/_/_/ \\__, / \\__/\\__,_/_/\A
|
||||
/_/ /____/
|
||||
|
||||
*/
|
||||
.main-home-home::before {
|
||||
content: " _________ ____ / /_(_) __/_ __ / /___ __(_)\A / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A (__ ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A /____/ .___/\\____/\\__/_/_/ \\__, / \\__/\\__,_/_/\A /_/ /____/ ";
|
||||
white-space: pre-wrap;
|
||||
padding: 32px;
|
||||
color: var(--spice-banner);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.main-entityHeader-headerText::before {
|
||||
content: "────█▀█▄▄▄▄─────██▄\A────█▀▄▄▄▄█─────█▀▀█\A─▄▄▄█─────█──▄▄▄█\A██▀▄█─▄██▀█─███▀█\A─▀▀▀──▀█▄█▀─▀█▄█▀\A";
|
||||
white-space: pre-wrap;
|
||||
padding-bottom: 32px;
|
||||
color: var(--spice-banner);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* top bar */
|
||||
.queue-tabBar-active {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.main-topBar-historyButtons .main-topBar-button,
|
||||
.main-topBar-buddyFeed {
|
||||
background-color: transparent;
|
||||
}
|
||||
.main-topBar-button::before {
|
||||
content: "<";
|
||||
}
|
||||
.main-topBar-button.main-topBar-forward::before {
|
||||
content: ">";
|
||||
}
|
||||
.main-topBar-button > svg,
|
||||
.main-topBar-button.main-topBar-forward > svg {
|
||||
display: none;
|
||||
}
|
||||
.main-topBar-topbarContent {
|
||||
gap: 24px;
|
||||
}
|
||||
.x-searchInput-searchInputInput {
|
||||
border-radius: var(--border-radius);
|
||||
background-color: transparent;
|
||||
}
|
||||
.x-searchInput-searchInputInput:hover,
|
||||
.x-searchInput-searchInputInput:focus {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--spice-button-active);
|
||||
background-color: transparent;
|
||||
}
|
||||
.search-searchCategory-catergoryGrid * {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* headers */
|
||||
.main-entityHeader-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
transparent,
|
||||
rgba(var(--spice-rgb-main, 0.5)) 75%,
|
||||
var(--spice-main)
|
||||
);
|
||||
}
|
||||
|
||||
/* compact tracklists */
|
||||
.main-trackList-trackListRow {
|
||||
height: 32px;
|
||||
}
|
||||
.main-trackList-rowMainContent {
|
||||
grid-template: "title badges subtitle" / auto 1fr;
|
||||
}
|
||||
.main-trackList-rowImage {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.main-trackList-rowTitle::after {
|
||||
content: " |";
|
||||
color: var(--spice-highlight);
|
||||
}
|
||||
.main-trackList-number,
|
||||
.main-trackList-icon {
|
||||
top: unset;
|
||||
}
|
||||
|
||||
/* lyrics page */
|
||||
.lyrics-lyrics-background {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.lyrics-lyrics-contentContainer {
|
||||
justify-content: start;
|
||||
}
|
||||
.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
|
||||
--lyrics-color-active: var(--spice-text) !important;
|
||||
--lyrics-color-inactive: var(--spice-subtext) !important;
|
||||
--lyrics-color-passed: var(--spice-subtext) !important;
|
||||
--lyrics-color-messaging: var(--spice-subtext) !important;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
|
||||
opacity: 0.7;
|
||||
transition: none;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active:not(
|
||||
:empty
|
||||
) {
|
||||
background-color: var(--lyrics-color-background);
|
||||
color: var(--spice-main);
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric:not(:empty)::before {
|
||||
content: ">> ";
|
||||
opacity: 0;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active:not(
|
||||
:empty
|
||||
)::before {
|
||||
content: ">> ";
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
PLAYBACK BAR
|
||||
================================ */
|
||||
|
||||
/* playback bar itself */
|
||||
.main-nowPlayingBar-nowPlayingBar {
|
||||
padding: 8px 8px 32px 8px;
|
||||
height: 96px;
|
||||
}
|
||||
.playback-bar {
|
||||
position: absolute;
|
||||
left: calc(var(--panel-gap) + 8px);
|
||||
bottom: calc(var(--panel-gap) + 8px);
|
||||
width: calc(100vw - var(--panel-gap) * 2 - 16px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* playback time indicators */
|
||||
.playback-bar__progress-time-elapsed {
|
||||
pointer-events: none;
|
||||
}
|
||||
.playback-bar__progress-time-elapsed::after {
|
||||
content: " /";
|
||||
}
|
||||
.playback-bar__progress-time-elapsed,
|
||||
.main-playbackBarRemainingTime-container {
|
||||
z-index: 9;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
/* playback seek bar */
|
||||
.playback-bar > .playback-progressbar {
|
||||
position: absolute;
|
||||
}
|
||||
.progress-bar {
|
||||
--progress-bar-height: 16px;
|
||||
--progress-bar-radius: var(--border-radius);
|
||||
}
|
||||
.progress-bar__slider {
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* cover art */
|
||||
.main-nowPlayingWidget-coverArt .cover-art {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
[dir="ltr"] .main-coverSlotCollapsed-navAltContainer {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
[dir="ltr"]
|
||||
.main-nowPlayingWidget-coverExpanded
|
||||
.main-coverSlotCollapsed-container.main-coverSlotCollapsed-navAltContainer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* volume bar */
|
||||
.volume-bar__slider-container .x-progressBar-fillColor,
|
||||
.volume-bar__slider-container
|
||||
.playback-progressbar-isInteractive
|
||||
.DuvrswZugGajIFNXObAr
|
||||
.x-progressBar-fillColor,
|
||||
.volume-bar__slider-container
|
||||
.playback-progressbar-isInteractive
|
||||
.progress-bar:focus
|
||||
.x-progressBar-fillColor,
|
||||
.volume-bar__slider-container
|
||||
.playback-progressbar-isInteractive
|
||||
.volume-bar__slider-container
|
||||
.progress-bar:hover
|
||||
.x-progressBar-fillColor,
|
||||
.volume-bar__slider-container
|
||||
.playback-progressbar-isInteractive:focus-within
|
||||
.x-progressBar-fillColor {
|
||||
height: 9px;
|
||||
background-color: transparent;
|
||||
border-bottom: 2px dashed var(--fg-color);
|
||||
}
|
||||
.volume-bar__slider-container .x-progressBar-progressBarBg {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* player controls */
|
||||
.player-controls__buttons {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.player-controls__buttons,
|
||||
.main-nowPlayingBar-extraControls {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.player-controls__buttons:hover,
|
||||
.main-nowPlayingBar-extraControls:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.main-shuffleButton-button::before {
|
||||
content: "\21C4";
|
||||
}
|
||||
.main-skipBackButton-button::before {
|
||||
content: "\25C1";
|
||||
}
|
||||
.main-playPauseButton-button[aria-label="Play"]::before {
|
||||
content: "\25B6";
|
||||
}
|
||||
.main-playPauseButton-button[aria-label="Pause"]::before {
|
||||
content: "\275A\275A";
|
||||
}
|
||||
.main-skipForwardButton-button::before {
|
||||
content: "\25B7";
|
||||
}
|
||||
.main-repeatButton-button::before {
|
||||
content: "\21BB";
|
||||
}
|
||||
.main-shuffleButton-button > svg,
|
||||
.main-skipBackButton-button > svg,
|
||||
.main-playPauseButton-button > svg,
|
||||
.main-skipForwardButton-button > svg,
|
||||
.main-repeatButton-button > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* connect bar */
|
||||
.nav-ylx .main-connectBar-connectBar {
|
||||
position: absolute;
|
||||
background-color: transparent !important;
|
||||
color: var(--spice-accent-active) !important;
|
||||
mix-blend-mode: difference;
|
||||
pointer-events: none;
|
||||
right: var(--panel-gap);
|
||||
bottom: var(--panel-gap);
|
||||
padding: 17px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.main-devicePicker-indicator.main-devicePicker-connected {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user