From a9ad220998fdf16c5641dfbd3de6ddaf67e9f67c Mon Sep 17 00:00:00 2001
From: MiTHRAL <mithral@mithral.local>
Date: Wed, 29 Apr 2026 01:19:13 -0400
Subject: [PATCH] fix: aggressively reveal backdrops by making body transparent
 and adjusting itemDetailPage

---
 themepo-elegantfin.css | 44 ++++++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/themepo-elegantfin.css b/themepo-elegantfin.css
index 10d8c28..a4f6c0f 100644
--- a/themepo-elegantfin.css
+++ b/themepo-elegantfin.css
@@ -68,25 +68,37 @@
 
 /* --- Base Enhancements --- */
 
+html {
+  background-color: var(--obsidian);
+}
+
 body {
   font-family: var(--font-body);
-  background-color: var(--obsidian); /* Removed !important to allow Jellyfin/ElegantFin to override */
+  background-color: transparent !important; /* Force transparent to see backdrops behind it */
 }
 
-/* Ensure backdrops are visible */
-.backgroundContainer.withBackdrop, 
+/* Ensure backdrops are visible and positioned correctly */
+.backgroundContainer,
 .backdropContainer,
 .itemBackdrop {
-  z-index: -1; /* Ensure they stay behind content */
+  display: block !important;
+  opacity: 1 !important;
+  z-index: -1;
 }
 
-/* Hide the solid background and effects when a backdrop is active to let it show through */
-body:has(.backgroundContainer.withBackdrop) {
+/* Moonfin/ElegantFin specific overrides to reveal the image */
+#itemDetailPage {
   background-color: transparent !important;
 }
 
-body:has(.backgroundContainer.withBackdrop)::before {
-  opacity: 0.2; /* Reduce grain opacity over backdrops */
+.itemBackdrop {
+  background-size: cover;
+  background-attachment: fixed;
+  height: 100vh !important;
+  width: 100vw !important;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
 /* Titles and Headers use the Rune Font */
@@ -98,14 +110,20 @@ h1, h2, h3, .title-rune, .itemTitle, .cardText {
 
 /* --- Custom Background Effects --- */
 
-/* Film grain overlay */
+/* Film grain overlay - only show when NOT on a detail page or reduce heavily */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   pointer-events: none;
-  z-index: 100; /* Lowered z-index to avoid covering content */
+  z-index: 100;
+}
+
+/* Reduce grain and hide circle on detail pages to clean up the backdrop */
+#itemDetailPage ~ body::before,
+#itemDetailPage::before {
+  opacity: 0.02 !important;
 }
 
 /* Arcane Background Circle */
@@ -126,6 +144,12 @@ html::after {
   animation: themepo-spin 120s linear infinite;
 }
 
+/* Hide circle on detail pages */
+.backgroundContainer.withBackdrop ~ html::after,
+#itemDetailPage ~ html::after {
+  display: none !important;
+}
+
 /* --- Animations --- */
 @keyframes themepo-spin { 
   from { transform: translate(-50%, -50%) rotate(0deg); }