From 80db7bf4046df04692aa60dc6484352368b966ce Mon Sep 17 00:00:00 2001 From: HighImKevin Date: Wed, 21 Oct 2026 16:32:49 -0400 Subject: [PATCH] Improve MediaBar and MediaBarEnhanced support - ensure Watchlist button style matches for various skins --- scripts/skinConfig.js | 15 ++++- scripts/watchlist.css | 55 +++++++++++++++---- scripts/watchlist.js | 11 +++- skins/elegant-kefin.css | 12 ++++ skins/fin-kefin-10.11.css | 3 + skins/glassfin-kefin.css | 12 ++++ skins/netfin-kefin.css | 12 ++++ skins/neutralfin-kefin.css | 21 +++++-- skins/optional/ElegantFin/solidAppBar.css | 8 ++- .../optional/ElegantFin/transparentAppBar.css | 4 ++ 10 files changed, 132 insertions(+), 21 deletions(-) create mode 100644 skins/optional/ElegantFin/transparentAppBar.css diff --git a/scripts/skinConfig.js b/scripts/skinConfig.js index 072a9c6..7fa402d 100644 --- a/scripts/skinConfig.js +++ b/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` ] }, ], diff --git a/scripts/watchlist.css b/scripts/watchlist.css index bbb473e..51c4520 100644 --- a/scripts/watchlist.css +++ b/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; } \ No newline at end of file diff --git a/scripts/watchlist.js b/scripts/watchlist.js index 6cee76c..b69bc53 100644 --- a/scripts/watchlist.js +++ b/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 diff --git a/skins/elegant-kefin.css b/skins/elegant-kefin.css index 3791e94..78a9389 100644 --- a/skins/elegant-kefin.css +++ b/skins/elegant-kefin.css @@ -40,4 +40,16 @@ background-color: transparent; border-radius: unset; 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; + } } \ No newline at end of file diff --git a/skins/fin-kefin-10.11.css b/skins/fin-kefin-10.11.css index a5d8de3..1bcb8d0 100644 --- a/skins/fin-kefin-10.11.css +++ b/skins/fin-kefin-10.11.css @@ -14,3 +14,6 @@ .innerCardFooter { --cardFooterGradient: linear-gradient(1deg, rgba(0, 0, 0, 0.8), 40%, transparent) !important; } +.detailButton.btnPlay {min-width: unset !important; + min-width: unset !important; +} \ No newline at end of file diff --git a/skins/glassfin-kefin.css b/skins/glassfin-kefin.css index 766850a..1602959 100644 --- a/skins/glassfin-kefin.css +++ b/skins/glassfin-kefin.css @@ -26,4 +26,16 @@ } #itemDetailPage[data-series-episodes-item-id] .detailSection { 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; + } } \ No newline at end of file diff --git a/skins/netfin-kefin.css b/skins/netfin-kefin.css index 73e3702..8d20232 100644 --- a/skins/netfin-kefin.css +++ b/skins/netfin-kefin.css @@ -11,4 +11,16 @@ background-color: transparent; border-radius: unset; 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; + } } \ No newline at end of file diff --git a/skins/neutralfin-kefin.css b/skins/neutralfin-kefin.css index 44f1a4c..2b1aff1 100644 --- a/skins/neutralfin-kefin.css +++ b/skins/neutralfin-kefin.css @@ -6,10 +6,6 @@ grid-column: 1 / 5; } -#slides-container { - top: calc(var(--appBarHeight) * 2 + 1.25em) !important; -} - .skinHeader .headerTabs.sectionTabs .emby-tabs-slider @@ -23,4 +19,21 @@ background-color: transparent; border-radius: unset; 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; + color: inherit !important; + margin: 0 !important; + } + #slides-container.noautofocus .detailButton.trailer-button .trailer-text { + display: none; + } } \ No newline at end of file diff --git a/skins/optional/ElegantFin/solidAppBar.css b/skins/optional/ElegantFin/solidAppBar.css index 3b34036..66b1d27 100644 --- a/skins/optional/ElegantFin/solidAppBar.css +++ b/skins/optional/ElegantFin/solidAppBar.css @@ -1,3 +1,7 @@ :root{ - --appBarHeight: 4.6em; - } \ No newline at end of file + --appBarSeamlessBlur: none; + --appBarBlurStrength: var(--blurLargest); + --appBarColor: var(--headerColor); + --appBarBorder: var(--defaultBorder); + --appBarTabsPadding: 0; +} \ No newline at end of file diff --git a/skins/optional/ElegantFin/transparentAppBar.css b/skins/optional/ElegantFin/transparentAppBar.css new file mode 100644 index 0000000..4aa4c13 --- /dev/null +++ b/skins/optional/ElegantFin/transparentAppBar.css @@ -0,0 +1,4 @@ +:root{ + --appBarSeamlessBlur: none; + --appBarColor: transparent; +} \ No newline at end of file