RELEASE: ElegantFin v25.11.25

Fix: Added line wrap to prevent long library names from overflowing
dev: Simplified the code

README.md

@@ -205,7 +205,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 </details>
 
 <details>
-  <summary><i>7. Enable experimental support for the Media Bar plugin</i></summary>
+  <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
 
@@ -217,6 +217,23 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - To undo this change, simply remove this code block.
 </details>
 
+<details>
+  <summary><i>8. Switch between different app bar styles</i></summary>
+
+  https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+
+- You can switch between these using `--appBarHeight`.
+- Use 5em to enable the fading app bar (seamless) (default);
+- Or, use 4.6em to get the solid app bar (cleaner with border)
+```
+:root{
+  /* example */
+  --appBarHeight: 4.6em;
+}
+```
+- To undo this change, simply remove this code block.
+</details>
+
 <hr>
 
 ### 🆗 Tested on 
@@ -231,7 +248,10 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
 - Check the version number at the bottom in the Settings screen. 
-- It should be something like `ElegantFin v25.10.XX`.
+- It should be something like `ElegantFin v25.XX.XX`.
+
+  <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
+
 </details>
 
 <details>
@@ -241,7 +261,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - Once that cache is updated, the new version will be loaded automatically. 
 - There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
 - On the web version, you can force a hard refresh of the page using CTRL + F5.
-- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
+- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
 </details>
 
 <details>

Theme/ElegantFin-theme-nightly.css

@@ -1,7 +1,7 @@
 /* ElegantFin Theme for Jellyfin by lscambo13 */
 
 /* Add-ons: Uncomment to enable */
-/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
+/* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
 /* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */
 
 /* Inter Font Family */
@@ -16,6 +16,7 @@
     --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
     --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
+    --gradientPointAlpha: rgba(29, 38, 53, 0.3);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
 
@@ -90,8 +91,8 @@
 
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
-    --primaryItemPageNegativeSpace: 14vh;
+
-    --secondaryItemPageNegativeSpace: 35vh;
+    --minEpisodeCardWidth: 26em;
 
     --blurSmallest: blur(2px);
     --blurDefault: blur(5px);
@@ -153,9 +154,9 @@
        use 4.6em to get the solid app bar (cleaner with border) */
     --appBarHeight: 5em;
 
