Merge branch 'main' of https://github.com/lscambo13/ElegantFin

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

Theme/ElegantFin-theme-nightly.css

@@ -78,7 +78,7 @@
 
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
-    --primaryItemPageNegativeSpace: 17vh;
+    --primaryItemPageNegativeSpace: 12vh;
     --secondaryItemPageNegativeSpace: 35vh;
 
     --blurSmallest: blur(2px);
@@ -140,7 +140,6 @@ html {
 
 .layout-mobile {
     --itemColumnGap: 0;
-    --sidePadding: 5%;
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
@@ -844,6 +843,10 @@ html {
     }
 }
 
+.layout-mobile .card {
+    --sidePadding: 5%;
+}
+
 .card {
     --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
     --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
@@ -902,10 +905,13 @@ html {
     /* margin-bottom: -1.5em; */
 }
 
-/* test disabled for 10.11.0 */
-/* .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 {
     padding-right: 0;
 } */
@@ -926,6 +932,11 @@ html {
     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 {
@@ -937,7 +948,8 @@ html {
 }
 
 .detailPageSecondaryContainer {
-    padding-top: 0;
+    /* use !important for pre-10.11.0 compatibility */
+    padding-top: 0 !important;
 }
 
 /* this hides the header home button everywhere except the main media page */
@@ -967,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,
@@ -974,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,
@@ -982,6 +996,11 @@ html {
     --itemColumnGap: 0.5em;
 }
 
+.emby-scroller,
+.hiddenScrollX.scrollX {
+    padding-left: calc(var(--sidePadding) - .375em);
+}
+
 .itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
 }
@@ -993,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 {
@@ -1051,8 +1072,8 @@ html {
 }
 
 .layout-desktop .detailRibbon {
-    height: 32vh !important;
-    margin-top: unset !important;
+    height: 28vh;
+    margin-top: unset;
 }
 
 /* test disabled for 10.11.0 */
@@ -1099,7 +1120,7 @@ html {
 
 .detailLogo {
     display: block;
-    top: calc(100vh - 10em - var(--primaryItemPageNegativeSpace));
+    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
     transform: translateY(-100%);
@@ -1173,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 {
@@ -1199,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 {
@@ -2292,7 +2332,9 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
 
 .mainDetailButtons {
     justify-content: center;
-    margin: 0 0 1em 0;
+    /* test for 10.11.0 */
+    /* margin: 0 0 1em 0; */
+    margin: 0;
 }
 
 .layout-mobile [dir=ltr] .mainDetailButtons {
@@ -2571,10 +2613,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     gap: 1em;
 }
 
-.detailImageContainer .card {
-    position: inherit !important;
-}
-
 .trackSelections {
     order: 3;
     max-width: unset !important;