ad3laid3/Themepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: aggressively reveal backdrops by making body transparent and adjusting itemDetailPage

Browse source
This commit is contained in:
MiTHRAL 2026-04-29 01:19:13 -04:00
parent c53f2c0916
commit a9ad220998
1 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
themepo-elegantfin.css
View file

@ -68,25 +68,37 @@
/* --- Base Enhancements --- */ /* --- Base Enhancements --- */
html {
background-color: var(--obsidian);
}
body { body {
font-family: var(--font-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 */ /* Ensure backdrops are visible and positioned correctly */
.backgroundContainer.withBackdrop, .backgroundContainer,
.backdropContainer, .backdropContainer,
.itemBackdrop { .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 */ /* Moonfin/ElegantFin specific overrides to reveal the image */
body:has(.backgroundContainer.withBackdrop) { #itemDetailPage {
background-color: transparent !important; background-color: transparent !important;
} }
body:has(.backgroundContainer.withBackdrop)::before { .itemBackdrop {
opacity: 0.2; /* Reduce grain opacity over backdrops */ 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 */ /* Titles and Headers use the Rune Font */
@ -98,14 +110,20 @@ h1, h2, h3, .title-rune, .itemTitle, .cardText {
/* --- Custom Background Effects --- */ /* --- Custom Background Effects --- */
/* Film grain overlay */ /* Film grain overlay - only show when NOT on a detail page or reduce heavily */
body::before { body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; 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"); 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; 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 */ /* Arcane Background Circle */
@ -126,6 +144,12 @@ html::after {
animation: themepo-spin 120s linear infinite; animation: themepo-spin 120s linear infinite;
} }
/* Hide circle on detail pages */
.backgroundContainer.withBackdrop ~ html::after,
#itemDetailPage ~ html::after {
display: none !important;
}
/* --- Animations --- */ /* --- Animations --- */
@keyframes themepo-spin { @keyframes themepo-spin {
from { transform: translate(-50%, -50%) rotate(0deg); } from { transform: translate(-50%, -50%) rotate(0deg); }