-    /* use 50% to crop the top of the backdrop image slightly (recommended) [default]; 
+    /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
-       use 0% to prevent the cropping from top, or choose between 0% and 100% according to your preference */
+       use a figure between 0% and 20% according to your liking */
-    --backdropPositionY: 50%;
+    --backdropTrimFromTop: 10%;
 }
 
 html {
@@ -166,6 +167,17 @@ html {
     -webkit-tap-highlight-color: transparent !important;
 }
 
+body {
+    --primaryItemPageNegativeSpace: 14vh;
+    --secondaryItemPageNegativeSpace: 60vh;
+    --clearLogoBottomSpace: 11em;
+}
+
+.layout-desktop > body:has(> audio[src]) {
+    --primaryItemPageNegativeSpace: calc(14vh + 5em);
+    --secondaryItemPageNegativeSpace: calc(60vh + 5em);
+}
+
 .layout-mobile {
     --itemColumnGap: 0;
     --headerColorGradient: var(--headerColorGradientAlt);
@@ -173,6 +185,10 @@ html {
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
 }
 
+.layout-mobile > body {
+    --secondaryItemPageNegativeSpace: 45vh;
+}
+
 /* Material Icons Round */
 /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
 @font-face {
@@ -205,7 +221,8 @@ html {
 }
 
 .material-icons.info_outline:before {
-    font-family: Material Icons;
+    content: "\e88e";
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 
 .dashboardFooter {
@@ -386,7 +403,7 @@ html {
     background: rgba(255, 255, 255, 0.05);
 }
 
-.card-hoverable .cardOverlayContainer:after {
+.cardOverlayContainer:after {
     content: var(--cardHoverEffect);
     transition: 0.5s;
     position: absolute;
@@ -488,7 +505,7 @@ html {
     color: white;
 }
 
-.cardOverlayContainer:has(.cardOverlayButton:hover) {
+.cardOverlayContainer:has(> button:hover) {
     backdrop-filter: var(--blurDefault);
 }
 
@@ -501,11 +518,59 @@ html {
     font-size: x-small;
 }
 
-.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
+/* episode grid start */
+
+@supports (display: revert) {
+    .vertical-list:has(.listItem-largeImage) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
+        gap: var(--itemColumnGap);
+    }
+
+    .layout-desktop .listItem-largeImage {
+        display: grid;
+        margin-bottom: 0 !important;
+    }
+
+    .layout-desktop .listItem-largeImage > .listItem-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 2em;
+        order: 1;
+        height: 100%;
+        align-items: start;
+    }
+
+    .layout-desktop .listItem-largeImage > .listItem-bottomoverview {
+        order: 2;
+    }
+
+    .layout-desktop .listItem-largeImage .listItemImage-large {
+        order: 1;
+        grid-column: 1 / -1;
+        height: max-content;
+        min-height: 15em;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        box-sizing: border-box;
+    }
+
+    .layout-desktop .listItem-largeImage .listItemBody {
+        order: 2;
+        grid-column: 1 / 3;
+        padding: 1em 0.125em;
+    }
+
+    .layout-desktop .listItem-largeImage .listViewUserDataButtons {
         flex-direction: column;
         font-size: small;
+        order: 2;
+        grid-column: 3;
+        align-self: center;
+    }
 }
 
+/* episode grid end */
+
 .portraitCard {
     min-width: 5em;
 }
@@ -936,10 +1001,10 @@ html {
     background-color: transparent;
 }
 
-/* this removes the extra large left paading on 10.11.0 */
+/* this removes the extra large left padding on 10.11.0 */
 .detailPagePrimaryContainer>.detailPagePrimaryContent,
 [dir=ltr] .detailPagePrimaryContainer>.detailRibbon,
-/* this removes the extra large left paading on pre-10.11.0 */
+/* this removes the extra large left padding on pre-10.11.0 */
 [dir=ltr] .detailPagePrimaryContainer.detailRibbon {
     padding-left: var(--sidePadding);
 }
@@ -1000,6 +1065,7 @@ html {
     margin: 0 calc(-1 * var(--sidePadding));
     padding: 0 var(--sidePadding);
     padding-left: calc(var(--sidePadding) - 0.375em);
+    /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }
 
 .layout-desktop .emby-scroller-container,
@@ -1069,6 +1135,7 @@ html {
     transform: translateY(-0.15em);
     font-weight: 600;
     border: var(--defaultBorder);
+    color: var(--textColor);
 }
 
 .starIcon {
@@ -1088,17 +1155,16 @@ html {
     content: "%";
 }
 
-.layout-desktop .detailRibbon {
+.detailRibbon:has(.portraitCard .folder) {
-    height: 100%;
+    min-height: 32vh;
-    min-height: 30vh;
+    align-content: flex-end;
-    margin-top: unset;
 }
 
-/* test disabled for 10.11.0 */
+.layout-desktop .detailRibbon {
-/* .layout-desktop [dir=ltr] .detailPagePrimaryContainer,
+    height: 100%;
-.layout-tv [dir=ltr] .detailPagePrimaryContainer {
+    min-height: 25vh;
-    padding-left: var(--sidePadding);
+    margin-top: unset;
-} */
+}
 
 @keyframes animMoveDown {
     from {
@@ -1136,9 +1202,63 @@ html {
     }
 }
 
+/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
+/* .videoPlayerContainer {
+    position: relative !important;
+    -webkit-mask: var(--themeVideoPlayerMask);
+    mask: var(--themeVideoPlayerMask);
+    height: 90vh;
+}
+
+.layout-mobile .videoPlayerContainer {
+    z-index: 1;
+    height: 35vh;
+}
+
+.videoPlayerContainer>.htmlvideoplayer {
+    width: -webkit-fill-available;
+    object-fit: cover;
+} */
+
+.itemBackdrop {
+    display: block !important;
+}
+
+.layout-desktop .itemBackdrop {
+    height: calc(100vh - 27vh - var(--primaryItemPageNegativeSpace));
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: 0;
+    position: sticky;
+    top: -30%;
+    -webkit-mask: var(--itemBackdropMask);
+    mask: var(--itemBackdropMask);
+    animation: animMoveDown 0.5s ease-out forwards;
+    height: 45vh;
+}
+
+.layout-tv .itemBackdrop {
+    height: 33vh;
+}
+
+#itemDetailPage:has(.subtitle) .itemBackdrop,
+#itemDetailPage:has(.musicParentName) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .live_tv) .itemBackdrop {
+    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+}
+
+#itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
+    height: calc(100vh - 20vh - var(--secondaryItemPageNegativeSpace));
+}
+
 .detailLogo {
     display: var(--clearLogoVisibility);
-    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
+    top: calc(100vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
     transform: translateY(-100%);
@@ -1159,46 +1279,6 @@ html {
     animation: animMoveUp 1s ease-out forwards;
 }
 
-.itemBackdrop {
-    display: block !important;
-}
-
-/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
-/* .videoPlayerContainer {
-    position: relative !important;
-    -webkit-mask: var(--themeVideoPlayerMask);
-    mask: var(--themeVideoPlayerMask);
-    height: 90vh;
-}
-
-.layout-mobile .videoPlayerContainer {
-    z-index: 1;
-    height: 35vh;
-}
-
-.videoPlayerContainer>.htmlvideoplayer {
-    width: -webkit-fill-available;
-    object-fit: cover;
-} */
-
-.layout-desktop .itemBackdrop {
-    height: calc(100vh - 32vh - var(--primaryItemPageNegativeSpace)) !important;
-}
-
-.layout-mobile .itemBackdrop {
-    margin-top: 0;
-    position: sticky;
-    top: -30%;
-    -webkit-mask: var(--itemBackdropMask);
-    mask: var(--itemBackdropMask);
-    animation: animMoveDown 0.5s ease-out forwards;
-    height: 45vh;
-}
-
-.layout-mobile #itemDetailPage:has(.detailLogo.hide) .itemBackdrop {
-    margin-bottom: -10vh;
-}
-
 .layout-tv .detailLogo {
     display: var(--clearLogoVisibility);
     height: 20vh;
@@ -1208,22 +1288,16 @@ html {
     margin: auto 5vw;
 }
 
-.layout-tv .itemBackdrop {
+#itemDetailPage:has(.subtitle) .detailLogo {
-    height: 33vh;
+    top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }
 
-/* .detailImageContainer.padded-left {
+.layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
-    padding-left: 0;
+    top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
-} */
+}
-
-/* .layout-tv .detailImageContainer .card {
-    padding-left: var(--sidePadding);
-
-    position: fixed;
-} */
 
 .layout-desktop .detailImageContainer .card {
-    position: absolute !important;
+    position: relative !important;
     width: 22vh !important;
     float: none;
     left: 0 !important;
@@ -1232,12 +1306,6 @@ html {
     margin: auto;
     margin-bottom: 0;
     place-self: center;
-    transform: translateY(-80%);
-}
-
-.layout-desktop .detailImageContainer .backdropCard,
-.layout-desktop .detailImageContainer .squareCard {
-    transform: translateY(-100%);
 }
 
 .detailImageContainer .card.backdropCard {
@@ -1303,11 +1371,10 @@ html {
     margin-top: 0.5em;
 }
 
-/* this hides the media card when detail logo is visible */
+/* this hides the detail logo  when media card is visible */
-.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person),
+#itemDetailPage:has(.detailImageContainer .backdropCard) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo,
+#itemDetailPage:has(.detailImageContainer .album) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .detailLogo,
+#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo {
     z-index: 2;
     display: none;
 }
@@ -1344,31 +1411,30 @@ html {
     background-color: var(--lighterGradientPointAlpha);
 }
 
-/* this shows the poster in the cast, book and music pages */
+/* this shows the poster in the cast, book, live tv and other pages */
-.detailImageContainer .card:has(.book, .person, .album),
+.detailImageContainer > .backdropCard,
-.detailImageContainer .card.backdropCard:has(.tv),
+.detailImageContainer > .squareCard,
-.detailImageContainer .card.backdropCard:has(.movie),
+.detailImageContainer > .card:has(.book),
-.detailImageContainer .card.backdropCard:has(.live_tv) {
+.detailImageContainer > .card:has(.person),
+.detailImageContainer > .card:has(.album),
+.detailImageContainer > .card:has(.queue),
+.detailImageContainer > .card:has(.live_tv) {
     display: block;
 }
 
-/* This reduces the top padding in the cast, live tv, episode, song, album and artist pages i.e. shifts up page content */
+/* this hides artist's poster */
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book)
+.detailImageContainer .squareCard:has(.person) {
-    .itemBackdrop,
+    display: none;
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.live_tv) .itemBackdrop {
-    height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
 }
 
-#itemDetailPage:has(.detailImageContainer .card.backdropCard),
+#itemDetailPage:has(.subtitle),
-#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
+#itemDetailPage:has(.musicParentName) {
     background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
 }
 
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
+.layout-mobile #itemDetailPage:has(.subtitle) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.musicParentName) .itemBackdrop {
     animation: animMoveDownSecondaryPage 0.5s ease-out forwards;
 }
 
@@ -1438,7 +1504,7 @@ html,
 }
 
 .backdropImage {
-    background-position-y: var(--backdropPositionY);
+    background-position-y: clamp(0%, calc(var(--backdropTrimFromTop) * 5), 100%);
 }
 
 .backdropImage:after,
@@ -1904,17 +1970,20 @@ progress + span {
     justify-content: center;
 }
 
+.innerCardFooter,
+.chapterCardImageContainer {
+    width: 100%;
+    box-sizing: border-box;
+}
+
 .innerCardFooter,
 .chapterThumbTextContainer {
     background: var(--cardFooterGradient);
     text-shadow: 0.1em 0.1em 0px black;
-    width: 100%;
-    height: 100%;
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
     padding: 0em 2em 2em 2em;
     align-content: end;
     display: grid;
+    height: 100%;
 }
 
 .chapterCardImageContainer {
@@ -2119,10 +2188,6 @@ progress + span {
     }
 }
 
-.layout-tv .emby-checkbox:focus + span + .checkboxOutline {
-    transform: scale(1.75);
-}
-
 .cardIndicators {
     -webkit-align-items: center;
     align-items: center;
@@ -2281,7 +2346,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     flex-direction: row;
 }
 
-.btnPlay:not(.formDialogFooterItem):after {
+.btnPlay:not(.formDialogFooterItem):not(.play-button):after {
     content: attr(title);
     padding: 0 1ch;
 }
@@ -2454,9 +2519,19 @@ div[data-role="controlgroup"] a.ui-btn-active {
     background-color: rgba(255, 255, 255, 0.07);
 }
 
-[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
+/* [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
     font-size: 1.17em;
     font-weight: 600;
+} */
+
+.listItem-largeImage .listItemBodyText:not(.secondary) {
+    font-size: 1.17em;
+    font-weight: 600;
+    color: var(--textColor);
+}
+
+.listItemBodyText.secondary {
+    color: var(--dimTextColor);
 }
 
 .listItemBody > .listItemBodyText:not(.secondary) {
@@ -2585,7 +2660,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 25% 1fr 1fr 1fr;
     margin-bottom: 1.5em;
 }
 
@@ -2816,9 +2891,9 @@ div[data-role="controlgroup"] a.ui-btn-active {
     padding-right: var(--sidePadding) !important;
 }
 
-.paddded-left {
+/* .padded-left {
     padding-left: var(--sidePadding) !important;
-}
+} */
 
 .layout-mobile .padded-right-withalphapicker {
     padding-left: 4.5%;
@@ -3140,35 +3215,41 @@ div[data-role="controlgroup"] a.ui-btn-active {
     flex-direction: row-reverse;
 }
 
-.infoWrapper h1.itemName,
+.nameContainer > h3,
-.infoWrapper h1.parentName {
+.nameContainer > h1 {
+    word-break: break-word;
+    overflow: hidden;
+}
+
+.nameContainer > h1.itemName,
+.nameContainer > h1.parentName {
     font-size: 4em;
     white-space: pre-wrap;
     padding-bottom: 0.5ch;
     color: white;
 }
 
-.infoWrapper h1.itemName,
+.nameContainer > h1.itemName,
-.infoWrapper h1.parentName,
+.nameContainer > h1.parentName,
-.infoWrapper h1.itemName a,
+.nameContainer > h1.itemName a,
-.infoWrapper h1.parentName a {
+.nameContainer > h1.parentName a {
     font-weight: 200;
 }
 
-.infoWrapper h1.itemName bdi,
+.nameContainer > h1.itemName bdi,
-.infoWrapper h1.parentName bdi,
+.nameContainer > h1.parentName bdi,
-.infoWrapper h1.itemName a,
+.nameContainer > h1.itemName a,
-.infoWrapper h1.parentName a {
+.nameContainer > h1.parentName a {
-    /* overflow: hidden; */
+    overflow: hidden;
     display: -webkit-box !important;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;
 }
 
-.layout-mobile .infoWrapper h1.itemName,
+.layout-mobile .nameContainer > h1.itemName,
-.layout-mobile .infoWrapper h1.parentName,
+.layout-mobile .nameContainer > h1.parentName,
-.layout-mobile .infoWrapper h1.parentNameLast {
+.layout-mobile .nameContainer > h1.parentNameLast {
     font-size: 2em;
     word-wrap: break-word;
     padding-bottom: 0ch;
@@ -3181,6 +3262,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .layout-mobile .subtitle {
     font-size: 1.5em;
+    padding-bottom: 0.5em;
 }
 
 .itemName.originalTitle {
@@ -3450,13 +3532,23 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }
 
 /* this :not() is needed to prevent affecting the mixed media libraries on the home page */
-#homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop {
+/* #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop {
     padding-bottom: 50%;
 }
 
 #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText-first,
 #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText.cardTextCentered {
     display: var(--libraryLabelVisibility);
+} */
+
+.overflowBackdropCard[data-type="CollectionFolder"] .cardPadder-overflowBackdrop,
+.overflowBackdropCard[data-type="UserView"] .cardPadder-overflowBackdrop {
+    padding-bottom: 50%;
+}
+
+.overflowBackdropCard[data-type="CollectionFolder"] .cardText-first,
+.overflowBackdropCard[data-type="UserView"] .cardText-first {
+    display: var(--libraryLabelVisibility);
 }
 
 .nowPlayingButtonsContainer {
@@ -3793,7 +3885,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }
 
 /* this allows switching between the header styles easily */
-#reactRoot > div:nth-of-type(3) {
+#reactRoot > div:nth-child(3) {
     container-name: skinHeader;
     container-type: size;
     height: var(--appBarHeight);
@@ -3840,10 +3932,17 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
+.nowPlayingPage {
+    background: linear-gradient(var(--darkerGradientPointAlpha), transparent);
+}
+
 .remoteControlContent {
     padding: 0 var(--sidePadding) !important;
+    background: linear-gradient(transparent, var(--darkerGradientPointAlpha) 20em);
 }
 
+/* performance improvements fot low-end TVs - start */
+
 /* .layout-tv *,
 .layout-tv *::before,
 .layout-tv *::after {
@@ -3865,7 +3964,62 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     display: none !important;
 } */
 
+/* .layout-tv .emby-checkbox:focus + span + .checkboxOutline {
+    transform: scale(1.75);
+} */
+
 .layout-tv .show-focus:focus,
-.layout-tv .show-animation:focus {
+.layout-tv .show-animation:focus,
+.emby-select-focusscale:focus {
     transform: none !important;
 }
+
+.layout-tv .focuscontainer,
+.layout-tv .backdropImage {
+    animation-duration: 0s !important;
+    backdrop-filter: none;
+}
+
+.card.show-animation .cardBox {
+    transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out;
+}
+
+/* performance improvements fot low-end TVs - end */
+
+/* basic styling for the Media Bar Plugin - start
+for extended styling, use the add-on */
+
+#slides-container {
+    top: calc(-0.5 * var(--appBarHeight));
+}
+
+.backdrop-overlay {
+    background: linear-gradient(
+        var(--lighterGradientPoint),
+        var(--gradientPointAlpha),
+        60%,
+        var(--darkerGradientPointAlpha)
+    );
+}
+
+.plot {
+    color: var(--textColor);
+    text-shadow: 1px 1px var(--lighterGradientPointAlpha);
+}
+
+.button-container {
+    align-items: center;
+}
+
+.favorite-button {
+    background: none;
+    color: var(--textColor);
+}
+
+.detail-button:hover,
+.favorite-button:hover {
+    background: var(--dimTextColor);
+    color: black;
+}
+
+/* basic styling for the Media Bar Plugin - end */

Theme/assets/add-ons/custom-media-covers-nightly.css

@@ -11,6 +11,9 @@
     --colorOverlayHomevideosCover: rgb(39, 90, 185);
     --colorOverlayBooksCover: rgb(166, 68, 70);
     --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
     --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
     --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
     --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
@@ -20,169 +23,113 @@
     --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
     --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
     --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
     filter: contrast(0.85);
     background-size: cover !important;
     background-position: 50% !important;
     background-blend-mode: multiply;
 }
 
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
     position: absolute;
-    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
-    margin-bottom: .175em;
     font-weight: 800;
     color: white;
-    font-family: 'Noto Sans';
+    font-family: "Noto Sans";
     text-align: center;
+    width: 94%;
+    white-space: normal;
 }
 
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
     display: none;
 }
 
-/* These show up when no image is set */
+[data-collectiontype="movies"] .cardContent {
-
+    background-color: var(--colorOverlayMoviesCover) !important;
-/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMoviesCover) !important;
     background-image: var(--urlMoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="tvshows"] .cardContent {
-    background: var(--colorOverlayTvshowsCover) !important;
+    background-color: var(--colorOverlayTvshowsCover) !important;
     background-image: var(--urlTvshowsCover) !important;
 }
 
-div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="livetv"] .cardContent {
-    background: var(--colorOverlayLivetvCover) !important;
+    background-color: var(--colorOverlayLivetvCover) !important;
     background-image: var(--urlLivetvCover) !important;
 }
 
-div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="music"] .cardContent {
-    background: var(--colorOverlayMusicCover) !important;
+    background-color: var(--colorOverlayMusicCover) !important;
     background-image: var(--urlMusicCover) !important;
 }
 
-div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="homevideos"] .cardContent {
-    background: var(--colorOverlayHomevideosCover) !important;
+    background-color: var(--colorOverlayHomevideosCover) !important;
     background-image: var(--urlHomevideosCover) !important;
 }
 
-div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="books"] .cardContent {
-    background: var(--colorOverlayBooksCover) !important;
+    background-color: var(--colorOverlayBooksCover) !important;
     background-image: var(--urlBooksCover) !important;
 }
 
-div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="boxsets"] .cardContent {
-    background: var(--colorOverlayBoxsetsCover) !important;
+    background-color: var(--colorOverlayBoxsetsCover) !important;
     background-image: var(--urlBoxsetsCover) !important;
 }
 
-div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="folders"] .cardContent {
-    background: var(--colorOverlayFoldersCover) !important;
+    background-color: var(--colorOverlayFoldersCover) !important;
     background-image: var(--urlFoldersCover) !important;
 }
 
-div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="playlists"] .cardContent {
-    background: var(--colorOverlayPlaylistsCover) !important;
+    background-color: var(--colorOverlayPlaylistsCover) !important;
-    background-image: var(--urlPlaylistsCover) !important;
-} */
-
-/* These are the front facing images */
-
-div[data-collectiontype="movies"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayMoviesCover) !important;
-    background-image: var(--urlMoviesCover) !important;
-}
-
-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayTvshowsCover) !important;
-    background-image: var(--urlTvshowsCover) !important;
-}
-
-div[data-collectiontype="livetv"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayLivetvCover) !important;
-    background-image: var(--urlLivetvCover) !important;
-}
-
-div[data-collectiontype="music"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayMusicCover) !important;
-    background-image: var(--urlMusicCover) !important;
-}
-
-div[data-collectiontype="homevideos"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayHomevideosCover) !important;
-    background-image: var(--urlHomevideosCover) !important;
-}
-
-div[data-collectiontype="books"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayBooksCover) !important;
-    background-image: var(--urlBooksCover) !important;
-}
-
-div[data-collectiontype="boxsets"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayBoxsetsCover) !important;
-    background-image: var(--urlBoxsetsCover) !important;
-}
-
-div[data-collectiontype="folders"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayFoldersCover) !important;
-    background-image: var(--urlFoldersCover) !important;
-}
-
-div[data-collectiontype="playlists"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayPlaylistsCover) !important;
     background-image: var(--urlPlaylistsCover) !important;
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+[data-prefix="MIX"] .cardContent {
-    filter: contrast(0.85);
+    background-color: var(--colorOverlayMixedCover) !important;
-    background-size: cover !important;
+    background-image: var(--urlMixedCover) !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
 }
 
