fix: better ripple button anim speed and colors

dist/BetterYTM.css

@@ -608,7 +608,7 @@ body .bytm-ripple.slower {
 .bytm-ripple-area {
   --bytm-ripple-min-size: 100px;
   position: absolute;
-  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.325));
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.275));
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;
@@ -1263,6 +1263,7 @@ hr {
   overflow: hidden !important;
 }
 
+/* #region generic (circular) button */
 .bytm-generic-btn {
   --bytm-generic-btn-width: 36px;
   --bytm-generic-btn-height: 36px;
@@ -1303,7 +1304,7 @@ hr {
     border: 1px solid initial;
   }
   25% {
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.4);
   }
   100% {
     border: 1px solid initial;

src/components/circularButton.ts

@@ -67,5 +67,5 @@ export async function createCircularBtn({
 
   btnElem.appendChild(imgElem);
 
-  return ripple ? createRipple(btnElem, { speed: "slow" }) : btnElem;
+  return ripple ? createRipple(btnElem) : btnElem;
 }

src/components/ripple.css

@@ -27,7 +27,7 @@ body .bytm-ripple.slower {
 .bytm-ripple-area {
   --bytm-ripple-min-size: 100px;
   position: absolute;
-  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.325));
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.275));
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;

src/features/layout.css

@@ -4,6 +4,7 @@
   overflow: hidden !important;
 }
 
+/* #region generic (circular) button */
 .bytm-generic-btn {
   --bytm-generic-btn-width: 36px;
   --bytm-generic-btn-height: 36px;
@@ -44,7 +45,7 @@
     border: 1px solid initial;
   }
   25% {
-    border: 1px solid rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.4);
   }
   100% {
     border: 1px solid initial;

src/features/layout.ts

@@ -606,7 +606,7 @@ export async function initThumbnailOverlay() {
     
       // toggle button
       if(toggleBtnShown) {
-        const toggleBtnElem = createRipple(document.createElement("a"), { speed: "slow" });
+        const toggleBtnElem = createRipple(document.createElement("a"));
         toggleBtnElem.id = "bytm-thumbnail-overlay-toggle";
         toggleBtnElem.role = "button";
         toggleBtnElem.tabIndex = 0;

src/features/songLists.ts

@@ -266,8 +266,8 @@ async function addQueueButtons(
     deleteBtnElem.appendChild(imgElem);
   }
 
-  lyricsBtnElem && queueBtnsCont.appendChild(createRipple(lyricsBtnElem, { speed: "slow" }));
-  deleteBtnElem && queueBtnsCont.appendChild(createRipple(deleteBtnElem, { speed: "slow" }));
+  lyricsBtnElem && queueBtnsCont.appendChild(createRipple(lyricsBtnElem));
+  deleteBtnElem && queueBtnsCont.appendChild(createRipple(deleteBtnElem));
 
   queueItem.querySelector<HTMLElement>(containerParentSelector)?.appendChild(queueBtnsCont);
   queueItem.classList.add("bytm-has-queue-btns");