mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
feat(Matte): add ylx support, new color schemes, fix (#940)
This commit is contained in:
darkthemer
GitHub
parent
862a6382be
commit
9c1aec291f
@ -1,32 +1,89 @@
|
||||
# Matte
|
||||
|
||||
## Description
|
||||
|
||||
a Spicetify theme which features a distinct top bar, quick-to-edit CSS variables, and color schemes from Windows visual styles by KDr3w
|
||||
|
||||
## Credits
|
||||
|
||||
- Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852) and their [other themes](https://www.deviantart.com/kdr3w/gallery/68078309/windows-10-themes)
|
||||
|
||||
- Created by [darkthemer](https://github.com/darkthemer)
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
### Matte (Old UI)
|
||||
|
||||
## More
|
||||
|
||||
|
||||
|
||||
|
||||
### Description
|
||||
Has a neat color pallete and a much cleaner interface
|
||||
### Matte (YLX UI)
|
||||
|
||||
|
||||
|
||||
### Periwinkle
|
||||
|
||||
|
||||
|
||||
### Periwinkle-Dark
|
||||
|
||||
|
||||
|
||||
### Porcelain
|
||||
|
||||
|
||||
|
||||
### Gray-Dark1
|
||||
|
||||
|
||||
|
||||
### Gray-Dark2
|
||||
|
||||
|
||||
|
||||
### Gray-Dark3
|
||||
|
||||
|
||||
|
||||
### Gray
|
||||
|
||||
|
||||
|
||||
### Gray-Light
|
||||
|
||||
|
||||
|
||||
### Notes
|
||||
Check the very top of `user.css` for quick configs
|
||||
|
||||
For Windows users, here's how to make the window controls' background match with the topbar background:
|
||||
Put this snippet into your `user.css`
|
||||
- Supports both Old UI and Your Library X UI
|
||||
|
||||
- Check the very top of `user.css` for quick configs
|
||||
|
||||
|
||||
- For Windows users, here's how to make the window controls' background match with the topbar background:
|
||||
Put this snippet into your `user.css`
|
||||
|
||||
```css
|
||||
/* window controls background */
|
||||
.Root__top-bar {
|
||||
background-image: linear-gradient(#4a5b6b, #4a5b6b); /* depends on the color */
|
||||
background-repeat: no-repeat;
|
||||
background-position: top right;
|
||||
background-size: 135px 31px; /* depends on the set page zoom - this value is for 100% */
|
||||
/* 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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Credits
|
||||
Based on [Matte by KDr3w](https://www.deviantart.com/kdr3w/art/Matte-758699852)
|
||||
Created by [darkthemer](https://github.com/darkthemer)
|
||||
|
||||
|
||||
553
Matte/color.ini
553
Matte/color.ini
@ -1,35 +1,522 @@
|
||||
;COLORS KEYS 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, mini infos, seekbar and volume bar background
|
||||
; topbar = Topbar background
|
||||
; main = Main field background
|
||||
; sidebar = Sidebar background
|
||||
; player = Player background
|
||||
; card = Card and selected song background on hover
|
||||
; shadow = Card and context menu drop shadow
|
||||
; selected-row = Caption and playlist details, download and options buttons
|
||||
; button = Accent color
|
||||
; button-active = Accent color on select and hover
|
||||
; button-disabled = Scrollbar color, tab background on hover, off toggle background
|
||||
; tab-active = Tabbar active item background in header
|
||||
; notification = Notification toast
|
||||
; notification-error = Notification error toast
|
||||
; misc = Miscellaneous
|
||||
; COLORS' KEY DESCRIPTIONS
|
||||
|
||||
; topbar = background
|
||||
; topbar-text = title, enabled history button
|
||||
; topbar-subtext = unselected tabs, disabled history button
|
||||
; tab-active = selected tab item, search bar background
|
||||
; tab-active-text = selected tab item, search bar text
|
||||
; tab-hover = hovered tab item, hovered search bar
|
||||
; topbar-border = bottom border
|
||||
|
||||
; sidebar = background
|
||||
; sidebar-text = primary text (home, search, library, playlists, etc)
|
||||
; link-hover-text = hovered link item text
|
||||
; link-active = selected link item background
|
||||
; link-active-text = selected link item text
|
||||
; sidebar-border = left or right border
|
||||
|
||||
; main = background
|
||||
; text = primary text (heading, title, some name, song count, button text, etc)
|
||||
; subtext = secondary text (description, some name, duration, tracklist album, play count, etc)
|
||||
; selected-row = some details, border, button (heart, download, options in playlist or album)
|
||||
|
||||
; player = background
|
||||
; player-text = song title, hovered text
|
||||
; player-subtext = artist name, time duration
|
||||
; player-selected-row = progress bar (background, duration, volume), button (playback, extra)
|
||||
; player-border = top border
|
||||
|
||||
; button = button (lyrics, queue in player bar, on toggle in settings)
|
||||
; button-active = button (play-pause button, current song title in queue, active heart, hovered button and toggle)
|
||||
; button-disabled = button (off toggle and dropdown menu in settings)
|
||||
; scrollbar = default
|
||||
; scrollbar-hover = hovered
|
||||
; context-menu = background
|
||||
; context-menu-text = primary text
|
||||
; context-menu-hover = hovered item backgrond
|
||||
; card = hovered card, tracks in queue or playlist, etc
|
||||
; shadow = context menu shadow, popup background dim, popup button background (close, carousel), toast shadow
|
||||
; notification = toast background, private session indicator
|
||||
; notification-error = error toast background
|
||||
; misc = idk
|
||||
|
||||
; main-elevated = ylx searchbar
|
||||
; highlight-elevated = ylx hovered searchbar
|
||||
; highlight = ylx hovered playlist
|
||||
|
||||
[matte]
|
||||
text = FFFFFF
|
||||
subtext = 7e8596
|
||||
topbar = 232b32
|
||||
main = 1c2228
|
||||
sidebar = 181e23
|
||||
player = 141b1f
|
||||
card = 232d35
|
||||
shadow = 000000
|
||||
selected-row = 7e8596
|
||||
button = 01BFA5
|
||||
button-active = 01BFA5
|
||||
button-disabled = 39454f
|
||||
tab-active = 1c2228
|
||||
notification = 1c2228
|
||||
notification-error = e22134
|
||||
misc = 39454f
|
||||
; topbar
|
||||
topbar = 232b32
|
||||
topbar-text = d0d2d9
|
||||
topbar-subtext = 4a5460
|
||||
tab-active = 1c2228
|
||||
tab-active-text = d0d2d9
|
||||
tab-hover = 131b20
|
||||
topbar-border = 232b32
|
||||
|
||||
; sidebars
|
||||
sidebar = 181e23
|
||||
sidebar-text = 7e8596
|
||||
link-active-text = 181e23
|
||||
sidebar-border = 181e23
|
||||
|
||||
; main view
|
||||
main = 1c2228
|
||||
text = b9bcc6
|
||||
subtext = 7e8596
|
||||
selected-row = 5b6b79
|
||||
|
||||
; player bar
|
||||
player = 141b1f
|
||||
player-text = 969aa9
|
||||
player-subtext = 6d8392
|
||||
player-selected-row = 6d8392
|
||||
player-border = 141b1f
|
||||
|
||||
; accent colors
|
||||
link-hover-text = 009587
|
||||
link-active = 009587
|
||||
button = 01bfa5
|
||||
button-active = 01bfa5
|
||||
scrollbar-hover = 009688
|
||||
|
||||
; others
|
||||
button-disabled = 2c353e
|
||||
scrollbar = 39454f
|
||||
context-menu = 232b32
|
||||
context-menu-text = d0d2d9
|
||||
context-menu-hover = 343e47
|
||||
card = 232d35
|
||||
shadow = 101418
|
||||
notification = 1c2228
|
||||
notification-error = b73434
|
||||
misc = 39454f
|
||||
|
||||
; ylx
|
||||
main-elevated = 1c2228
|
||||
highlight-elevated = 232d35
|
||||
highlight = 20272d
|
||||
|
||||
[periwinkle]
|
||||
; topbar
|
||||
topbar-text = ffffff
|
||||
topbar-subtext = aaa5e4
|
||||
tab-active-text = d0ccff
|
||||
tab-hover = ffffff
|
||||
|
||||
; sidebars
|
||||
sidebar = ffffff
|
||||
sidebar-text = 010101
|
||||
link-active-text = ffffff
|
||||
sidebar-border = ffffff
|
||||
|
||||
; main view
|
||||
main = ffffff
|
||||
text = 010101
|
||||
subtext = 6d6d6d
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = ffffff
|
||||
player-text = 010101
|
||||
player-subtext = 6d6d6d
|
||||
player-selected-row = 6d6d6d
|
||||
player-border = d9d9d9
|
||||
|
||||
; accent colors
|
||||
topbar = 7269d2
|
||||
tab-active = 7269d2
|
||||
topbar-border = 7269d2
|
||||
link-hover-text = 8c84da
|
||||
link-active = 7269d2
|
||||
button = 7269d2
|
||||
button-active = 8c84da
|
||||
scrollbar-hover = 8a82e0
|
||||
context-menu-hover = 7269d2
|
||||
|
||||
; others
|
||||
button-disabled = ebebeb
|
||||
scrollbar = d9d9d9
|
||||
context-menu = ffffff
|
||||
context-menu-text = 010101
|
||||
card = ebebeb
|
||||
shadow = 363163
|
||||
notification = ffffff
|
||||
notification-error = ff4264
|
||||
misc = 6d6d6d
|
||||
|
||||
; ylx
|
||||
main-elevated = ffffff
|
||||
highlight-elevated = ebebeb
|
||||
highlight = ebebeb
|
||||
|
||||
[periwinkle-dark]
|
||||
; topbar
|
||||
topbar-text = f6f6f6
|
||||
topbar-subtext = aaa5e4
|
||||
tab-active-text = d0ccff
|
||||
tab-hover = 383838
|
||||
|
||||
; sidebars
|
||||
sidebar = 383838
|
||||
sidebar-text = d0d0d0
|
||||
link-hover-text = 8c84da
|
||||
link-active-text = f6f6f6
|
||||
sidebar-border = 383838
|
||||
|
||||
; main view
|
||||
main = 383838
|
||||
text = f6f6f6
|
||||
subtext = d0d0d0
|
||||
selected-row = d0d0d0
|
||||
|
||||
; player bar
|
||||
player = 343434
|
||||
player-text = f6f6f6
|
||||
player-subtext = d0d0d0
|
||||
player-selected-row = d0d0d0
|
||||
player-border = 2e2e2e
|
||||
|
||||
; accent colors
|
||||
topbar = 7269d2
|
||||
tab-active = 7269d2
|
||||
topbar-border = 7269d2
|
||||
link-active = 7269d2
|
||||
button = 7269d2
|
||||
button-active = 8c84da
|
||||
scrollbar-hover = 8a82e0
|
||||
context-menu-hover = 7269d2
|
||||
|
||||
; others
|
||||
button-disabled = 444444
|
||||
scrollbar = 494949
|
||||
context-menu = 343434
|
||||
context-menu-text = f6f6f6
|
||||
card = 444444
|
||||
shadow = 2e2e2e
|
||||
notification = 343434
|
||||
notification-error = ff4264
|
||||
misc = d0d0d0
|
||||
|
||||
; ylx
|
||||
main-elevated = 383838
|
||||
highlight-elevated = 444444
|
||||
highlight = 444444
|
||||
|
||||
[porcelain]
|
||||
; topbar
|
||||
topbar = e8eaf0
|
||||
topbar-text = 242b31
|
||||
topbar-subtext = 899099
|
||||
tab-active = e8eaf0
|
||||
tab-active-text = 242b31
|
||||
tab-hover = ffffff
|
||||
topbar-border = e8eaf0
|
||||
|
||||
; sidebars
|
||||
sidebar = dfe1e8
|
||||
sidebar-text = 3f4b56
|
||||
link-hover-text = 6a7495
|
||||
link-active-text = dfe1e8
|
||||
sidebar-border = dfe1e8
|
||||
|
||||
; main view
|
||||
main = f9f9fb
|
||||
text = 3f4b56
|
||||
subtext = 70828f
|
||||
selected-row = 70828f
|
||||
|
||||
; player bar
|
||||
player = d5d8df
|
||||
player-text = 364049
|
||||
player-subtext = 4e5a67
|
||||
player-selected-row = 4e5a67
|
||||
player-border = cdd0d8
|
||||
|
||||
; accent colors
|
||||
link-active = 43a8ff
|
||||
button = 43a8ff
|
||||
button-active = 038aff
|
||||
scrollbar-hover = 43a8ff
|
||||
|
||||
; others
|
||||
button-disabled = c0c5ce
|
||||
scrollbar = d6dbdf
|
||||
context-menu = e8eaf0
|
||||
context-menu-text = 2f353c
|
||||
context-menu-hover = ced2db
|
||||
card = e3e6ea
|
||||
shadow = 6d6e71
|
||||
notification = f9f9fb
|
||||
notification-error = e6395f
|
||||
misc = 4e5a67
|
||||
|
||||
; ylx
|
||||
main-elevated = f9f9fb
|
||||
highlight-elevated = e3e6ea
|
||||
highlight = ced1db
|
||||
|
||||
[gray-dark1]
|
||||
; topbar
|
||||
topbar = 191919
|
||||
topbar-text = d4d4d4
|
||||
topbar-subtext = 7a7a7a
|
||||
tab-active = 1f1f1f
|
||||
tab-active-text = d4d4d4
|
||||
tab-hover = 272727
|
||||
topbar-border = 191919
|
||||
|
||||
; sidebars
|
||||
sidebar = 202020
|
||||
sidebar-text = d4d4d4
|
||||
link-hover-text = 6d6d6d
|
||||
link-active = 2d2d2d
|
||||
link-active-text = e8e8e8
|
||||
sidebar-border = 191919
|
||||
|
||||
; main view
|
||||
main = 202020
|
||||
text = d4d4d4
|
||||
subtext = 959595
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = 202020
|
||||
player-text = d4d4d4
|
||||
player-subtext = 959595
|
||||
player-selected-row = 959595
|
||||
player-border = 191919
|
||||
|
||||
; accent colors
|
||||
button-active = 2080df
|
||||
|
||||
; others
|
||||
button = 404040
|
||||
button-disabled = 252525
|
||||
scrollbar = 353535
|
||||
scrollbar-hover = 999999
|
||||
context-menu = 202020
|
||||
context-menu-text = d4d4d4
|
||||
context-menu-hover = 2d2d2d
|
||||
card = 2d2d2d
|
||||
shadow = 0c0c0c
|
||||
notification = 202020
|
||||
notification-error = d32635
|
||||
misc = 959595
|
||||
|
||||
; ylx
|
||||
main-elevated = 202020
|
||||
highlight-elevated = 2d2d2d
|
||||
highlight = 2d2d2d
|
||||
|
||||
[gray-dark2]
|
||||
; topbar
|
||||
topbar = 191919
|
||||
topbar-text = d4d4d4
|
||||
topbar-subtext = 535353
|
||||
tab-active = 191919
|
||||
tab-active-text = d4d4d4
|
||||
tab-hover = 1f1f1f
|
||||
topbar-border = 191919
|
||||
|
||||
; sidebars
|
||||
sidebar = 161616
|
||||
sidebar-text = d4d4d4
|
||||
link-hover-text = 6c6c6c
|
||||
link-active = 1c1c1c
|
||||
link-active-text = d4d4d4
|
||||
sidebar-border = 161616
|
||||
|
||||
; main view
|
||||
main = 202020
|
||||
text = d4d4d4
|
||||
subtext = 959595
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = 1a1a1a
|
||||
player-text = d4d4d4
|
||||
player-subtext = 959595
|
||||
player-selected-row = 959595
|
||||
player-border = 1a1a1a
|
||||
|
||||
; accent colors
|
||||
button-active = 2080df
|
||||
|
||||
; others
|
||||
button = 404040
|
||||
button-disabled = 252525
|
||||
scrollbar = 353535
|
||||
scrollbar-hover = 999999
|
||||
context-menu = 202020
|
||||
context-menu-text = d4d4d4
|
||||
context-menu-hover = 2d2d2d
|
||||
card = 2d2d2d
|
||||
shadow = 0c0c0c
|
||||
notification = 202020
|
||||
notification-error = d32635
|
||||
misc = 959595
|
||||
|
||||
; ylx
|
||||
main-elevated = 202020
|
||||
highlight-elevated = 2d2d2d
|
||||
highlight = 2d2d2d
|
||||
|
||||
[gray-dark3]
|
||||
; topbar
|
||||
topbar = 191919
|
||||
topbar-text = d4d4d4
|
||||
topbar-subtext = 7a7a7a
|
||||
tab-active = 191919
|
||||
tab-active-text = d4d4d4
|
||||
tab-hover = 1f1f1f
|
||||
topbar-border = 191919
|
||||
|
||||
; sidebars
|
||||
sidebar = 131313
|
||||
sidebar-text = d4d4d4
|
||||
link-hover-text = 6c6c6c
|
||||
link-active = 1e1e1e
|
||||
link-active-text = d4d4d4
|
||||
sidebar-border = 131313
|
||||
|
||||
; main view
|
||||
main = 161616
|
||||
text = d4d4d4
|
||||
subtext = 959595
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = 101010
|
||||
player-text = d4d4d4
|
||||
player-subtext = 959595
|
||||
player-selected-row = 959595
|
||||
player-border = 101010
|
||||
|
||||
; accent colors
|
||||
button-active = 2080df
|
||||
|
||||
; others
|
||||
button = 404040
|
||||
button-disabled = 252525
|
||||
scrollbar = 353535
|
||||
scrollbar-hover = 999999
|
||||
context-menu = 202020
|
||||
context-menu-text = d4d4d4
|
||||
context-menu-hover = 2d2d2d
|
||||
card = 2d2d2d
|
||||
shadow = 0c0c0c
|
||||
notification = 202020
|
||||
notification-error = d32635
|
||||
misc = 959595
|
||||
|
||||
; ylx
|
||||
main-elevated = 161616
|
||||
highlight-elevated = 2d2d2d
|
||||
highlight = 2d2d2d
|
||||
|
||||
[gray]
|
||||
; topbar
|
||||
topbar = 404040
|
||||
topbar-text = e9e9e9
|
||||
topbar-subtext = 646464
|
||||
tab-active = 333333
|
||||
tab-active-text = e9e9e9
|
||||
tab-hover = 303030
|
||||
topbar-border = 404040
|
||||
|
||||
; sidebars
|
||||
sidebar = 383838
|
||||
sidebar-text = d4d4d4
|
||||
link-hover-text = e9e9e9
|
||||
link-active = 4c4c4c
|
||||
link-active-text = e9e9e9
|
||||
sidebar-border = 2f2f2f
|
||||
|
||||
; main view
|
||||
main = 383838
|
||||
text = e9e9e9
|
||||
subtext = aaaaaa
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = 343434
|
||||
player-text = d4d4d4
|
||||
player-subtext = 7f7f7f
|
||||
player-selected-row = 7f7f7f
|
||||
player-border = 2e2e2e
|
||||
|
||||
; accent colors
|
||||
button-active = 2888d7
|
||||
|
||||
; others
|
||||
button = 898989
|
||||
button-disabled = 404040
|
||||
scrollbar = 494949
|
||||
scrollbar-hover = a3a3a3
|
||||
context-menu = 383838
|
||||
context-menu-text = d4d4d4
|
||||
context-menu-hover = 4c4c4c
|
||||
card = 4c4c4c
|
||||
shadow = 1e1e1e
|
||||
notification = 383838
|
||||
notification-error = e35b5b
|
||||
misc = 959595
|
||||
|
||||
; ylx
|
||||
main-elevated = 383838
|
||||
highlight-elevated = 4c4c4c
|
||||
highlight = 444444
|
||||
|
||||
[gray-light]
|
||||
; topbar
|
||||
topbar = 404040
|
||||
topbar-text = e9e9e9
|
||||
topbar-subtext = 646464
|
||||
tab-active = 333333
|
||||
tab-active-text = e9e9e9
|
||||
tab-hover = 303030
|
||||
topbar-border = 404040
|
||||
|
||||
; sidebars
|
||||
sidebar = ffffff
|
||||
sidebar-text = 010101
|
||||
link-hover-text = 010101
|
||||
link-active = e1e1e1
|
||||
link-active-text = 010101
|
||||
sidebar-border = e9e9e9
|
||||
|
||||
; main view
|
||||
main = ffffff
|
||||
text = 010101
|
||||
subtext = 6d6d6d
|
||||
selected-row = 6d6d6d
|
||||
|
||||
; player bar
|
||||
player = ffffff
|
||||
player-text = 010101
|
||||
player-subtext = 6d6d6d
|
||||
player-selected-row = 6d6d6d
|
||||
player-border = e9e9e9
|
||||
|
||||
; accent colors
|
||||
button = 2888d7
|
||||
button-active = 2888d7
|
||||
|
||||
; others
|
||||
button-disabled = dfdfdf
|
||||
scrollbar = d9d9d9
|
||||
scrollbar-hover = 4d4d4d
|
||||
context-menu = ffffff
|
||||
context-menu-text = 010101
|
||||
context-menu-hover = ebebeb
|
||||
card = ebebeb
|
||||
shadow = 1e1e1e
|
||||
notification = ffffff
|
||||
notification-error = e35b5b
|
||||
misc = 6d6d6d
|
||||
|
||||
; ylx
|
||||
main-elevated = ffffff
|
||||
highlight-elevated = ebebeb
|
||||
highlight = ebebeb
|
||||
|
||||
BIN
Matte/screenshots/quickcfg.png
Normal file
BIN
Matte/screenshots/quickcfg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
Matte/screenshots/ylx-gray-dark1.png
Normal file
BIN
Matte/screenshots/ylx-gray-dark1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
Matte/screenshots/ylx-gray-dark2.png
Normal file
BIN
Matte/screenshots/ylx-gray-dark2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
Matte/screenshots/ylx-gray-dark3.png
Normal file
BIN
Matte/screenshots/ylx-gray-dark3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
Matte/screenshots/ylx-gray-light.png
Normal file
BIN
Matte/screenshots/ylx-gray-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
BIN
Matte/screenshots/ylx-gray.png
Normal file
BIN
Matte/screenshots/ylx-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
Matte/screenshots/ylx-matte.png
Normal file
BIN
Matte/screenshots/ylx-matte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
Matte/screenshots/ylx-periwinkle-dark.png
Normal file
BIN
Matte/screenshots/ylx-periwinkle-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
Matte/screenshots/ylx-periwinkle.png
Normal file
BIN
Matte/screenshots/ylx-periwinkle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
Matte/screenshots/ylx-porcelain.png
Normal file
BIN
Matte/screenshots/ylx-porcelain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
657
Matte/user.css
657
Matte/user.css
@ -1,4 +1,7 @@
|
||||
/*** vars */
|
||||
/* ================================
|
||||
QUICK CONFIGURATIONS
|
||||
================================ */
|
||||
|
||||
:root {
|
||||
/* top bar vars */
|
||||
--top-bar-padding-top: 45px;
|
||||
@ -7,13 +10,16 @@
|
||||
--top-bar-padding-left: 20px;
|
||||
--tab-border-radius: 6px;
|
||||
--user-widget-name-display: none; /* block | none */
|
||||
--top-bar-border-width: 2px;
|
||||
|
||||
/* sidebar vars */
|
||||
--sidebar-button-border-radius: 4px;
|
||||
--sidebar-border-width: 2px;
|
||||
|
||||
/* player vars */
|
||||
--player-height: 90px;
|
||||
--player-padding: 0 20px;
|
||||
--player-border-width: 2px;
|
||||
|
||||
/* scrollbar vars */
|
||||
--scrollbar-border-radius: 4px;
|
||||
@ -21,12 +27,35 @@
|
||||
--scrollbar-width-hover: 6px;
|
||||
}
|
||||
|
||||
/*** top bar */
|
||||
/* 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: 162px;
|
||||
height: 37.5px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
TOPBAR
|
||||
================================ */
|
||||
|
||||
.Root__top-container {
|
||||
/* rearrange grid layout */
|
||||
grid-template-areas:
|
||||
"top-bar top-bar top-bar"
|
||||
"nav-bar main-view right-sidebar"
|
||||
"left-sidebar main-view right-sidebar"
|
||||
"now-playing-bar now-playing-bar now-playing-bar";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
@ -34,7 +63,7 @@
|
||||
/* customize top bar colors & fixes */
|
||||
grid-area: top-bar;
|
||||
height: auto;
|
||||
background-color: var(--spice-topbar);
|
||||
border-bottom: var(--top-bar-border-width) solid var(--spice-topbar-border);
|
||||
}
|
||||
.Root__top-bar:empty {
|
||||
/* make top bar the same height in lyrics page */
|
||||
@ -68,23 +97,9 @@
|
||||
/* remove background upon scrolling */
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.main-topBar-historyButtons .main-topBar-button {
|
||||
/* remove history button background */
|
||||
background-color: transparent;
|
||||
}
|
||||
.queue-tabBar-active {
|
||||
/* customize active tab */
|
||||
background-color: var(--spice-tab-active) !important;
|
||||
border-radius: var(--tab-border-radius);
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
.queue-tabBar-headerItemLink {
|
||||
/* customize inactive tab */
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
.queue-tabBar-headerItemLink:hover {
|
||||
/* customize hovered inactive tab */
|
||||
background-color: rgba(var(--spice-rgb-button-disabled), 0.3);
|
||||
}
|
||||
.main-userWidget-displayName,
|
||||
.main-userWidget-chevron {
|
||||
@ -97,8 +112,23 @@
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
.main-topBar-topbarContent {
|
||||
/* add bigger gap between play button and name */
|
||||
gap: 16px;
|
||||
}
|
||||
.x-searchInput-searchInputInput,
|
||||
.x-filterBox-filterInput {
|
||||
border-radius: var(--tab-border-radius);
|
||||
}
|
||||
|
||||
/*** nav bar / sidebar */
|
||||
/* ================================
|
||||
NAVBAR / LEFT SIDEBAR
|
||||
================================ */
|
||||
|
||||
.Root__nav-bar {
|
||||
/* add border */
|
||||
border-right: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
||||
}
|
||||
.main-navBar-navBar {
|
||||
/* remove nav bar top padding */
|
||||
padding-top: 0;
|
||||
@ -117,114 +147,58 @@
|
||||
/* remove top margin */
|
||||
margin-top: 0;
|
||||
}
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-rootlist-rootlistItemLinkActive {
|
||||
/* customize active nav button */
|
||||
background: var(--spice-button-active);
|
||||
color: var(--spice-sidebar) !important;
|
||||
}
|
||||
.main-rootlist-rootlistItemLink {
|
||||
/* customize nav button */
|
||||
padding: 0 16px;
|
||||
border-radius: var(--sidebar-button-border-radius);
|
||||
margin: 0 0 0 -14px;
|
||||
}
|
||||
.link-subtle {
|
||||
/* disable buttom color transition */
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton,
|
||||
.main-createPlaylistButton-button {
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.main-likedSongsButton-likedSongsIcon,
|
||||
.main-createPlaylistButton-createPlaylistIcon {
|
||||
background: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
||||
.main-collectionLinkButton-collectionLinkButton
|
||||
.main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
/* make create playlist & liked songs same as other nav items */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton:hover,
|
||||
.main-createPlaylistButton-button:hover {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-likedSongsButton-likedSongsIcon > svg {
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
.main-createPlaylistButton-button:hover
|
||||
.main-createPlaylistButton-createPlaylistIcon,
|
||||
.main-collectionLinkButton-collectionLinkButton:hover
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton.active {
|
||||
background: var(--spice-button-active) !important;
|
||||
color: var(--spice-sidebar) !important;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-sidebar);
|
||||
margin: 0 8px;
|
||||
border-radius: var(--sidebar-button-border-radius);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon
|
||||
> svg {
|
||||
color: var(--spice-button-active);
|
||||
}
|
||||
/* ================================
|
||||
MAIN VIEW
|
||||
================================ */
|
||||
|
||||
/*** main view */
|
||||
.main-view-container__scroll-node-child-spacer {
|
||||
/* remove main view padding */
|
||||
display: none;
|
||||
}
|
||||
.main-trackList-trackListHeader,
|
||||
.EvQHNTBhaU3rGCRRlAWj,
|
||||
.fVB_YDdnaDlztX7CcWTA {
|
||||
/* fix track list header & search type tabs */
|
||||
.search-searchCategory-SearchCategory,
|
||||
.artist-artistDiscography-topBar {
|
||||
/* fix track list header, search category, artist discography */
|
||||
top: 0 !important;
|
||||
height: auto;
|
||||
}
|
||||
.fVB_YDdnaDlztX7CcWTA {
|
||||
/* fix search type tabs */
|
||||
.search-searchCategory-SearchCategory {
|
||||
/* fix search category */
|
||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
||||
padding: 16px 0;
|
||||
}
|
||||
.cWsvKZ,
|
||||
.bIeVjB {
|
||||
/* search type active tab */
|
||||
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
||||
/* customize active search category */
|
||||
border-radius: var(--tab-border-radius);
|
||||
color: var(--spice-main);
|
||||
background-color: var(--spice-button-active) !important;
|
||||
}
|
||||
.dwbjqG,
|
||||
.eQrChW {
|
||||
/* search type tabs */
|
||||
border-radius: var(--tab-border-radius);
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
.main-trackList-trackListHeader,
|
||||
.EvQHNTBhaU3rGCRRlAWj {
|
||||
/* fix track list header */
|
||||
padding: 16px 32px;
|
||||
.artist-artistDiscography-topBar {
|
||||
/* fix track list header & artist discography */
|
||||
padding: 16px 32px 0 32px;
|
||||
}
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
||||
.EvQHNTBhaU3rGCRRlAWj.QplCuuGSoV4updqTSLq9 {
|
||||
/* fix tracklist header */
|
||||
background-color: var(--spice-main);
|
||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
||||
/* fix tracklist header & artist discography */
|
||||
box-shadow: none;
|
||||
}
|
||||
.rHpv7osDRvs3SUPMpQ_g {
|
||||
.search-recentSearches-searchPageGrid
|
||||
.main-trackList-trackListHeader.main-trackList-trackListHeaderStuck {
|
||||
/* fix tracklist header in search */
|
||||
top: 64px !important;
|
||||
}
|
||||
.queue-queuePage-queuePage {
|
||||
/* replace margin with padding in queue page */
|
||||
margin-top: 0;
|
||||
padding-top: 40px;
|
||||
@ -239,20 +213,14 @@
|
||||
background-color: unset !important;
|
||||
background-image: unset !important;
|
||||
}
|
||||
.main-rootlist-rootlistDividerGradient,
|
||||
.fEvxx8vl3zTNWsuC8lpx {
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
/* remove background gradient in home page and sidebar */
|
||||
background: unset;
|
||||
}
|
||||
.jyfxNy {
|
||||
/* customize button */
|
||||
background-color: var(--spice-button-disabled);
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* full window artist background */
|
||||
.main-entityHeader-background.main-entityHeader-gradient {
|
||||
opacity: 0.4 !important;
|
||||
opacity: 0.3 !important;
|
||||
}
|
||||
.main-entityHeader-container.main-entityHeader-withBackgroundImage,
|
||||
.main-entityHeader-background,
|
||||
@ -270,15 +238,8 @@
|
||||
linear-gradient(var(--spice-main), var(--spice-main));
|
||||
}
|
||||
.artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
|
||||
font-size: 175px !important;
|
||||
line-height: 175px !important;
|
||||
}
|
||||
.main-view-container__scroll-node-child {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.k4MNlyGrhsL0qgnENxqh,
|
||||
.xaeunxBdlShScWay5mQR {
|
||||
margin-bottom: 16px;
|
||||
font-size: 20vh !important;
|
||||
line-height: 20vh !important;
|
||||
}
|
||||
/* cards */
|
||||
.main-cardImage-imageWrapper {
|
||||
@ -299,22 +260,54 @@
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* popup modal */
|
||||
.main-trackCreditsModal-container {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.main-trackCreditsModal-closeBtn svg path {
|
||||
fill: var(--spice-subtext);
|
||||
}
|
||||
/* lyrics */
|
||||
.lyrics-lyrics-background {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-isInteractive.lyrics-lyricsContent-active {
|
||||
text-shadow: 0 0 10px var(--lyrics-color-background),
|
||||
-2px 1px 0 var(--spice-main), -3px 2px 0 var(--lyrics-color-background),
|
||||
2px -1px 0 var(--spice-main), 3px -2px 0 var(--lyrics-color-background);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*** buddy feed / friend activity bar */
|
||||
/* ================================
|
||||
FRIEND ACTIVITY BAR / RIGHT SIDEBAR
|
||||
================================ */
|
||||
|
||||
.Root__nav-right-sidebar {
|
||||
border-left: var(--sidebar-border-width) solid var(--spice-sidebar-border);
|
||||
}
|
||||
.spotify__os--is-windows .main-buddyFeed-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main-buddyFeed-friendsFeedContainer {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
/* ================================
|
||||
NOW PLAYING BAR
|
||||
================================ */
|
||||
|
||||
.TypeElement-balladBold-textBase-type,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
||||
color: var(--spice-sub-text);
|
||||
.Root__now-playing-bar {
|
||||
border-top: var(--player-border-width) solid var(--spice-player-border);
|
||||
}
|
||||
|
||||
/*** now playing bar */
|
||||
.main-nowPlayingBar-nowPlayingBar {
|
||||
/* customize now playing bar */
|
||||
height: var(--player-height);
|
||||
@ -324,17 +317,10 @@
|
||||
/* customize now playing bar*/
|
||||
border-top: none;
|
||||
}
|
||||
.main-playPauseButton-button {
|
||||
/* customize play button */
|
||||
color: var(--spice-player);
|
||||
background-color: var(--spice-button-active);
|
||||
[dir="ltr"] .main-nowPlayingWidget-coverExpanded {
|
||||
transform: translateX(-76px);
|
||||
}
|
||||
.progress-bar {
|
||||
/* progress bar colors */
|
||||
--bg-color: rgba(var(--spice-rgb-subtext), 0.3);
|
||||
--fg-color: var(--spice-subtext);
|
||||
}
|
||||
.epWhU7hHGktzlO_dop6z {
|
||||
.x-progressBar-fillColor {
|
||||
/* fluid progress bars */
|
||||
transition: transform, 0s, ease, 0.25s;
|
||||
}
|
||||
@ -343,15 +329,20 @@
|
||||
transition: left, 0s, ease, 0.25s;
|
||||
}
|
||||
|
||||
/*** misc & fixes */
|
||||
/* font styles */
|
||||
/* ================================
|
||||
MISC & FIXES
|
||||
================================ */
|
||||
|
||||
/* font style
|
||||
-------------------------------- */
|
||||
* {
|
||||
/* heading font weight */
|
||||
font-weight: normal !important;
|
||||
--font-family: "CircularSP";
|
||||
}
|
||||
|
||||
/* scrollbars */
|
||||
/* scrollbar
|
||||
-------------------------------- */
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
@ -359,7 +350,6 @@
|
||||
/* customize scrollbar */
|
||||
border-radius: var(--scrollbar-border-radius);
|
||||
width: var(--scrollbar-width);
|
||||
background-color: var(--spice-button-disabled) !important;
|
||||
}
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
@ -368,7 +358,6 @@
|
||||
/* customize hovered scrollbar */
|
||||
border-radius: var(--scrollbar-border-radius);
|
||||
width: var(--scrollbar-width-hover);
|
||||
background-color: var(--spice-button-active) !important;
|
||||
}
|
||||
.spotify__container--is-desktop.spotify__os--is-windows
|
||||
.main-view-container__scroll-node
|
||||
@ -384,64 +373,85 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* search bar */
|
||||
/* tooltip
|
||||
-------------------------------- */
|
||||
.main-contextMenu-tippy {
|
||||
/* position below the element */
|
||||
transform: translate(0, 65px);
|
||||
}
|
||||
|
||||
/* color reassignment
|
||||
-------------------------------- */
|
||||
.encore-dark-theme,
|
||||
.encore-dark-theme .encore-base-set {
|
||||
/* song duration & queue button & folder arrow & settings desc text */
|
||||
--text-subdued: var(--spice-subtext) !important;
|
||||
--essential-subdued: var(--spice-button) !important;
|
||||
}
|
||||
|
||||
/* ====topbar==== */
|
||||
.Root__top-bar {
|
||||
background-color: var(--spice-topbar);
|
||||
}
|
||||
.main-topBar-historyButtons .main-topBar-button {
|
||||
background-color: transparent;
|
||||
color: var(--spice-topbar-text);
|
||||
}
|
||||
.main-topBar-historyButtons .main-topBar-button:disabled {
|
||||
color: var(--spice-topbar-subtext);
|
||||
opacity: 1;
|
||||
}
|
||||
.main-entityHeader-topbarTitle {
|
||||
color: var(--spice-topbar-text) !important;
|
||||
}
|
||||
.queue-tabBar-active {
|
||||
background-color: var(--spice-tab-active) !important;
|
||||
color: var(--spice-tab-active-text) !important;
|
||||
}
|
||||
.queue-tabBar-headerItemLink {
|
||||
color: var(--spice-topbar-subtext);
|
||||
}
|
||||
.queue-tabBar-headerItemLink:hover {
|
||||
background-color: rgba(var(--spice-rgb-tab-hover), 0.3);
|
||||
}
|
||||
.x-searchInput-searchInputSearchIcon,
|
||||
.x-searchInput-searchInputClearButton,
|
||||
.x-searchInput-searchInputInput,
|
||||
.x-filterBox-filterInput {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
.x-searchInput-searchInputInput,
|
||||
.x-filterBox-filterInput {
|
||||
border-radius: var(--tab-border-radius);
|
||||
.x-searchInput-searchInputInput {
|
||||
color: var(--spice-tab-active-text) !important;
|
||||
}
|
||||
.x-searchInput-searchInputInput {
|
||||
background-color: var(--spice-tab-active);
|
||||
}
|
||||
.x-filterBox-filterInput {
|
||||
background-color: rgba(var(--spice-rgb-selected-row), 0.1);
|
||||
background-color: rgba(var(--spice-rgb-subtext), 0.1);
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--spice-subtext);
|
||||
color: var(--spice-topbar-subtext);
|
||||
}
|
||||
|
||||
/* context menu */
|
||||
.main-contextMenu-menu {
|
||||
background-color: var(--spice-main);
|
||||
/* ====left sidebar==== */
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-rootlist-rootlistItemLinkActive {
|
||||
background: var(--spice-link-active);
|
||||
color: var(--spice-link-active-text) !important;
|
||||
}
|
||||
.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-text);
|
||||
.link-subtle {
|
||||
transition-property: none;
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
background-color: var(--spice-tab-active);
|
||||
.link-subtle:focus,
|
||||
.link-subtle:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
|
||||
/* fixing color inconsistency */
|
||||
.encore-dark-theme,
|
||||
.encore-dark-theme .encore-base-set {
|
||||
/* song duration & queue button & folder arrow & settings desc text */
|
||||
--text-subdued: var(--spice-subtext) !important;
|
||||
.main-rootlist-rootlistItemLink:link,
|
||||
.main-rootlist-rootlistItemLink:visited {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-trackList-trackListRow.main-trackList-selected,
|
||||
.main-trackList-trackListRow.main-trackList-selected:hover,
|
||||
.main-trackList-trackListRow:focus-within,
|
||||
.main-trackList-trackListRow:hover,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
/* selected + hovered tracks & hovered context menu items */
|
||||
background-color: var(--spice-card);
|
||||
}
|
||||
.AKksNlfz_QuQjE1FPwYG {
|
||||
/* recently played header in home */
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
.fYSGgd {
|
||||
/* track list play button color */
|
||||
background-color: var(--spice-button-active);
|
||||
.main-rootlist-rootlistItemOverlay:hover ~ .main-rootlist-rootlistItemLink,
|
||||
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive,
|
||||
.main-rootlist-rootlistItemLink:focus,
|
||||
.main-rootlist-rootlistItemLink:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.collection-active-icon,
|
||||
.collection-icon,
|
||||
@ -450,29 +460,278 @@
|
||||
.premiumSpotifyIcon,
|
||||
.search-active-icon,
|
||||
.search-icon {
|
||||
/* fix sidebar buttons' icons */
|
||||
color: unset;
|
||||
}
|
||||
#_R_G *:not([fill="none"]) {
|
||||
/* fix heart color on click */
|
||||
fill: var(--spice-button-active) !important;
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
|
||||
.main-collectionLinkButton-collectionLinkButton
|
||||
.main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
opacity: 1;
|
||||
}
|
||||
#_R_G *:not([stroke="none"]) {
|
||||
/* fix heart color on click */
|
||||
stroke: var(--spice-button-active);
|
||||
.main-collectionLinkButton-collectionLinkButton,
|
||||
.main-createPlaylistButton-button {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.x-settings-equalizerContainer {
|
||||
/* equalizer background */
|
||||
background-color: transparent;
|
||||
.main-collectionLinkButton-collectionLinkButton:hover,
|
||||
.main-createPlaylistButton-button:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-trackList-playingIcon {
|
||||
/* change playing icon color in playlist to theme color */
|
||||
filter: grayscale(1) opacity(0.2) drop-shadow(0 0 0 var(--spice-button))
|
||||
drop-shadow(0 0 0 var(--spice-button))
|
||||
drop-shadow(0 0 0 var(--spice-button));
|
||||
.main-likedSongsButton-likedSongsIcon > svg {
|
||||
color: var(--spice-sidebar);
|
||||
}
|
||||
.main-likedSongsButton-likedSongsIcon,
|
||||
.main-createPlaylistButton-createPlaylistIcon {
|
||||
background: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-createPlaylistButton-button:hover
|
||||
.main-createPlaylistButton-createPlaylistIcon,
|
||||
.main-collectionLinkButton-collectionLinkButton:hover
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active {
|
||||
background: var(--spice-link-active) !important;
|
||||
color: var(--spice-sidebar) !important;
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon {
|
||||
background: var(--spice-sidebar);
|
||||
}
|
||||
.main-collectionLinkButton-collectionLinkButton.active
|
||||
.main-likedSongsButton-likedSongsIcon
|
||||
> svg {
|
||||
color: var(--spice-link-active);
|
||||
}
|
||||
|
||||
/* ====main view==== */
|
||||
.main-trackList-trackListRow.main-trackList-selected,
|
||||
.main-trackList-trackListRow.main-trackList-selected:hover,
|
||||
.main-trackList-trackListRow:focus-within,
|
||||
.main-trackList-trackListRow:hover {
|
||||
background-color: var(--spice-card);
|
||||
}
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader,
|
||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.main-trackList-placeholder {
|
||||
/* recolor loading tracklist */
|
||||
opacity: 0.05;
|
||||
filter: contrast(0.1);
|
||||
}
|
||||
.main-trackList-playingIcon {
|
||||
/* change playing icon color to theme color */
|
||||
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));
|
||||
}
|
||||
.search-searchCategory-catergoryGrid button[aria-checked="true"] span {
|
||||
color: var(--spice-main);
|
||||
background-color: var(--spice-button-active) !important;
|
||||
}
|
||||
.search-searchCategory-catergoryGrid span {
|
||||
border-radius: var(--tab-border-radius);
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
.artist-artistAbout-container.artist-artistAbout-backgroundImage
|
||||
.artist-artistAbout-content
|
||||
> div {
|
||||
/* change about artist text color */
|
||||
color: #fff;
|
||||
}
|
||||
.main-dropDown-dropDown,
|
||||
.x-settings-input {
|
||||
background-color: var(--spice-button-disabled);
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
/* ====right sidebar==== */
|
||||
.main-buddyFeed-friendsFeedContainer {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
.TypeElement-balladBold-textBase-type,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
/* ====now playing bar==== */
|
||||
.main-trackInfo-name,
|
||||
.main-trackInfo-artists a:active,
|
||||
.main-trackInfo-artists a:focus,
|
||||
.main-trackInfo-artists a:hover {
|
||||
color: var(--spice-player-text) !important;
|
||||
}
|
||||
.main-trackInfo-artists a:link,
|
||||
.main-trackInfo-artists a:visited {
|
||||
color: var(--spice-player-subtext);
|
||||
}
|
||||
.main-playPauseButton-button {
|
||||
color: var(--spice-player);
|
||||
background-color: var(--spice-button-active);
|
||||
}
|
||||
.control-button-heart[aria-checked="false"],
|
||||
.player-controls__left button,
|
||||
.player-controls__right button,
|
||||
.main-nowPlayingBar-extraControls button {
|
||||
color: rgba(var(--spice-rgb-player-selected-row), 0.7);
|
||||
}
|
||||
.progress-bar {
|
||||
--bg-color: rgba(var(--spice-rgb-player-selected-row), 0.3);
|
||||
--fg-color: var(--spice-player-selected-row);
|
||||
}
|
||||
|
||||
/* ====misc==== */
|
||||
|
||||
/* ----scrollbar---- */
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle {
|
||||
background-color: var(--spice-scrollbar) !important;
|
||||
}
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle:hover,
|
||||
.os-theme-spotify
|
||||
> .os-scrollbar-vertical
|
||||
> .os-scrollbar-track
|
||||
> .os-scrollbar-handle:active {
|
||||
background-color: var(--spice-scrollbar-hover) !important;
|
||||
}
|
||||
|
||||
/* ----context menu---- */
|
||||
.main-contextMenu-menu {
|
||||
background-color: var(--spice-context-menu);
|
||||
}
|
||||
.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-context-menu-text);
|
||||
}
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
|
||||
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
|
||||
background-color: var(--spice-context-menu-hover);
|
||||
}
|
||||
|
||||
/* ----button---- */
|
||||
#_R_G *:not([fill="none"]) {
|
||||
/* fix heart color on click */
|
||||
fill: var(--spice-button-active) !important;
|
||||
}
|
||||
#_R_G *:not([stroke="none"]) {
|
||||
stroke: var(--spice-button-active);
|
||||
}
|
||||
.ButtonInner-md-iconOnly {
|
||||
/* base play/pause icon color on player instead of sidebar */
|
||||
color: var(--spice-player);
|
||||
}
|
||||
.Button-sm-16-buttonTertiary-iconOnly-condensedAll-useBrowserDefaultFocusStyle {
|
||||
/* base play/pause icon color on sidebar text instead of subtext */
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
|
||||
/* ylx support
|
||||
-------------------------------- */
|
||||
.Root {
|
||||
--panel-gap: 0 !important;
|
||||
}
|
||||
.spotify__container--is-desktop .nav-ylx .Root__top-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
|
||||
-webkit-padding-start: unset !important;
|
||||
padding-inline-start: unset !important;
|
||||
}
|
||||
.nav-ylx .main-topBar-contentArea {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.nav-ylx .x-searchInput-searchInputInput {
|
||||
height: 41px;
|
||||
background-color: var(--spice-tab-active);
|
||||
}
|
||||
.nav-ylx .x-searchInput-searchInputInput:hover {
|
||||
background-color: var(--spice-tab-hover);
|
||||
}
|
||||
.main-yourLibraryX-entryPoints,
|
||||
.nav-ylx .Root__main-view {
|
||||
border-radius: 0;
|
||||
}
|
||||
.main-yourLibraryX-entryPoints {
|
||||
background-color: var(--spice-sidebar);
|
||||
}
|
||||
.main-yourLibraryX-navItems {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.main-yourLibraryX-navItem,
|
||||
.main-yourLibraryX-headerContent {
|
||||
padding: 4px 0;
|
||||
}
|
||||
.main-yourLibraryX-header {
|
||||
padding-top: 0;
|
||||
}
|
||||
.main-yourLibraryX-navItem {
|
||||
padding: 4px 0;
|
||||
}
|
||||
.main-yourLibraryX-navLink {
|
||||
padding: 12px;
|
||||
}
|
||||
.main-yourLibraryX-navLinkActive,
|
||||
.main-yourLibraryX-navLinkActive .home-active-icon,
|
||||
.main-yourLibraryX-navLinkActive .search-active-icon {
|
||||
color: var(--spice-link-active-text) !important;
|
||||
background-color: var(--spice-link-active);
|
||||
border-radius: var(--tab-border-radius);
|
||||
}
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle,
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle {
|
||||
color: var(--spice-sidebar-text);
|
||||
}
|
||||
.main-yourLibraryX-navLink,
|
||||
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper {
|
||||
gap: 20px;
|
||||
}
|
||||
.Wrapper-md-leading {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle:hover,
|
||||
.Button-md-24-buttonTertiary-iconLeading-condensed-isUsingKeyboard-useBrowserDefaultFocusStyle:hover {
|
||||
color: var(--spice-link-hover-text);
|
||||
}
|
||||
.main-yourLibraryX-isScrolled {
|
||||
-webkit-box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
box-shadow: 0 20px 10px -10px var(--spice-sidebar);
|
||||
}
|
||||
.nav-ylx .x-searchInput-searchInputInput:hover,
|
||||
.nav-ylx .x-searchInput-searchInputInput:focus,
|
||||
.x-entityImage-imageContainer {
|
||||
box-shadow: none;
|
||||
}
|
||||
.nav-ylx .x-searchInput-searchInputInput {
|
||||
color: var(--spice-tab-active-text) !important;
|
||||
}
|
||||
.nav-ylx .main-nowPlayingBar-container {
|
||||
background-color: var(--spice-player);
|
||||
}
|
||||
.nav-ylx .main-nowPlayingBar-nowPlayingBar {
|
||||
height: 90px;
|
||||
padding: var(--player-padding);
|
||||
}
|
||||
[dir="ltr"] .nav-ylx .main-coverSlotCollapsed-navAltContainer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.Pns6F5g4OEwEpdmOWTLg {
|
||||
/* playlists loading placeholder */
|
||||
opacity: 0.05;
|
||||
filter: contrast(0.1);
|
||||
}
|
||||
.nav-ylx .main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
||||
background-color: var(--spice-main);
|
||||
}
|
||||
.nav-ylx
|
||||
.artist-artistDiscography-topBar.artist-artistDiscography-topBarScrolled {
|
||||
border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
18
THEMES.md
18
THEMES.md
@ -86,7 +86,23 @@ Here you can find a preview of all the themes. Some of them may have different c
|
||||
|
||||
## Matte
|
||||
|
||||
|
||||
#### Matte
|
||||
|
||||
|
||||
#### Periwinkle
|
||||
|
||||
|  |  |
|
||||
| :-------------------------------------------------: | :-----------------------------------------------------------: |
|
||||
| Light | Dark |
|
||||
|
||||
#### Porcelain
|
||||
|
||||
|
||||
#### Gray
|
||||
|
||||
|  |  |
|
||||
| :-------------------------------------------------: | :-------------------------------------------------: |
|
||||
| Light | Dark |
|
||||
|
||||
## Nightlight
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user