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

fix: revert aggressive layout changes and use targeted transparency for backdrops

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

43
themepo-elegantfin.css
View file

@ -68,37 +68,21 @@
/* --- Base Enhancements --- */
html {
background-color: var(--obsidian);
}
body {
font-family: var(--font-body);
background-color: transparent !important; /* Force transparent to see backdrops behind it */
background-color: var(--obsidian) !important;
}
/* Ensure backdrops are visible and positioned correctly */
.backgroundContainer,
.backdropContainer,
.itemBackdrop {
display: block !important;
opacity: 1 !important;
z-index: -1;
}
/* Moonfin/ElegantFin specific overrides to reveal the image */
#itemDetailPage {
/* Make background transparent ONLY on item pages to reveal the backdrop */
#itemDetailPage,
.backgroundContainer.withBackdrop {
background-color: transparent !important;
}
.itemBackdrop {
background-size: cover;
background-attachment: fixed;
height: 100vh !important;
width: 100vw !important;
position: fixed;
top: 0;
left: 0;
/* Allow the body background to be "pushed back" when a backdrop is present */
body:has(.backgroundContainer.withBackdrop),
body:has(#itemDetailPage) {
background-color: #000 !important; /* Pure black behind backdrops */
}
/* Titles and Headers use the Rune Font */
@ -110,7 +94,7 @@ h1, h2, h3, .title-rune, .itemTitle, .cardText {
/* --- Custom Background Effects --- */
/* Film grain overlay - only show when NOT on a detail page or reduce heavily */
/* Film grain overlay */
body::before {
content: "";
position: fixed;
@ -120,10 +104,9 @@ body::before {
z-index: 100;
}
/* Reduce grain and hide circle on detail pages to clean up the backdrop */
#itemDetailPage ~ body::before,
/* Hide grain on detail pages if it makes things look "dirty" */
#itemDetailPage::before {
opacity: 0.02 !important;
display: none !important;
}
/* Arcane Background Circle */
@ -144,8 +127,8 @@ html::after {
animation: themepo-spin 120s linear infinite;
}
/* Hide circle on detail pages */
.backgroundContainer.withBackdrop ~ html::after,
/* Hide the spinning circle on detail pages */
body:has(#itemDetailPage) html::after,
#itemDetailPage ~ html::after {
display: none !important;
}