Module talk:Sidebar/Archive 6: Difference between revisions

Revision as of 14:55, 5 January 2025

Revision as of 14:54, 28 January 2025

Line 158:

</div>

== Missing CSS variable? ==

On row 385 there is the line <code>:cssText('color: var(--color-base)')</code>, but the --color-base CSS variable doesn't seem to be defined anywhere? [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 13:18, 15 October 2024 (UTC)

:{{ping|Jdlrobson}} I see that you {{diff|Module:Sidebar|diff=1226521837|label=added}} this. Where is the CSS variable defined? And why is this an inline style declaration instead of a class? Now dependent templates have problems changing text colors without using !important CSS declarations. [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 11:20, 17 October 2024 (UTC)

::The variable is defined in [https://doc.wikimedia.org/codex/latest/design-tokens/color.html the mediawiki design system]. It is active on the default skins of Vector 2022 and Minerva and is essential to make this template work in dark mode. It is not defined on opt in skins such as Monobook and Vector and there it will be ignored (we can add a fallback if that is useful and less confusing).

::[https://m.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis this link] should have lots of helpful context. Let me know if you have any follow up questions. <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 18:00, 18 October 2024 (UTC)

:::{{ping|Jdlrobson}} this module is used a base for multiple other templates. Your change overrides derived template style declarations and caused for example [[Template:Zoroastrianism sidebar]] to display black-on-red text which made it difficult to read instead of white-on-red as it should. This module has a [[Module:Sidebar/styles.css|stylesheet]]. Does the color variable really need to be an inline style declaration instead of a line in .sidebar-list-title class? [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 08:10, 19 October 2024 (UTC)

::::Presumably it could be added via a class. When dark mode was rolled out, for templates I was less familiar with I usually went with the most straightforward solution. I see this one uses [[Module:Sidebar/styles.css]] ?

::::You should be able to see the exact issue it fixes (unreadable black text on a black background) by visiting https://en.wikipedia.org/wiki/Template:Sidebar/testcases?useskin=vector-2022&vectornightmode=1

::::and undoing that inline style using this code: <syntaxhighlight lang=javascript>

$('.sidebar-list-title[style]').each((a,i)=>i.setAttribute('style',i.getAttribute('style').replace('color: var(--color-base)', '')))

</syntaxhighlight>

::::So you could likely move it to CSS, test if the issue is resolved and then undo my change. <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 16:21, 19 October 2024 (UTC)

:::::{{ping|Jdlrobson}} I can't do the change myself - the module and stylesheet are both template-protected. [[User:MKFI|MKFI]] ([[User talk:MKFI|talk]]) 08:33, 20 October 2024 (UTC)