Browse Source

fix: song list btn transparency & position

Sv443 1 month ago
parent
commit
86c7957b32
3 changed files with 53 additions and 2 deletions
  1. 26 1
      dist/BetterYTM.css
  2. 25 0
      src/features/songLists.css
  3. 2 1
      src/features/songLists.ts

+ 26 - 1
dist/BetterYTM.css

@@ -894,7 +894,7 @@ body .bytm-ripple.slowest {
     )
   );
   position: absolute;
-  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.125));
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;
@@ -2222,6 +2222,11 @@ ytmusic-app-layout[player-ui-state="FULLSCREEN"] .bytm-vote-label {
   position: relative;
 }
 
+.bytm-queue-btn-container {
+  /* Scooch closer to the default YTM buttons */
+  transform: translateX(8px);
+}
+
 #side-panel ytmusic-player-queue-item .bytm-queue-btn-container {
   background: rgba(255, 255, 255, 0.1);
   background: linear-gradient(
@@ -2297,6 +2302,26 @@ ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:focus-within
   visibility: visible !important;
 }
 
+.ytmusic-player-queue .bytm-song-list-item-btn,
+ytmusic-player-queue-item
+  ytmusic-menu-renderer
+  #button-shape.ytmusic-menu-renderer
+  button {
+  background-color: var(
+    --bytm-themesong-bg-accent-col,
+    var(--ts-palette-darkmuted-hex),
+    initial
+  );
+}
+
+.ytmusic-player-queue .bytm-song-list-item-btn:hover,
+ytmusic-player-queue-item
+  ytmusic-menu-renderer
+  #button-shape.ytmusic-menu-renderer:hover
+  button {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
 /* #region volume slider */
 
 .bytm-vol-slider-cont {

+ 25 - 0
src/features/songLists.css

@@ -4,6 +4,11 @@
   position: relative;
 }
 
+.bytm-queue-btn-container {
+  /* Scooch closer to the default YTM buttons */
+  transform: translateX(8px);
+}
+
 #side-panel ytmusic-player-queue-item .bytm-queue-btn-container {
   background: rgba(255, 255, 255, 0.1);
   background: linear-gradient(
@@ -78,3 +83,23 @@ ytmusic-responsive-list-item-renderer.bytm-has-queue-btns:focus-within
   a.bytm-generic-btn {
   visibility: visible !important;
 }
+
+.ytmusic-player-queue .bytm-song-list-item-btn,
+ytmusic-player-queue-item
+  ytmusic-menu-renderer
+  #button-shape.ytmusic-menu-renderer
+  button {
+  background-color: var(
+    --bytm-themesong-bg-accent-col,
+    var(--ts-palette-darkmuted-hex),
+    initial
+  );
+}
+
+.ytmusic-player-queue .bytm-song-list-item-btn:hover,
+ytmusic-player-queue-item
+  ytmusic-menu-renderer
+  #button-shape.ytmusic-menu-renderer:hover
+  button {
+  background-color: rgba(255, 255, 255, 0.2);
+}

+ 2 - 1
src/features/songLists.ts

@@ -116,6 +116,7 @@ async function addQueueButtons(
   if(getFeature("lyricsQueueButton")) {
     lyricsBtnElem = await createLyricsBtn(undefined, false);
 
+    lyricsBtnElem.classList.add("bytm-song-list-item-btn");
     lyricsBtnElem.ariaLabel = lyricsBtnElem.title = t("open_lyrics");
     lyricsBtnElem.style.display = "inline-flex";
     lyricsBtnElem.style.visibility = "initial";
@@ -227,7 +228,7 @@ async function addQueueButtons(
   if(getFeature("deleteFromQueueButton")) {
     deleteBtnElem = document.createElement("a");
     deleteBtnElem.ariaLabel = deleteBtnElem.title = (listType === "currentQueue" ? t("remove_from_queue") : t("delete_from_list"));
-    deleteBtnElem.classList.add("ytmusic-player-bar", "bytm-delete-from-queue", "bytm-generic-btn");
+    deleteBtnElem.classList.add("ytmusic-player-bar", "bytm-delete-from-queue", "bytm-generic-btn", "bytm-song-list-item-btn");
     deleteBtnElem.role = "button";
     deleteBtnElem.tabIndex = 0;
     deleteBtnElem.style.visibility = "initial";