Page MenuHomePhabricator

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


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:

dark-actions.png (188×513 px, 27 KB)

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

notif-hover.png (450×526 px, 43 KB)

  • 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.

Event Timeline

Should be fixed with

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

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

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;


Screen Shot 2016-03-07 at 3.00.03 PM.png (255×535 px, 36 KB)

With hover over a username secondary link:

Screen Shot 2016-03-07 at 3.00.13 PM.png (273×561 px, 44 KB)

For Pginer-WMF to take a look:

The color adjustments look good.