Page MenuHomePhabricator

notifications-alert differs from the other navigation icons
Closed, DuplicatePublic

Description

Premise: I am not going to look into the skin's source code, but I'm going to focus on the final static user-end HTML-CSS. Also, this is not a bug report.

What is happening
Using the skin MinervaNeue, in the upper navigation bar, the notifications-alert icon is being generated in a different way from the other icons (sidebar menu icon and search icon).

The other ones are being rendered trough the class minerva-icon minerva-icon--[name] , that loads as background image an SVG with fill="#54595d" (example).

The notifications icon, instead, is still rendered trough minerva-icon minerva-icon--[name], but this time, this class is styled as follows

@supports (-webkit-mask-image:none) or (mask-image:none) {
    .minerva-icon--bellOutline-base20 {
        -webkit-mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
        mask-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="20"height="20"viewBox="0 0 20 20"fill="%23000000"><path d="M11.5 2.19C14.09 2.86 16 5.2 16 8v6l2 2v1H2v-1l2-2V8c0-2.8 1.91-5.14 4.5-5.81V1.5C8.5.67 9.17 0 10 0s1.5.67 1.5 1.5zM10 4C7.79 4 6 5.79 6 8v7h8V8c0-2.21-1.79-4-4-4M8 18h4c0 1.1-.9 2-2 2s-2-.9-2-2"/></svg>);
        background-color: var(--color-subtle);
    }
}

Not only it is using a mask instead of a background image, but the color is gained trough the variable --color-subtle (which is still #54595d).

What is this causing
As a principle, uniform styles should be preferred. Any change to the --color-subtle variable would not include the other icons.

Moreover, this is causing the bell icon to be displayed un-uniformely with the other icons when users use tools or extensions to force the dark mode on MediaWiki installations.

notifications-alert scura (228×1 px, 17 KB)

This is not an issue on the skin as-it-is, but could reflect in an unpleasing experience for many readers and users.

Possible solutions and approaches
Choosing an uniform approach would not only solve these issue, but also improve the code's quality.

Event Timeline

Jdlrobson subscribed.

We agree. This is longstanding technical debt in the Echo extension that unfortunately is non trivial to handle.