From c8db04413ef3243b6c9f5e58627110eec57b446d Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Sat, 19 Jul 2025 11:56:32 -0700
Subject: [PATCH] Fix: Reduced backdrop opacity rather than brightness on
 mobile

---
 Theme/ElegantFin-theme-nightly.css | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index 7b63312..3d75a17 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -914,6 +914,18 @@ html {
     }
 }
 
+@keyframes animMoveDownSecondaryPage {
+    from {
+        transform: translateY(-2em);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: .3;
+    }
+}
+
 @keyframes animMoveUp {
     from {
         transform: translateY(-90%);
@@ -1103,16 +1115,14 @@ html {
     height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
 }
 
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard, .detailImageContainer .card.squareCard) .itemBackdrop {
-    filter: brightness(.5);
-}
-
-#itemDetailPage:has(.detailImageContainer .card.squareCard:has(.cardImageIcon:not(.person))) {
+#itemDetailPage:has(.detailImageContainer .card.backdropCard),
+#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
     background: linear-gradient(180deg, var(--lighterGradientPointAlpha), var(--darkerGradientPointAlpha))
 }
 
-#itemDetailPage:has(.detailImageContainer .card.backdropCard) {
-    background: linear-gradient(180deg, var(--lighterGradientPointAlpha), var(--darkerGradientPointAlpha))
+.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
+    animation: animMoveDownSecondaryPage 1s ease-out forwards;
 }
 
 .layout-mobile .cardImageIcon {