Page MenuHomePhabricator

Color of hatnotes blockquote style overwritten by MinervaNeue CSS
Closed, DuplicatePublic

Description

Actions:

  • Create a hatnote in a blockquote that has "style=" including "color: red"
  • View page

Expected result: Text is red.

Actual result: Text is red on a desktop computer (checked Windows, ChromeOS) but black on mobile (Android, iPhone). This is visible, and confusing, on [[WP:Hatnote#Examples of improper use]].

A more minimal example, without using {{hatnote}} directly, is:

<blockquote style="background-color: white; color: red; border:1px solid black; padding: 1em;">
<div role="note" class="hatnote">hatnote text</div>
</blockquote>

This may be related to T216766

Event Timeline

Aklapper renamed this task from hatnotes ignore blockquote style on mobile to hatnotes blockquote style ignored by some mobile browsers.Jan 14 2021, 8:20 AM
Aklapper closed this task as Invalid.

Hi and thanks for taking the time to report this.

Actual result: Text is red on a desktop computer (checked Windows, ChromeOS) but black on mobile (Android, iPhone). This is visible, and confusing, on [[WP:Hatnote#Examples of improper use]].

I can neither reproduce on https://en.m.wikipedia.org/wiki/Wikipedia:Hatnote#Examples_of_improper_use nor https://en.wikipedia.org/wiki/Wikipedia:Hatnote?useskin=minerva#Examples_of_improper_use (please always include full links!) on desktop, nor on a mobile phone:

This currently sounds like a problem which cannot be fixed in Wikimedia code itself (as it works in some mobile browsers). Closing this task as invalid.

You did reproduce it. It the .png file you attach, the text "During a siege to invest a town or fortress means to surround it with a contravallation and a circumvallation" should be red, but it isn't. If you go back to the URL you give, https://en.wikipedia.org/wiki/Wikipedia:Hatnote?useskin=minerva#Examples_of_improper_use, you can see that it changes from black to red when you remove and "?useskin=minerva", and similarly if you remove ".m" from https://en.m.wikipedia.org/wiki/Wikipedia:Hatnote#Examples_of_improper_use

Aklapper renamed this task from hatnotes blockquote style ignored by some mobile browsers to Color of hatnotes blockquote style overwritten by MinervaNeue CSS.Jan 14 2021, 9:16 AM
Aklapper edited projects, added MinervaNeue, CSS; removed Mobile.

Argh, you did mention blockquote, right. Sorry! I should have had a coffee first, sigh... :-/

Going to https://en.m.wikipedia.org/wiki/Wikipedia:Hatnote?debug=true#Examples_of_improper_use and looking at the browser's developer tools, the red color is overwritten by the CSS lines .hatnote, .dablink, .rellink { color: #54595d; } defined in MinervaNeue, indeed.

Ammarpad added a subscriber: Ammarpad.

This is duplicate of T216766. Whether you use {{hatnote}} template or provide the styles inline, it's the same thing