Page MenuHomePhabricator

Adjust contrast and hover behaviour for the secondary actions displayed directly on notifications
Closed, ResolvedPublic

Description

Currently the secondary actions that are displayed in notifications ("Ludmilla", "Flow", and "...") are shown in pure black and they don't change when the user hovers over them:

These actions should be less prominent initially (they are secondary actions) and become a bit more prominent only when hovering:

  • Color for normal status: #777
  • Color used on hover: #333

For text it may be better to directly adjust the color, but in case we want to use opacity the equivalent values can be used for normal (0.81) and highlighted (0.56) states.

Details

Related Gerrit Patches:
mediawiki/extensions/Echo : masterStyling adjustments for notifications

Event Timeline

Should be fixed with https://gerrit.wikimedia.org/r/#/c/274804/

Note that we're using a LESS mixin for the hover actions (so they are consistent) - and it uses opacity: 0.8 rather than actual color numbers. We can either tweak the opacity if the contrast is not right, or give actual font colors if needed.

Change 274804 had a related patch set uploaded (by Mooeypoo):
Styling adjustments for notifications

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

Change 274804 merged by jenkins-bot:
Styling adjustments for notifications

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

For Pginer-WMF to take a look:
In betalabs, there is now:
.mw-echo-ui-menuItemWidget-content-description {

color: #777 !important;

}
.mw-echo-ui-menuItemWidget-content {

font-weight: normal !important;
color: #333 !important;

}

With hover over a username secondary link:

For Pginer-WMF to take a look:

The color adjustments look good.
Thanks!

jmatazzoni closed this task as Resolved.Mar 14 2016, 7:52 PM