MediaWiki talk:Common.css
This page is the common CSS for all the skins. This interface message or skin may also be documented on MediaWiki.org or translatewiki.net. The page forms part of the MediaWiki interface, and can only be edited by interface editors. To request a change to the page, add {{edit fully-protected}} to this page, followed by a description of your request. Consider announcing discussions you add here at Wikipedia:Village pump (technical) to bring more people to the discussion. |
This is the talk page for discussing improvements to the Common.css page. |
|
Archives: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19Auto-archiving period: 90 days |
Applying a style for the Vector 2022
Hi, in Vector 2022, if we want to select title of an article and we accidentally extend the selected area to select Table of Content button with the icon , then the text copied in clipboard would wrongly be (for example for the article "Wikipedia"):
Toggle the table of contents
Wikipedia
This is not the intended clipboard and the first line is not required, i.e., only "Wikipedia" as the title of the article is enough and the text "Toggle the table of contents" makes the clipboard data wrong.
The solution to this problem could be applying this style:
.vector-page-titlebar-toc {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
I have tested that code in my css page at User:Hooman Mallahzadeh/common.css and it prevents this behavior very well.
Finally, I should note that this unexpected behavior in clipboard functionality is frequently occurred for me both in English Wikipedia and in Persian Wikipedia. Thanks, Hooman Mallahzadeh (talk) 04:30, 2 January 2024 (UTC)
- Please file a task upstream. You do not need to support IE. You will also want to test with an accessibility agent or two. Izno (talk) 21:31, 2 January 2024 (UTC)
- How to file a task upstream in case you don't know how to do it: Click here, fill it out, and tag it Desktop Improvements (Vector 2022). –Novem Linguae (talk) 23:59, 2 January 2024 (UTC)
- I made a task for it at T354235. Thanks, Hooman Mallahzadeh (talk) 05:27, 3 January 2024 (UTC)
- @Izno@Novem Linguae The task is not resovled yet and may be not resolved in near future. But we can apply that style here. Would you please apply this styles here? Thanks, Hooman Mallahzadeh (talk) 06:19, 6 May 2024 (UTC)
- I made a task for it at T354235. Thanks, Hooman Mallahzadeh (talk) 05:27, 3 January 2024 (UTC)
- How to file a task upstream in case you don't know how to do it: Click here, fill it out, and tag it Desktop Improvements (Vector 2022). –Novem Linguae (talk) 23:59, 2 January 2024 (UTC)
Interface-protected edit request on 30 May 2024
This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
Please remove the background on `mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {` or replace it with a CSS variable that can adapt to dark mode. I am not sure why this is styled as an error, when the message itself is a warning and has a triangle - so the color is confusing so I personally would vote for removing it or moving it to MediaWiki:Timeless.css etc..
I have a global script for forcing dark mode on all pages, and when dark mode gets enabled on the editor, this will break. It would be good to fix this before that happens! Thanks in advance!
Example: https://en.wikipedia.org/w/index.php?title=Template:Sidebar_with_collapsible_lists&action=edit (with dark mode global script). 🐸 Jdlrobson (talk) 04:46, 31 May 2024 (UTC)
- This is styled as an error because that's the importance we assign it, not the arbitrary importance assigned to it by the WMF at a date long after our modification was added. Stjn had a similar block in the ru.wp CSS which he modified to the CSS at ru:MediaWiki:Common.css#L-111, which I just haven't had a chance to test. Izno (talk) 18:52, 31 May 2024 (UTC)
- @Izno If the goal is to style this as an error, it would be better to use the Codex design token to ensure accessibility with links etc and get the night mode equivalent for consistency:
background-color: var(--background-color-error-subtle);
- While I don't think it looks great, having a warning icon with a red color, if this style needs to be retained as is, without the CSS variable, you need to also add a rule for text color - like what I'm doing in User:Jdlrobson/common.css. Without that, the interface will become unusable in dark mode.
- 🐸 Jdlrobson (talk) 15:54, 8 June 2024 (UTC)
/* https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css#Applying_a_style_for_the_Vector_2022 */ .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon { color: black; }
Done using the error-subtle design token, and keeping the existing color as fallback since the variable doesn't seem to be defined at all on Vector legacy which I use. * Pppery * it has begun... 01:35, 18 June 2024 (UTC)
- @Pppery just following up here after feedback on https://www.mediawiki.org/w/index.php?title=Reading/Web/Accessibility_for_reading/Reporting/en.wikipedia.org#Special:Contributions_dark_mode_error . Looks like this wasn't done for warnings. That should be using --background-color-warning-subtle. Should I create a new edit request or can we do it as part of this one? Jon (WMF) (talk) 16:53, 15 July 2024 (UTC)
- That's due to a different block of CSS than the one referred to in the initial comment here, so I likely never noticed it. Now fixed. * Pppery * it has begun... 23:15, 15 July 2024 (UTC)
- @Pppery just following up here after feedback on https://www.mediawiki.org/w/index.php?title=Reading/Web/Accessibility_for_reading/Reporting/en.wikipedia.org#Special:Contributions_dark_mode_error . Looks like this wasn't done for warnings. That should be using --background-color-warning-subtle. Should I create a new edit request or can we do it as part of this one? Jon (WMF) (talk) 16:53, 15 July 2024 (UTC)
Edit request 18 June 2024
This edit request to MediaWiki:Minerva.css has been answered. Set the |answered= or |ans= parameter to no to reactivate your request. |
Change --color-link
to --color-progressive
at lines 144 and 132, as the CSS variable --color-link
does not exist.
html.skin-theme-clientpref-night .infobox a { color: var( --color-link ) !important; } @media (prefers-color-scheme: dark) { ... html.skin-theme-clientpref-os .infobox a { color: var( --color-link ) !important; } }
->
html.skin-theme-clientpref-night .infobox a { color: var( --color-progressive ) !important; } @media (prefers-color-scheme: dark) { ... html.skin-theme-clientpref-os .infobox a { color: var( --color-progressive ) !important; } }
Andumé (talk) 01:22, 18 June 2024 (UTC)
- @Jon (WMF): since you put it there I believe. Izno (talk) 01:26, 18 June 2024 (UTC)
- I suspect what was meant was "color:LinkText", but I'll let Jon comment. * Pppery * it has begun... 01:42, 18 June 2024 (UTC)
- Switching --color-link to --color-progressive makes sense - we've been moving away from color-link to color-progressive. Thanks for flagging this! Jon (WMF) (talk) 16:39, 18 June 2024 (UTC)
- I suspect what was meant was "color:LinkText", but I'll let Jon comment. * Pppery * it has begun... 01:42, 18 June 2024 (UTC)
Pink background-color for protected pages doesn't work without CodeMirror
I am using Vector 2022, light color mode. On page MediaWiki:Group-templateeditor.css, the following CSS rule is defined to make the background of wikitext editor light pink , when the page is protected:
.mw-textarea-protected,
.mw-textarea-protected + .ui-resizable .ace_content,
.mw-textarea-protected + .CodeMirror {
background-color: hsl(0, 100%, 94%);
}
It works for CodeMirror (selector .mw-textarea-protected + .CodeMirror
), i.e. with syntax highlighting enabled, but doesn't work when it is disabled
(selector
.mw-textarea-protected
). Instead, the background color is white. For example, I as a template editor see it when .
This is caused by <textarea id="wpTextbox1">
having background-color: transparent;
in its inline style attribute in combination with <div id="wpTextbox0" ... style="... background-color: rgb(255, 255, 255); ...">
.
Tag <textarea id="wpTextbox1">
in this case also has CSS class ext-WikiEditor-realtimepreview-textbox
which comes from mw:Extension:WikiEditor (found via GitHub search). Unfortunately, I wasn't able to figure out where inline styles of wpTextbox0
and wpTextbox1
come from.
Workaround is to add a similar rule to your common.css, but with !important
:
.mw-textarea-protected, .mw-textarea-protected + .ui-resizable .ace_content, .mw-textarea-protected + .CodeMirror {
background-color: hsl(0, 100%, 94%) !important;
}
example of using this workaround. —andrybak (talk) 11:33, 20 July 2024 (UTC)
- I don't have the same issue when editing the example template: both with and without syntaxhighlighting I have a pink background. Izno (talk) 16:24, 20 July 2024 (UTC)
- I think I figured out where
background-color: transparent;
is coming from. It is from gadget MediaWiki:Gadget-DotsSyntaxHighlighter.js. To enable the gadget:- Preferences → Gadgets → Editing →
(S) Syntax highlighter: Alternative to the default coloring of wiki syntax in the edit box (works best in Firefox and works almost all of the time in Chrome and Opera)
- Preferences → Gadgets → Editing →
- Without the gadget, the issue goes away. The style is set at line 640 of non-minified code.
- I guess I'll try reporting the issue to mw:User talk:Remember the dot/Syntax highlighter.js. —andrybak (talk) 16:54, 20 July 2024 (UTC)
- Please see mw:User talk:Remember the dot/Syntax highlighter.js#Inline styles interfere with enwiki's CSS. —andrybak (talk) 17:23, 20 July 2024 (UTC)
- Hey @Iznothe latest changes do not seem to be compatible with the VisualEditor wikitext editor unfortunately.
- https://phabricator.wikimedia.org/F56601761 🐸 Jdlrobson (talk) 18:35, 22 July 2024 (UTC)
- I think this was an issue my side that I've now resolved. I had a color black that was applying there for a related rule.
- Possibly color: white should be added as well to avoid conflicts with other scripts/gadgets? 🐸 Jdlrobson (talk) 18:41, 22 July 2024 (UTC)
- I'm happy to take someone getting it further, but as I said at VPT that inspired the adjustment, it will probably take some elaboration. There is at least one outstanding incompatibility with the change, that being syntax highlighting on normal wikitext pages, but there's still a bug for that in Phab that needs resolution. Izno (talk) 19:05, 22 July 2024 (UTC)
- Please see mw:User talk:Remember the dot/Syntax highlighter.js#Inline styles interfere with enwiki's CSS. —andrybak (talk) 17:23, 20 July 2024 (UTC)
- I think I figured out where
Edit request 16 August 2024
I would appreciate the ability to use the .texhtml
class with the semantic <var>
tag. Either of the following two changes would do the trick:
− | + | .texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
.texhtml .texhtml {
font-size: 100%;
}
|
− | span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
} | + | span.texhtml, var.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
white-space: nowrap;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml, var.texhtml var.texhtml {
font-size: 100%;
}
|
Remsense ‥ 诉 11:01, 16 August 2024 (UTC)
- texhtml will at some point be TemplateStyled, so I'd honestly appreciate not spreading it around to arbitrary elements. :) Izno (talk) 14:18, 16 August 2024 (UTC)
- Good to know! I would like that too, so I'm happy to be patient. Remsense ‥ 诉 14:19, 16 August 2024 (UTC)
- It would already be so if not for phab:T200704. I made a really sad workaround at Template:Math-link but haven't spent the time rolling it out because of just how hackish it needs to be. Izno (talk) 19:20, 16 August 2024 (UTC)
- Good to know! I would like that too, so I'm happy to be patient. Remsense ‥ 诉 14:19, 16 August 2024 (UTC)
jbhbhjgfhjjjh bnnhbnbhbbygljhtbbbubj 72.89.55.37 (talk) 22:07, 18 August 2024 (UTC)