-div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
-    content: "Movies";
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+[data-prefix="REC"] .cardContent {
-    content: "TV Shows";
+    background-color: var(--colorOverlayRecordedtvCover) !important;
-}
+    background-image: var(--urlRecordedtvCover) !important;
-
-div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
-    content: "Live TV";
-}
-
-div[data-collectiontype="music"] .cardImageContainer.cardContent::before {
-    content: "Music";
-}
-
-div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before {
-    content: "Home Videos";
-}
-
-div[data-collectiontype="books"] .cardImageContainer.cardContent::before {
-    content: "Books";
-}
-
-div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before {
-    content: "Collections";
-}
-
-div[data-collectiontype="folders"] .cardImageContainer.cardContent::before {
-    content: "Folders";
-}
-
-div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before {
-    content: "Playlists";
-}
-
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
-    filter: contrast(0.85);
-    background-size: cover !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
 }

Theme/assets/add-ons/custom-media-covers-v25.11.25.css

@@ -0,0 +1,135 @@
+/* Add-on: Custom media covers v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+}
+
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}

Theme/assets/add-ons/media-bar-plugin-support-latest-min.css

@@ -1,2 +1,2 @@
-/* Add-on: Media Bar plugin support v25.08.08 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
- .button-container{align-items:center}.favorite-button{background:none;color:var(--textColor)}.detail-button:hover,.favorite-button:hover{background:var(--dimTextColor);color:black}.play-button::before,.detail-button::before,.favorite-button::before,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:'Inter';font-size:1em;font-weight:500}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:60%;top:8em;border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.layout-tv #slides-container{top:0}.layout-mobile #slides-container{top:10em}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.info-container{}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}
+ .play-button::before,.detail-button::before,.favorite-button::before,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:"Inter";font-size:1em;font-weight:500}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:62%;top:var(--appBarHeight);border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}@media (min-width:75em){#slides-container{top:calc(.5 * var(--appBarHeight))}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}@media only screen and (max-width:767px) and (orientation:portrait){.logo-container{top:50%}}

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -1,20 +1,5 @@
 /* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
-.button-container {
-    align-items: center;
-}
-
-.favorite-button {
-    background: none;
-    color: var(--textColor);
-}
-
-.detail-button:hover,
-.favorite-button:hover {
-    background: var(--dimTextColor);
-    color: black;
-}
-
 .play-button::before,
 .detail-button::before,
 .favorite-button::before,
@@ -23,7 +8,7 @@
 }
 
 .play-button {
-    font-family: 'Inter';
+    font-family: "Inter";
     font-size: 1em;
     font-weight: 500;
 }
@@ -31,8 +16,8 @@
 .backdrop,
 .backdrop-container,
 .backdrop-overlay {
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
     background-color: transparent;
 }
 
@@ -40,7 +25,6 @@
     transform-origin: center left;
 }
 
-/* this is my own take */
 .rating-value {
     flex-wrap: wrap;
     justify-content: center;
@@ -53,21 +37,13 @@
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: calc(1.5 * var(--appBarHeight));
+    top: var(--appBarHeight);
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
-    transition: all .125s, border 0s;
+    transition: all 0.125s, border 0s;
     user-select: none;
 }
 
