From d25a67c1f000e59ea917c6c6dbe1988be6acea86 Mon Sep 17 00:00:00 2001
From: darkthemer <111078063+darkthemer@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:14:40 +0800
Subject: [PATCH] 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
---
 Sleek/color.ini |  2 +-
 Sleek/user.css  | 44 +++++++++++++++++++++++++++++---------------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/Sleek/color.ini b/Sleek/color.ini
index 6134d99..d260e72 100644
--- a/Sleek/color.ini
+++ b/Sleek/color.ini
@@ -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
diff --git a/Sleek/user.css b/Sleek/user.css
index 6b9db93..2f82aa1 100644
--- a/Sleek/user.css
+++ b/Sleek/user.css
@@ -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;