dev: updated the bug report template

Fix: Rewrote some code to ensure that the secondary pages look consistent on different JF versions

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,6 +7,11 @@ assignees: ''
 
 ---
 
+**Checklist**
+- [ ] I have read the README.md 
+- [ ] I have searched through the other open and closed issues using the GitHub search bar
+- [ ] I have made sure that my issue is not a duplicate
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
@@ -17,20 +22,26 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **ElegantFin:**
- - Version [e.g. 24.12.11]
+ - Version [e.g. 24.12.01]
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+**Jellyfin Server:**
+ - Version [e.g. 10.10.3]
+
+**Desktop:**
+ - OS: [e.g. Windows]
+ - Browser: [e.g. chrome, safari]
+ - Browser Version: [e.g. 22]
  - Screen Resolution [e.g. 1920x1080]
 
-**Smartphone or TV (please complete the following information):**
+**Smartphone or TV:**
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - Browser: [e.g. stock browser, safari]
+ - Browser Version: [e.g. 22]
+ - Jellyfin App Version: 
 
 
-**Additional context**
-Add any other context about the problem here.
+**Are you using any plugins or extra CSS configuration**
+- Add any third-party plugins or CSS configuration you use.
+- [e.g. Media Bar, Custom Tabs etc]
+- [e.g. other custom css modifications]

README.md

@@ -95,8 +95,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
   <summary><i>Detailed steps for server-side implementation</i></summary>
 
 1. Open Dashboard from Administration tab in Settings.
-2. Select General tab from the side bar.
-3. Scroll down to find Custom CSS code box under Branding section.
+2. From the side bar, select the Branding tab if you are on Jellyfin 10.11.X or the General tab on older version.
+3. Scroll down to find Custom CSS code box.
 4. Paste the custom css in Custom CSS code box.
 5. Click save
 </details>
@@ -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,15 +127,19 @@ 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)
-- 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.
+<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" />
+
+- Note: this customisation is not needed on Jellyfin 10.11.X anymore
+
+- On older Jellyfin versions, 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.
   ```
   :root{
     --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
   }
   ```
-- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8097`.
+- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
 - Don't forget the correct http or https in your domain.
 - You can also modify the parameters, for example blur size or the resolution, according to your liking.
 - Once done, save and refresh your apps and webpages.
@@ -143,6 +148,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 +163,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 +178,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 +192,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 +207,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 +220,9 @@ 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.11.1
+- Microsoft Edge (Chromium)
+- Jellyfin Android App v2.6.3
 
 <hr>
 
@@ -210,17 +230,17 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
-- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
-- It should be something like ElegantFin v25.07.XX
+- Check the version number at the bottom in the Settings screen. 
+- It should be something like `ElegantFin v25.10.XX`.
 </details>
 
 <details>
   <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
 
-- If Dashboard footer shows an old version, it means that your app is still using an old cache.
-- Once that cache is updated, the new version will be loaded. 
-- To get the latest version, you will need to clear cache. There are multiple ways to do it.
-- On web version, force a hard refresh of the page using CTRL + F5.
+- If the Settings footer shows an old version, it means that you are still using an old cache.
+- 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.
 </details>
 

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);
@@ -78,7 +78,7 @@
 
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
-    --primaryItemPageNegativeSpace: 15vh;
+    --primaryItemPageNegativeSpace: 12vh;
     --secondaryItemPageNegativeSpace: 35vh;
 
     --blurSmallest: blur(2px);
@@ -120,6 +120,14 @@
     /* 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;
+
+    /* use 50% to crop the top of the backdrop image slightly (recommended) [default]; 
+       use 0% to prevent the cropping from top, or choose between 0% and 100% according to your preference */
+    --backdropPositionY: 50%;
 }
 
 html {
@@ -132,7 +140,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 */
@@ -178,10 +188,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 {
@@ -192,11 +207,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;
 }
@@ -219,11 +234,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;
@@ -315,34 +325,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);
 }
 
@@ -351,7 +361,7 @@ html {
     background: rgba(255, 255, 255, .05);
 }
 
-.card.card-hoverable .cardOverlayContainer:after {
+.card-hoverable .cardOverlayContainer:after {
     content: var(--cardHoverEffect);
     transition: .5s;
     position: absolute;
@@ -363,7 +373,7 @@ html {
     background: var(--hoverGradientV);
 }
 
-.card.card-hoverable:hover .cardOverlayContainer:after {
+.card-hoverable:hover .cardOverlayContainer:after {
     transform: translateY(50%) translateX(0);
     opacity: 0;
 }
@@ -410,7 +420,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;
 }
@@ -701,6 +711,13 @@ html {
         --cardCount: 7;
     }
 
+    .layout-tv .portraitCard,
+    .layout-tv .squareCard,
+    .layout-tv .overflowPortraitCard,
+    .layout-tv .overflowSquareCard {
+        --cardCount: 6;
+    }
+
     .squareCard:has(.cardFooter) {
         --cardCount: 6;
     }
@@ -712,6 +729,11 @@ html {
     .overflowBackdropCard {
         --cardCount: 5;
     }
+
+    .layout-tv .backdropCard,
+    .layout-tv .overflowBackdropCard {
+        --cardCount: 4;
+    }
 }
 
 /* 7 posters, 6 thumbs */
@@ -821,11 +843,24 @@ html {
     }
 }
 
+.layout-mobile .card {
+    --sidePadding: 5%;
+}
+
 .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 {
@@ -864,17 +899,22 @@ html {
     flex-direction: column;
     /* center content on desktop */
     align-items: center;
-    text-align: center;
-    margin-bottom: -1.5em;
+    /* this aligns the plot to left on 10.11.0 */
+    text-align: left;
+    /* temporarily disabled for 10.11.0 */
+    /* margin-bottom: -1.5em; */
 }
 
-.layout-mobile .detailPagePrimaryContainer {
-    padding: .5em var(--sidePadding);
+/* this disables block padding on pre-10.11.0 */
+.layout-mobile .detailPagePrimaryContainer.detailRibbon,
+/* this disables block padding on 10.11.0 */
+.layout-mobile .detailPagePrimaryContainer>.detailRibbon {
+    padding: 0 var(--sidePadding);
 }
 
-[dir=ltr] .detailPagePrimaryContent {
+/* [dir=ltr] .detailPagePrimaryContent {
     padding-right: 0;
-}
+} */
 
 .layout-desktop .detailPagePrimaryContainer {
     background: transparent;
@@ -884,10 +924,34 @@ html {
     background-color: transparent;
 }
 
-.detailPageSecondaryContainer {
+/* this removes the extra large left paading on 10.11.0 */
+.detailPagePrimaryContainer>.detailPagePrimaryContent,
+[dir=ltr] .detailPagePrimaryContainer>.detailRibbon,
+/* this removes the extra large left paading on pre-10.11.0 */
+[dir=ltr] .detailPagePrimaryContainer.detailRibbon {
+    padding-left: var(--sidePadding);
+}
+
+.layout-mobile .detailPagePrimaryContent {
+    padding-left: var(--sidePadding) !important;
+    padding-right: var(--sidePadding) !important;
+}
+
+/* this places main media buttons below the title on 10.11.0 */
+.layout-desktop [dir=ltr] .detailRibbon,
+.layout-tv [dir=ltr] .detailRibbon {
+    flex-direction: column;
+}
+
+.detailPagePrimaryContainer>.detailPagePrimaryContent {
     padding-top: 0;
 }
 
+.detailPageSecondaryContainer {
+    /* use !important for pre-10.11.0 compatibility */
+    padding-top: 0 !important;
+}
+
 /* this hides the header home button everywhere except the main media page */
 .skinHeader-withBackground:not(.semiTransparent) .headerHomeButton {
     display: none;
@@ -915,6 +979,7 @@ html {
 
 .verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
     padding-top: 1.25em !important;
+    margin: 0 0 -.5em 0;
 }
 
 #itemDetailPage .emby-scroller-container,
@@ -922,6 +987,7 @@ html {
 #itemDetailPage .scrollX {
     margin: 0 calc(-1 * var(--sidePadding));
     padding: 0 var(--sidePadding);
+    padding-left: calc(var(--sidePadding) - .375em);
 }
 
 .layout-desktop .emby-scroller-container,
@@ -930,7 +996,12 @@ html {
     --itemColumnGap: 0.5em;
 }
 
-.itemsContainer {
+.emby-scroller,
+.hiddenScrollX.scrollX {
+    padding-left: calc(var(--sidePadding) - .375em);
+}
+
+.itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
 }
 
@@ -941,14 +1012,16 @@ html {
 
 .sectionTitleContainer-cards {
     padding-top: 0;
-}
-
-.sectionTitleContainer+.emby-scrollbuttons {
-    padding-top: 0;
+    margin: .75em 0 -.75em 0;
 }
 
 .layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
     text-align: left;
+    margin: .75em 0 -.75em 0;
+}
+
+.sectionTitleContainer+.emby-scrollbuttons {
+    padding-top: 0;
 }
 
 .emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
@@ -999,14 +1072,15 @@ html {
 }
 
 .layout-desktop .detailRibbon {
-    height: 32vh !important;
-    margin-top: unset !important;
+    height: 28vh;
+    margin-top: unset;
 }
 
-.layout-desktop [dir=ltr] .detailPagePrimaryContainer,
+/* test disabled for 10.11.0 */
+/* .layout-desktop [dir=ltr] .detailPagePrimaryContainer,
 .layout-tv [dir=ltr] .detailPagePrimaryContainer {
     padding-left: var(--sidePadding);
-}
+} */
 
 @keyframes animMoveDown {
     from {
@@ -1045,27 +1119,14 @@ html {
 }
 
 .detailLogo {
-    /* this hides the detail logo by default to make it only show up on modern browsers */
-    display: none;
-}
-
-@supports (aspect-ratio: 1 / 1) {
-    /* this shows the detail logo on modern browsers */
-
-    .detailLogo {
-        display: block;
-        top: calc(100vh - 10em - var(--primaryItemPageNegativeSpace));
-        left: 0;
-        width: 40%;
-        transform: translateY(-100%);
-        margin: auto 30%;
-        height: 25vh;
-        background-position: bottom;
-    }
-
-    .layout-tv .detailLogo {
-        display: block;
-    }
+    display: block;
+    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
+    left: 0;
+    width: 40%;
+    transform: translateY(-100%);
+    margin: auto 30%;
+    height: 25vh;
+    background-position: bottom;
 }
 
 .layout-mobile .detailLogo {
@@ -1121,6 +1182,7 @@ html {
 }
 
 .layout-tv .detailLogo {
+    display: block;
     height: 20vh;
     top: 39vh;
     left: 30vw;
@@ -1132,25 +1194,37 @@ html {
     height: 33vh;
 }
 
-.detailImageContainer.padded-left {
+/* .detailImageContainer.padded-left {
     padding-left: 0;
-}
+} */
+
+/* .layout-tv .detailImageContainer .card {
+    padding-left: var(--sidePadding);
 
-.layout-tv .detailImageContainer.padded-left {
-    padding-left: 0;
-    height: 0;
     position: fixed;
-}
+} */
 
 .layout-desktop .detailImageContainer .card {
-    top: unset !important;
+    position: absolute !important;
     width: 22vh !important;
+    float: none;
+    left: 0 !important;
+    top: 0;
+    right: 0;
+    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 {
     width: 40vh !important;
     max-width: 50vw;
-    margin-bottom: 1em;
 }
 
 .detailImageContainer .card {
@@ -1158,8 +1232,15 @@ html {
 }
 
 .layout-tv .detailImageContainer .card {
-    width: 23vw !important;
-    display: block !important;
+    width: 25vw !important;
+    display: grid !important;
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    left: var(--sidePadding);
+    align-content: center;
+    transform: none;
 }
 
 .layout-mobile .detailImageContainer .card {
@@ -1177,6 +1258,8 @@ html {
     align-content: end;
     place-items: center;
     display: grid;
+    /* this centers the title and other text on 10.11.0 */
+    text-align: center;
 }
 
 /* Both the blocks below position the poster in main media page in the center */
@@ -1240,6 +1323,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;
 }
@@ -1330,6 +1414,10 @@ html,
     background: var(--backgroundGradient);
 }
 
+.backdropImage {
+    background-position-y: var(--backdropPositionY);
+}
+
 .backdropImage:after,
 .backdropImage:before {
     content: "";
@@ -1362,6 +1450,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;
 }
@@ -1654,26 +1746,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 {
@@ -1683,6 +1759,10 @@ progress+span {
     align-items: baseline;
 }
 
+.detailsGroupItem:not(:last-child) {
+    border-bottom: var(--defaultBorder);
+}
+
 .detailsGroupItem>.label {
     font-weight: 600;
     flex-basis: 6em;
@@ -1776,7 +1856,6 @@ progress+span {
     color: var(--dimTextColor);
     margin-top: 0;
     margin-bottom: 0;
-    -webkit-line-clamp: 2;
 }
 
 .detail-clamp-text p {
@@ -1784,10 +1863,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;
@@ -1889,10 +1977,10 @@ progress+span {
         border: unset;
     }
 
-    body:has(.dialog.dialog-fixedSize.opened,
+    /* body:has(.dialog.dialog-fixedSize.opened,
         .dialog.dialog-fullscreen-lowres.opened) {
         overflow: hidden;
-    }
+    } */
 }
 
 
@@ -2208,6 +2296,17 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     height: 3em;
     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 {
@@ -2222,7 +2321,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";
 }
 
@@ -2231,22 +2330,9 @@ 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;
+    margin: 0;
 }
 
 .layout-mobile [dir=ltr] .mainDetailButtons {
@@ -2257,7 +2343,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
 @media (min-width: 100em) {
     .mainDetailButtons {
         font-size: unset;
-        margin: 0 0 1em 0;
+        margin: 0;
     }
 }
 
@@ -2514,7 +2600,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
 .layout-mobile .detailSection {
@@ -2525,10 +2611,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     gap: 1em;
 }
 
-.detailImageContainer .card {
-    position: inherit !important;
-}
-
 .trackSelections {
     order: 3;
     max-width: unset !important;
@@ -2536,10 +2618,14 @@ div[data-role=controlgroup] a.ui-btn-active {
     border: var(--defaultBorder);
     border-radius: var(--smallRadius);
     padding: 1em;
-    grid-column: 2;
+    grid-column: 3 / 5;
     background-color: var(--lighterGradientPointAlpha);
 }
 
+.layout-tv .trackSelections {
+    order: 2;
+}
+
 .recordingFields {
     order: 4;
 }
@@ -2598,22 +2684,53 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .itemDetailsGroup {
     order: 2;
-    grid-column: 1;
+    grid-column: 1 / 3;
+}
+
+.layout-tv .itemDetailsGroup {
+    order: 2;
 }
 
 .trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
     grid-column: 1 / -1;
 }
 
+.detailSection>.nextUpSection {
+    order: 5;
+    grid-column: 1;
+}
+
+.detailSection>#listChildrenCollapsible {
+    order: 6;
+    grid-column: 2 / -1;
+}
+
+.nextUpSection.hide~#listChildrenCollapsible {
+    grid-column: 1 / -1;
+}
+
 .layout-mobile .trackSelections,
 .layout-mobile .detailSectionContent,
 .layout-mobile .itemDetailsGroup,
+.layout-mobile .nextUpSection,
+.layout-mobile .detailSection>#listChildrenCollapsible,
 .layout-tv .trackSelections,
 .layout-tv .detailSectionContent,
-.layout-tv .itemDetailsGroup {
+.layout-tv .itemDetailsGroup,
+.layout-tv .nextUpSection,
+.layout-tv .detailSection>#listChildrenCollapsible,
+.collectionItems {
     grid-column: 1 / -1;
 }
 
+.collectionItems .sectionTitleContainer.padded-left {
+    padding-left: .375em;
+}
+
+.collectionItemsContainer.padded-left {
+    padding-left: 0;
+}
+
 .sliderBubble {
     border-radius: var(--largeRadius);
     border: var(--defaultBorder);
@@ -2661,9 +2778,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-right: 6.5%;
 }
 
-.detailPagePrimaryContent.padded-right {
+/* test disabled for 10.11.0 */
+/* .detailPagePrimaryContent.padded-right {
     padding-right: 0 !important;
-}
+} */
 
 [dir=ltr] .detailPageContent,
 .content-primary {
@@ -2671,6 +2789,12 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding-right: var(--sidePadding) !important;
 }
 
+/* this prevents double padding on Jellyfin pre-10.11.0 */
+[dir=ltr] .detailPageContent>.detailPagePrimaryContent {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
 /* this removes right padding from cast page sections to place cards evenly*/
 #itemDetailPage .verticalSection .itemsContainer.padded-right {
     padding-right: 0 !important;
@@ -2784,19 +2908,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);
-    bottom: 25%;
-    right: var(--sidePadding);
+    margin-right: var(--sidePadding);
 }
 
-/* this workaround allows the skip button get focused correctly on TVs using remote navigation*/
-/* issue: back button can no longer be focused correctly when this button is focused, 
-but that is a non-issue because users can use the back button on their remotes */
+/* this allows the skip button get focused correctly on TVs using remote navigation; needs 10.10.7*/
 .layout-tv .skip-button {
-    right: unset;
-    left: var(--sidePadding);
+    margin-right: auto;
+    margin-left: var(--sidePadding);
 }
 
 .skip-button:hover {
@@ -2897,6 +3022,11 @@ but that is a non-issue because users can use the back button on their remotes *
     font-family: consolas, monaco, monospace;
 }
 
+.customCssContainer textarea {
+    max-height: 40vh;
+    overflow-y: auto !important;
+}
+
 .emby-select-withcolor,
 .emby-select,
 .emby-input,
@@ -3442,39 +3572,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;
-    background: var(--headerBackground);
-    padding-top: .75em;
-}
-
-.layout-mobile .skinHeader-blurred:not(.osdHeader) {
-    padding-top: .25em;
+/* 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;
 }
 
+.layout-mobile .skinHeader-blurred:not(.osdHeader),
 .layout-mobile .withSectionTabs .headerTop {
-    padding-bottom: 1.45em;
-}
-
-.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;
+    padding: 0;
 }
 
 .headerTabs.sectionTabs {
-    margin: 0;
-    height: 6em;
+    display: grid;
+    height: var(--appBarHeight);
+}
+
+.layout-mobile .headerTabs.sectionTabs {
+    align-content: center;
 }
 
 /* this is the transparent header, visible in main media page */
@@ -3500,14 +3617,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 {
@@ -3532,7 +3664,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 {
@@ -3562,58 +3695,123 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 
 @media (min-width: 75em) {
 
-    .layout-desktop .sectionTabs,
-    .layout-mobile .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 {
     padding: 0 var(--sidePadding) !important;
 }
 
-/* Uncomment this to bring back the original ElegantFin header design - start */
-
-/* .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
-    backdrop-filter: var(--blurLarge);
-    background: var(--headerColor);
-    border: var(--defaultBorder);
-    border-width: 0 0 var(--borderWidth) 0;
-}
-
-.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
-    content: none;
-}
-
-.headerTabs.sectionTabs {
-    height: 4em;
+/* .layout-tv *,
+.layout-tv *::before,
+.layout-tv *::after {
+    transition-duration: .1s;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    box-shadow: none;
+    text-shadow: none;
+    filter: none !important;
+    -webkit-filter: none !important;
 } */
 
-/* Uncomment this to bring back the original ElegantFin header design - end */
+/* .layout-tv .show-focus:not(.card):focus,
+.layout-tv .show-animation:not(.card):focus {
+    transform: none !important;
+} */
+
+/* .layout-tv .blurhash-canvas {
+    display: none !important;
+} */
+
+.layout-tv .show-focus:focus,
+.layout-tv .show-animation:focus {
+    transform: none !important;
+}

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

@@ -52,8 +52,8 @@
 
 #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;
@@ -106,4 +106,10 @@
     }
 }
 
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(.5 * var(--appBarHeight));
+    }
+}
+
 /* this styles the media bar plugin - end */