Fix: restore bg image to body again (#5828)
Some checks failed
Docker CI / Linting Checks (push) Has been cancelled
Docker CI / Docker Build & Push (push) Has been cancelled

This commit is contained in:
shamoon
2025-09-30 09:07:20 -07:00
committed by GitHub
parent 7aeda56af4
commit 06cf76d724
2 changed files with 39 additions and 41 deletions

View File

@@ -540,38 +540,48 @@ export default function Wrapper({ initialSettings, fallback }) {
html.classList.add(desiredThemeClass); html.classList.add(desiredThemeClass);
} }
// Remove any previously applied inline styles if (backgroundImage) {
body.style.backgroundImage = ""; const safeBackgroundImage = backgroundImage.replace(/'/g, "\\'");
body.style.backgroundColor = ""; body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${safeBackgroundImage}')`;
body.style.backgroundAttachment = ""; body.style.backgroundSize = "cover";
body.style.backgroundPosition = "center";
body.style.backgroundAttachment = "fixed";
body.style.backgroundRepeat = "no-repeat";
body.style.backgroundColor = "";
} else {
body.style.backgroundImage = "none";
body.style.backgroundColor = "rgb(var(--bg-color))";
body.style.backgroundSize = "";
body.style.backgroundPosition = "";
body.style.backgroundAttachment = "";
body.style.backgroundRepeat = "";
}
return () => {
body.style.backgroundImage = "";
body.style.backgroundColor = "";
body.style.backgroundSize = "";
body.style.backgroundPosition = "";
body.style.backgroundAttachment = "";
body.style.backgroundRepeat = "";
};
}, [backgroundImage, opacity, theme, color, initialSettings.color]); }, [backgroundImage, opacity, theme, color, initialSettings.color]);
return ( return (
<> <div id="page_wrapper" className="relative min-h-screen">
{backgroundImage && ( <div
<div id="inner_wrapper"
id="background" tabIndex="-1"
aria-hidden="true" className={classNames(
style={{ "w-full min-h-screen overflow-auto",
backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`, backgroundBlur &&
}} `backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
/> backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
)} backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
<div id="page_wrapper" className="relative h-full"> )}
<div >
id="inner_wrapper" <Index initialSettings={initialSettings} fallback={fallback} />
tabIndex="-1"
className={classNames(
"w-full h-full overflow-auto",
backgroundBlur &&
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
)}
>
<Index initialSettings={initialSettings} fallback={fallback} />
</div>
</div> </div>
</> </div>
); );
} }

View File

@@ -30,18 +30,6 @@ body,
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: rgb(var(--bg-color));
}
#background {
position: fixed;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
pointer-events: none;
} }
html, html,