lucasw89/KefinTweaks
1
0 Fork 0
mirror of https://github.com/ranaldsgift/KefinTweaks.git synced 2026-11-05 15:52:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HighImKevin committed 2026-10-21 16:32:49 -04:00
1 parent be2cd77168
commit 80db7bf404
10 files changed
+132 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scripts/skinConfig.js
+13 -2
View File
@@ -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
+45 -10
View File
@@ -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
+8 -3
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 = '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
skins/elegant-kefin.css
+12
View File
@@ -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;
}
}
skins/fin-kefin-10.11.css
+3
View File
@@ -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;
}
skins/glassfin-kefin.css
+12
View File
@@ -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;
}
}
skins/netfin-kefin.css
+12
View File
@@ -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;
}
}
skins/neutralfin-kefin.css
+17 -4
View File
@@ -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;
}
}
skins/optional/ElegantFin/solidAppBar.css
+6 -2
View File
@@ -1,3 +1,7 @@
:root{
--appBarHeight: 4.6em;
}
--appBarSeamlessBlur: none;
--appBarBlurStrength: var(--blurLargest);
--appBarColor: var(--headerColor);
--appBarBorder: var(--defaultBorder);
--appBarTabsPadding: 0;
}
skins/optional/ElegantFin/transparentAppBar.css
+4
View File
@@ -0,0 +1,4 @@
:root{
--appBarSeamlessBlur: none;
--appBarColor: transparent;
}