Merge pull request #538 from williamckha/master

Fix Fluent bugs with new spotify update

Fluent/README.md

@@ -22,7 +22,7 @@ Based off [Ziro](https://github.com/schnensch0/ziro) theme by [schnensch](https:
 
 ### Install
 
-Run these commands:
+Make sure spicetify >= v2.6.3 is installed. Run these commands:
 
 #### Windows
 In **Powershell**:

Fluent/fluent.js

@@ -10,77 +10,83 @@
   }
 
   waitForElement([
-    ".main-rootlist-rootlistItemLink",
-    "#spicetify-playlist-list"
-  ], function() {
-
+    ".main-rootlist-rootlistItemLink"
+  ], function () {
     function replacePlaylistIcons() {
+      const playListItems = document.getElementsByClassName("main-rootlist-rootlistItemLink");
 
-      var els = document.getElementsByClassName("main-rootlist-rootlistItemLink");
-      for (let i = 0; i < els.length; i++) {
-
-        let link = els[i];
-        let [_, app, uid] = link.pathname.split("/");
+      for (const item of playListItems) {
+        const link = item.pathname;
         let uri;
-        if (app == "playlist") {
-          uri = Spicetify.URI.playlistV2URI(uid);
-        } else if (app == "folder") {
-          link.style.content = "url(https://api.iconify.design/fluent/folder-24-regular.svg?color=%23bbb)"
-          link.style.padding = "10px";
+        if (link.search("playlist") !== -1) {
+          uri = Spicetify.URI.playlistV2URI(link.split("/").pop());
+        } else if (link.search("folder") !== -1) {
+          item.style.content = "url(https://api.iconify.design/fluent/folder-24-regular.svg?color=%23bbb)"
+          item.style.padding = "10px";
           continue;
         }
 
         Spicetify.CosmosAsync.get(
-          `sp://core-playlist/v1/playlist/${uri.toURI()}/metadata`, {
-            policy: {
-              picture: true
-            }
+          `sp://core-playlist/v1/playlist/${uri.toString()}/metadata`, {
+          policy: {
+            picture: true
           }
+        }
         ).then(res => {
           const meta = res.metadata;
-          if (meta.picture == "") {
-            link.style.content = "url(https://api.iconify.design/fluent/music-note-2-24-regular.svg?color=%23bbb)"
-            link.style.padding = "10px";
+          if (meta.picture === "") {
+            item.style.content = "url(https://api.iconify.design/fluent/music-note-2-24-regular.svg?color=%23bbb)"
+            item.style.padding = "10px";
           } else {
-            link.style.backgroundImage = "url(" + meta.picture + ")";
-            link.style.content = "";
+            item.style.backgroundImage = "url(" + meta.picture + ")";
+            item.style.content = "";
           }
         });
-
-      }
-
+      };
     };
 
     replacePlaylistIcons();
-
     const observer = new MutationObserver(replacePlaylistIcons);
-    const rootList = document.querySelector("#spicetify-playlist-list");
-    observer.observe(rootList, {
-      childList: true,
-      subtree: true
+    waitForElement([".main-rootlist-wrapper .os-content"], () => {
+      const rootList = document.querySelector(".main-rootlist-wrapper .os-content");
+      observer.observe(rootList, {
+        childList: true,
+        subtree: true
+      });
     });
-
   });
 
   waitForElement([
-    '.main-navBar-navBarLink',
-    '[href="/collection"] > span'
-  ], function() {
-    var accent = getComputedStyle(document.documentElement).getPropertyValue('--spice-accent').replace(" #", "");
-    var icons = ["home", "search", "library"];
-    var els = document.getElementsByClassName("main-navBar-navBarLink");
-    for (let i = 0; i < els.length; i++) {
-      let link = els[i];
+    ".main-navBar-navBarLink",
+    "[href='/collection'] > span"
+  ], () => {
+    const navBarItems = document.getElementsByClassName("main-navBar-navBarLink");
+    for (const item of navBarItems) {
       let div = document.createElement("div");
       div.classList.add("navBar-navBarLink-accent");
-      link.appendChild(div);
+      item.appendChild(div);
     }
-    document.querySelector('[href="/collection"] > span').innerHTML = "Library";
+    document.querySelector("[href='/collection'] > span").innerHTML = "Library";
   });
 
-  var text_color = getComputedStyle(document.documentElement).getPropertyValue('--spice-text');
-  if (text_color == " #000000") {
+  const textColor = getComputedStyle(document.documentElement).getPropertyValue('--spice-text');
+  if (textColor == " #000000") {
     document.documentElement.style.setProperty('--filter-brightness', 0);
   }
 
+  waitForElement([".main-playButton-button"], () => {
+    const style = document.createElement("style");
+    style.innerHTML = `\
+    .main-playButton-button[aria-label="${Spicetify.Platform.Translations.play}"],
+    .main-playButton-PlayButton[aria-label="${Spicetify.Platform.Translations.play}"] {
+      background-color: var(--spice-text) !important;
+      -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg');
+    }
+    .main-playButton-button[aria-label="${Spicetify.Platform.Translations.pause}"],
+    .main-playButton-PlayButton[aria-label="${Spicetify.Platform.Translations.pause}"] {
+      background-color: var(--spice-text) !important;
+      -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_pause_16_filled.svg');
+    }`;
+    document.head.appendChild(style);
+  });
 })();

Fluent/user.css

@@ -22,7 +22,7 @@
 .Root__main-view {
   z-index: 0;
   background-color: var(--spice-main);
-  height: 110%;
+  height: 100%;
 }
 
 .os-scrollbar {
@@ -65,8 +65,9 @@
 }
 
 .x-actionBarBackground-background,
-.x-entityHeader-overlay {
-  background-image: none !important;
+.x-entityHeader-overlay,
+.We1fExPHxLIRmV0rZGNo {
+  background: none !important;
 }
 
 
@@ -99,14 +100,16 @@
 }
 
 .main-cardImage-image,
-.main-cardImage-imageWrapper {
+.main-cardImage-imageWrapper,
+.OALAQFKvC7XQOVYpklB4 img {
   border-radius: var(--border-radius-2);
 }
 
 .main-card-card,
 .x-heroCategoryCard-HeroCategoryCard,
 .x-categoryCard-CategoryCard,
-.main-heroCard-card {
+.main-heroCard-card,
+.OALAQFKvC7XQOVYpklB4 {
   border-radius: var(--border-radius-1);
 }
 
@@ -114,7 +117,9 @@
 .main-heroCard-card,
 .x-searchResultsTracks-root>.main-gridContainer-gridContainer,
 .main-trackList-indexable,
-.view-homeShortcutsGrid-shortcut {
+.view-homeShortcutsGrid-shortcut,
+.OALAQFKvC7XQOVYpklB4,
+.L4WROPnQ7MPGhylvVyxd {
   background-color: var(--spice-card);
   box-shadow: 0px 0px 6px 0px var(--spice-layer-shadow) !important;
   border: var(--spice-contour) solid 1px;
@@ -122,12 +127,12 @@
 
 .main-tag-container {
   font-family: "Segoe UI", sans-serif !important;
-  font-weight: 900;
+  font-weight: 400;
   font-size: 10px;
   color: #463d3d !important;
 }
 
-.main-heroCardTag-root {
+.main-heroCardTag-root, ._8PRqRiYMqnyy_gN_fUD ._AxyaXOKl3GkvT212Vco {
   height: 24px;
   padding: 12px;
   margin-top: 8px;
@@ -324,6 +329,16 @@ h3,
   background-color: var(--spice-accent) !important; 
 }
 
+.main-navBar-navBarLink[href="/lyrics-plus"] > .collection-icon {
+  -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_regular.svg');
+  background-color: var(--spice-subtext) !important; 
+}
+
+.main-navBar-navBarLink[href="/lyrics-plus"] > .collection-active-icon {
+  -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_slide_text_24_filled.svg');
+  background-color: var(--spice-accent) !important; 
+}
+
 .main-createPlaylistButton-button {
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_add_circle_24_regular.svg');
   background-color: var(--spice-subtext) !important;
@@ -548,10 +563,6 @@ button.switch {
 
 /* playlist sidebar */
 
-.spicetify-playlist-list {
-  height:
-}
-
 .main-createPlaylistButton-button,
 ._6b5bc370e9834a4932f57284a96a0748-scss,
 ._928aa704d6ac22c1e288a4ddbed11a40-scss,
@@ -597,8 +608,8 @@ button.switch {
   padding: 0 12px !important;
 }
 
-.main-createPlaylistButton-button {
-  margin-top: 32px;
+._fvd5Owa47kK9H48h7mL {
+  display: none;
 }
 
 .main-createPlaylistButton-button {
@@ -630,7 +641,8 @@ li.GlueDropTarget--playlists {
   height: 70%;
 }
 
-.main-rootlist-expandArrow {
+.main-rootlist-expandArrow,
+.pJFm5xRtKuufaI2uNf6w {
   color: var(--spice-text);
   position: relative;
   margin-inline-start: -32px;
@@ -639,7 +651,8 @@ li.GlueDropTarget--playlists {
   top: 17px;
 }
 
-.main-rootlist-expandArrowRotated {
+.main-rootlist-expandArrowRotated,
+.pJFm5xRtKuufaI2uNf6w {
   right: -5px !important;
   top: 14px !important;
 }
@@ -699,21 +712,19 @@ li.GlueDropTarget--playlists {
   display: none;
 }
 
-#spicetify-playlist-list>.main-rootlist-wrapper:hover {
+.main-rootlist-wrapper .vB_gmMwzmB3GcEliiiys {
   overflow-y: scroll;
   margin-left: 4px;
+  height: calc(100vh - 500px) !important;
 }
 
-#spicetify-playlist-list>.main-rootlist-wrapper {
-  overflow-y: hidden;
-  height: calc(100vh - 470px) !important;
-}
-
-.main-rootlist-wrapper::-webkit-scrollbar {
+.main-rootlist-wrapper::-webkit-scrollbar,
+.main-rootlist-wrapper .vB_gmMwzmB3GcEliiiys::-webkit-scrollbar {
   width: 4px;
 }
 
-.main-rootlist-wrapper::-webkit-scrollbar-thumb {
+.main-rootlist-wrapper::-webkit-scrollbar-thumb,
+.main-rootlist-wrapper .vB_gmMwzmB3GcEliiiys::-webkit-scrollbar-thumb  {
   background-color: var(--spice-card);
   border-radius: var(--border-radius-2);
 }
@@ -729,7 +740,14 @@ li.GlueDropTarget--playlists {
 }
 
 .main-trackList-indexable {
-  border-bottom: 16px solid var(--spice-card);
+  padding: 8px;
+}
+
+.main-trackList-trackListHeader.g9n_9K5pFI3B_JuDI_hS {
+  padding: 0px;
+  margin: 0px;
+  border-bottom: none;
+  background: var(--spice-card);
 }
 
 .main-trackList-trackListRow {
@@ -810,7 +828,7 @@ li.GlueDropTarget--playlists {
 }
 
 /* big thanks to CharlieS and harbassan for providing the svg */
-.main-trackList-playingIcon {
+.main-trackList-playingIcon, .WBTm60_TPRG_oYwBuS7_ {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
   background: var(--spice-text);
   content-visibility: hidden;
@@ -872,7 +890,9 @@ li.GlueDropTarget--playlists {
 /* artist page */
 
 .artist-artistOverview-heading,
-.artist-artistPick-heading {
+.artist-artistPick-heading,
+.J6CYfp0Tj6MkWJCdssuA,
+.artist-artistAbout-heading {
   margin-bottom: 20px !important;
 }
 
@@ -887,7 +907,8 @@ li.GlueDropTarget--playlists {
   border-radius: var(--border-radius-1);
 }
 
-.main-entityHeader-background.main-entityHeader-overlay {
+.main-entityHeader-background.main-entityHeader-overlay,
+.wQi0raQMEJJrELuj_2FP.main-entityHeader-overlay {
   --bgColor: transparent !important;
   background: none;
 }
@@ -900,7 +921,7 @@ li.GlueDropTarget--playlists {
   background-color: rgba(var(--spice-rgb-selected-row), .1) !important;
 }
 
-.main-entityHeader-background {
+.main-entityHeader-background, .wQi0raQMEJJrELuj_2FP._dsx4Y9jukDHLzhl7bQb {
   transform: scale(1) !important;
   margin-top: 48px;
 }
@@ -992,7 +1013,7 @@ a[class*='-tabBar-headerItemLink']:active {
 
 /* search */
 
-.x-searchInput-searchInputInput {
+.x-searchInput-searchInputInput, .dIwMadpRrW1PwEwEeAbN {
   background-color: var(--spice-card);
   color: var(--spice-text) !important;
   border-radius: var(--border-radius-2) !important;
@@ -1001,21 +1022,21 @@ a[class*='-tabBar-headerItemLink']:active {
   transition: background-color ease-in 167ms;
 }
 
-.x-searchInput-searchInputInput:focus {
+.x-searchInput-searchInputInput:focus, .dIwMadpRrW1PwEwEeAbN:focus {
   background-color: var(--spice-main);
   border-bottom: var(--spice-accent) solid 2px;
 }
 
-.x-searchInput-searchInput {
+.x-searchInput-searchInput, .KTdyveh7LiwRtB2aC_JT {
   -webkit-box-flex: 1;
   width: 40vw;
 }
 
-.x-searchInput-searchInputIconContainer {
+.x-searchInput-searchInputIconContainer, .mCoaW_xbXtY1_uzuUKu_ {
   flex-direction: row-reverse;
 }
 
-.x-searchInput-searchInputSearchIcon {
+.x-searchInput-searchInputSearchIcon, .Y_y159Y1ahiDoouerBGc {
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_search_16_regular.svg');
   background-color: var(--spice-subtext) !important; 
   flex: 0;
@@ -1024,19 +1045,23 @@ a[class*='-tabBar-headerItemLink']:active {
   width: 16px;
 }
 
-.x-searchInput-searchInputClearButton {
+.Y_y159Y1ahiDoouerBGc path {
+  display: none;
+}
+
+.x-searchInput-searchInputClearButton, ._77ZnlZoTKshnd3uWfXf {
   margin-left: 5px;
   margin-right: 12px;
   height: 48px;
 }
 
-.x-searchInput-searchInputClearButton path {
+.x-searchInput-searchInputClearButton path, ._77ZnlZoTKshnd3uWfXf path {
   display: block !important;
   stroke: var(--spice-subtext) !important;
   stroke-width: 1.3px;
 }
 
-.x-searchInput-searchInputClearButton svg {
+.x-searchInput-searchInputClearButton svg, ._77ZnlZoTKshnd3uWfXf svg {
   padding: 3px;
 }
 
@@ -1150,6 +1175,10 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
   padding-inline-end: 170px;
 }
 
+.main-connectToFacebook-container {
+  margin-top: 50px;
+}
+
 .main-connectToFacebook-text,
 .main-connectToFacebook-disclaimer,
 .main-connectToFacebook-headerTitle,
@@ -1180,7 +1209,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
 }
 
 .main-buddyFeed-friendsFeedContainer {
-  margin-top: 60px;
+  margin-top: 25px;
 }
 
 .main-buddyFeed-findFriendsIcon,
@@ -1308,7 +1337,7 @@ option {
 
 .Root__now-playing-bar {
   padding-right: 6px;
-  margin: 13px;
+  margin: 0px 13px 13px 13px;
   width: calc(100% - 26px);
   box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important;
   border-radius: var(--border-radius-1);
@@ -1319,6 +1348,11 @@ option {
   border-radius: var(--border-radius-1);
 }
 
+.gqeP9Y0_y6DLm4CD_m3Q {
+  border: 0px; 
+  background: none;
+}
+
 .main-nowPlayingBar-container {
   border-top: 0px;
 }
@@ -1329,14 +1363,15 @@ option {
 
 .playback-bar,
 .progress-bar__fg_wrapper,
-._95134b8c1897fc7ed23d86e424a2e9b4-scss {
+.lRNLjBiX_H7SPYbkJKLp,
+.lIrtJi5Y_8ENU19VSvJO {
   --fg-color: var(--spice-accent) !important;
   --is-active-fg-color: var(--spice-accent) !important;
   --bg-color: var(--spice-player-bar-bg);
 }
 
-._8753b35a98c172d2fed1c66a738ff034-scss,
-.progress-bar__slider {
+.progress-bar__slider,
+.giO6cIQ8auPNZuTvC4Y8 {
   background-color: var(--spice-accent) !important;
   border: 4px solid var(--spice-selected-row);
   box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important;
@@ -1344,6 +1379,7 @@ option {
   width: 11px;
   height: 11px;
   opacity: 1 !important;
+  display: block;
 }
 
 .main-nowPlayingWidget-nowPlaying>.ellipsis-one-line,
@@ -1351,7 +1387,8 @@ option {
   margin-left: 74px;
 }
 
-.main-coverSlotExpanded-container {
+.main-coverSlotExpanded-container,
+.T6whS8zYB9fG_tIdTg6m {
   position: fixed;
   top: calc(100% - 320px);
   left: calc(100% - 220px);
@@ -1362,6 +1399,7 @@ option {
   box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.5) !important;
   animation: 1s coverExpandedIn;
   animation-fill-mode: forwards;
+  background: none;
 }
 
 .main-coverSlotExpanded-containerExitActive {
@@ -1386,7 +1424,8 @@ option {
   }
 }
 
-.main-coverSlotCollapsed-container {
+.main-coverSlotCollapsed-container,
+.zcsxy3fvYCmZGcE7VzW7 {
   position: fixed;
   top: -12px;
   left: 0px;
@@ -1397,13 +1436,15 @@ option {
 }
 
 .main-coverSlotCollapsed-container,
-.cover-art .cover-art-image {
+.cover-art .cover-art-image,
+.zcsxy3fvYCmZGcE7VzW7 {
   transform-origin: center;
   transition-timing-function: ease-in;
   transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.3s, left 0.5s, box-shadow 0.5s;
 }
 
-.main-coverSlotCollapsed-container[aria-hidden="true"] {
+.main-coverSlotCollapsed-container[aria-hidden="true"],
+.zcsxy3fvYCmZGcE7VzW7[aria-hidden="true"] {
   left: calc(100vw - 178px);
   top: -245px;
   width: 200px;
@@ -1413,12 +1454,14 @@ option {
   animation: 1s coverExpandedOut;
 }
 
-.main-coverSlotCollapsed-container[aria-hidden="false"] {
+.main-coverSlotCollapsed-container[aria-hidden="false"],
+.zcsxy3fvYCmZGcE7VzW7[aria-hidden="false"] {
   transition-timing-function: ease-out !important;
   transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.5s 0.1s, left 0.3s, box-shadow 0.5s !important;
 }
 
-.main-coverSlotCollapsed-container[aria-hidden="true"] .cover-art .cover-art-image {
+.main-coverSlotCollapsed-container[aria-hidden="true"] .cover-art .cover-art-image,
+.main-nowPlayingWidget-coverExpanded .zcsxy3fvYCmZGcE7VzW7 .cover-art .cover-art-image {
   width: 200px;
   height: 200px;
 }
@@ -1426,7 +1469,9 @@ option {
 .CoverSlotExpanded__actionButton,
 .main-coverSlotCollapsed-expandButton,
 .CoverSlotExpanded__actionButton:hover,
-.main-coverSlotCollapsed-expandButton:hover {
+.main-coverSlotCollapsed-expandButton:hover,
+.kyn0AY4_gXWvbdivdFgP,
+.kyn0AY4_gXWvbdivdFgP:hover {
   background-color: var(--spice-card);
 }
 
@@ -1494,49 +1539,50 @@ option {
   height: 22px !important;
 }
 
-.main-repeatButton-button {
+/* Disabled */
+.main-repeatButton-button[aria-checked="false"]{
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_off_24_regular.svg');
   background-color: var(--spice-subtext) !important;
   height: 22px !important; 
 }
-
-.main-repeatButton-on {
+/* Repeat one */
+.main-repeatButton-button[aria-checked="mixed"]{
+  -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg') !important;
+  background-color: var(--spice-text) !important;
+  height: 22px !important;
+}
+/* Repeat all */
+.main-repeatButton-button[aria-checked="true"]{
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_24_filled.svg');
   background-color: var(--spice-text) !important;
   height: 22px !important;
 }
 
-.main-repeatButton-on[aria-label="Disable repeat"] {
-  -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_arrow_repeat_all_once_24_filled.svg') !important;
-}
-
+/* Shuffle disabled */
 .main-shuffleButton-button {
   -webkit-mask-image: url('./phosphor-icons/shuffle.svg');
   background-color: var(--spice-subtext) !important;
   height: 22px !important;
 }
-
-.main-shuffleButton-on {
+/* Shuffle enabled */
+.main-shuffleButton-button[aria-checked="true"] {
   -webkit-mask-image: url('./phosphor-icons/shuffle-bold.svg');
   background-color: var(--spice-text) !important;
   height: 22px !important;
 }
 
-.main-repeatButton-on:after,
-.main-shuffleButton-on:after {
-  content: none !important;
-}
-
 
 /* ads */
 
 .main-leaderboardComponent-container,
-.main-billboardComponent-footer {
+.main-billboardComponent-footer,
+.k6onUQZSeZIsonJ4cSpK {
   display: none;
 }
 
 .desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
-.desktoproutes-homepage-takeover-ad-hptoComponent-container {
+.desktoproutes-homepage-takeover-ad-hptoComponent-container,
+.snMc3rl8H2pM9cqkTpQ6 {
   display: none !important;
 }
 
@@ -1553,6 +1599,12 @@ option {
   padding: 10px;
 }
 
+.main-playButton-button,
+.main-playButton-PlayButton {
+  background-color: var(--spice-text) !important;
+  -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg');
+}
+
 .main-playButton-PlayButton[aria-label="Play"],
 .main-playPauseButton-button[aria-label="Play"] {
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg');
@@ -1565,13 +1617,13 @@ option {
   background-color: var(--spice-text) !important;
 }
 
-.main-trackList-rowPlayPauseButton {
+.gro_tSi7cwspepH0as03 {
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg');
   background-color: var(--spice-text) !important; 
   padding: 0px !important;
 }
 
-.main-trackList-rowPlayPauseButton[aria-label="Pause"] {
+.gro_tSi7cwspepH0as03[aria-label="Pause"] {
   -webkit-mask-image: url('./fluentui-system-icons/ic_fluent_pause_16_filled.svg') !important;
   background-color: var(--spice-text) !important;
 }