fix(Sleek): update theme (#707)

* fix(Sleek): color changes

* fix(Sleek): update css

* Sleek: update images

* fix(Sleek): highlight cur track
This commit is contained in:
harbassan 2022-03-30 23:16:16 +13:00 committed by GitHub
parent 565c810f1e
commit 6ec82d98db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 283 additions and 145 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 647 KiB

After

Width:  |  Height:  |  Size: 622 KiB

View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 632 KiB

After

Width:  |  Height:  |  Size: 546 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 725 KiB

After

Width:  |  Height:  |  Size: 829 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 484 KiB

After

Width:  |  Height:  |  Size: 447 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 862 KiB

After

Width:  |  Height:  |  Size: 748 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 526 KiB

After

Width:  |  Height:  |  Size: 487 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 544 KiB

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 438 KiB

After

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 372 KiB

After

Width:  |  Height:  |  Size: 544 KiB

View File

@ -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;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 486 KiB

After

Width:  |  Height:  |  Size: 482 KiB