Flatten modals

[tillkruess]

The ThickBox and Media Modal can lose their shadows to match the 3.8 admin style.

[tillkruess]

That attached patch removes the shadows from the media-modal and the thickbox-modals.

It additionally removes the 1px border from the thickbox-modals and sets it's background color to transparent to prevent the 3px overlay at the bottom.

[tillkruess]

26672.patch removes the TinyMCE modal window shadow as well

[melchoyce]

Related: #26952

[tillkruess]

Ticket can be closed. I just checked, all CSS properties have already been removed in core.

[nacin]

I see the thickbox.css rules still there. Unsure about the others.

[iseulde]

Have they? I can still see a shadow around the media modal and TinyMCE modals (and ThickBox modals). Patch above.

[tillkruess]

26672.3.patch​ additionally overrides -moz-box-shadow (where needed) and removes the Thickbox shadow.

[nacin]

I'm not convinced this is something we should do. While 3.8 flatted much of the visual elements in the admin, should that also apply to dialogs/modals? I'm not convinced that's the intent. I've asked iammattthomas to also weigh in here.

If we're not going to remove them, I think it'd be nice if they all used the same background overlay and shadow. The theme overlay (not covered here) uses a much lighter appearance, while Thickbox and TinyMCE uses much darker one. The media modal's style is really great — a good balance of being a visual cue and yet also being subtle.

[tillkruess]

Media Library with light overlay

[tillkruess]

Thickbox modal with light overlay

[tillkruess]

Media Library with light overlay

[tillkruess]

We talked about removing the modal shadows in the MP6 Skype group a while ago, that's why I created the ticket.

I've attached 3 (rough) screenshots of how the modals with the shadow and overlay styles of the theme modal.

[nacin]

I have a feeling the dark media modal overlay might look a bit better, but maybe I'm just jarred by the change. Waiting for MT to weigh in.

[iseulde]

I also think the dark overlays are better. In the case of the theme modals, a light overlay fits better because you still want access to the adminbar and menu, and it 'blurs' the content immediately around it. It's okay that it feels like it's part of the page. But for any of the other modals you put an overlay over the entire page. The light colours of the modal and the light overlay make it feel like it's one huge block.

[iammattthomas]

Replying to nacin:

I have a feeling the dark media modal overlay might look a bit better, but maybe I'm just jarred by the change. Waiting for MT to weigh in.

Agreed. The light background doesn't provide the contrast against the interior of the lightbox the way the dark one does, which more easily focuses the eye on the important bits.

Not that important, but it could be worth making the lightbox header use a light background instead of a dark gray, which kind of blends into the background.

[iseulde]

Patch above gives all overlays an opacity of 0.7 (also added the filter property for all of them for IE) and sets all shadows to 0 3px 6px rgba( 0, 0, 0, 0.3 ).

[iseulde]

Updated patch in #26952: 26952.11.patch​.

[iseulde]

All the overlays and shadows have been updated in [27532]. We decided to keep the shadow and dark backdrop, but to tone the shadow down a bit for smaller modals.