New: Introduced support for Theme Videos

- they should be placed inside `backdrops` folder like: ` ./Movie (Year)/backdrops/theme1.mp4`
Fix: Hamburger menu was not covering the whole screen height on some iPhones (#262 )
2026-10-26 17:39:34 +00:00 · 2026-06-20 23:52:17 +05:30 · 2026-06-20 21:51:57 +05:30 · 2026-06-12 20:36:12 +05:30 · 2026-06-12 19:57:20 +05:30 · 2026-06-10 21:27:04 +05:30
2 changed files with 72 additions and 46 deletions
@@ -1249,23 +1249,21 @@ select {
    }
 }

-/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
-/* .videoPlayerContainer {
+body:not(.hide-scroll) > .videoPlayerContainer {
    position: relative !important;
-    -webkit-mask: var(--themeVideoPlayerMask);
-    mask: var(--themeVideoPlayerMask);
-    height: 90vh;
+    -webkit-mask: var(--headerBlurMask);
+    mask: var(--headerBlurMask);
+    height: 80vh;
 }

-.layout-mobile .videoPlayerContainer {
+.layout-mobile body:not(.hide-scroll) > .videoPlayerContainer {
+    height: 40vh;
    z-index: 1;
-    height: 35vh;
 }

-.videoPlayerContainer>.htmlvideoplayer {
-    width: -webkit-fill-available;
-    object-fit: cover;
-} */
+.layout-desktop > body:not(.hide-scroll) > .videoPlayerContainer ~ #reactRoot > .backgroundContainer.withBackdrop {
+    opacity: 0.25;
+}

 .itemBackdrop {
    display: block !important;
@@ -1912,14 +1910,10 @@ progress + span {
 }

 .itemExternalLinks {
-    color: var(--textColor);
-}
-
-.itemExternalLinks.focuscontainer-x {
    color: transparent;
 }

-.itemExternalLinks.focuscontainer-x > .button-link {
+.itemExternalLinks > .button-link {
    color: var(--textColor);
    background-color: var(--selectorBackgroundColor);
    padding: 0.125em 0.5em;
@@ -1927,52 +1921,77 @@ progress + span {
    margin-bottom: 0.5em;
 }

-.layout-mobile .itemExternalLinks.focuscontainer-x > .button-link:hover:not(:active) {
+.layout-mobile .itemExternalLinks > .button-link:hover:not(:active) {
    color: var(--textColor) !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a:hover,
-.itemExternalLinks.focuscontainer-x > a:active {
+.layout-desktop .itemExternalLinks > a:hover,
+.itemExternalLinks > a:active {
    background-color: var(--activeColor) !important;
    color: white !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:active {
+.layout-desktop .itemExternalLinks > a[href*="themoviedb.org"]:hover,
+.itemExternalLinks > a[href*="themoviedb.org"]:active {
    background-color: rgb(26, 183, 216) !important;
    color: black !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:active {
+.layout-desktop .itemExternalLinks > a[href*="imdb.com"]:hover,
+.itemExternalLinks > a[href*="imdb.com"]:active {
    background-color: rgb(226, 182, 22) !important;
    color: black !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:active {
+.layout-desktop .itemExternalLinks > a[href*="thetvdb.com"]:hover,
+.itemExternalLinks > a[href*="thetvdb.com"]:active {
    background-color: rgb(108, 213, 145) !important;
    color: black !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:active {
+.layout-desktop .itemExternalLinks > a[href*="trakt.tv"]:hover,
+.itemExternalLinks > a[href*="trakt.tv"]:active {
    background-color: rgb(171, 58, 173) !important;
    color: var(--textColor) !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:active {
+.layout-desktop .itemExternalLinks > a[href*="theaudiodb.com"]:hover,
+.itemExternalLinks > a[href*="theaudiodb.com"]:active {
    background-color: rgb(99, 153, 204) !important;
    color: rgb(15, 22, 28) !important;
 }

-.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:hover,
-.itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:active {
+.layout-desktop .itemExternalLinks > a[href*="musicbrainz.org"]:hover,
+.itemExternalLinks > a[href*="musicbrainz.org"]:active {
    background-color: rgb(186, 71, 143) !important;
    color: var(--textColor) !important;
 }

+/* Support for Jellyfin Enhanced (https://github.com/n00bcodr/Jellyfin-Enhanced) */
+.layout-desktop .itemExternalLinks > a[href*="letterboxd.com"]:hover,
+.itemExternalLinks > a[href*="letterboxd.com"]:active {
+    background-color: rgb(20, 24, 28) !important;
+    color: var(--textColor) !important;
+}
+
+.layout-desktop .itemExternalLinks > a[title*="Radarr"]:hover,
+.itemExternalLinks > a[title*="Radarr"]:active {
+    background-color: rgb(255, 194, 48) !important;
+    color: black !important;
+}
+
+.layout-desktop .itemExternalLinks > a[title*="Sonarr"]:hover,
+.itemExternalLinks > a[title*="Sonarr"]:active {
+    background-color: rgb(7, 186, 233) !important;
+    color: black !important;
+}
+
+.layout-desktop .itemExternalLinks > a[title*="Bazarr"]:hover,
+.itemExternalLinks > a[title*="Bazarr"]:active {
+    background-color: var(--textColor) !important;
+    color: black !important;
+}
+
 .itemTags,
 .itemTags > a {
    display: none;
@@ -2769,9 +2788,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
    margin-bottom: 1.5em;
 }

-/* .layout-mobile .detailSection {
-    grid-template-columns: 1fr !important;
-} */
+/* Support .tmdb-review-swipe-container for Jellyfin Enhanced (https://github.com/n00bcodr/Jellyfin-Enhanced) */
+.tmdb-review-swipe-container {
+    max-width: 93vw;
+}

 .detailPageContent {
    gap: 1em;
@@ -2938,10 +2958,17 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .layout-tv .nextUpSection,
 .layout-tv .detailSection > #listChildrenCollapsible,
 .collectionItems,
-.programGuideSection {
+.programGuideSection,
+/* Support .series-episodes-section for KefinTweaks (https://github.com/ranaldsgift/KefinTweaks) */
+.series-episodes-section,
+.series-episodes-section ~ #listChildrenCollapsible {
    grid-column: 1 / -1;
 }

+.series-episodes-section {
+    order: 4;
+}
+
 .collectionItems {
    order: 2;
 }
@@ -3064,7 +3091,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
    background: var(--selectorBackgroundColor) !important;
 }

-.verticalSection {
+.verticalSection:not(:empty) {
    margin-top: 0.5em;
    margin-bottom: 1em;
 }
@@ -4048,7 +4075,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    container-name: skinHeader;
    container-type: size;
    height: var(--appBarHeight);
-    max-height: var(--appBarHeight);
+    position: sticky;
+    top: 0;
+    z-index: 1099;
+}
+
+.touch-menu-la {
+    height: 100vh;
+    height: 100dvh;
+    z-index: 1099;
 }

@container skinHeader (min-height: 4.9em) {
@@ -5,15 +5,6 @@ module.exports = {
 	plugins: [
 		cssDeclarationSorter({
 			keepOverrides: true,
-			order: (a, b) => {
-				const aVar = a.startsWith('--');
-				const bVar = b.startsWith('--');
-
-				if (aVar && !bVar) return -1;
-				if (!aVar && bVar) return 1;
-
-				return a.localeCompare(b);
-			},
 		}),
 		cssnano({
 			preset: 'default',
Author	SHA1	Message	Date
lscambo13	b2036f52b5	New: Introduced support for Theme Videos - they should be placed inside `backdrops` folder like: ` ./Movie (Year)/backdrops/theme1.mp4`	2026-06-20 23:52:17 +05:30
lscambo13	062aecdbb9	Fix: Hamburger menu was not covering the whole screen height on some iPhones (#262 )	2026-06-20 21:51:57 +05:30
lscambo13	c85814e879	Fix: TMDB reviews section added by Jellyfin Enhanced was overflowing the layout (#234 )	2026-06-12 20:36:12 +05:30
lscambo13	2fb990e597	dev: potential fix for #163 , #192 , #196 , and #262	2026-06-12 19:57:20 +05:30
lscambo13	b9bad1d34e	New: Support for the 'Episodes On Series Page' feature via KefinTweaks (#282 )	2026-06-10 21:27:04 +05:30
lscambo13	1cf0ff8ff5	Fix: Avoid adding margin to empty containers added by KefinTweaks	2026-06-09 19:22:16 +05:30
lscambo13	2d3961c126	dev: disabled ordering during minification; it didn't make a difference.	2026-06-09 19:20:26 +05:30
lscambo13andMacley	7381e6358f	New: Support for starr and Letterboxd external links via Jellyfin Enhanced (#297 ) * Remove background color from external links button * Add back previous change for default bg arr link * Add custom hover colors to arr links provided by JellyFin Enhanced * fix: removed redundant selectors; updated colors for higher contrast on hover and active --------- Co-authored-by: Macley <26381427+Macleykun@users.noreply.github.com>	2026-06-08 19:39:23 +05:30