Page MenuHomePhabricator

plainlinks class needs friendlier styles for dark mode
Closed, InvalidPublic

Description

As seen on https://en.wikipedia.org/wiki/G%C3%B6lba%C5%9F%C4%B1,_Ad%C4%B1yaman?useskin=minerva&minervanightmode=1 , .plainlinks a.external needs a style friendlier for dark theme.

image.png (461×971 px, 43 KB)

According to console, the current rule is

@media screen {
  .plainlinks a.external {
    background: none !important;
    padding: 0 !important;
  }
}

where the intent of the class is to override the image that you would normally find on a.external links. Minerva applies it as:

a.external,
.mw-parser-output a.external--reference {
  background-image: url(/w/load.php?modules=skins.minerva.content.styles.images&image=a.external%2C+.mw-parser-output+a.external&variant=reference&format=original&lang=en&skin=minerva&version=1g49l);
}

a.external, .mw-parser-output a.external {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 10px;
  padding-right: 13px;
}

whereas Vector 2022 applies it as:

@media screen {
  .mw-parser-output a.external {
    background-image: url(/w/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
  }
}`

For some reason Minerva's

html.skin-theme-clientpref-night .mw-parser-output [style*="background"] {
  color: #333;
}

is triggering here??? The link somehow has hard colors set? <a style="background: rgb(255, 221, 221)>... shows up in the HTML?

Event Timeline

Izno updated the task description. (Show Details)
Izno updated the task description. (Show Details)

I think this is caused by https://en.wikipedia.org/wiki/User:Headbomb/unreliable.js which applies #ffdddd background color as inline style to a.external when a link to wikipedia gets matched. plainlinks overrides the background color, but the inline style persists and gets chatched by the night mode rule.

Jdlrobson changed the task status from Open to Stalled.Apr 5 2024, 2:56 AM
Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson subscribed.

This rule exists because of https://en.m.wikipedia.org/wiki/Special:LintErrors/night-mode-unaware-background-color - for most elements this fixes the item in night mode but there are cases like this one where it doesn't work as expected.

Most time background color is set it assumes the color of text is black. It looks like somebody since removed the style attribute from the link which looks like the correct fix to me. Can somebody confirm?

I think this is caused by https://en.wikipedia.org/wiki/User:Headbomb/unreliable.js which applies #ffdddd background color as inline style to a.external when a link to wikipedia gets matched. plainlinks overrides the background color, but the inline style persists and gets chatched by the night mode rule.

I think you're right, I think it's unreliable.js. I am surprised Firefox normalizes it to the rgb code in the console?

I'm not really sure how to best deal with this one, but I think that's something I can munge onwiki somehow.