From 6a157db8e527f9a6a973d6de5f3524ff6558773a Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Sun, 11 May 2025 18:14:15 +0530
Subject: [PATCH] New: On phones, faded the backdrop itself rather than
 overlaying gradients over it

---
 Theme/ElegantFin-theme-nightly.css | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index 63dc66f..7833824 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -427,12 +427,12 @@ html {
     margin-top: unset;
 }
 
+/* This adds a light tint on the backdrop on phones */
 .layout-mobile .detailPageWrapperContainer {
-    background: var(--darkerGradientPointAlpha);
+    background: rgb(17 24 39 / 40%);
 }
 
 .layout-desktop .detailPageWrapperContainer {
-    /* background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent); */
     background: transparent;
     min-height: calc(100vh - 13em);
 }
@@ -448,18 +448,10 @@ html {
     padding-right: 0;
 }
 
-.layout-mobile .detailPagePrimaryContainer {
-    background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
-}
-
 .layout-desktop .detailPagePrimaryContainer {
     background: transparent;
 }
 
-.layout-mobile .detailPageSecondaryContainer {
-    background-color: var(--darkerGradientPoint);
-}
-
 .layout-desktop .detailPageSecondaryContainer {
     background-color: transparent;
 }
@@ -656,7 +648,8 @@ html {
 .layout-mobile .itemBackdrop {
     margin-top: 0;
     position: sticky;
-    top: -10%;
+    top: -30%;
+    mask: linear-gradient(180deg, black 50%, transparent);
 }
 
 .layout-tv .itemBackdrop {