143.44.165.227 (talk) →Interface-protected edit request on 5 May 2024: new section |
Writ Keeper (talk | contribs) |
||
(15 intermediate revisions by 10 users not shown) | |||
Line 39: | Line 39: | ||
::How to file a task upstream in case you don't know how to do it: [https://phabricator.wikimedia.org/maniphest/task/edit/form/43/ Click here], fill it out, and tag it Desktop Improvements (Vector 2022). –[[User:Novem Linguae|<span style="color:blue">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 23:59, 2 January 2024 (UTC) |
::How to file a task upstream in case you don't know how to do it: [https://phabricator.wikimedia.org/maniphest/task/edit/form/43/ Click here], fill it out, and tag it Desktop Improvements (Vector 2022). –[[User:Novem Linguae|<span style="color:blue">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 23:59, 2 January 2024 (UTC) |
||
:::I made a task for it at T354235. Thanks, [[User:Hooman Mallahzadeh|Hooman Mallahzadeh]] ([[User talk:Hooman Mallahzadeh|talk]]) 05:27, 3 January 2024 (UTC) |
:::I made a task for it at T354235. Thanks, [[User:Hooman Mallahzadeh|Hooman Mallahzadeh]] ([[User talk:Hooman Mallahzadeh|talk]]) 05:27, 3 January 2024 (UTC) |
||
::::@[[User:Izno|Izno]]@[[User:Novem Linguae|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 [[MediaWiki:Common.css|here]]? Thanks, [[User:Hooman Mallahzadeh|Hooman Mallahzadeh]] ([[User talk:Hooman Mallahzadeh|talk]]) 06:19, 6 May 2024 (UTC) |
|||
⚫ | |||
⚫ | |||
Change "#0B0080" to "#795CB2"; the latter is the correct colour used on mobile Wikipedia (at least, as far as I can tell. This could be due to a specific preference on my account that I am simply not aware of) [[User:Loytra|Loytra]] ([[User talk:Loytra|talk]]) 10:58, 9 February 2024 (UTC) |
|||
:{{done}} OK, note this is a short-term fix so let's not stress if the color isn't exact while waiting for [[phab:T356928]] to be fixed. — [[User:Xaosflux|<span style="color:#FF9933; font-weight:bold; font-family:monotype;">xaosflux</span>]] <sup>[[User talk:Xaosflux|<span style="color:#009933;">Talk</span>]]</sup> 12:00, 9 February 2024 (UTC) |
|||
::Not sure why you're implying I'm stressing? This was very much just a quick suggestion I made lol [[User:Loytra|Loytra]] ([[User talk:Loytra|talk]]) 13:45, 9 February 2024 (UTC) |
|||
:::@[[User:Loytra|Loytra]] that was meant to be casual and general, not directly about you - in case anyone else wanted to debate the color shade further with the upstream fix appearing to be coming soon. Changes related to problems are welcome! — [[User:Xaosflux|<span style="color:#FF9933; font-weight:bold; font-family:monotype;">xaosflux</span>]] <sup>[[User talk:Xaosflux|<span style="color:#009933;">Talk</span>]]</sup> 14:34, 9 February 2024 (UTC) |
|||
::::I appreciate the clarification and apologise for making such a kneejerk assumption :) [[User:Loytra|Loytra]] ([[User talk:Loytra|talk]]) 16:03, 9 February 2024 (UTC) |
|||
==Discussion at [[:Wikipedia talk:TemplateStyles#RfC: converting sitewide CSS to TemplateStyles|Wikipedia talk:TemplateStyles § RfC: converting sitewide CSS to TemplateStyles]]== |
|||
[[File:Symbol watching blue lashes high contrast.svg|25px|link=|alt=]] You are invited to join the discussion at [[:Wikipedia talk:TemplateStyles#RfC: converting sitewide CSS to TemplateStyles|Wikipedia talk:TemplateStyles § RfC: converting sitewide CSS to TemplateStyles]]. <b style="font-family:Courier New;">[[User:HouseBlaster|House]][[Special:Contributions/HouseBlaster|<span style="color:#7D066B;">Blaster</span>]]</b> ([[User talk:HouseBlaster|talk]] · he/him) 15:30, 21 February 2024 (UTC)<!-- [[Template:Please see]] --> |
|||
== the checker background == |
== the checker background == |
||
Line 129: | Line 118: | ||
== Interface-protected edit request on 5 May 2024 == |
== Interface-protected edit request on 5 May 2024 == |
||
{{edit interface-protected|MediaWiki:Common.css|answered= |
{{edit interface-protected|MediaWiki:Common.css|answered=yes}} |
||
Can you please add this to the common.css? |
Can you please add this to the common.css? |
||
<syntaxhighlight lang="css">body { font-family: serif; }</syntaxhighlight> |
<syntaxhighlight lang="css">body { font-family: serif; }</syntaxhighlight> |
||
That is the [[serif]] font, and it is the font for nearly all the encyclopedias. Additionally, it constitutes the font of an actual encyclopedia. Thank you. [[Special:Contributions/143.44.165.227|143.44.165.227]] ([[User talk:143.44.165.227|talk]]) 02:17, 5 May 2024 (UTC) |
That is the [[serif]] font, and it is the font for nearly all the encyclopedias. Additionally, it constitutes the font of an actual encyclopedia. Thank you. [[Special:Contributions/143.44.165.227|143.44.165.227]] ([[User talk:143.44.165.227|talk]]) 02:17, 5 May 2024 (UTC) |
||
:[[File:Red information icon with gradient background.svg|20px|link=|alt=]] '''Not done for now:''' please establish a [[Wikipedia:Consensus|consensus]] for this alteration '''[[Wikipedia:Edit requests|before]]''' using the {{Tlx|Edit interface-protected}} template.<!-- Template:EIp --> – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 02:52, 5 May 2024 (UTC) |
|||
⚫ | |||
{{edit interface-protected|MediaWiki:Common.css|answered=yes}} |
|||
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 [https://meta.wikimedia.org/wiki/User:Jdlrobson/global.js 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). <span style="background:white; color: black;">🐸</span> [[User:Jdlrobson|Jdlrobson]] ([[User talk: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. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 18:52, 31 May 2024 (UTC) |
|||
::@[[User:Izno|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: |
|||
::<syntaxhighlight lang=css> |
|||
background-color: var(--background-color-error-subtle); |
|||
</syntaxhighlight> |
|||
::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. |
|||
::<syntaxhighlight lang=css> |
|||
/* 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; |
|||
} |
|||
</syntaxhighlight> <span style="background:white; color: black;">🐸</span> [[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 15:54, 8 June 2024 (UTC) |
|||
::: {{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. [[User:Pppery|* Pppery *]] [[User talk:Pppery|<sub style="color:#800000">it has begun...</sub>]] 01:35, 18 June 2024 (UTC) |
|||
== Edit request 18 June 2024 == |
|||
⚫ | |||
Change <code>--color-link</code> to <code>--color-progressive</code> at lines 144 and 132, as the CSS variable <code>--color-link</code> does not exist. |
|||
<pre>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; |
|||
} |
|||
}</pre> |
|||
-> |
|||
<pre>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; |
|||
} |
|||
}</pre> |
|||
[[User:I Am Andumé|Andumé ]] ([[User talk:I Am Andumé|talk]]) 01:22, 18 June 2024 (UTC) |
|||
:{{ping|Jon (WMF)}} since you put it there I believe. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 01:26, 18 June 2024 (UTC) |
|||
:: I suspect what was meant was "color:LinkText", but I'll let Jon comment. [[User:Pppery|* Pppery *]] [[User talk:Pppery|<sub style="color:#800000">it has begun...</sub>]] 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! [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 16:39, 18 June 2024 (UTC) |
|||
::::{{done}} [[User:Writ Keeper|Writ Keeper]] [[User Talk: Writ Keeper|⚇]][[Special:Contributions/Writ_Keeper|♔]] 16:50, 18 June 2024 (UTC) |
Revision as of 16:50, 18 June 2024
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)
the checker background
@media screen {
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
*/
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
This is, apparently, being loaded for all pages on the English Wikipedia. While the PNG is only 81 bytes, it does necessitate that the browser make a second request to load the resource. This is kind of inefficient, deshou?
Instead, we could do this:
@media screen {
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
*/
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC') repeat;
}
Now, //upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png
is 63 bytes, and data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC
is 130, so we are adding another 67 bytes to the stylesheet, but we're eliminating an 81-byte PNG file, so overall we save 14 bytes -- and we also save the necessity of a whole extra request to load the PNG.
Right? Or no? jp×g🗯️ 04:10, 22 February 2024 (UTC)
- Not 100% sure on upstream (including client-side) caching optimizations; suspect the PNG is more likely to stay cached there? — xaosflux Talk 10:18, 22 February 2024 (UTC)
- I don’t know if any of them is cached longer, but there are multiple groups of people, and not everyone would benefit from the inlining:
- People who regularly visit Wikipedia (many people). They have everything cached, inlining wouldn’t matter much for them.
- People who read Wikipedia articles every now and then (most people). They currently download Common.css when they visit Wikipedia, and then don’t download the image, as the rule never applies in article space (browsers won’t download images just because they see them in the stylesheet). Their bandwidth usage would increase if the image was inlined.
- People who visit non-mainspace pages every now and then (relatively few people). They currently download Common.css when they visit Wikipedia, and then may download the image if they view a non-mainspace gallery. Their bandwidth usage may decrease (or increase, if they don’t view such galleries) if the image is inlined.
- Given that the second group is far more populous than the third one, I think inlining the image would be a net loss. —Tacsipacsi (talk) 16:34, 25 February 2024 (UTC)
- I don’t know if any of them is cached longer, but there are multiple groups of people, and not everyone would benefit from the inlining:
Interface-protected edit request on 20 March 2024
Please add this to Mobile.css
:
.mobileonly {
display: inline;
}
and the following to Common.css
:
.mobileonly {
display: none;
}
While .nomobile
is defined well outside of these files, .mobileonly
(which is present in Fandom wikis) is not. This serves as a switch to allow content to be shown on mobile only while being hidden on desktop. Awesome Aasim 19:17, 20 March 2024 (UTC)
Not done for now: please establish a consensus for this alteration before using the
{{Edit interface-protected}}
template. I don't see a reason for this. And moreover nomobile should also be avoided. If a specific element absolutely must not be displayed at a certain resolution, then it can use TemplateStyles and a media query. (Such cases probably honestly don't exist.) Ignoring both of those, Mobile.css's days are numbered. See the recent announcement in tech news. Izno (talk) 21:01, 20 March 2024 (UTC)- @Izno I am not finding where that information is. A link please? Awesome Aasim 17:52, 21 March 2024 (UTC)
- Ah, not announced yet anywhere. phab:T248416 Izno (talk) 05:58, 22 March 2024 (UTC)
- @Izno I am not finding where that information is. A link please? Awesome Aasim 17:52, 21 March 2024 (UTC)
- Plus, using the
display: inline
declaration to reverse the effect of adisplay: none
is not always correct: thedisplay:
property allows several values, some of which are significant for structured block elements such as lists and tables. --Redrose64 🌹 (talk) 22:10, 20 March 2024 (UTC) - Pages should be written agnostic of what the browser will be. — xaosflux Talk 18:10, 21 March 2024 (UTC)
Interface-protected edit request on 11 April 2024
Replace
.flagicon img {
min-width: 25px;
}
with
.flagicon img {
min-width: 23px;
}
The default size for flag icons is 23px, so setting the min-width to 25px is causing all flag icons to be larger than they should be. This is problematic for Template:Flag data which takes advantage of the fact that 25px is 2px larger than the default size of 23px. Additionally, using 23px was the proposed fixed for phab:T116318. – BrandonXLF (talk) 18:43, 11 April 2024 (UTC)
Interface-protected edit request on 5 May 2024
Can you please add this to the common.css?
body { font-family: serif; }
That is the serif font, and it is the font for nearly all the encyclopedias. Additionally, it constitutes the font of an actual encyclopedia. Thank you. 143.44.165.227 (talk) 02:17, 5 May 2024 (UTC)
Not done for now: please establish a consensus for this alteration before using the
{{Edit interface-protected}}
template. – Jonesey95 (talk) 02:52, 5 May 2024 (UTC)
Interface-protected edit request on 30 May 2024
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: (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)
Edit request 18 June 2024
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)