RELEASE: ElegantFin v25.10.27

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -19,17 +19,21 @@ If applicable, add screenshots to help explain your problem.
 **ElegantFin:**
  - Version [e.g. 24.12.11]
 
+**Jellyfin Server:**
+ - Version [e.g. 10.10.7]
+
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+ - Browser: [e.g. chrome, safari]
+ - Browser Version: [e.g. 22]
  - Screen Resolution [e.g. 1920x1080]
 
 **Smartphone or TV (please complete the following information):**
  - 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**

README.md

@@ -220,8 +220,11 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 
 ### 🆗 Tested on 
 - Jellyfin Server v10.10.7
+- Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3
 
+Note: Support for v10.11.0 is a work in progress
+
 <hr>
 
 ### 🛠️ Troubleshooting 

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);
@@ -123,7 +123,11 @@
 
     /* use 5em to enable the fading app bar (seamless); 
        use 4.6em to get the solid app bar (cleaner with border) */
-    --appBarHeight: 4.6em;
+    --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 {
@@ -136,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 */
@@ -201,6 +207,10 @@ html {
     color: var(--borderColor);
 }
 
+.cardPadder .cardImageIcon {
+    color: var(--selectorBackgroundColorAlpha);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: white !important;
@@ -833,6 +843,10 @@ html {
     }
 }
 
+.layout-mobile .card {
+    --sidePadding: 5%;
+}
+
 .card {
     --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
@@ -885,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;
@@ -905,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;
@@ -936,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,
@@ -943,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,
@@ -951,6 +996,11 @@ html {
     --itemColumnGap: 0.5em;
 }
 
+.emby-scroller,
+.hiddenScrollX.scrollX {
+    padding-left: calc(var(--sidePadding) - .375em);
+}
+
 .itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
 }
@@ -962,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 {
@@ -1020,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 {
@@ -1065,17 +1118,9 @@ 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));
+    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
     transform: translateY(-100%);
@@ -1084,11 +1129,6 @@ html {
     background-position: bottom;
 }
 
-    .layout-tv .detailLogo {
-        display: block;
-    }
-}
-
 .layout-mobile .detailLogo {
     display: block;
     z-index: 1;
@@ -1142,6 +1182,7 @@ html {
 }
 
 .layout-tv .detailLogo {
+    display: block;
     height: 20vh;
     top: 39vh;
     left: 30vw;
@@ -1153,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 {
@@ -1179,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 {
@@ -1198,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 */
@@ -1261,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;
 }
@@ -1351,8 +1414,12 @@ html,
     background: var(--backgroundGradient);
 }
 
-.layout-desktop .backdropImage:after,
-.layout-desktop .backdropImage:before {
+.backdropImage {
+    background-position-y: var(--backdropPositionY);
+}
+
+.backdropImage:after,
+.backdropImage:before {
     content: "";
     position: absolute;
     top: 0;
@@ -1690,6 +1757,9 @@ progress+span {
     justify-content: space-between;
     padding: .5em .9em;
     align-items: baseline;
+}
+
+.detailsGroupItem:not(:last-child) {
     border-bottom: var(--defaultBorder);
 }
 
@@ -2262,7 +2332,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
 
 .mainDetailButtons {
     justify-content: center;
-    margin: 0 0 1em 0;
+    margin: 0;
 }
 
 .layout-mobile [dir=ltr] .mainDetailButtons {
@@ -2273,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;
     }
 }
 
@@ -2530,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 {
@@ -2541,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;
@@ -2552,7 +2618,7 @@ 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);
 }
 
@@ -2618,7 +2684,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .itemDetailsGroup {
     order: 2;
-    grid-column: 1;
+    grid-column: 1 / 3;
 }
 
 .layout-tv .itemDetailsGroup {
@@ -2629,12 +2695,30 @@ div[data-role=controlgroup] a.ui-btn-active {
     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 {
     grid-column: 1 / -1;
 }
 
@@ -2685,9 +2769,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 {
@@ -2695,6 +2780,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;
@@ -3524,10 +3615,18 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     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(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
@@ -3681,3 +3780,29 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 .remoteControlContent {
     padding: 0 var(--sidePadding) !important;
 }
+
+/* .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;
+} */
+
+/* .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;
+}