-.layout-tv #slides-container {
-    top: 0em;
-}
-
-.layout-mobile #slides-container {
-    top: 10em;
-}
-
 .logo-container {
     top: 10vh;
 }
@@ -80,7 +56,7 @@
 }
 
 .backdrop-overlay {
-    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
@@ -89,10 +65,6 @@
         transform: translateX(-50%) scale(0.8);
     }
 
-    .info-container {
-        /* top: calc(50% + 6vh); */
-    }
-
     .tomato-rating {
         display: none;
     }
@@ -108,7 +80,23 @@
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(.5 * var(--appBarHeight));
+        top: calc(0.5 * var(--appBarHeight));
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
     }
 }
 

Theme/assets/add-ons/media-bar-plugin-support-v25.11.25.css

@@ -0,0 +1,103 @@
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: "Inter";
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: var(--appBarHeight);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(0.5 * var(--appBarHeight));
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
+/* this styles the media bar plugin - end */

custom-media-covers.md

@@ -1,4 +1,5 @@
 # 🧩 Add-on: Custom media covers for ElegantFin
+
 This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.
 
 #### **Author:** [lscambo13](https://github.com/lscambo13)
@@ -50,6 +51,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: transparent;
     --colorOverlayBooksCover: transparent;
     --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
     --urlMoviesCover: transparent;
     --urlTvshowsCover: transparent;
     --urlLivetvCover: transparent;
