| Pginer-WMF | |
| Feb 5 2016, 11:16 AM |
| F3364914: Screen Shot 2016-02-16 at 2.13.49 PM.png | |
| Feb 16 2016, 10:18 PM |
| F3312747: notif-contrast-current.png | |
| Feb 5 2016, 11:16 AM |
| F3312756: notif-contrast-proposed.png | |
| Feb 5 2016, 11:16 AM |
Currently, the notification text and content excerpts use a grey level for text which does not provide enough contrast. That makes it hard to identifying the main text as a much more prominent piece of information compared to other elements such as secondary actions.
I propose to increase the contrast to make items easier to scan in a list.
Current status:
Proposed:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Increase contrast between header and body text in notifications | mediawiki/extensions/Echo | master | +2 -2 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | None | T119713 Update Help:Notifications | |||
| Resolved | None | T114351 Better organisation for the Notification System | |||
| Open | None | T100528 Improve organization and control for Flow notifications (tracking + ideas) | |||
| Resolved | None | T113228 Better organization for the Notification panel | |||
| Resolved | Esanders | T119374 Styling adjustments for the Notification Panel | |||
| Resolved | SBisson | T125964 Adjust contrast for notification text and content excerpts |
Change 270850 had a related patch set uploaded (by Sbisson):
Increase contrast between header and body text in notifications
Change 270850 merged by jenkins-bot:
Increase contrast between header and body text in notifications
Checked in betalabs - much better contrast, especially for seen notifications (with grey background).
.mw-echo-ui-notificationItemWidget-content-message-header
color: #111;
.mw-echo-ui-notificationItemWidget-content-message-body
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #777;
And for secondary links:
.mw-echo-ui-menuItemWidget-content
display: inline-block; margin-left: 2em; font-weight: normal !important; color: #000 !important;