Page MenuHomePhabricator

Shadow at the bottom of buttons, dropdown menus is intentionally vertically mis-aligned by a pixel or two in the MediaWiki theme
Closed, ResolvedPublic

Description

See screenshot (zoomed in for effect):

This looks like a rendering bug, but is actually intentional. Could we change the design to be less odd?

Event Timeline

Jdforrester-WMF raised the priority of this task from to High.
Jdforrester-WMF updated the task description. (Show Details)
Jdforrester-WMF changed Security from none to None.
matmarex claimed this task.Dec 11 2014, 7:17 PM
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.Dec 11 2014, 8:21 PM
matmarex removed matmarex as the assignee of this task.Dec 11 2014, 8:23 PM

So this is apparently by design. Someone else can figure out what to do here.

Jdforrester-WMF renamed this task from Shadow at the bottom of the dropdown menus is vertically mis-aligned by a pixel or two in the MediaWiki theme to Shadow at the bottom of buttons, dropdown menus is intentionally vertically mis-aligned by a pixel or two in the MediaWiki theme.Dec 11 2014, 8:25 PM
Jdforrester-WMF assigned this task to violetto.
Jdforrester-WMF updated the task description. (Show Details)
Krinkle removed a subscriber: Krinkle.Dec 20 2014, 11:43 PM

Hey May, I don't think the overlap of the shadow and the border is intended, can you confirm?

Shadow and border of?

Catrope added a subscriber: Catrope.Jan 5 2015, 7:19 PM

The grey (thick) shadow at the bottom of the dropdown (see screenshot in first post) overlaps with the (thin) border that goes around the dropdown on all 4 sides. To me it looks like the shadow should be moved down or up to avoid overlapping with the border (or the bottom border removed).

Gotcha. The shadow of the box should be #000 at 10% opacity. Inner shadow #DDD.

Color swatches

This question isn't about colors, though, but about the alignment/positioning of the shadow relative to the border. Right now the "inner shadow" is neither "inner" nor "outer" because it extends across the thin line around the box, so it's both inside and outside the box. From the image you posted (and your use of the word "inner") it seems like you want it to be on the inside, but in that picture the shadow also overlaps with the line and goes beyond it a little bit.

violetto added a comment.EditedJan 5 2015, 8:31 PM

This is what we intended to have:

Inner shadow should be 3px
Box outline 1px
(Bottom) Outer shadow 1px

Change 184194 had a related patch set uploaded (by Bartosz Dziewoński):
MediaWiki Theme: Adjust toolbar popups' border and shadows

https://gerrit.wikimedia.org/r/184194

Patch-For-Review

matmarex claimed this task.Jan 10 2015, 9:53 PM

I don't like this very much, to be honest, but it's better than the current one. Screenshot below also includes rounded corners, which the patch above also adds, to match everything else and the mockup above.

matmarex lowered the priority of this task from High to Medium.Jan 15 2015, 1:31 AM

Change 184194 merged by jenkins-bot:
MediaWiki Theme: Adjust toolbar popups' border and shadows

https://gerrit.wikimedia.org/r/184194

Etonkovidova added a subscriber: Etonkovidova.EditedJan 20 2015, 7:38 PM

Verified in betalabs on Chrome, Safari - shadow does not overlap the border; the corners are rounded.

Jdforrester-WMF moved this task from Doing to Reviewing on the OOUI board.Mar 26 2015, 8:59 PM
Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 20 2016, 8:54 PM