fix(StarryNight): make various button text visibility fixes in and out of apps (#1106)

Co-authored-by: jal1077 <jal1077@nyu.edu>

StarryNight/color.ini

@@ -19,7 +19,7 @@ button                  = FFF3C4
 button-disabled         = 000000
 
 highlight               = 191919
-highlight-elevated      = FFFFFF 
+highlight-elevated      = 152238 
 
 shadow                  = 000000
 selected-row            = FFFFFF
@@ -81,7 +81,7 @@ button                  = c4c6ff
 button-disabled         = 000000
 
 highlight               = 191919
-highlight-elevated      = FFFFFF 
+highlight-elevated      = 011502 
 
 shadow                  = 000000
 selected-row            = FFFFFF
@@ -112,7 +112,7 @@ button                  = FFF3C4
 button-disabled         = 939bb6
 
 highlight               = 9f45b0
-highlight-elevated      = FFFFFF 
+highlight-elevated      = 9f45b0 
 
 shadow                  = 000000
 selected-row            = FFFFFF
@@ -143,7 +143,7 @@ button                  = fbe39b
 button-disabled         = 000000
 
 highlight               = 191919
-highlight-elevated      = FFFFFF 
+highlight-elevated      = e69138 
 
 shadow                  = 000000
 selected-row            = FFFFFF
@@ -205,7 +205,7 @@ button                  = FFF3C4
 button-disabled         = 000000
 
 highlight               = 191919
-highlight-elevated      = FFFFFF 
+highlight-elevated      = C49C48 
 
 shadow                  = 000000
 selected-row            = 000000

StarryNight/theme.js

@@ -20,12 +20,6 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
   backgroundContainer.className = 'starrynight-bg-container';
   topContainer.appendChild(backgroundContainer);
 
-  // make --spice-main transparent for a more visible background
-  r.style.setProperty(
-    '--spice-main',
-    `${rs.getPropertyValue('--spice-main')}00`
-  );
-
   // to position stars and shooting stars between the background and everything else
   const rootElement = document.querySelector('.Root__top-container');
   rootElement.style.zIndex = '0';
@@ -46,6 +40,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
     star.style.height = `${size}px`;
     star.style.backgroundColor = rs.getPropertyValue('--spice-star');
     star.style.zIndex = '-1';
+    star.style.borderRadius = '50%';
 
     if (Math.random() < 1 / 5) {
       star.style.animation = `twinkle${
@@ -83,7 +78,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
   resizeObserver.observe(rightbar);
 
   // start or stop spinning animation based on whether something is playing
-  const targetElement = document.querySelector('.main-playPauseButton-button');
+  const targetElement = document.querySelector('[data-encore-id="buttonPrimary"]');
 
   const playObserver = new MutationObserver((mutationsList, observer) => {
     for (const mutation of mutationsList) {
@@ -105,11 +100,7 @@ waitForElement(['.Root__top-container'], ([topContainer]) => {
       '.main-nowPlayingWidget-coverArt .cover-art img'
     );
     // checks the state of the play button on the playbar
-    if (
-      document
-        .querySelector('.main-playPauseButton-button')
-        .getAttribute('aria-label') === 'Pause'
-    ) {
+    if (document.querySelector('[data-encore-id="buttonPrimary"]').getAttribute('aria-label') == 'Pause'){
       img.classList.add('running-animation');
     } else {
       img.classList.remove('running-animation');

StarryNight/user.css

@@ -26,7 +26,8 @@
   grid-template-areas:
     "global-nav global-nav global-nav"
     "left-sidebar main-view now-playing-bar"
-    "left-sidebar main-view right-sidebar";
+    "left-sidebar main-view right-sidebar" !important;
+  grid-template-rows: auto 1fr 1fr;
 }
 
 .Root__right-sidebar {
@@ -42,7 +43,7 @@
 }
 
 .Root__nav-bar {
-  background-color: var(--spice-main) !important;
+  background-color: #00000000 !important;
 }
 
 .main-trackList-trackListRow:hover {
@@ -54,9 +55,50 @@
 }
 
 .rX_OmqCngvY5ZCoYBZgb {
-  background-color: var(--background-base) !important;
+  background-color: #00000000 !important;
 }
 
+.main-yourLibraryX-entryPoints {
+  background-color: #00000000 !important;
+}
+
+.marketplace-header {
+  background-color: #00000000 !important;
+}
+
+.EmeHQXR87mUskYK6xEde {
+  background-color: #00000000 !important;
+}
+
+.lyrics-lyrics-background {
+  background-color: #00000000 !important;
+}
+
+.main-actionBarBackground-background {
+  background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #000000 100%), #00000000 !important;
+  animation: none !important;
+  -webkit-animation: none !important;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay {
+  background-image: none !important;
+  animation: none !important;
+  -webkit-animation: none !important;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+  background-image: none !important;
+  animation: none !important;
+  -webkit-animation: none !important;
+}
+
+.pUNc2aOeOQANHrhYa1GU .RDZ61ETnag1ilfZTkVxe {
+  color: #000000 !important;
+}
+
+.playlist-playlist-playlistContent {
+  background: #00000000 !important;
+}
 
 .main-nowPlayingBar-nowPlayingBar {
   min-height: 400px;
@@ -76,6 +118,14 @@
   grid-area: main-view/main-view/main-view/span 1;
 }
 
+.Root__main-view {
+  background-color: #00000000 !important;
+}
+
+.main-home-homeHeader {
+  background-image: linear-gradient(rgba(var(--spice-rgb-shadow), .6) 0, #00000000 100%), var(--background-noise);
+}
+
 .main-nowPlayingBar-center {
   width: 100%;
 }
@@ -95,6 +145,7 @@
   width: 220px !important;
   margin: auto;
   background-color: #00000000;
+  box-shadow: 0 0 0px var(--spice-rgb-shadow);
 }
 
 .main-nowPlayingWidget-coverArt .cover-art img {
@@ -175,6 +226,10 @@
   background-color: transparent;
 }
 
+.ffFwfKcPDbmAPLXzxzKq {
+  background-color: #00000000 !important;
+}
+
 @keyframes twinkle1 {
   0% {
     box-shadow: 0px 0px 8px 2px var(--spice-star-glow);