mirror of
https://github.com/gethomepage/homepage.git
synced 2025-12-06 17:15:34 -08:00
Fix: restore bg image to body again (#5828)
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user