Improve MediaBar and MediaBarEnhanced support - ensure Watchlist button style matches for various skins

scripts/skinConfig.js

@@ -212,7 +212,7 @@
                     {
                         name: 'Media Bar Support',
                         url: 'https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css',
-                        enabled: true
+                        enabled: false
                     },
                     {
                         name: 'Media Bar Support (Nightly Version)',
@@ -243,6 +243,16 @@
                         name: 'Solid App Bar',
                         url: `${getKefinTweaksRoot()}skins/optional/ElegantFin/solidAppBar.css`,
                         enabled: false
+                    },
+                    {
+                        name: 'Fully Transparent App Bar',
+                        url: `${getKefinTweaksRoot()}skins/optional/ElegantFin/transparentAppBar.css`,
+                        enabled: false
+                    },
+                    {
+                        name: 'ElegantFin Patch for Modern UI',
+                        url: 'https://cdn.jsdelivr.net/gh/mihaif7/elegantfin-jf12@main/Theme/ElegantFin-jf12-modern-latest.css',
+                        enabled: false
                     }
                 ]
             },
@@ -272,7 +282,7 @@
                     {
                         name: 'Media Bar Support',
                         url: 'https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css',
-                        enabled: true
+                        enabled: false
                     },
                     {
                         name: 'Media Bar Support (Nightly Version)',
@@ -416,6 +426,7 @@
                         urls: [
                             'https://cdn.jsdelivr.net/gh/ya0903/NetFin@main/netfin.css',
                             `${getKefinTweaksRoot()}skins/netfin-kefin.css`,
+                            `${getKefinTweaksRoot()}skins/fin-kefin-10.11.css`
                         ]
                     },
                 ],

scripts/watchlist.css

@@ -2214,7 +2214,7 @@ div[data-tab="watchlist"] .loading-message {
 		"GRAD" 0,
 		"opsz" 48;
 }
-.slide .watchlist-button::before {
+#slides-container .watchlist-button::before {
 	content: "bookmark_outline";
 	font-family: "Material Icons";
 	font-weight: 600;
@@ -2227,15 +2227,6 @@ div[data-tab="watchlist"] .loading-message {
 		"GRAD" 0,
 		"opsz" 48;
 }
-.slide .watchlist-button {
-	border-radius: 50%;
-	height: 50px;
-	width: 50px;
-	border: none;
-	cursor: pointer;
-	transition: color 0.2s;
-	-webkit-tap-highlight-color: #fff0;
-}
 
 .card:has(button[data-played="true"]) .watchlist-button,
 .mainDetailButtons:has(button[data-played].playstatebutton-played) .watchlist-icon {
@@ -2351,4 +2342,48 @@ div[data-tab="watchlist"] .loading-message {
 
 #customPage-watchlist > div {
 	padding: 0 !important;
+}
+
+
+#slides-container .watchlist-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	padding: 0;
+	border: 1px solid rgb(255 255 255 / 0.35);
+	background: rgb(0 0 0 / 0.45);
+	color: #fff;
+	cursor: pointer;
+	backdrop-filter: blur(6px);
+	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+	-webkit-tap-highlight-color: #fff0;
+}
+
+#slides-container .watchlist-button {
+	height: 50px;
+	width: 50px;
+}
+
+#slides-container.layout-marquee .watchlist-button {
+	width: var(--mq-control);
+	height: var(--mq-control);
+}
+
+#slides-container.layout-plate .watchlist-button {
+	width: var(--plate-control);
+	height: var(--plate-control);
+}
+
+#slides-container.noautofocus .watchlist-button {
+	padding: 0;
+	font-size: 18px;
+	background-color: rgb(255, 255, 255);
+	color: black;
+	border-radius: 50%;
+	height: 50px;
+	width: 50px;
+	border: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
 }

scripts/watchlist.js

@@ -8116,7 +8116,7 @@ In the Custom Tabs plugin, add a new tab with the following HTML content:
 		// Create watchlist button (empty button, icon added via CSS ::before)
 		const watchlistButton = document.createElement('button');
 		watchlistButton.type = 'button';
-		watchlistButton.className = 'watchlist-button';
+		watchlistButton.className = 'detailButton watchlist-button';
 		watchlistButton.setAttribute('data-item-id', itemId);
 		watchlistButton.setAttribute('data-active', 'false');
 		watchlistButton.title = 'Add to Watchlist';
@@ -8159,8 +8159,13 @@ In the Custom Tabs plugin, add a new tab with the following HTML content:
 			ERR('Error fetching item data for slide watchlist button:', err);
 		});
 
-		// Insert button after play button
-		playButton.parentNode.insertBefore(watchlistButton, playButton.nextSibling);
+		const favoriteButton = slide.querySelector('.favorite-button');
+		if (favoriteButton) {
+			favoriteButton.before(watchlistButton);
+		} else {
+			playButton.parentNode.insertBefore(watchlistButton, playButton.nextSibling);
+		}
+
 	}
 
 	// Function to monitor slides container for MediaBar Plugin