New: Allowed clear logos to be visible on older browsers

Fix: Frosted effect on page backdrops had stopped working on mobile

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);
@@ -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 {
@@ -137,6 +141,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 +208,10 @@ html {
     color: var(--borderColor);
 }
 
+.cardPadder .cardImageIcon {
+    color: var(--selectorBackgroundColorAlpha);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: white !important;
@@ -1066,27 +1077,14 @@ html {
 }
 
 .detailLogo {
-    /* this hides the detail logo by default to make it only show up on modern browsers */
+    display: block;
-    display: none;
+    top: calc(100vh - 10em - var(--primaryItemPageNegativeSpace));
-}
+    left: 0;
-
+    width: 40%;
-@supports (aspect-ratio: 1 / 1) {
+    transform: translateY(-100%);
-    /* this shows the detail logo on modern browsers */
+    margin: auto 30%;
-
+    height: 25vh;
-    .detailLogo {
+    background-position: bottom;
-        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;
-    }
 }
 
 .layout-mobile .detailLogo {
@@ -1142,6 +1140,7 @@ html {
 }
 
 .layout-tv .detailLogo {
+    display: block;
     height: 20vh;
     top: 39vh;
     left: 30vw;
@@ -1261,6 +1260,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 +1351,12 @@ html,
     background: var(--backgroundGradient);
 }
 
-.layout-desktop .backdropImage:after,
+.backdropImage {
-.layout-desktop .backdropImage:before {
+    background-position-y: var(--backdropPositionY);
+}
+
+.backdropImage:after,
+.backdropImage:before {
     content: "";
     position: absolute;
     top: 0;
@@ -1690,6 +1694,9 @@ progress+span {
     justify-content: space-between;
     padding: .5em .9em;
     align-items: baseline;
+}
+
+.detailsGroupItem:not(:last-child) {
     border-bottom: var(--defaultBorder);
 }
 
@@ -3524,10 +3531,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)));