fix(Ziro): ylx colors, light theme, playback time (#946)

Ziro/user.css

@@ -2,6 +2,13 @@
   --br-1: 10px;
   --br-2: 8px;
   --scrollbar: unset;
+
+  --spice-main-elevated: var(--spice-main);
+  --spice-highlight: var(--spice-button-disabled);
+  --spice-highlight-elevated: var(--spice-card);
+}
+.encore-dark-theme, .encore-dark-theme .encore-base-set {
+  --text-subdued: var(--spice-subtext);
 }
 /* background */
 .main-home-homeHeader,
@@ -14,6 +21,7 @@
 }
 .main-topBar-background {
   opacity: 1 !important;
+  background-color: var(--spice-main) !important;
 }
 * {
   box-shadow: none !important;
@@ -23,6 +31,10 @@
   display: none;
 }
 /* navbar */
+.main-rootlist-rootlist {
+  --left-sidebar-padding-left: 24px !important;
+  --left-sidebar-padding-right: 24px !important;
+}
 .main-rootlist-rootlistDividerContainer {
   display: none;
 }
@@ -82,7 +94,7 @@
 .main-nowPlayingBar-center .playback-progressbar {
   position: absolute;
   left: 0;
-  bottom: 84px;
+  bottom: 82px;
 }
 .main-nowPlayingBar-nowPlayingBar:not(:only-child) .playback-progressbar:not(.volume-bar__slider-container > .playback-progressbar) {
   bottom: 108px;
@@ -121,23 +133,29 @@
 }
 .playback-bar__progress-time-elapsed,
 .main-playbackBarRemainingTime-container {
-  color: var(--spice-subtext);
+  color: var(--spice-text);
   position: absolute;
-  margin-bottom: 30px;
+  margin-bottom: 33px;
-  right: 266px;
+  right: 0;
 }
 .playback-bar__progress-time-elapsed {
-  right: 308px;
+  right: 43px;
 }
 .playback-bar__progress-time-elapsed::after {
   content: '  /';
 }
+.main-nowPlayingBar-extraControls {
+  margin-right: 75px;
+}
 .player-controls__buttons {
   margin: 0;
 }
 .player-controls__buttons button:not(.main-playPauseButton-button) {
   color: var(--spice-button) !important;
 }
+.main-genericButton-button {
+  color: var(--spice-button) !important;
+}
 .connect-device-list-content {
   border-radius: var(--br-1);
   border: 1px solid var(--spice-button-disabled);
@@ -200,6 +218,7 @@
 .cSeieV {
   background-color: var(--spice-button-active);
 }
+
 /* menus */
 .main-contextMenu-menu {
   border: 1px solid var(--spice-button-disabled);
@@ -284,7 +303,7 @@
   display: var(--scrollbar);
 }
 .os-scrollbar-handle {
-  border-radius: 8px;
+  border-radius: var(--br-2);
   background: var(--spice-button-disabled) !important;
 }
 /* tab bar */
@@ -368,6 +387,10 @@
 .main-entityHeader-withBackgroundImage + div {
   transform: translateY(64px);
 }
+.main-entityHeader-container.main-entityHeader-withBackgroundImage {
+  background-image: linear-gradient(50deg, rgba(var(--spice-rgb-card), 1) 30%, rgba(var(--spice-rgb-card), 0.7) 60%, transparent 90%);
+  border-radius: var(--br-1);
+}
 /* tracklist */
 .main-trackList-trackList .main-rootlist-wrapper {
   background: var(--spice-card);
@@ -497,11 +520,11 @@ input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
   color: var(--spice-text);
 }
 /* misc */
-.HiVDAl0LvHLB_YdI9xwQ,
+.lyrics-lyrics-container.lyrics-lyrics-coverTopBar {
-.lyrics-lyricsContainer-LyricsContainer {
   --lyrics-color-active: var(--spice-text) !important;
   --lyrics-color-inactive: var(--spice-subtext) !important;
-  --lyrics-color-background: var(--spice-main) !important;
+  --lyrics-color-passed: var(--spice-subtext) !important;
+  --lyrics-color-messaging: var(--spice-text) !important;
 }
 .lyrics-lyricsContainer-LyricsBackground {
   background-image: none;
@@ -561,3 +584,7 @@ label.Type__TypeElement-goli3j-0.gCwing.main-playlistEditDetailsModal-textElemen
 .main-collectionLinkButton-selected .main-rootlist-statusIcons .CCeu9OfWSwIAJqA49n84.Frn4juLXf6zInWBEFFzr {
   color: var(--spice-main);
 }
+/*about artist card text*/
+.artist-artistAbout-container.artist-artistAbout-backgroundImage .artist-artistAbout-content > div {
+  color: #fff;
+}