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