feat(StarryNight): randomize shooting star positions and improve background of playlist

StarryNight/color.ini

@@ -111,8 +111,8 @@ button-active           = FFF3C4
 button                  = FFF3C4
 button-disabled         = 939bb6
 
-highlight               = 9f45b0
-highlight-elevated      = 9f45b0 
+highlight               = 9d00ff
+highlight-elevated      = 9d00ff 
 
 shadow                  = 000000
 selected-row            = FFFFFF

StarryNight/theme.js

@@ -137,5 +137,24 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
     shootingstar.style.animationDelay = `${Math.floor(Math.random() * 7)}s`;
 
     backgroundContainer.appendChild(shootingstar);
+
+    shootingstar.addEventListener('animationend', () => {
+      if (Math.random() < 0.75) {
+        shootingstar.style.top = '-4px'; // hidden off screen when animation is delayed
+        shootingstar.style.right = `${random(0, 90)}%`;
+      } else {
+        shootingstar.style.top = `${random(0, 50)}%`;
+        shootingstar.style.right = '-4px'; // hidden when animation is delayed
+      }
+
+      shootingstar.style.animation = 'none'; // Remove animation
+
+      void shootingstar.offsetWidth;
+
+      shootingstar.style.animation = '';
+      shootingstar.style.animationDuration = `${
+        Math.floor(Math.random() * 4) + 3
+      }s`;
+    });
   }
 });

StarryNight/user.css

@@ -17,6 +17,7 @@
   grid-template-areas:
     "left-sidebar    main-view         now-playing-bar"
     "left-sidebar    main-view         right-sidebar";
+  grid-template-rows: auto auto 1fr;
 }
 
 .global-nav .Root__top-container {
@@ -26,8 +27,40 @@
     "left-sidebar main-view right-sidebar" !important;
 }
 
+.Root__globalNav {
+  background-color: #00000000 !important;
+}
+
+.ffFwfKcPDbmAPLXzxzKq:before {
+  background-color: #00000000 !important;
+}
+
+.I0bVSxvqA3rm5HvciMap {
+  --bgColor: #00000000 !important;
+}
+
+.I0bVSxvqA3rm5HvciMap::after {
+  --bgColor: #00000000 !important;
+}
+
+.PeLrpasyfBW8ql_bmoAi {
+  background-color: #00000000 !important;
+  background-image: none !important;
+}
+
+.PkOz5g82CaoKk1J3GX0e  {
+  background-color: #00000000 !important;
+  background-image: none !important;
+}
+
+.sv5suqIPUwjgUF_BzM41 {
+  transform: none !important;
+}
+
 .Root__right-sidebar {
   width: min-content;
+  height: auto !important;
+  min-height: 100% !important;
 }
 
 .Root__now-playing-bar {
@@ -355,7 +388,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
   height: 4px;
   background: var(--spice-shooting-star);
   border-radius: 50%;
-  animation: animate 3s linear infinite;
+  animation: animate 3s linear;
   left: initial;
   z-index: -1;
 }