How do I make this blur?

esen

clarkwinkelmann

Something like this will work:

body.modal-open .App,
.App.drawerOpen .App-navigation,
.App.drawerOpen .App-content {
  filter: blur(2px);
  transition: filter .15s;
}

The transition .15s is the same duration as the modal backdrop fade-in transition. Without this transition the page content becomes blurred before the modal has fully opened which isn't very nice looking.

On Firefox I see some artifacts when the app jumps from no blur to blur, the content shifts slightly to apply the Gaussian blur.

Another option to simulate blur without using actual blur could be to apply an image background to .modal-backdrop and/or .drawer-backdrop.

EDIT: updated to apply to both modals and drawer.

esen

clarkwinkelmann Thank you so much. İt is working.

How can I make the background blur?

clarkwinkelmann

esen is there a backdrop natively there?

I feel like I remember dropdowns having a backdrop, but when I try locally, here on Discuss or even on older Flarum versions locally I don't see a backdrop.

Or is this a trick where you still see the side menu backdrop after opening the profile dropdown, and then closed the side menu using touch gestures? On desktop I can't get the profile dropdown to stay open while closing the side menu and its backdrop.

If there's no native backdrop, there's unfortunately no way to add one just with CSS. This would require a bit of additional javascript to be written.

esen

clarkwinkelmann
Can't it be done in the same way? This is like above.

SychO

clarkwinkelmann there's a backdrop, but no way to target the .App with that I believe. Though with modern CSS, something like this should do the trick:

.dropdown-backdrop {
  backdrop-filter: blur(2px);
}

esen

SychO Working but not fully working

clarkwinkelmann

SychO oh nice I wasn't aware of backdrop-filter. It's definitely the ideal solution for this. It unfortunately doesn't have a coverage as good as filter, though it's not too bad since it gracefully falls back to just the normal backdrop.

That last issue with the title and reply button must be because those buttons use absolute positioning and end up above the backdrop. Those will likely need a specific rule with filter instead of backdrop-filter. I'm not sure if the title can be blurred easily since it's part of the same component that makes the dropdown. Maybe just focusing the dropdown label based on the dropdown state could do it. But it'll likely need some media queries as well to prevent it from happening on desktop during normal dropdown behavior.

esen

I did, but there is a little problem.

`.modal-open .App,
.App.drawerOpen .App-navigation,
.App.drawerOpen .App-content {
filter: blur(2px);
transition: filter .15s;
}

.dropdown-backdrop {
backdrop-filter: blur(2px);
transition: filter: .2s !important;
}
.composer-backdrop{
backdrop-filter: blur(2px);
transition: filter: .2s;
}
.dropdown-backdrop,.modal-backdrop,.composer-backdrop{
background:none !important;
}
.drawer-backdrop.in {
opacity: 0;
}
`

esen

clarkwinkelmann Thank you so much for your help.