Page MenuHomePhabricator

MediaWiki drop shadows are all over the place
Closed, ResolvedPublic


We have 2px under shadow on DropdownWidget and PopupElement:

We have a blurred shadow in toolbars

And 2px above shadow (!?) on dialogs:

The last one is particularly bizarre looking and causes overlap issues with content (especially system content like scrollbars)

Event Timeline

Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added projects: OOUI, UI-Standardization.
Esanders added a subscriber: Esanders.

Personally I think shadows should effectively show 'depth' and therefore the 2nd type which is visible on all sides is the best option. I have never found the "this theme is flat, so everything must be flat" argument convincing (cf OSX Yosemite).

@Esanders thanks for bringing this up and flavouring it with screenshots. :)
The last one is, when I remember correctly a left-over from MediaWiki UI and is obsolete (means should be removed). Then there was T111889: OOUI PopupWidgets don't have drop shadows in the MediaWiki theme where @violetto and myself were starting the discussion about showing depth in relation to contrast and clarity.

Thanks Volker, I'll fix up the dialog one (to use 2) and make sure there are no hacks left in VE dealing with it. We should also have a discussion about 1 vs 2.

Change 255151 had a related patch set uploaded (by Esanders):
Make dialog shadows outset rather than inset

Jdforrester-WMF assigned this task to Esanders.
Jdforrester-WMF triaged this task as High priority.
Jdforrester-WMF edited projects, added OOjs-UI-next-release; removed Patch-For-Review.

Change 255151 merged by jenkins-bot:
MediaWiki theme: Make dialog and panel box-shadows outset rather than inset

matmarex added a subscriber: matmarex.

The patch removes inset shadows (fixing T119017 in the process), but we still have two distinct styles.

(Or is that intentional? Or are we planning to discuss that elsewhere?)

(Or is that intentional? Or are we planning to discuss that elsewhere?)

I was leaving it for another task.