Cms: UI: Blurred background when modals open obscures content

[mlathrom]

Description

The background blurring when a modal is open makes it impossible to reference things on the page.

I often need to reference things I've already entered on an entry page while working with the content of a modal. Since the blur only really serves to highlight the modal, then perhaps a simple white overlay would suffice.

Vs

Additional info

• Craft version: 3.4
• PHP version: 7.3
• Database driver & version: MySQL 5.7

[dennisfrank]

I also find the effect a little over-the-top. I use some custom CSS, which reduces the effect and removes it completely on hover:

SCSS

.modal-shade {
  backdrop-filter: blur(3px) contrast(0.9) brightness(.9);
  transition: backdrop-filter .2s ease-out;

  &:hover {
    backdrop-filter: blur(0) contrast(1) brightness(1);
    transition-delay: .5s;
  }
}

CSS

.modal-shade {
  -webkit-backdrop-filter: blur(3px) contrast(0.9) brightness(0.9);
  backdrop-filter: blur(3px) contrast(0.9) brightness(0.9);
  transition: -webkit-backdrop-filter 0.2s ease-out;
  transition: backdrop-filter 0.2s ease-out;
  transition: backdrop-filter 0.2s ease-out, -webkit-backdrop-filter 0.2s ease-out;
}

.modal-shade:hover {
  -webkit-backdrop-filter: blur(0) contrast(1) brightness(1);
  backdrop-filter: blur(0) contrast(1) brightness(1);
  transition-delay: 0.5s;
}

[matthillco]

I've also toned this down in my own installs using some custom CSS. The change between blurred and not blurred in the background is jarring, and not kind on the eyes.

Out of interest, how much qualitative and quantitative user testing has been done with the 3.4 UI updates and real users? What sort of data was obtained that informed the big UI changes to the Craft dashboard?

[brandonkelly]

Just de-blurred the modal backdrops for Craft 3.5.

[brandonkelly]

Just applied the same change for the next Craft 3.4 release. No sense in holding off until 3.5.

[brandonkelly]

Craft 3.4.21 is out now with this change.