fix: auto like btn style and add ripple effect

dist/BetterYTM.css

@@ -609,7 +609,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.275));
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
   transform: translate(-50%, -50%);
   pointer-events: none;
   border-radius: 50%;
@@ -1764,7 +1764,9 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   margin-left: 10px;
 }
 
-.bytm-auto-like-toggle-btn {
+/* more specificity to override the default styles */
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn {
   margin-right: 8px;
   border: 1px solid var(--bytm-auto-like-btn-color);
   box-sizing: border-box;
@@ -1773,38 +1775,38 @@ ytmusic-app-layout[player-ui-state=FULLSCREEN] .bytm-vote-label {
   animation: none;
 }
 
-.bytm-auto-like-toggle-btn.left-margin {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.left-margin {
   margin: 0;
   margin-left: 8px;
 }
 
-.bytm-auto-like-toggle-btn:active {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-.bytm-auto-like-toggle-btn:active,
-.bytm-auto-like-toggle-btn.toggled {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
   border-color: rgba(255, 255, 255, 0.2);
 }
 
-.bytm-auto-like-toggle-btn svg path {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn svg path {
   fill: var(--bytm-auto-like-btn-color);
   transition: fill 0.2s ease;
 }
 
-.bytm-auto-like-toggle-btn:active svg path,
-.bytm-auto-like-toggle-btn.toggled svg path {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active svg path,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled svg path {
   fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }
 
-.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
   font-weight: 500;
   color: var(--bytm-auto-like-btn-color);
   transition: color 0.2s ease;
 }
 
-.bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
-.bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
 {
   color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }

src/features/input.css

@@ -61,7 +61,9 @@
   margin-left: 10px;
 }
 
-.bytm-auto-like-toggle-btn {
+/* more specificity to override the default styles */
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn {
   margin-right: 8px;
   border: 1px solid var(--bytm-auto-like-btn-color);
   box-sizing: border-box;
@@ -70,38 +72,38 @@
   animation: none;
 }
 
-.bytm-auto-like-toggle-btn.left-margin {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.left-margin {
   margin: 0;
   margin-left: 8px;
 }
 
-.bytm-auto-like-toggle-btn:active {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-.bytm-auto-like-toggle-btn:active,
-.bytm-auto-like-toggle-btn.toggled {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
   border-color: rgba(255, 255, 255, 0.2);
 }
 
-.bytm-auto-like-toggle-btn svg path {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn svg path {
   fill: var(--bytm-auto-like-btn-color);
   transition: fill 0.2s ease;
 }
 
-.bytm-auto-like-toggle-btn:active svg path,
-.bytm-auto-like-toggle-btn.toggled svg path {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active svg path,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled svg path {
   fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }
 
-.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
   font-weight: 500;
   color: var(--bytm-auto-like-btn-color);
   transition: color 0.2s ease;
 }
 
-.bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
-.bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active .bytm-generic-long-btn-txt,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled .bytm-generic-long-btn-txt
 {
   color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
 }

src/features/input.ts

@@ -7,7 +7,7 @@ import { featInfo } from "./index.js";
 import { getFeature } from "../config.js";
 import { compressionFormat } from "../constants.js";
 import { addSelectorListener } from "../observers.js";
-import { createLongBtn, showIconToast } from "../components/index.js";
+import { createLongBtn, createRipple, showIconToast } from "../components/index.js";
 import { getAutoLikeDialog } from "../dialogs/index.js";
 import "./input.css";
 
@@ -390,5 +390,5 @@ async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, c
   buttonEl.classList.add(...["bytm-auto-like-toggle-btn", ...(extraClasses ?? [])]);
   buttonEl.dataset.channelId = channelId;
 
-  siblingEl.insertAdjacentElement("afterend", buttonEl);
+  siblingEl.insertAdjacentElement("afterend", createRipple(buttonEl));
 }