fix(Sleek): recolor nav active, placeholder, etc. (#989)

- fix nav active background
- recolor tracklist/playlist placeholders
- make playback time background more transparent
- recolor like button on click
- fix nav-active-text in Wealthy color scheme
This commit is contained in:
darkthemer 2023-08-17 14:14:40 +08:00 committed by GitHub
parent e4a15de2e0
commit d25a67c1f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions

View File

@ -2,7 +2,7 @@
; Green on dark grey background
text = 8bc34a
subtext = b4b4b4
nav-active-text = 8bc34a
nav-active-text = 202020
main = 202020
sidebar = 202020
player = 242424

View File

@ -120,10 +120,14 @@ NAVBAR
}
/* change colors of active tab */
.main-navBar-navBarLinkActive,
.main-collectionLinkButton-selected {
background-color: var(--spice-nav-active) !important;
border-radius: 8px !important;
.main-yourLibraryX-navLink {
border-radius: 8px;
margin: 6px 0;
padding: 0 10px;
}
.main-yourLibraryX-navItem {
padding: 0;
}
.main-navBar-navBarLinkActive,
@ -134,7 +138,8 @@ NAVBAR
.main-yourLibraryX-navLinkActive,
.main-yourLibraryX-navLinkActive .home-active-icon,
.main-yourLibraryX-navLinkActive .search-active-icon {
color: var(--spice-nav-active-text) !important;
color: var(--spice-nav-active-text) !important;
background-color: var(--spice-nav-active);
}
/* color of navbar icons */
@ -161,11 +166,14 @@ NAVBAR
box-shadow: 0 20px 10px -10px var(--spice-sidebar);
}
.Pns6F5g4OEwEpdmOWTLg {
/* playlists loading placeholder */
opacity: 0.05;
filter: contrast(0.1);
/* traclists and playlists loading placeholder */
.main-trackList-placeholder,
.Pns6F5g4OEwEpdmOWTLg,
.eldivguzYznZgQoShJbe {
background-color: var(--background-base);
background-blend-mode: color-dodge;
}
/*
---------------
PLAYBACK BAR
@ -203,9 +211,8 @@ PLAYBACK BAR
bottom: 13px;
left: 0;
transition-duration: 0.3s;
padding: 0 10px 0 20px;
background-color: var(--spice-sidebar);
box-shadow: 0 0 20px 20px var(--spice-sidebar);
background-color: rgba(var(--spice-rgb-sidebar),.5);
box-shadow: 0 0 20px 20px rgba(var(--spice-rgb-sidebar),.5);
border-radius: 8px;
z-index: -1;
}
@ -216,9 +223,8 @@ PLAYBACK BAR
bottom: 13px;
right: 0;
transition-duration: 0.3s;
padding-left: 0 20px 0 10px;
background-color: var(--spice-main);
box-shadow: 0 0 20px 20px var(--spice-main);
background-color: rgba(var(--spice-rgb-sidebar),.5);
box-shadow: 0 0 20px 20px rgba(var(--spice-rgb-sidebar),.5);
border-radius: 8px;
z-index: -1;
}
@ -382,6 +388,14 @@ input {
-webkit-mask-repeat: no-repeat;
}
/* recolor animated liked or heart button on click */
#_R_G *:not([fill="none"]) {
fill: var(--spice-button-active) !important;
}
#_R_G *:not([stroke="none"]) {
stroke: var(--spice-button-active);
}
/* change appearance of 'playlist' tag */
.main-entityHeader-subtitle.main-entityHeader-small.main-entityHeader-uppercase.main-entityHeader-bold {
border: 2px var(--spice-text) solid;