fix(Sleek): update theme (#707)
* fix(Sleek): color changes * fix(Sleek): update css * Sleek: update images * fix(Sleek): highlight cur track
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
BIN
Sleek/cherry.png
Before Width: | Height: | Size: 647 KiB After Width: | Height: | Size: 622 KiB |
167
Sleek/color.ini
@ -2,20 +2,20 @@
|
|||||||
; Green on dark grey background
|
; Green on dark grey background
|
||||||
text = 8bc34a
|
text = 8bc34a
|
||||||
subtext = b4b4b4
|
subtext = b4b4b4
|
||||||
button-text = 202020
|
nav-active-text = 202020
|
||||||
main = 202020
|
main = 202020
|
||||||
sidebar = 202020
|
sidebar = 202020
|
||||||
player = 242424
|
player = 242424
|
||||||
card = 242424
|
card = 242424
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 2a3c17
|
main-secondary = 171717
|
||||||
sub-button = 6a913d
|
|
||||||
button = 8bc34a
|
button = 8bc34a
|
||||||
|
button-secondary = 6a913d
|
||||||
button-active = 98da4b
|
button-active = 98da4b
|
||||||
button-disabled = 353535
|
button-disabled = 353535
|
||||||
sidebar-button = 8bc34a
|
nav-active = 8bc34a
|
||||||
play-button = 8bc34a
|
play-button = 8bc34a
|
||||||
tab-active = 303030
|
tab-active = 171717
|
||||||
notification = 242424
|
notification = 242424
|
||||||
notification-error = 242424
|
notification-error = 242424
|
||||||
playback-bar = 8bc34a
|
playback-bar = 8bc34a
|
||||||
@ -25,20 +25,20 @@ misc = FFFFFF
|
|||||||
; Pink on dark blue background
|
; Pink on dark blue background
|
||||||
text = d98ba1
|
text = d98ba1
|
||||||
subtext = d7d7d7
|
subtext = d7d7d7
|
||||||
button-text = D8DEE9
|
nav-active-text = 131c26
|
||||||
main = 131c26
|
main = 131c26
|
||||||
sidebar = 131c26
|
sidebar = 131c26
|
||||||
player = 131c26
|
player = 131c26
|
||||||
card = 131c26
|
card = 131c26z
|
||||||
shadow = 0e0e13
|
shadow = 0e0e13
|
||||||
selected-row = 0f1720
|
main-secondary = 09111b
|
||||||
sub-button = d98ba1
|
|
||||||
button = d98ba1
|
button = d98ba1
|
||||||
|
button-secondary = d98ba1
|
||||||
button-active = ff84ac
|
button-active = ff84ac
|
||||||
button-disabled = 192531
|
button-disabled = 192531
|
||||||
sidebar-button = ff84ac
|
nav-active = ff84ac
|
||||||
play-button = d98ba1
|
play-button = d98ba1
|
||||||
tab-active = 192531
|
tab-active = 09111b
|
||||||
notification = 192531
|
notification = 192531
|
||||||
notification-error = 192531
|
notification-error = 192531
|
||||||
playback-bar = d98ba1
|
playback-bar = d98ba1
|
||||||
@ -48,20 +48,20 @@ misc = FFFFFF
|
|||||||
; Salmon on dark blue background
|
; Salmon on dark blue background
|
||||||
text = f88379
|
text = f88379
|
||||||
subtext = d7d7d7
|
subtext = d7d7d7
|
||||||
button-text = 131c26
|
nav-active-text = 131c26
|
||||||
main = 131c26
|
main = 131c26
|
||||||
sidebar = 131c26
|
sidebar = 131c26
|
||||||
player = 131c26
|
player = 131c26
|
||||||
card = 131c26
|
card = 131c26
|
||||||
shadow = 0e0e13
|
shadow = 0e0e13
|
||||||
selected-row = 0f1720
|
main-secondary = 09111b
|
||||||
sub-button = f88379
|
|
||||||
button = f88379
|
button = f88379
|
||||||
|
button-secondary = f88379
|
||||||
button-active = fb958b
|
button-active = fb958b
|
||||||
button-disabled = 192531
|
button-disabled = 192531
|
||||||
sidebar-button = fb958b
|
nav-active = fb958b
|
||||||
play-button = f88379
|
play-button = f88379
|
||||||
tab-active = 192531
|
tab-active = 09111b
|
||||||
notification = 192531
|
notification = 192531
|
||||||
notification-error = 192531
|
notification-error = 192531
|
||||||
playback-bar = f88379
|
playback-bar = f88379
|
||||||
@ -71,91 +71,91 @@ misc = FFFFFF
|
|||||||
; White on dark blue background
|
; White on dark blue background
|
||||||
text = ffffff
|
text = ffffff
|
||||||
subtext = ffffff
|
subtext = ffffff
|
||||||
button-text = ffffff
|
nav-active-text = ffffff
|
||||||
main = 020816
|
main = 020816
|
||||||
sidebar = 051024
|
sidebar = 051024
|
||||||
player = 030b1e
|
player = 030b1e
|
||||||
card = 0a1527
|
card = 0a1527
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 09162e
|
main-secondary = 06142d
|
||||||
sub-button = ffffff
|
|
||||||
button = 1464b5
|
button = 1464b5
|
||||||
|
button-secondary = ffffff
|
||||||
button-active = 4a99e9
|
button-active = 4a99e9
|
||||||
button-disabled = 21282f
|
button-disabled = 21282f
|
||||||
sidebar-button = 37b778
|
nav-active = 37b778
|
||||||
play-button = 37b778
|
play-button = 37b778
|
||||||
tab-active = 0a1527
|
tab-active = 0a1527
|
||||||
notification = 051024
|
notification = 051024
|
||||||
notification-error = 051024
|
notification-error = 051024
|
||||||
playback-bar = 37b778
|
playback-bar = 37b778
|
||||||
misc = BFBFBF
|
misc = FFFFFF
|
||||||
|
|
||||||
[Deeper]
|
[Deeper]
|
||||||
; Light blue on dark background
|
; Light blue on dark background
|
||||||
text = 4f9a87
|
text = 4f9a87
|
||||||
subtext = 4f9a87
|
subtext = 4f9a87
|
||||||
button-text = 4f9a87
|
nav-active-text = 4f9a87
|
||||||
main = 040614
|
main = 040614
|
||||||
sidebar = 0F111A
|
sidebar = 0F111A
|
||||||
player = 0F111A
|
player = 0F111A
|
||||||
card = 0C1C19
|
card = 0C1C19
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 040614
|
main-secondary = 131520
|
||||||
sub-button = 4f9a87
|
|
||||||
button = 4f9a87
|
button = 4f9a87
|
||||||
|
button-secondary = 4f9a87
|
||||||
button-active = 4a99e9
|
button-active = 4a99e9
|
||||||
button-disabled = 0C1C19
|
button-disabled = 0C1C19
|
||||||
sidebar-button = 040614
|
nav-active = 040614
|
||||||
play-button = 4f9a87
|
play-button = 4f9a87
|
||||||
tab-active = 0a1527
|
tab-active = 0a1527
|
||||||
notification = 051024
|
notification = 051024
|
||||||
notification-error = 051024
|
notification-error = 051024
|
||||||
playback-bar = 4f9a87
|
playback-bar = 4f9a87
|
||||||
misc = 0C1C19
|
misc = FFFFFF
|
||||||
|
|
||||||
[Psycho]
|
[Psycho]
|
||||||
; Red on dark grey background
|
; Red on dark grey background
|
||||||
text = e00000
|
text = c20000
|
||||||
subtext = ffffff
|
subtext = ffffff
|
||||||
button-text = ffffff
|
nav-active-text = 101010
|
||||||
main = 101010
|
main = 101010
|
||||||
sidebar = 171717
|
sidebar = 171717
|
||||||
player = 171717
|
player = 171717
|
||||||
card = 171717
|
card = 171717
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 330d0d
|
main-secondary = 1f1f1f
|
||||||
sub-button = a20606
|
button = c20000
|
||||||
button = e00000
|
button-secondary = a20606
|
||||||
button-active = e00000
|
button-active = c20000
|
||||||
button-disabled = 404040
|
button-disabled = 404040
|
||||||
sidebar-button = e00000
|
nav-active = 9f0909
|
||||||
play-button = e00000
|
play-button = c20000
|
||||||
tab-active = 171717
|
tab-active = 171717
|
||||||
notification = 5e0000
|
notification = 5e0000
|
||||||
notification-error = 5e0000
|
notification-error = 5e0000
|
||||||
playback-bar = e00000
|
playback-bar = c20000
|
||||||
misc = adadad
|
misc = FFFFFF
|
||||||
|
|
||||||
[UltraBlack]
|
[UltraBlack]
|
||||||
; White on black background
|
; White on black background
|
||||||
text = FFFFFF
|
text = FFFFFF
|
||||||
subtext = DEDEDE
|
subtext = DEDEDE
|
||||||
button-text = 000000
|
nav-active-text = 000000
|
||||||
main = 000000
|
main = 000000
|
||||||
sidebar = 000000
|
sidebar = 000000
|
||||||
player = 000000
|
player = 000000
|
||||||
card = 000000
|
card = 000000
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 111111
|
main-secondary = 292929
|
||||||
sub-button = DEDEDE
|
|
||||||
button = 1DB954
|
button = 1DB954
|
||||||
|
button-secondary = DEDEDE
|
||||||
button-active = 1DB954
|
button-active = 1DB954
|
||||||
button-disabled = 2f2f2f
|
button-disabled = 2f2f2f
|
||||||
sidebar-button = DEDEDE
|
nav-active = DEDEDE
|
||||||
play-button = DEDEDE
|
play-button = DEDEDE
|
||||||
tab-active = 111111
|
tab-active = 292929
|
||||||
notification = 111111
|
notification = 292929
|
||||||
notification-error = 111111
|
notification-error = 292929
|
||||||
playback-bar = DEDEDE
|
playback-bar = DEDEDE
|
||||||
misc = FFFFFF
|
misc = FFFFFF
|
||||||
|
|
||||||
@ -163,18 +163,18 @@ misc = FFFFFF
|
|||||||
; Light grey on blue background
|
; Light grey on blue background
|
||||||
text = D8DEE9
|
text = D8DEE9
|
||||||
subtext = E5E9F0
|
subtext = E5E9F0
|
||||||
button-text = D8DEE9
|
nav-active-text = D8DEE9
|
||||||
main = 2E3440
|
main = 2E3440
|
||||||
sidebar = 2E3440
|
sidebar = 2E3440
|
||||||
player = 2E3440
|
player = 2E3440
|
||||||
card = 2E3440
|
card = 2E3440
|
||||||
shadow = 1d2128
|
shadow = 1d2128
|
||||||
selected-row = 434c5e
|
main-secondary = 434c5e
|
||||||
sub-button = D8DEE9
|
|
||||||
button = 5E81AC
|
button = 5E81AC
|
||||||
|
button-secondary = D8DEE9
|
||||||
button-active = 81A1C1
|
button-active = 81A1C1
|
||||||
button-disabled = 434C5E
|
button-disabled = 434C5E
|
||||||
sidebar-button = 4c566a
|
nav-active = 4c566a
|
||||||
play-button = 5E81AC
|
play-button = 5E81AC
|
||||||
tab-active = 3b4252
|
tab-active = 3b4252
|
||||||
notification = 3b4252
|
notification = 3b4252
|
||||||
@ -184,45 +184,45 @@ misc = FFFFFF
|
|||||||
|
|
||||||
[Futura]
|
[Futura]
|
||||||
; Cyan on dark background
|
; Cyan on dark background
|
||||||
text = 00FF9C
|
text = 34ad7e
|
||||||
subtext = DEDEDE
|
subtext = DEDEDE
|
||||||
button-text = 2E2837
|
nav-active-text = 2E2837
|
||||||
main = 2E2837
|
main = 2E2837
|
||||||
sidebar = 2E2837
|
sidebar = 2E2837
|
||||||
player = 2E2837
|
player = 2E2837
|
||||||
card = 2E2837
|
card = 2E2837
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 584e64
|
main-secondary = 51485b
|
||||||
sub-button = 00FF9C
|
button = 34ad7e
|
||||||
button = 00FF9C
|
button-secondary = 34ad7e
|
||||||
button-active = 00bf76
|
button-active = 00bf76
|
||||||
button-disabled = 3f3c45
|
button-disabled = 3f3c45
|
||||||
sidebar-button = 00FF9C
|
nav-active = 34ad7e
|
||||||
play-button = 00FF9C
|
play-button = 34ad7e
|
||||||
tab-active = 383145
|
tab-active = 51485b
|
||||||
notification = 383145
|
notification = 51485b
|
||||||
notification-error = 383145
|
notification-error = 51485b
|
||||||
playback-bar = 00FF9C
|
playback-bar = 34ad7e
|
||||||
misc = FFFFFF
|
misc = FFFFFF
|
||||||
|
|
||||||
[Elementary]
|
[Elementary]
|
||||||
; Purple and pink on dark background
|
; Purple and pink on dark background
|
||||||
text = c59dff
|
text = c59dff
|
||||||
subtext = dedede
|
subtext = dedede
|
||||||
button-text = 1d1821
|
nav-active-text = 1d1821
|
||||||
main = 1f1f29
|
main = 1f1f29
|
||||||
sidebar = 1d1821
|
sidebar = 1d1821
|
||||||
player = 1d1821
|
player = 1d1821
|
||||||
card = 2E2837
|
card = 2E2837
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 1d1821
|
main-secondary = 1d1821
|
||||||
sub-button = c59dff
|
|
||||||
button = d4516f
|
button = d4516f
|
||||||
|
button-secondary = c59dff
|
||||||
button-active = f16d8c
|
button-active = f16d8c
|
||||||
button-disabled = 2E303E
|
button-disabled = 2E303E
|
||||||
sidebar-button = d4516f
|
nav-active = d4516f
|
||||||
play-button = d4516f
|
play-button = d4516f
|
||||||
tab-active = 2E2837
|
tab-active = 1d1821
|
||||||
notification = 2E2837
|
notification = 2E2837
|
||||||
notification-error = 2E2837
|
notification-error = 2E2837
|
||||||
playback-bar = c59dff
|
playback-bar = c59dff
|
||||||
@ -232,18 +232,18 @@ misc = FFFFFF
|
|||||||
; Yellow, pink and blue on dark background
|
; Yellow, pink and blue on dark background
|
||||||
text = dcd88c
|
text = dcd88c
|
||||||
subtext = 9fbfb7
|
subtext = 9fbfb7
|
||||||
button-text = 1d1821
|
nav-active-text = 1d1821
|
||||||
main = 181b1e
|
main = 181b1e
|
||||||
sidebar = 181b1e
|
sidebar = 181b1e
|
||||||
player = 181b1e
|
player = 181b1e
|
||||||
card = 17191d
|
card = 17191d
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 131417
|
main-secondary = 0b0d0e
|
||||||
sub-button = dcd88c
|
|
||||||
button = f6867c
|
button = f6867c
|
||||||
|
button-secondary = dcd88c
|
||||||
button-active = f6867c
|
button-active = f6867c
|
||||||
button-disabled = 242a2e
|
button-disabled = 242a2e
|
||||||
sidebar-button = f6867c
|
nav-active = f6867c
|
||||||
play-button = f6867c
|
play-button = f6867c
|
||||||
tab-active = 131417
|
tab-active = 131417
|
||||||
notification = 131417
|
notification = 131417
|
||||||
@ -255,44 +255,43 @@ misc = FFFFFF
|
|||||||
; https://draculatheme.com/contribute
|
; https://draculatheme.com/contribute
|
||||||
text = 50fa7b
|
text = 50fa7b
|
||||||
subtext = bd93f9
|
subtext = bd93f9
|
||||||
button-text = 282a36
|
nav-active-text = 282a36
|
||||||
main = 282a36
|
main = 282a36
|
||||||
sidebar = 282a36
|
sidebar = 282a36
|
||||||
player = 282a36
|
player = 282a36
|
||||||
card = 282a36
|
card = 282a36
|
||||||
shadow = 000000
|
shadow = 000000
|
||||||
selected-row = 282a36
|
main-secondary = 1c1e26
|
||||||
sub-button = ff79c6
|
|
||||||
button = 50fa7b
|
button = 50fa7b
|
||||||
|
button-secondary = ff79c6
|
||||||
button-active = 00bf76
|
button-active = 00bf76
|
||||||
button-disabled = 3f3c45
|
button-disabled = 3f3c45
|
||||||
sidebar-button = 50fa7b
|
nav-active = 50fa7b
|
||||||
play-button = 50fa7b
|
play-button = 50fa7b
|
||||||
tab-active = 383145
|
tab-active = 1c1e26
|
||||||
notification = 383145
|
notification = 1c1e26
|
||||||
notification-error = 383145
|
notification-error = 1c1e26
|
||||||
playback-bar = 50fa7b
|
playback-bar = 50fa7b
|
||||||
misc = f8f8f2
|
misc = FFFFFF
|
||||||
|
|
||||||
; Description
|
; Description
|
||||||
|
|
||||||
; text = main text, playlist names in main field, name of playlist selected in sidebar, headings
|
; 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
|
; 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
|
; nav-active-text = text in main buttons in sidebar when active
|
||||||
; main = main field or main bg
|
; main = main bg
|
||||||
|
; main-secondary = bg color of selected song rows, bg color of artist/track cards
|
||||||
; sidebar = sidebar bg
|
; sidebar = sidebar bg
|
||||||
; player = player bg
|
; player = player bg
|
||||||
; card = card bg
|
; card = popup-card bg
|
||||||
; shadow = bg of buttons like account, pop-up lyrics, full app display in main field
|
; shadow = all shadows
|
||||||
; selected-row = bg color of the song selected
|
|
||||||
; sub-button = download and options button
|
|
||||||
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
|
; 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-active = hover on song selected
|
||||||
; button-disabled = seekbar bg, volume bar bg, scrollbar
|
; button-disabled = seekbar bg, volume bar bg, scrollbar
|
||||||
; sidebar-button = sidebar buttons bg
|
; nav-active = sidebar buttons bg
|
||||||
; play-button = color of main play button in main field
|
; play-button = color of main play button in main field
|
||||||
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
|
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
|
||||||
; notification = notification ('Added to liked songs' etc.)
|
; notification = notification ('Added to liked songs' etc.)
|
||||||
; notification-error = error
|
; playback-bar = seekbar fg, volume bar fg, main play/pause button
|
||||||
; playback-bar = seekbar fg, main play/pause button bg
|
|
||||||
; misc = miscellaneous
|
; misc = miscellaneous
|
BIN
Sleek/coral.png
Before Width: | Height: | Size: 632 KiB After Width: | Height: | Size: 546 KiB |
BIN
Sleek/deep.png
Before Width: | Height: | Size: 725 KiB After Width: | Height: | Size: 829 KiB |
BIN
Sleek/deeper.png
Before Width: | Height: | Size: 484 KiB After Width: | Height: | Size: 447 KiB |
Before Width: | Height: | Size: 862 KiB After Width: | Height: | Size: 748 KiB |
Before Width: | Height: | Size: 526 KiB After Width: | Height: | Size: 487 KiB |
BIN
Sleek/futura.png
Before Width: | Height: | Size: 544 KiB After Width: | Height: | Size: 601 KiB |
BIN
Sleek/nord.png
Before Width: | Height: | Size: 338 KiB After Width: | Height: | Size: 315 KiB |
BIN
Sleek/psycho.png
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 401 KiB |
Before Width: | Height: | Size: 372 KiB After Width: | Height: | Size: 544 KiB |
237
Sleek/user.css
@ -1,5 +1,10 @@
|
|||||||
/* Version 14/10/21 */
|
/* 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 */
|
/* TOPBAR */
|
||||||
|
|
||||||
@ -18,8 +23,11 @@
|
|||||||
color: var(--spice-text);
|
color: var(--spice-text);
|
||||||
height: 17px !important;
|
height: 17px !important;
|
||||||
stroke: var(--spice-text);
|
stroke: var(--spice-text);
|
||||||
stroke-width: 1px;
|
}
|
||||||
float: right;
|
|
||||||
|
/* change appearance of x icon on 'search' tab */
|
||||||
|
.x-searchInput-searchInputClearButton {
|
||||||
|
color: var(--spice-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
[role='searchbox']::placeholder {
|
[role='searchbox']::placeholder {
|
||||||
@ -129,13 +137,14 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
}
|
}
|
||||||
/* change colors of active tab */
|
/* change colors of active tab */
|
||||||
.main-navBar-navBarLinkActive {
|
.main-navBar-navBarLinkActive {
|
||||||
background-color: var(--spice-sidebar-button);
|
background-color: var(--spice-nav-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-navBar-navBarLinkActive,
|
.main-navBar-navBarLinkActive,
|
||||||
.main-navBar-navBarLinkActive:focus,
|
.main-navBar-navBarLinkActive:focus,
|
||||||
.main-navBar-navBarLinkActive:hover {
|
.main-navBar-navBarLinkActive:hover {
|
||||||
color: var(--spice-button-text) !important;
|
color: var(--spice-nav-active-text) !important;
|
||||||
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -146,6 +155,10 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
bottom: 107px;
|
bottom: 107px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* revert playback bar position when in full-screen mode */
|
||||||
|
._U2P19b627vsKWCNNffn .playback-bar {
|
||||||
|
bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* round cover art when collapsed */
|
/* round cover art when collapsed */
|
||||||
.main-coverSlotCollapsed-container .cover-art-image {
|
.main-coverSlotCollapsed-container .cover-art-image {
|
||||||
@ -159,7 +172,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* hide and move progress time location */
|
/* hide and move progress time location */
|
||||||
.playback-bar__progress-time-elapsed.main-type-finale {
|
.playback-bar__progress-time-elapsed {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 13px;
|
bottom: 13px;
|
||||||
@ -176,7 +189,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* show time on hover */
|
/* show time on hover */
|
||||||
.playback-bar:hover .playback-bar__progress-time-elapsed.main-type-finale,
|
.playback-bar:hover .playback-bar__progress-time-elapsed,
|
||||||
.playback-bar:hover .main-playbackBarRemainingTime-container {
|
.playback-bar:hover .main-playbackBarRemainingTime-container {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -189,7 +202,7 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.player-controls__buttons {
|
.player-controls__buttons {
|
||||||
transform: translateY(6px);
|
transform: translateY(3px);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -200,14 +213,14 @@ ul.main-navBar-entryPoints > div.GlueDropTarget >*.active {
|
|||||||
|
|
||||||
/* change appearance of play-button */
|
/* change appearance of play-button */
|
||||||
.main-playPauseButton-button {
|
.main-playPauseButton-button {
|
||||||
background-color: var(--spice-player);
|
background-color: inherit;
|
||||||
color: var(--spice-text);
|
color: var(--spice-text);
|
||||||
transition-duration: 0.15s !important;
|
transition-duration: 0.15s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-playPauseButton-button svg {
|
.main-playPauseButton-button svg {
|
||||||
height: 21px;
|
height: 19px;
|
||||||
width: 21px;
|
width: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
|
.main-playPauseButton-button:focus, .main-playPauseButton-button:hover {
|
||||||
@ -253,6 +266,10 @@ p.main-buddyFeed-timestamp.main-type-finale,
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.WiPggcPDzbwGxoxwLWFf.contentSpacing {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
|
.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
|
||||||
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
|
.desktoproutes-homepage-takeover-ad-hptoComponent-container {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@ -263,27 +280,12 @@ p.main-buddyFeed-timestamp.main-type-finale,
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* remove vector (circle) from input bar to allow padding to be reduced */
|
|
||||||
.x-searchInput-searchInputIcon {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* remove vector (circle) from "search in playlist" to allow padding to be reduced */
|
|
||||||
.x-filterBox-searchIconContainer {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* remove vector (circle) from "created playlist(s)" to allow padding to be reduced */
|
|
||||||
.playlist-inlineSearchBox-searchIconContainer {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* change input box appearance */
|
/* change input box appearance */
|
||||||
input {
|
input {
|
||||||
background-color: unset !important;
|
background-color: var(--spice-main-secondary) !important;
|
||||||
border-bottom: solid 1px var(--spice-text) !important;
|
border-bottom: solid 1px var(--spice-text) !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
padding: 6px 10px !important;
|
padding: 6px 10px 6px 48px;
|
||||||
color: var(--spice-text) !important;
|
color: var(--spice-text) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -369,11 +371,11 @@ a.x-heroCategoryCard-HeroCategoryCard {
|
|||||||
|
|
||||||
/* recolor sub-buttons */
|
/* recolor sub-buttons */
|
||||||
.main-moreButton-button {
|
.main-moreButton-button {
|
||||||
color: var(--spice-sub-button);
|
color: var(--spice-button-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-downloadButton-button {
|
.x-downloadButton-button {
|
||||||
color: var(--spice-sub-button) !important;
|
color: var(--spice-button-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-downloadButton-button:hover {
|
.x-downloadButton-button:hover {
|
||||||
@ -381,24 +383,24 @@ a.x-heroCategoryCard-HeroCategoryCard {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-addButton-button {
|
.main-addButton-button {
|
||||||
color: var(--spice-sub-button);
|
color: var(--spice-button-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-entityHeader-metaDataText {
|
.main-entityHeader-metaDataText {
|
||||||
color: var(--spice-sub-button);
|
color: var(--spice-button-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-sortBox-sortDropdown {
|
.x-sortBox-sortDropdown {
|
||||||
background-color: var(--spice-selected-row) !important;
|
background-color: var(--spice-main-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-filterBox-searchIconContainer {
|
.x-filterBox-searchIconContainer {
|
||||||
color: var(--spice-sub-button) !important;
|
color: var(--spice-button-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-filterBox-expandButton:focus,
|
.x-filterBox-expandButton:focus,
|
||||||
.x-filterBox-expandButton:hover {
|
.x-filterBox-expandButton:hover {
|
||||||
background-color: var(--spice-selected-row) !important;
|
background-color: var(--spice-main-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.x-sortBox-sortDropdown,
|
.x-sortBox-sortDropdown,
|
||||||
@ -408,13 +410,13 @@ a.x-heroCategoryCard-HeroCategoryCard {
|
|||||||
|
|
||||||
/* change background color of 'home' tab shortcut items */
|
/* change background color of 'home' tab shortcut items */
|
||||||
.view-homeShortcutsGrid-shortcut {
|
.view-homeShortcutsGrid-shortcut {
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
|
background-color: rgba(var(--spice-rgb-main-secondary), .3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-homeShortcutsGrid-shortcut:focus-within,
|
.view-homeShortcutsGrid-shortcut:focus-within,
|
||||||
.view-homeShortcutsGrid-shortcut:hover,
|
.view-homeShortcutsGrid-shortcut:hover,
|
||||||
.view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
|
.view-homeShortcutsGrid-shortcut[data-context-menu-open='true'] {
|
||||||
background-color: var(--spice-selected-row) !important;
|
background-color: rgba(var(--spice-rgb-main-secondary), .5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 'see more' button fix */
|
/* 'see more' button fix */
|
||||||
@ -425,7 +427,7 @@ a.x-heroCategoryCard-HeroCategoryCard {
|
|||||||
|
|
||||||
/* card background color for editing playlist details */
|
/* card background color for editing playlist details */
|
||||||
.main-playlistEditDetailsModal-descriptionTextarea {
|
.main-playlistEditDetailsModal-descriptionTextarea {
|
||||||
background: var(--spice-card);
|
background: var(--spice-main-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-playlistEditDetailsModal-textElementLabel {
|
.main-playlistEditDetailsModal-textElementLabel {
|
||||||
@ -540,19 +542,24 @@ span.artist-artistVerifiedBadge-badge path:last-child {
|
|||||||
|
|
||||||
/* change background color of selected row */
|
/* change background color of selected row */
|
||||||
.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
|
.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover {
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.8) !important;
|
background-color: rgba(var(--spice-rgb-main-secondary), 0.6) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-trackList-trackListRow:focus-within,
|
.main-trackList-trackListRow:focus-within,
|
||||||
.main-trackList-trackListRow:hover {
|
.main-trackList-trackListRow:hover {
|
||||||
background-color: rgba(var(--spice-rgb-selected-row), 0.4);
|
background-color: rgba(var(--spice-rgb-main-secondary), 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When song is currently playing */
|
/* When song is currently playing */
|
||||||
.main-trackList-active .main-type-mesto,
|
.main-trackList-active .main-type-mesto,
|
||||||
.main-trackList-active .main-trackList-rowSubTitle,
|
.main-trackList-active .main-trackList-rowSubTitle,
|
||||||
.main-trackList-active .main-trackList-rowSubTitle a,
|
.main-trackList-active .main-trackList-rowSubTitle a,
|
||||||
.main-trackList-active .main-trackList-rowMarker {
|
.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;
|
color: var(--spice-button) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -608,21 +615,16 @@ span.artist-artistVerifiedBadge-badge path:last-child {
|
|||||||
|
|
||||||
/* TEMPORARY */
|
/* TEMPORARY */
|
||||||
|
|
||||||
/* change progress bar color */
|
|
||||||
.dt2nNuPMSEfD8Pv4Na9G {
|
|
||||||
background-color: var(--spice-playback-bar) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* change delete playlist dialog box colors */
|
/* change delete playlist dialog box colors */
|
||||||
._XjIr3Jebi9c96f7h74J {
|
.K8PtC1Way9XetxDGwCGx {
|
||||||
background-color: var(--spice-player);
|
background-color: var(--spice-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
._XjIr3Jebi9c96f7h74J > *:not(div) {
|
.K8PtC1Way9XetxDGwCGx > *:not(div) {
|
||||||
color: var(--spice-text);
|
color: var(--spice-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reDC8RlgDXoQ_bz0umLz > *:not(div) {
|
.awGNDbf1c8TGBAFR0pv8 > *:not(div) {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -631,3 +633,140 @@ span.artist-artistVerifiedBadge-badge path:last-child {
|
|||||||
justify-content: space-between !important;
|
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;
|
||||||
|
}
|
Before Width: | Height: | Size: 486 KiB After Width: | Height: | Size: 482 KiB |