Fix: Removed the bottom border from the last row in the credits box

dev: TVs don't have Dashboard settings, so TV users were unable to check the version they were running. Also, in future dashboard theming might not be allowed, so I needed a different place to show the version number for debugging purposes.

README.md

@@ -118,7 +118,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>1. Custom media covers for user media libraries</i></summary>
 
-- [Previews](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md#%EF%B8%8F-presets-modify-these-styles-according-to-your-own-liking)
+<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />
+
 - Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
 
 </details>
@@ -126,7 +127,10 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>2. Custom background image for the login page</i></summary>
 
-- [Preview](https://user-images.githubusercontent.com/16425113/129554147-6ac7ba51-43e7-4c8e-ba77-e646a3ef6b12.jpg)
+<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
+<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
+
+
 - To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
 - Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
   ```
@@ -143,6 +147,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>
 
+  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
+
+
 - To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
   ```
   :root{
@@ -155,6 +162,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
 
+  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/ebde9db6-cd2f-47b5-bdb9-cee1e9852e2e" />
+
+
 - To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
   ```
   :root{
@@ -167,6 +177,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>5. Disable the card hover effect on desktop</i></summary>
 
+https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
+
 - To disable the reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
   :root{
@@ -179,6 +191,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>6. Enable labels below library cards</i></summary>
 
+  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/5999a5de-5134-4b02-94aa-6306768a251c" />
+
+
 - To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
   :root{
@@ -191,6 +206,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>7. Enable experimental support 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" />
+
+
 - ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
 	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
@@ -201,8 +219,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <hr>
 
 ### 🆗 Tested on 
-- Jellyfin Server v10.10.6
-- Jellyfin Android App v2.6.2
+- Jellyfin Server v10.10.7
+- Jellyfin Android App v2.6.3
 
 <hr>
 

Theme/ElegantFin-theme-nightly.css

@@ -55,7 +55,7 @@
     --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
     --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint));
     --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%);
-    --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, .95), 70%, transparent);
+    --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, 1), 70%, transparent);
     --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);
 
     --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
@@ -66,6 +66,7 @@
     --hoverGradientH: linear-gradient(90deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent);
 
     --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, .8), 75%, transparent);
+    /* --themeVideoPlayerMask: linear-gradient(180deg, rgba(0, 0, 0, 1), 85%, transparent); */
 
     /* standard component sizes */
     --largerRadius: 1.25em;
@@ -119,6 +120,10 @@
     /* use "" to enable the card hover effect [default]; 
        use none (without quotes) to disable it */
     --cardHoverEffect: "";
+
+    /* use 5em to enable the fading app bar (seamless); 
+       use 4.6em to get the solid app bar (cleaner with border) */
+    --appBarHeight: 5em;
 }
 
 html {
@@ -132,6 +137,9 @@ html {
 .layout-mobile {
     --itemColumnGap: 0;
     --sidePadding: 5%;
+    --headerColorGradient: var(--headerColorGradientAlt);
+    --blurLargest: blur(12px);
+    --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
 }
 
 /* Material Icons Round */
@@ -177,10 +185,15 @@ html {
     transition: transform 50ms;
 }
 
+#myPreferencesMenuPage>div:after,
 .dashboardFooter::after {
     content: var(--elegantFinFooterText);
     font-size: .8em;
-    color: #4e4e60;
+    color: var(--borderColor);
+    display: inline-grid;
+    width: -webkit-fill-available;
+    justify-content: center;
+    font-weight: 600;
 }
 
 ::selection {
@@ -191,11 +204,11 @@ html {
     color: var(--borderColor);
 }
 
-.card {
-    padding: .375em;
-    transition: width .5s;
+.cardPadder .cardImageIcon {
+    color: var(--selectorBackgroundColorAlpha);
 }
 
+.card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: white !important;
 }
@@ -218,11 +231,6 @@ html {
     outline: none !important;
 }
 
-.card.show-animation:focus>.cardBox {
-    -webkit-transform: scale(1.125);
-    transform: scale(1.125);
-}
-
 [dir=ltr] .itemsContainer>.card>.cardBox {
     margin-left: auto;
     margin-right: auto;
@@ -314,34 +322,34 @@ html {
     color: var(--borderColor);
 }
 
-.card.card-hoverable:hover .cardScalable,
-.card.card-hoverable:hover .visualCardBox {
+.card-hoverable:hover .cardScalable,
+.card-hoverable:hover .visualCardBox {
     border-color: white !important;
 }
 
-.card.card-hoverable:hover .visualCardBox .cardScalable {
+.card-hoverable:hover .visualCardBox .cardScalable {
     border-color: var(--darkerBorderColor) !important;
 }
 
-.card.card-hoverable:hover .cardImageContainer {
+.card-hoverable:hover .cardImageContainer {
     transform: scale(1.025);
 }
 
-.card.card-hoverable .itemSelectionPanel {
+.card-hoverable .itemSelectionPanel {
     transition: transform .125s;
 }
 
-.card.card-hoverable:hover .cardScalable,
-.card.card-hoverable:hover .itemSelectionPanel {
+.card-hoverable:hover .cardScalable,
+.card-hoverable:hover .itemSelectionPanel {
     transform: scale(1.02);
 }
 
-.card.card-hoverable .cardScalable:active {
+.card-hoverable .cardScalable:active {
     transition: transform .075s;
     transform: scale(1);
 }
 
-.cardScalable:has(.cardOverlayButton:hover)>.cardImageContainer {
+.cardScalable:has(.cardOverlayButton-hover:hover)>.cardImageContainer {
     transform: scale(1);
 }
 
@@ -350,7 +358,7 @@ html {
     background: rgba(255, 255, 255, .05);
 }
 
-.card.card-hoverable .cardOverlayContainer:after {
+.card-hoverable .cardOverlayContainer:after {
     content: var(--cardHoverEffect);
     transition: .5s;
     position: absolute;
@@ -362,7 +370,7 @@ html {
     background: var(--hoverGradientV);
 }
 
-.card.card-hoverable:hover .cardOverlayContainer:after {
+.card-hoverable:hover .cardOverlayContainer:after {
     transform: translateY(50%) translateX(0);
     opacity: 0;
 }
@@ -409,7 +417,7 @@ html {
     color: white;
 }
 
-.layout-desktop .cardOverlayButton-br button[data-action="menu"],
+.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
 .layout-desktop .listItemButton[data-action="menu"] {
     display: none;
 }
@@ -477,118 +485,167 @@ html {
     --cardCount: 2;
 }
 
-/* if the window width is equal to or more than (at minimum) 220em then the code in the query will trigger */
-/* 25 posters, 22 thumbs */
-@media (min-width: 220em) {
+/* if the window width is equal to or more than (at minimum) 300em then the code in the query will trigger */
+/* 16 posters, 12 thumbs */
+@media (min-width: 300em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 25;
+        --cardCount: 16;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 24;
+        --cardCount: 15;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 22;
+        --cardCount: 12;
     }
 
     .backdropCard {
-        --cardCount: 22;
+        --cardCount: 12;
     }
 
     .overflowBackdropCard {
-        --cardCount: 21;
+        --cardCount: 11;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 220em then the code in the query will trigger */
-/* 21 posters, 18 thumbs */
+/* if the window width is equal to or less than (at maximum) 300em then the code in the query will trigger */
+/* 15 posters, 11 thumbs */
+@media (max-width: 300em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 15;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 14;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 11;
+    }
+
+    .backdropCard {
+        --cardCount: 11;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 10;
+    }
+}
+
+/* 14 posters, 10 thumbs */
+@media (max-width: 270em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 14;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 13;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 10;
+    }
+
+    .backdropCard {
+        --cardCount: 10;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 9;
+    }
+}
+
+/* 13 posters, 10 thumbs */
+@media (max-width: 240em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 13;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 12;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 10;
+    }
+
+    .backdropCard {
+        --cardCount: 10;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 9;
+    }
+}
+
+/* 12 posters, 9 thumbs, 4K*/
 @media (max-width: 220em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 21;
+        --cardCount: 12;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 20;
+        --cardCount: 11;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 18;
+        --cardCount: 9;
     }
 
     .backdropCard {
-        --cardCount: 18;
+        --cardCount: 9;
     }
 
     .overflowBackdropCard {
-        --cardCount: 17;
+        --cardCount: 8;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 200em then the code in the query will trigger */
-/* 17 posters, 14 thumbs */
+/* 11 posters, 9 thumbs */
 @media (max-width: 200em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 17;
+        --cardCount: 11;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 16;
+        --cardCount: 10;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 14;
+        --cardCount: 9;
     }
 
     .backdropCard {
-        --cardCount: 14;
+        --cardCount: 9;
     }
 
     .overflowBackdropCard {
-        --cardCount: 13;
+        --cardCount: 8;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 170em then the code in the query will trigger */
-/* 14 posters, 10 thumbs */
+/* 10 posters, 8 thumbs */
 @media (max-width: 170em) {
 
-    .portraitCard,
-    .squareCard {
-        --cardCount: 14;
-    }
-
-    .overflowPortraitCard,
-    .overflowSquareCard {
-        --cardCount: 13;
-    }
-
-    .squareCard:has(.cardFooter) {
-        --cardCount: 10;
-    }
-
-    .backdropCard {
-        --cardCount: 10;
-    }
-
-    .overflowBackdropCard {
-        --cardCount: 9;
-    }
-}
-
-/* if the window width is equal to or less than (at maximum) 150em then the code in the query will trigger */
-/* 10 posters, 7 thumbs */
-@media (max-width: 150em) {
-
     .portraitCard,
     .squareCard {
         --cardCount: 10;
@@ -600,7 +657,7 @@ html {
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 8;
+        --cardCount: 9;
     }
 
     .backdropCard {
@@ -612,7 +669,33 @@ html {
     }
 }
 
-/* 8 posters, 7 thumbs */
+/* 9 posters, 7 thumbs */
+@media (max-width: 140em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 9;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 8;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 7;
+    }
+
+    .backdropCard {
+        --cardCount: 7;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 6;
+    }
+}
+
+/* 8 posters, 7 thumbs, 1080p */
 @media (max-width: 120em) {
 
     .portraitCard,
@@ -625,6 +708,13 @@ html {
         --cardCount: 7;
     }
 
+    .layout-tv .portraitCard,
+    .layout-tv .squareCard,
+    .layout-tv .overflowPortraitCard,
+    .layout-tv .overflowSquareCard {
+        --cardCount: 6;
+    }
+
     .squareCard:has(.cardFooter) {
         --cardCount: 6;
     }
@@ -636,6 +726,11 @@ html {
     .overflowBackdropCard {
         --cardCount: 5;
     }
+
+    .layout-tv .backdropCard,
+    .layout-tv .overflowBackdropCard {
+        --cardCount: 4;
+    }
 }
 
 /* 7 posters, 6 thumbs */
@@ -644,9 +739,7 @@ html {
     .portraitCard,
     .squareCard,
     .overflowPortraitCard,
-    .overflowSquareCard,
-    .squareCard:has(.cardFooter),
-    .backdropCard {
+    .overflowSquareCard {
         --cardCount: 7;
     }
 
@@ -679,7 +772,7 @@ html {
 
     .overflowBackdropCard,
     .backdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
     }
 }
 
@@ -750,8 +843,17 @@ html {
 .card {
     --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
-    box-sizing: border-box;
     width: var(--cardWidth) !important;
+    padding: .375em;
+    transition: width .5s;
+    box-sizing: content-box;
+}
+
+/* this makes the cards bigger and center aligned on older browsers */
+@supports (aspect-ratio: 1 / 1) {
+    .card {
+        box-sizing: border-box;
+    }
 }
 
 .layout-mobile .card {
@@ -856,7 +958,7 @@ html {
     --itemColumnGap: 0.5em;
 }
 
-.itemsContainer {
+.itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
 }
 
@@ -1010,6 +1112,24 @@ html {
     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;
 }
@@ -1020,7 +1140,7 @@ html {
     top: -30%;
     -webkit-mask: var(--itemBackdropMask);
     mask: var(--itemBackdropMask);
-    animation: animMoveDown 1s ease-out forwards;
+    animation: animMoveDown .5s ease-out forwards;
     height: 45vh;
 }
 
@@ -1148,6 +1268,7 @@ html {
 /* this shows the poster in the cast, book and music pages */
 .detailImageContainer .card:has(.book, .person, .album),
 .detailImageContainer .card.backdropCard:has(.tv),
+.detailImageContainer .card.backdropCard:has(.movie),
 .detailImageContainer .card.backdropCard:has(.live_tv) {
     display: block;
 }
@@ -1168,7 +1289,7 @@ html {
 
 .layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
 .layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
-    animation: animMoveDownSecondaryPage 1s ease-out forwards;
+    animation: animMoveDownSecondaryPage .5s ease-out forwards;
 }
 
 .layout-mobile .cardImageIcon {
@@ -1238,8 +1359,8 @@ html,
     background: var(--backgroundGradient);
 }
 
-.backdropImage:after,
-.backdropImage:before {
+.layout-desktop .backdropImage:after,
+.layout-desktop .backdropImage:before {
     content: "";
     position: absolute;
     top: 0;
@@ -1270,6 +1391,10 @@ html,
     background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .25));
 }
 
+.layout-tv .backgroundContainer.withBackdrop {
+    background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .95));
+}
+
 .layout-mobile .withSectionTabs .backgroundContainer.withBackdrop {
     opacity: .9;
 }
@@ -1293,21 +1418,19 @@ html,
 
 @keyframes animScaleUp {
     from {
-        transform: scale(1) translateY(-2.5%);
+        transform: translateY(-2.5%);
         opacity: 0;
-        filter: var(--blurLarge);
     }
 
     to {
-        transform: scale(1) translateY(0%);
+        transform: translateY(0%);
         opacity: 1;
-        filter: blur(0);
     }
 }
 
 .backdropImageFadeIn {
     transform-origin: bottom center;
-    animation: animScaleUp 1s ease-out forwards;
+    animation: animScaleUp .5s ease-out forwards;
 }
 
 .appfooter {
@@ -1564,26 +1687,10 @@ progress+span {
     outline: none;
     overflow: hidden;
     margin-top: 1em;
-    border: var(--defaultBorder);
     border-radius: var(--smallRadius);
     background-color: var(--lighterGradientPointAlpha);
-}
-
-@supports(display:revert) {
-    .itemDetailsGroup {
-        outline: var(--defaultBorder);
-        outline-offset: calc(-1 * var(--borderWidth));
-        border: none;
-    }
-
-    /* this somehow fixes border overflow on mobile */
-    .layout-mobile .itemDetailsGroup {
-        outline-offset: calc(-1 * var(--borderWidthDouble));
-    }
-}
-
-.itemDetailsGroup>div:not(:last-child) {
-    border-bottom: var(--defaultBorder);
+    border: none;
+    box-shadow: inset 0 0 0 .06em var(--borderColor) !important;
 }
 
 .detailsGroupItem {
@@ -1593,6 +1700,10 @@ progress+span {
     align-items: baseline;
 }
 
+.detailsGroupItem:not(:last-child) {
+    border-bottom: var(--defaultBorder);
+}
+
 .detailsGroupItem>.label {
     font-weight: 600;
     flex-basis: 6em;
@@ -1686,7 +1797,6 @@ progress+span {
     color: var(--dimTextColor);
     margin-top: 0;
     margin-bottom: 0;
-    -webkit-line-clamp: 2;
 }
 
 .detail-clamp-text p {
@@ -1694,10 +1804,19 @@ progress+span {
     margin-bottom: .25em;
 }
 
+.layout-desktop .detail-clamp-text {
+    -webkit-line-clamp: 2;
+}
+
 .layout-mobile .detail-clamp-text {
     -webkit-line-clamp: 4;
 }
 
+.layout-tv .detail-clamp-text {
+    -webkit-line-clamp: 10;
+    transition: none;
+}
+
 .overview-expand.emby-button {
     padding: 0;
     margin-top: 1.4em;
@@ -1799,10 +1918,10 @@ progress+span {
         border: unset;
     }
 
-    body:has(.dialog.dialog-fixedSize.opened,
+    /* body:has(.dialog.dialog-fixedSize.opened,
         .dialog.dialog-fullscreen-lowres.opened) {
         overflow: hidden;
-    }
+    } */
 }
 
 
@@ -2116,8 +2235,19 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     border-radius: 3em;
     border-color: var(--borderColor);
     height: 3em;
-    width: 10em;
+    min-width: 10em;
     margin-right: .5em !important;
+    flex-direction: row;
+}
+
+.btnPlay:after {
+    content: attr(title);
+    padding: 0 1ch;
+}
+
+.btnPlay>.detailButton-content::after {
+    padding: 0 1ch;
+    place-content: center;
 }
 
 .btnPlay>.detailButton-content {
@@ -2132,7 +2262,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     justify-content: flex-start;
 }
 
-.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay[title="Play"]>.detailButton-content::after {
+.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay[title="Play"]:after {
     content: "Read";
 }
 
@@ -2141,19 +2271,6 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     padding-inline-end: 1ch;
 }
 
-.btnPlay[title="Play"]>.detailButton-content::after {
-    content: "Play";
-}
-
-.btnPlay[title="Resume"]>.detailButton-content::after {
-    content: "Resume";
-}
-
-.btnPlay>.detailButton-content::after {
-    padding: 0 1ch;
-    place-content: center;
-}
-
 .mainDetailButtons {
     justify-content: center;
     margin: 0 0 1em 0;
@@ -2450,6 +2567,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--lighterGradientPointAlpha);
 }
 
+.layout-tv .trackSelections {
+    order: 2;
+}
+
 .recordingFields {
     order: 4;
 }
@@ -2511,6 +2632,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     grid-column: 1;
 }
 
+.layout-tv .itemDetailsGroup {
+    order: 2;
+}
+
 .trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
     grid-column: 1 / -1;
 }
@@ -2567,7 +2692,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .layout-mobile .padded-right-withalphapicker {
-    padding-left: 3.5%;
+    padding-left: 4.5%;
     padding-right: 6.5%;
 }
 
@@ -2681,7 +2806,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .upNextDialog-title {
-    white-space: wrap;
+    white-space: pre-wrap;
     width: unset;
 }
 
@@ -2694,9 +2819,20 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: white;
 }
 
+.skip-button-container {
+    bottom: 25%;
+}
+
 .skip-button {
     background-color: whitesmoke;
     box-shadow: var(--shadow);
+    margin-right: var(--sidePadding);
+}
+
+/* this allows the skip button get focused correctly on TVs using remote navigation; needs 10.10.7*/
+.layout-tv .skip-button {
+    margin-right: auto;
+    margin-left: var(--sidePadding);
 }
 
 .skip-button:hover {
@@ -2794,7 +2930,12 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .emby-textarea {
-    font-family: consolas;
+    font-family: consolas, monaco, monospace;
+}
+
+.customCssContainer textarea {
+    max-height: 40vh;
+    overflow-y: auto !important;
 }
 
 .emby-select-withcolor,
@@ -3342,35 +3483,26 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     transition: transform .5s;
 }
 
-/* this is the default header, visible in home and libraries */
-.skinHeader-blurred:not(.osdHeader) {
-    backdrop-filter: none;
-    background-color: transparent;
-    border: none;
+/* this is the default solid header, visible in home and libraries */
+.skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
+    backdrop-filter: var(--blurLarge);
+    background: var(--headerColor);
+    border: var(--defaultBorder);
     border-width: 0 0 var(--borderWidth) 0;
-    background: var(--headerBackground);
-    padding-top: .75em;
-}
-
-.layout-mobile .skinHeader-blurred:not(.osdHeader) {
-    padding-top: .25em;
 }
 
+.layout-mobile .skinHeader-blurred:not(.osdHeader),
 .layout-mobile .withSectionTabs .headerTop {
-    padding-bottom: 1.45em;
+    padding: 0;
 }
 
-.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
-    content: var(--headerBlurLayerVisibility);
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    backdrop-filter: var(--blurLargest);
-    -webkit-mask: var(--headerBlurMask);
-    mask: var(--headerBlurMask);
-    z-index: -1;
+.headerTabs.sectionTabs {
+    display: grid;
+    height: var(--appBarHeight);
+}
+
+.layout-mobile .headerTabs.sectionTabs {
+    align-content: center;
 }
 
 /* this is the transparent header, visible in main media page */
@@ -3381,16 +3513,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     border: none;
 }
 
-/* this is the semi transparent header without, visible when backdrops setting is on */
-/* .backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader):not(.semiTransparent),
-.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.semiTransparent)::after,
-.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader)::after {
-    --headerBackground: var(--headerColorGradientAlt);
-    backdrop-filter: none;
-    background-color: transparent;
-    border: none;
-} */
-
 .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after,
 .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
     --headerBackground: none;
@@ -3406,14 +3528,29 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 
 /* this keeps the header elements aligned when its height is modified */
 .headerTop {
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
+    -webkit-align-items: center;
+    align-items: center;
+    /* this removes different padding set on different layouts in various media queries */
+    padding: 0;
+    height: var(--appBarHeight);
+}
+
+.osdHeader .headerTop {
+    max-height: var(--appBarHeight);
+}
+
+.layout-desktop .headerTop {
+    padding: 0 1em;
+}
+
+.layout-tv .headerTop {
+    padding: 0 .5em;
 }
 
 /* this prevents the section tabs from hiding all the way up */
 .headroom--unpinned {
-    -webkit-transform: translateY(-3.7em);
-    transform: translateY(-3.7em);
+    -webkit-transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
+    transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
 }
 
 .noHomeButtonHeader .emby-tab-button[data-index="1"]:before {
@@ -3431,11 +3568,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     font-variation-settings: 'FILL' 0;
 }
 
-.headerTabs.sectionTabs {
-    margin: 0;
-    height: 6em;
-}
-
 .layout-tv .sectionTabs .emby-tabs.smoothScrollX {
     overflow: visible !important;
 }
@@ -3443,7 +3575,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 .layout-tv .sectionTabs {
     /* this prevents the section tabs from being off-center in the music library
      after I set the overflow to visible to fix visual glitches */
-    width: 100%;
+    width: 70%;
+    margin-right: 2em;
 }
 
 .headerTabs.sectionTabs .emby-tab-button {
@@ -3472,36 +3605,96 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 @media (min-width: 75em) {
-    .sectionTabs:not(.layout-tv .sectionTabs) {
+
+    .sectionTabs {
         -webkit-align-items: center;
         align-items: center;
         -webkit-align-self: center;
         align-self: center;
         -webkit-justify-content: center;
         justify-content: center;
-        margin-top: -3em;
+        margin-top: calc(-1 * var(--appBarHeight));
         position: relative;
         width: auto;
     }
 
+    /* this reduces top page padding when section tabs are minimised */
     .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
         padding-top: 6.8em !important;
     }
 }
 
 @media (max-width: 100em) {
+
+    /* this makes the font size consistent */
     .sectionTabs {
         font-size: 100%;
     }
 }
 
+/* this increased top page padding when section tabs are maximised */
 .libraryPage:not(.noSecondaryNavPage) {
     padding-top: 9.5em !important;
 }
 
+/* this limits top page padding when section tabs always on TVs */
+.layout-tv .libraryPage:not(.noSecondaryNavPage) {
+    padding-top: 6em !important;
+}
+
 .layout-tv .headerLeft {
     overflow: unset;
-    margin: .25em .5em;
+    margin: 0em .6em;
+}
+
+/* this allows switching between the header styles easily */
+#reactRoot>div:nth-of-type(3) {
+    container-name: skinHeader;
+    container-type: size;
+    height: var(--appBarHeight);
+}
+
+@container skinHeader (min-height: 4.9em) {
+
+    /* this is the alternative faded app bar */
+    .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
+        backdrop-filter: none;
+        background-color: transparent;
+        border: none;
+        background: var(--headerBackground);
+        padding: 0;
+    }
+
+    .skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
+        content: var(--headerBlurLayerVisibility);
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        backdrop-filter: var(--blurLargest);
+        -webkit-mask: var(--headerBlurMask);
+        mask: var(--headerBlurMask);
+        z-index: -1;
+    }
+
+    .layout-mobile .headerTop {
+        height: calc(var(--appBarHeight) - 1em);
+    }
+
+    .headerTabs.sectionTabs {
+        padding-bottom: 1.5em;
+    }
+
+    .layout-mobile .headerTabs.sectionTabs {
+        align-content: center;
+    }
+
+    .headroom--unpinned {
+        -webkit-transform: translateY(calc(-.75 * var(--appBarHeight) - var(--borderWidth)));
+        transform: translateY(calc(-.75 * var(--appBarHeight) - var(--borderWidth)));
+    }
+
 }
 
 .remoteControlContent {

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

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Custom media covers nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root {
     /* my media library default covers customizations */
@@ -31,7 +31,7 @@
 
 .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
     position: absolute;
-    font-size: 3.5vh;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
     margin-bottom: .175em;
     font-weight: 800;
     color: white;

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

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Custom media covers v25.01.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root{
     /* my media library default covers customizations */

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

@@ -0,0 +1,188 @@
+/* Add-on: Custom media covers v25.08.02 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);
+    --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);
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+    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 {
+    position: absolute;
+    font-size: 3.5vh;
+    margin-bottom: .175em;
+    font-weight: 800;
+    color: white;
+    font-family: 'Noto Sans';
+    text-align: center;
+}
+
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+    display: none;
+}
+
+/* These show up when no image is set */
+
+/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
+    background: 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 {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+    content: "Movies";
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+    content: "TV Shows";
+}
+
+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/media-bar-plugin-support-latest-min.css

@@ -1 +1,2 @@
-.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;}.layout-desktop #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-desktop .logo-container{top:10vh;}.layout-desktop .backdrop,.layout-desktop .backdrop-container,.layout-desktop .backdrop-overlay{mask-image:none;-webkit-mask-image:none;}.layout-desktop .backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent);}
+/* Add-on: Media Bar plugin support v25.08.08 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}}

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

@@ -1,3 +1,4 @@
+/* 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;
@@ -40,29 +41,75 @@
 }
 
 /* this is my own take */
-.layout-desktop #slides-container {
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
-    height: 60%;
-    top: 8em;
+    height: 62%;
+    top: calc(1.5 * var(--appBarHeight));
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
     transition: all .125s, border 0s;
     user-select: none;
 }
 
-.layout-desktop .logo-container {
+.layout-tv #slides-container {
+    top: 0em;
+}
+
+.layout-mobile #slides-container {
+    top: 10em;
+}
+
+.logo-container {
     top: 10vh;
 }
 
-.layout-desktop .backdrop,
-.layout-desktop .backdrop-container,
-.layout-desktop .backdrop-overlay {
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
     mask-image: none;
     -webkit-mask-image: none;
 }
 
-.layout-desktop .backdrop-overlay {
+.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(0.8);
+    }
+
+    .info-container {
+        /* top: calc(50% + 6vh); */
+    }
+
+    .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));
+    }
+}
+
 /* this styles the media bar plugin - end */

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

@@ -1,3 +1,5 @@
+/* Add-on: Media Bar plugin support v25.08.02 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
 /* this styles the media bar plugin - start */
 .button-container {
     align-items: center;

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

@@ -0,0 +1,109 @@
+/* Add-on: Media Bar plugin support v25.08.08 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,
+.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;
+}
+
+/* this is my own take */
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.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: 0em;
+}
+
+.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(0.8);
+    }
+
+    .info-container {
+        /* top: calc(50% + 6vh); */
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+/* this styles the media bar plugin - end */