@@ -59,6 +63,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: transparent;
     --urlBooksCover: transparent;
     --urlFoldersCover: transparent;
+    --urlMixedCover: transparent;
+    --urlRecordedmoviesCover: transparent;
+    --urlRecordedtvCover: transparent;
 }
 ```
 
@@ -79,6 +86,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: transparent;
     --colorOverlayBooksCover: transparent;
     --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
     --urlMoviesCover: var(--cardBackgroundGradient);
     --urlTvshowsCover: var(--cardBackgroundGradient);
     --urlLivetvCover: var(--cardBackgroundGradient);
@@ -88,6 +98,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: var(--cardBackgroundGradient);
     --urlBooksCover: var(--cardBackgroundGradient);
     --urlFoldersCover: var(--cardBackgroundGradient);
+    --urlMixedCover: var(--cardBackgroundGradient);
+    --urlRecordedmoviesCover: var(--cardBackgroundGradient);
+    --urlRecordedtvCover: var(--cardBackgroundGradient);
 }
 ```
 
@@ -98,7 +111,6 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 ![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
 
-
 ```
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 
@@ -112,6 +124,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: rgb(39, 90, 185);
     --colorOverlayBooksCover: rgb(166, 68, 70);
     --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
     --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
@@ -121,6 +136,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
 }
 ```
 
@@ -142,8 +160,6 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 -   Remember, you do not need to configure anything if you're happy with the default set of images.
 
-
-
 <details>
   <summary><i>Click here to reveal.</i></summary>
 	
@@ -168,6 +184,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: rgb();
     --colorOverlayBooksCover: rgb();
     --colorOverlayFoldersCover: rgb();
+    --colorOverlayMixedCover: rgb();
+    --colorOverlayRecordedmoviesCover: rgb();
+    --colorOverlayRecordedtvCover: rgb();
 
     <!-- cover images; input the url pointing to an image. -->
 
@@ -179,8 +198,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: url();
     --urlBooksCover: url();
     --urlFoldersCover: url();
+    --urlMixedCover: url();
+    --urlRecordedmoviesCover: url();
+    --urlRecordedtvCover: url();
 
 }
+
 ```
 </details>
 
@@ -191,11 +214,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this:
 
 ```
+
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 
 :root{
-    --colorOverlayLivetvCover: rgb(39, 68, 185);
+--colorOverlayLivetvCover: rgb(39, 68, 185);
-    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+--urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
 }
 
 ```
@@ -224,3 +248,4 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
 
 <hr>
 
+```