Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-01 21:13:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Support blur, saturation & brightness filters for background images

Browse Source
This commit is contained in:
shamoon 2023-04-18 22:51:46 -07:00
parent 4794c8e2ed
commit 55bc247c9e
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/index.jsx
View File

@ -318,15 +318,26 @@ function Home({ initialSettings }) {
export default function Wrapper({ initialSettings, fallback }) { export default function Wrapper({ initialSettings, fallback }) {
const wrappedStyle = {}; const wrappedStyle = {};
let backgroundBlur = false;
let backgroundSaturate = false;
let backgroundBrightness = false;
if (initialSettings && initialSettings.background) { if (initialSettings && initialSettings.background) {
const opacity = initialSettings.backgroundOpacity ?? 1; let opacity = initialSettings.backgroundOpacity ?? 1;
let backgroundImage = initialSettings.background;
if (typeof initialSettings.background === 'object') {
backgroundImage = initialSettings.background.image;
backgroundBlur = initialSettings.background.blur !== undefined;
backgroundSaturate = initialSettings.background.saturate !== undefined;
backgroundBrightness = initialSettings.background.brightness !== undefined;
if (initialSettings.background.opacity !== undefined) opacity = initialSettings.background.opacity / 100;
}
const opacityValue = 1 - opacity; const opacityValue = 1 - opacity;
wrappedStyle.backgroundImage = ` wrappedStyle.backgroundImage = `
linear-gradient( linear-gradient(
rgb(var(--bg-color) / ${opacityValue}), rgb(var(--bg-color) / ${opacityValue}),
rgb(var(--bg-color) / ${opacityValue}) rgb(var(--bg-color) / ${opacityValue})
), ),
url(${initialSettings.background})`; url(${backgroundImage})`;
wrappedStyle.backgroundPosition = "center"; wrappedStyle.backgroundPosition = "center";
wrappedStyle.backgroundSize = "cover"; wrappedStyle.backgroundSize = "cover";
} }
@ -345,7 +356,15 @@ export default function Wrapper({ initialSettings, fallback }) {
className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all" className="fixed overflow-auto w-full h-full bg-theme-50 dark:bg-theme-800 transition-all"
style={wrappedStyle} style={wrappedStyle}
> >
<Index initialSettings={initialSettings} fallback={fallback} /> <div
id="inner_wrapper"
className={classNames(
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> </div>
); );