Further improve MediaBar and MediaBarEnhanced compatibility for Watchlist button styles

This commit is contained in:
HighImKevin
2026-10-21 19:07:14 -04:00
parent 80db7bf404
commit 688023a1d9
7 changed files with 31 additions and 33 deletions
+21 -6
View File
@@ -2344,22 +2344,34 @@ div[data-tab="watchlist"] .loading-message {
padding: 0 !important;
}
#slides-container .watchlist-button {
padding: 0 !important;
color: black;
}
#slides-container.layout-plate .btnPlay {
min-width: unset !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:not(:hover) {
background: rgb(0 0 0 / 0.45);
color: #fff;
}
#slides-container .watchlist-button {
height: 50px;
width: 50px;
@@ -2378,12 +2390,15 @@ div[data-tab="watchlist"] .loading-message {
#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;
}
}
#slides-container.noautofocus .watchlist-button:not(:hover) {
background-color: rgb(255, 255, 255);
color: black;
} */
+1 -1
View File
@@ -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 = 'detailButton watchlist-button';
watchlistButton.className = 'detail-button favorite-button watchlist-button';
watchlistButton.setAttribute('data-item-id', itemId);
watchlistButton.setAttribute('data-active', 'false');
watchlistButton.title = 'Add to Watchlist';
-6
View File
@@ -42,12 +42,6 @@
backdrop-filter: none;
}
#slides-container .watchlist-button {
background-color: transparent !important;
backdrop-filter: none !important;
color: inherit !important;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
#slides-container.noautofocus .detailButton.trailer-button .trailer-text {
display: none;
+9 -2
View File
@@ -14,6 +14,13 @@
.innerCardFooter {
--cardFooterGradient: linear-gradient(1deg, rgba(0, 0, 0, 0.8), 40%, transparent) !important;
}
.detailButton.btnPlay {min-width: unset !important;
min-width: unset !important;
@media only screen and (max-width: 767px) and (orientation: portrait) {
#slides-container .detailButton.btnPlay {
min-width: unset !important;
}
}
#slides-container .watchlist-button {
color: white;
}
-6
View File
@@ -28,12 +28,6 @@
overflow: visible !important;
}
#slides-container .watchlist-button {
background-color: transparent !important;
backdrop-filter: none !important;
color: inherit !important;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
#slides-container.noautofocus .detailButton.trailer-button .trailer-text {
display: none;
-6
View File
@@ -13,12 +13,6 @@
backdrop-filter: none;
}
#slides-container .watchlist-button {
background-color: transparent !important;
backdrop-filter: none !important;
color: inherit !important;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
#slides-container.noautofocus .detailButton.trailer-button .trailer-text {
display: none;
-6
View File
@@ -21,12 +21,6 @@
backdrop-filter: none;
}
#slides-container .watchlist-button {
background: buttonface !important;
color: inherit !important;
margin: 0 !important;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
#slides-container.noautofocus .detailButton.trailer-button {
background: buttonface !important;