View source for MediaWiki talk:Vector-2022.css

__FORCETOC__
== Interface-protected edit request on 5 February 2022 ==

{{edit interface-protected|MediaWiki:Vector-2022.css|answered=yes}}
{{ping|Izno}} Change
<syntaxhighlight lang="css">.skin-vector-2022 #coordinates { position: relative; }</syntaxhighlight>
to
<syntaxhighlight lang="css">.skin-vector-2022 #coordinates {
	top: -3em;
}</syntaxhighlight>
Ideally I want to align it with #siteSub but I don't know how, as I can't figure out how the distance between header.mw-body-header and #bodyContent is derived. But -3em seems good enough. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 03:31, 5 February 2022 (UTC)
:{{done}}<!-- Template:EIp --> [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:42, 5 February 2022 (UTC)

Wait, the coordinates already appear in the perfect position when you're logged out if you just remove the rule. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 03:40, 5 February 2022 (UTC)

:Logged out doesn't have Vector 2022 yet, unless you are specifically using useskin.
:That said, that location interferes with other indicators like protection icons. See [[New York City]] for example. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:41, 5 February 2022 (UTC)
::Hmm, we could of course avoid that by setting <code>right</code> but I know of no way of doing so only when an indicator is present, I'm afraid... [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 03:56, 5 February 2022 (UTC)
:::Yeah. I'm probably going to bite the bullet and put this in an indicator, and then maybe we can get this styled the way we want. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 04:15, 5 February 2022 (UTC)
::::Ok, did this. Managed not to break Vector. I did note a bug with how Vector-2022.css is getting included (n.b. it's being included in RL before, not after, Vector.css), so the display there won't be perfect until such time as WMF fixes it either by removing the dependency on Vector.css or by fixing the load order. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 05:47, 5 February 2022 (UTC)
:{{ec}} <s>I looked for an ancestor class we could use to tell if the language dropdown is shown, and lo and behold, {{tag|body|o}} has the class <code>mw-interlanguage-selector-'''disabled'''</code> when the dropdown is '''present'''. This looks like a bug in itself.</s> [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 03:40, 5 February 2022 (UTC)
::This looks like it reflects whether the "Use a compact language list" option is on, not on whether the dropdown is shown. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 04:01, 5 February 2022 (UTC)
:::Nope, I'm seeing this too, and this matters because with it the top offset should be 0 and without it it should be 3.5em. Really?! --[[User:Izno|Izno]] ([[User talk:Izno|talk]]) 06:05, 5 February 2022 (UTC)
::::Huh? The presence of <code>mw-interlanguage-selector-disabled</code> reflects the "Use a compact language list" option, no matter which Vector you use. Since this is unexpected, I've filed [[phab:T301033]]. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 06:10, 5 February 2022 (UTC)
:::::{{U|Nardog}} Right now, logged in, the offset for new Vector should be 3.5em, without the interlanguage links at the top. With them at the top, the offset apparently needs to be 0.
:::::Open [https://en.wikipedia.org/wiki/Brooklyn?useskin=vector-2022 Brooklyn] in a private window and [https://en.wikipedia.org/wiki/Brooklyn?useskin=vector-2022 Brooklyn] not in a private window (these are the same URL, just repeating for emphasis). Notice where the coordinates are in each. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 06:17, 5 February 2022 (UTC)
::::::What does this have to do with what I struck and then removed and you restored? [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 06:20, 5 February 2022 (UTC)
:::::::Oh, I guess it's just {{tq|Wait, the coordinates already appear in the perfect position when you're logged out if you just remove the rule.}} that I care about, but the stuff you had later looked relevant. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 06:23, 5 February 2022 (UTC)
::::::::I see. Anywho, the selector should probably be <code>.skin-vector-2022 .mw-indicator #coordinates</code> because it is <code>.mw-indicator #coordinates</code> you're overriding after all and just <code>#coordinates</code> is already set to <code>top: 0;</code> (and it has higher specificity no matter the order, of course). [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 06:27, 5 February 2022 (UTC)
This solution doesn't work. A CSS only solution to make these position absolute is impossible to do in such a way that doesn't break compability with pages which use indicators or users that use gadgets (see screenshots [<nowiki/>[[phab:F34944418|1]], [[phab:F34944424|2]], [[phab:F34944429|3]]]

If you want to retain the coordinates at the top of the page there's only 2 solutions that will work and are being used by other communities:
* Make it an indicator like they do on [[:fr:Paris|french Wikipedia]]
* Use JavaScript like they do on [[:eu:Aljerko Gudua|Basque Wikipedia]]
[[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 16:10, 7 February 2022 (UTC)
:Making it an indicator is what I suggested at VPT and what Izno alredy tried, and it led to [[Module talk:Coordinates#coordinsert feature broken|other problems]] so he's undone it for now. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 03:56, 8 February 2022 (UTC)
::{{U|Nardog}} No, he's talking about ditching the CSS entirely {{em|and}} making it an indicator. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 20:57, 9 February 2022 (UTC)
:::I thought that's what you were trying to do, down the line. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 22:10, 10 February 2022 (UTC)
::::No, the most recent deployment was "Izno tries to hack around putting it inside an indicator to have a similar view as now" with clearly not enough success and not "trying to put it in an indicator". To put it in an indicator is removing any related CSS whatsoever (trivial) and then figuring out why one of the functions in the coordinates module broke when I did (less trivial), and then deploying related changes to that module (trivial). (That module is a {{em|hack}}.) [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 23:18, 10 February 2022 (UTC)

== widener gadget? ==

Following up from [[Special:PermaLink/1082288016#Vector_2022]]
{{collapse top|VPT exerpt}}

I actually like this new style, but I'm just wondering there's a way to give it a fluid width. It seems to have a fixed width, so when viewing episode tables, for example, everything is more squished compared to the legacy Vector style. [[User:Amaury|Amaury]] • 22:49, 11 April 2022 (UTC)
:{{re|Amaury}} here is a quick-and-dirty hack you could try, it is safe, but it may cause odd display issues (don't come blaming me if it does).  You can put this in your [[Special:MyPage/vector-2022.css]] file. :
<syntaxhighlight lang=css>
/*Override max-widths */
.mw-page-container {
	max-width: unset !important;
}

.mw-workspace-container {
	max-width: inherit !important;
}

.mw-content-container, .mw-article-toolbar-container {
	max-width: inherit !important;
	padding-left: 11em !important;
}
</syntaxhighlight>
:Someone who has spent more time with that annoyance may come by here and give a better set of rules. — [[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> 00:47, 12 April 2022 (UTC)
::I've got some slighly different CSS rules, mainly to make it fill out the width:
<syntaxhighlight lang=css>
.mw-workspace-container {
	max-width: 100%;
}
.mw-article-toolbar-container,.mw-content-container {
	max-width: calc(100% - 11em); /* 11em is the width of #mw-panel */
	margin-right: 0;
}
.mw-footer-container {
	padding-top: 0;
	padding-bottom: 0;
}
</syntaxhighlight>
::I put those in back in October, when I first turned on New Vector. They still work fine for me, but no guarantees of course. --[[User:Rchard2scout|rchard2scout]] ([[User talk:Rchard2scout|talk]]) 09:22, 12 April 2022 (UTC)
::@[[User:Rchard2scout|Rchard2scout]] noticed you didn't touch .mw-page-container , are you keeping that one narrower? — [[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> 10:05, 12 April 2022 (UTC)

:I'm surprised no one turned this into a gadget yet... —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 09:52, 12 April 2022 (UTC)
::@[[User:TheDJ|TheDJ]] we probably will, if we can get anyone to agree on which widths are best :) — [[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> 10:04, 12 April 2022 (UTC)
{{collapse bottom}}

Should we make a vector-2022 widening gadget?  Any preferred sizes? — [[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> 10:27, 26 April 2022 (UTC)
*Well as far as "should we" - I think this is an obvious yes, at least as a beta gadget for feedback.  So I'm really looking for feedback on some of the values in the collapsed section above. — [[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:45, 26 April 2022 (UTC)
*:WMF has plans to make Vector 22 use CSS grid, so it {{em|might}} be wise to wait for that to happen before deploying a gadget that will break because of different underlying structure. [[phab:T303484]].
*:As for widening, I believe that most people will want full width, not some arbitrary other less-narrow but still limited width. That is what I personally will want. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 15:43, 26 April 2022 (UTC)
*::In terms of simply making everything full width, the css <syntaxhighlight lang="css">.mw-page-container, .mw-workspace-container, .mw-content-container, .vector-sticky-header, .mw-article-toolbar-container {
    max-width: unset;
}</syntaxhighlight> seems to work the best. <span class="nowrap">– [[User:BrandonXLF|<span style="color:blue;">Brandon</span><span style="color:green;">XLF</span>]] ([[User talk:BrandonXLF|talk]])</span> 19:11, 26 April 2022 (UTC)
*:::Hmm, maybe there is still some extra padding going on - still seems a little chubby in whitespace? — [[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> 22:04, 26 April 2022 (UTC)

:{{ping|User:Blaze Wolf|BrandonXLF|Amaury|Rchard2scout}} [[MediaWiki:Gadget-wide-vector-2022]] version 0.1 is up, try these links:
:*[https://en.wikipedia.org/wiki/Hate_%C3%9Cber_Alles?useskin=vector-2022 Today's FA in default Vector 2022]
:*[https://en.wikipedia.org/wiki/Hate_%C3%9Cber_Alles?useskin=vector-2022&withgadget=wide-vector-2022 The same, with the widener as well]
: — [[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> 13:05, 27 April 2022 (UTC)
::I see a very minor difference. Not big enough to be noticeable unless directly comparing. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 13:07, 27 April 2022 (UTC)
:::{{re|Blaze Wolf}} what screen type and resolution are you using? I'm seeing a good 15% of the screen recovered (mostly from the right side gutter being removed). — [[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> 13:09, 27 April 2022 (UTC)
::::{{ping|xaosflux}} I don't know what you mean by screen type. According to [https://bestfirms.com/what-is-my-screen-resolution/ this] website my screen resolution is 1366 x 768. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 13:12, 27 April 2022 (UTC)
:::::@[[User:Blaze Wolf|Blaze Wolf]] was asking if it was a desktop/mobile/tablet type. I saw the big change on desktop at 1680 X 1050. Are you seeing any big whitespace gaps at all (this could only be something that starts to be a problem at resolutions wider than you are using). — [[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> 13:15, 27 April 2022 (UTC)
::::::{{ping|xaosflux}} NOpe. And my screen type is a laptop. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 14:00, 27 April 2022 (UTC)
:::::::Thanks, I think the large whitespace is really only a problem for people with wider resolutions. — [[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> 15:27, 27 April 2022 (UTC)
::::::::{{ping|Xaosflux}} No problem. I'll be in a place in about an hour or so where I have access to a widescreen monitor (I don't know what the resolution is) so I'll see how much of a difference it makes on that. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 15:59, 27 April 2022 (UTC)
::::::::{{ping|xaosflux}} Ok ya that looks much better. Now I'm on a 2560 x 1080 PC monitor and I see a significant difference. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 18:07, 27 April 2022 (UTC)
:::::::::@[[User:Blaze Wolf|Blaze Wolf]] thanks for the note, you can enable this for more testing via the Gadgets options in your preferences (it is in the testing section near the bottom). — [[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> 18:56, 27 April 2022 (UTC)
::::::::::Eh I probably won't. I'm not really a fan of 2022 vector. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 18:57, 27 April 2022 (UTC)
:::::::::::OK, thanks for the feedback so far - sounds like it was a net-positive, when on a wide display, and if using vector-2022. — [[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> 18:59, 27 April 2022 (UTC)
::::::::::::Yes definitely. It acts similar to how normal vector scales to different screen sizes. ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 19:06, 27 April 2022 (UTC)
::::::::::::Looks much better to me; well done.  It's nearly as good as legacy Vector, apart from the white band of wasted space across the top (which I know is out of scope for this task). [[User:Certes|Certes]] ([[User talk:Certes|talk]]) 13:21, 28 April 2022 (UTC)
:::::::::::::@[[User:Certes|Certes]] try [https://en.wikipedia.org/wiki/Hate_%C3%9Cber_Alles?useskin=vector-2022&withgadget=wide-vector-2022 this view again] - I also shrunk the padding under the header from 2em to 0.5em.  May need to rename this from "widener" to "stretch" or something :) — [[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:07, 28 April 2022 (UTC)
::::::::::::::Also an improvement, thanks.  (Needs a browser tab refresh to take effect.) [[User:Certes|Certes]] ([[User talk:Certes|talk]]) 14:11, 28 April 2022 (UTC)
:::::::::::::::There is still a bunch of what seems like wasteful padding and forced margins, but I keep colliding elements in to each other when tweaking right now - will revisit (any ideas 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:28, 28 April 2022 (UTC)
::::::::::::::::Well I know that legacy vector is able to do it without any issues. Maybe we could try and figure out how legacy vector works? ― [[User:Blaze Wolf|<b style="background:#0d1125;color:#51aeff;padding:1q;border-radius:5q;">Blaze&nbsp;Wolf</b>]][[User talk:Blaze Wolf|<sup>Talk</sup>]]<sub title="Discord Username" style="margin-left:-22q;">Blaze&nbsp;Wolf#6545</sub> 14:29, 28 April 2022 (UTC)
:::::::::::::::::I think I just started getting carried away trimming margins and paddings - but the layout is a little different  (notably with how the toolbar (Article/talk) overlaps with the sidebar, then is using static values to push it back out by default. — [[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> 17:56, 28 April 2022 (UTC)
::::::::::::::::::Is this still in the works? I came here from the Japanese Wikipedia. Thought I was on the mobile version of the site until I realized it was the new default. It really feels cramped. I would love a button that just extends the width so it is like legacy. Thanks. [[Special:Contributions/76.173.99.79|76.173.99.79]] ([[User talk:76.173.99.79|talk]]) 09:33, 24 July 2022 (UTC)
::Coming from the Village Pump thread, I've just enabled the gadget and I do not see any difference. [[User:KPu3uC B Poccuu|KPu3uC B Poccuu]] ([[User talk:KPu3uC B Poccuu|talk]]) 09:08, 29 April 2022 (UTC)
:::@[[User:KPu3uC B Poccuu|KPu3uC B Poccuu]] thanks for the note. The differences start to appear if you are (a) actually using vector-2022 as your skin (or clicked on one of the force examples above) and (b) have a wide screen - looks like it starts being evident after 1300 widths. — [[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> 09:36, 29 April 2022 (UTC)
::::Both conditions are satisfied I'm afraid. Still no difference on my end. Here is how it looks on my end when I view the linked above page, just to be extra sure.[[File:Wikipedia page screenshot on widescreeen monitor.png|thumb]] That's very bad design if these changes are intentional! [[User:KPu3uC B Poccuu|KPu3uC B Poccuu]] ([[User talk:KPu3uC B Poccuu|talk]]) 03:26, 30 April 2022 (UTC)
:::::@[[User:KPu3uC B Poccuu|KPu3uC B Poccuu]] is that what you see, when using [https://en.wikipedia.org/wiki/Hate_%C3%9Cber_Alles?useskin=vector-2022&withgadget=wide-vector-2022 this link]? That looks like w/o the gadget. — [[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> 09:38, 30 April 2022 (UTC)
::::::Yes indeed, that's what I get when visiting the link. Exactly! Nothing has changed for me after activating the gadget. [[User:KPu3uC B Poccuu|KPu3uC B Poccuu]] ([[User talk:KPu3uC B Poccuu|talk]]) 13:10, 30 April 2022 (UTC)

Bug report: [[History of Asian art]] The paranoma image stretches the page all the way through the end of the picture. [[User:Robertsky|– robertsky]] ([[User talk:Robertsky|talk]]) 08:07, 3 August 2022 (UTC)

:Ping to {{u|Frietjes}} (major contributor for [[Module:Wide image]]) who may have some good ideas on this. — [[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> 09:45, 3 August 2022 (UTC)
::See [[User:Xaosflux/sandbox133]] (use the reload link at the top). — [[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> 09:46, 3 August 2022 (UTC)

Another bug report: Visual Editor may appear stretched in certain instances. I am unable to determine the cause for this, but a recent encounter is on {{No ping|David Tornheim}}'s user page when editing in source mode (was on it to find an example of a template being used, unrelated to this bug report/issue). [[User:Robertsky|– robertsky]] ([[User talk:Robertsky|talk]]) 01:55, 5 August 2022 (UTC)

== Hide TOC ==
Need to be able to hide TOC like the Main Menu ....for more info see [[Wikipedia:Village pump (technical)#‎Side bar]]. Causing readability issues for those who use this on mobile view for full screen<span style="font-weight:bold;color:darkblue">[[User:Moxy|Moxy]]</span>-[[File:Maple Leaf (Pantone).svg|15px|link=User talk:Moxy]] 19:37, 26 April 2022 (UTC)
:Splitting this to a new section, since it isn't about widening. — [[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> 10:05, 27 April 2022 (UTC)

== Interface-protected edit request on 6 July 2022 ==

{{Edit interface-protected|MediaWiki:Vector-2022.css|answered=yes}}
The recent changes to page tabs ([[mw:Reading/Web/Desktop Improvements/Updates#July 2022: Page title/tabs switch|changes]]) have moved the page tabs to below the page title and now the coords are appearing on top of the Edit/history buttons. Can -3em be changed to -1em to avoid the overlap. [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 19:25, 6 July 2022 (UTC)
:{{in progress}} Looking in to this. — [[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> 19:47, 6 July 2022 (UTC)
::{{done}} — [[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> 19:49, 6 July 2022 (UTC)

== Overlapped icon fix ==

https://en.wikipedia.org/wiki/Kanjuruhan_Stadium_disaster

On the above link, the lock icon overlaps the coordinates still. Can you fix this for me? [[User:RapMonstaXY|RapMonstaXY]] ([[User talk:RapMonstaXY|talk]]) 12:54, 6 October 2022 (UTC)

:Let's try pushing it down instead.  Think there is still a lot of dispute about (a) if coordinates are content, (b) regardless of if they are content: do they belong in the content area of the page. — [[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> 13:21, 6 October 2022 (UTC)

=== Message Box/Coordinates Problem ===
{{Tracked|T281974}}
Fix the message box/coordinates positioning so that they wont overlap with each other. Ok?

Examples:
* https://en.wikipedia.org/wiki/2007_Glorietta_explosion

[[User:RapMonstaXY|RapMonstaXY]] ([[User talk:RapMonstaXY|talk]]) 14:25, 13 October 2022 (UTC)
:See [[phab:T281974]] for work on that. — [[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:28, 13 October 2022 (UTC)

== Override pending changes box positioning ==

{{edit interface-protected|answered=yes}}
Problem described at [[Wikipedia:Village pump (technical)#Pending changes toolbar hides "view history"]].

The change is to move the box from the right to the left of the toolbar, as changing vertical alignment could cause further collisions with elements such as coordinates (maybe?). So just moving from right to left seems to be a better approach.

To do this add the following:
{{#tag:syntaxhighlight|<nowiki>
.skin-vector-2022 .flaggedrevs_short {
	right:auto;
	left:100px;
}
</nowiki>|lang=css}} [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 15:11, 8 November 2022 (UTC)

:@[[User:Terasail|Terasail]] this sounds like a problem that would affect all projects, so perhaps a tempoary workaround as above - but shouldn't this be addressed at the root? (Open a bug with the extension). — [[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> 15:21, 8 November 2022 (UTC)
::I can make a bug report for FlaggedRevs but isn't this more of [[phab:T281974]] (Coordinates issue). With that task being more general it might just be better for a mention there. Since other wikis that use pending changes don't appear to use the same workaround as us anyway. I looked at [[fi:Järjestelmäviesti:Vector.css]] since they use pending changes but they don't seem to have any similar css although I am not great with other language wikis and don't have the reviewer flag elsewhere. [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 15:33, 8 November 2022 (UTC)
:::@[[User:Xaosflux|Xaosflux]] Having also briefly looked at als & ru wiki Vector.css aswell it appears that only enwiki repositions .flaggedrevs_short and everyone else just leaves it in the default position so I am not too sure how much of a bug this is compared to self inflicted errors from adjusting default values... [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 15:47, 8 November 2022 (UTC)
:::@[[User:Terasail|Terasail]] the "coordinates" problem is still a design kerfuffle - but "view history" is built in. While other wikis have "pending changes" I think the problem here is a collision with [[:mw:Extension:PageTriage]]? So opening a ticket for the problem with PageTriage would be at least what I'd want to see before we put a hack that has to load for every single reader (who don't have this problem, as they don't see those controls). — [[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> 16:23, 8 November 2022 (UTC)
::::@[[User:Xaosflux|Xaosflux]] This shouldn't have anything to do with ''PageTriage'' it should be only from [[mw:Extension:FlaggedRevs]]. The box itself is created by FlaggedRevsXML.php (in that extension) so I think opening a ticket is redundant going with my previous logic as this appears to me to be exclusively pending changes related. The extension itself is labled as "clunky, complex and not recommended for production use" so I can't see much benefit to creating a bug report here when we create the bug by not using default positioning for this extension.
::::The default of this box is the top right of #mw-content-text however it appears in 2017 this box was repositioned to be inline with the title of the article (As a continuation of some previous code?) I am guessing for aesthetic reasons. So I mean its less of a bug and more of a lack of foresight that in 2022 there would be a new skin that swaps the title/tools order. [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 16:58, 8 November 2022 (UTC)
:::::@[[User:Terasail|Terasail]] thanks for more info - so this is still a "FlaggedRevs" had a collision in vector-2022 problem - which would occur anywhere (including outside of WMF wikis) where that extension was installed.  And because of this bug, we want to slap a hack on top of it.  We certainly do that, but that doesn't excuse why a bug isn't opened. It looks like similar problems (e.g. [[phab:T316947]]) with that extension have been worked on.  Bottom line, I don't want to add technical debt to our entire skin that isn't referenced to the "better" solution (fix the offending extension). — [[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> 17:05, 8 November 2022 (UTC)
::::::I 100% agree that adding hacks to a problem is a worse solution than fixing the problem. I guess I just see it differently to you, I see the issue being [[MediaWiki:Vector.css#L-41]] rather than the extension. I tested disabling the added css (When the box was still visible) and there was no collisions with any page elements on either vector or V22. The issue is using "position: absolute;" - Rarely a good way to solve a problem and on top of that the problem being solved is only asthetic... which is why no other language wikis override the default (I am assuming). Therefore I see no point in creating a task where some WMF dev eventually replies that they are not going to solve a problem that only exists for enwiki because of css created by enwiki. My original idea was to just IPER the removal of the css but being well aware of how people hate elements of vector changing especially when caused by V22. I thought this would be the better idea. [[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 17:17, 8 November 2022 (UTC)
:::::::TLDR: Bit of a ramble, but I don't see a phab ticket as a solution, the soliton is to remove lines 41-47 of [[MediaWiki:Vector.css]] (and pending changes is more hassle then it provides benefit over semi-prot)[[User:Terasail|<span style="color:#088; font-weight:800;">Terasail</span>]][[User talk:Terasail|<sup><span style="color:#000;">'''[✉️]'''</span></sup>]] 17:18, 8 November 2022 (UTC)
:{{partly done|Partly done:}}<!-- Template:EIp --> I've made the CSS of interest apply only to legacy vector. I have no fundamental objection to total removal if that's desirable along the same lines: using absolute is almost always a hack. [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 18:04, 8 November 2022 (UTC)

== Interface-protected edit request on 7 March 2024 ==

{{edit interface-protected|MediaWiki:Vector-2022.css|answered=yes}}
Remove the block starting from [[MediaWiki:Vector-2022.css#L-20]]. The relevant patch has been merged upstream for a few weeks now (thanks {{U|TheDJ}}). [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 16:54, 7 March 2024 (UTC)
:{{done}} — [[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> 19:38, 7 March 2024 (UTC)
:Thank you Izno —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 21:52, 7 March 2024 (UTC)

== Interface-protected edit request on 1 April 2024 ==

{{edit interface-protected|MediaWiki:Vector-2022.css|answered=yes}}
To support [[phab:T331679]]/[[phab:T357580]], there are a couple blocks we should copy from [[MediaWiki:Vector.css]]. This change request 1) adds the interface removals for the main page, 2) adds the removal of the border bar that WMF added in Vector, and 3) removes the lead comment, which are known factors of the skin.css pages that need not repeated here (going into the future). Please copy-paste the following over the existing Vector-2022.css page:

<syntaxhighlight lang=css>
/* Don't display some stuff on the main page */
.page-Main_Page #deleteconfirm,
.page-Main_Page #t-cite,
.page-Main_Page #footer-info-lastmod,
.action-view.page-Main_Page #siteSub,
.action-view.page-Main_Page #contentSub,
.action-view.page-Main_Page #contentSub2 {
	display: none !important;
}

/* nudge coordinates indicator display */
#coordinates {
	line-height: 2;
	font-size: 92%;
	white-space: nowrap;
}

/* Override [[phab:T265947]] */
.mw-body-content blockquote {
	border-left: none;
}</syntaxhighlight> [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 03:37, 1 April 2024 (UTC)

:@[[User:Izno|Izno]] have you tested this locally yet? Seems like until those are done we're going to be serving double the styles here? Any FUC? — [[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> 13:51, 9 April 2024 (UTC)
::Yes, double the styles is intended for the time being (and these aren't exactly heavy-weight). No, this won't cause FOUCs. @[[User:Xaosflux|Xaosflux]] [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 16:54, 9 April 2024 (UTC)
:::{{done}} — [[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> 17:05, 9 April 2024 (UTC)

== Links inside tables ==

{{edit interface-protected|MediaWiki:Vector-2022.css|answered=yes}}
I added some styles a while back to https://en.wikipedia.org/wiki/MediaWiki:Minerva.css#L-135 that change the color of links to black (and underlined) when present in an element with a background color for dark mode. They've been working pretty well there, consistently more than halving error reports I see on top 100 most viewed pages.

To be honest these would also work well on the standard theme as in many cases I've noticed editors often overlook links inside tables. For example, all the links in the relegation zone on https://en.wikipedia.org/wiki/2010%E2%80%9311_Premier_League are inaccessible but perhaps we should focus on the dark theme for now?

<syntaxhighlight lang="css">
/* [[phab:T360844]] */
html.skin-theme-clientpref-night table [bgcolor] a,
html.skin-theme-clientpref-night th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
html.skin-theme-clientpref-night td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
/* should not apply to th elements which have their own background. */
html.skin-theme-clientpref-night tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a {
    color: var( @color-base, #202122);
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os table [bgcolor] a,
  html.skin-theme-clientpref-os th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
  html.skin-theme-clientpref-os td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a,
  html.skin-theme-clientpref-os tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a {
    color: var( @color-base, #202122);
    text-decoration: underline;
  }
}
</syntaxhighlight> <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 01:47, 29 May 2024 (UTC)

:I forgot to add - another approach if we dislike the contains selectors would be to do this [[mw:Consider_globally_setting_link_color_inside_tables_with_background]] (possibly with an override class similar to the plainlink class that resets it back to a blue link). <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 01:59, 29 May 2024 (UTC)
::Isn't that <code>:not</code> quite 'expensive' to be evaluating on every page load? — [[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> 17:34, 29 May 2024 (UTC)
:::These days most literature seems to conclude it is not a problem. Performance of contains query was investigated in https://phabricator.wikimedia.org/T358240 and concluded it was not a problem but as always [https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/ it depends].
:::This rule could also be applied with JavaScript in a more readable away - adding a class that applies these rules and encouraging editors to add that class in the content (i could see that being a useful gadget!) <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 18:17, 1 June 2024 (UTC)
::: {{done}} as proposed (except for a minor CSS syntax correction) since this has seen no action for weeks. This does not bar further improvements. [[User:Pppery|* Pppery *]] [[User talk:Pppery|<sub style="color:#800000">it has begun...</sub>]] 01:46, 18 June 2024 (UTC)

{{U|Jdlrobson}} and others: I observed today that in [https://en.wikipedia.org/wiki/List_of_The_Flash_characters?vectornightmode=1 this article], the first wikilink in the table ("Main") is colored white instead of blue or black. I think the above change might have something to do with this coloring. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 19:04, 18 June 2024 (UTC)

:This should have been fixed by [https://en.wikipedia.org/w/index.php?title=MediaWiki:Vector-2022.css&diff=prev&oldid=1229838231 this change] - there was a misunderstanding around token usage. <span style="background:white; color: black;">🐸</span>&nbsp;[[User:Jdlrobson|Jdlrobson]] ([[User talk:Jdlrobson|talk]]) 16:36, 20 June 2024 (UTC)

== T367463 hack fixed? ==

{{ping|Jon (WMF)}} is the hack for [[phab:T367463]] still needed? This task is marked resolved. — [[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> 15:46, 11 July 2024 (UTC)

:Yep! Thanks for flagging. {{Done}} [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 16:01, 11 July 2024 (UTC)

== Red links aren't red when put in Infobox in dark mode ==
{{ping|Jon (WMF)}} It was reported to me that in Persian Wikipedia [[Jean Beaini]]'s link in [https://en.wikipedia.org/w/index.php?title=Mohammad_Khordadian&oldid=1237558933 the infobox of this page] doesn't have red colored link (compare it in dark vs light mode) so I had to apply [https://fa.wikipedia.org/?diff=39970392&oldid=39970353 this change] and the equivalent perhaps might be needed for English Wikipedia −[[User:Ebrahim|ebrahim]]<sup>[[User talk:Ebrahim|talk]]</sup> 11:08, 30 July 2024 (UTC)

:Thanks! I've updated the recommendation on [[mw:Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis]]. Yes it should also likely be applied here (not sure how common red links in infoboxes is?) [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 17:50, 30 July 2024 (UTC)
::I have seen red links in sports season infoboxes that automatically generate links to the previous or next season. [[2025 UFL season]] has a red link in it, as do [[2024–25 KS Cracovia season]] and [[2024 Bora–Hansgrohe season]]. – [[User:Jonesey95|Jonesey95]] ([[User talk:Jonesey95|talk]]) 18:02, 30 July 2024 (UTC)
::[[User:Jon (WMF)|Jon (WMF)]]: In addition to the great point [[User:Jonesey95|Jonesey95]] has made, in smaller wikis we sometimes know an article should be created as it is already created in English Wikipedia but it's not created yet locally so we like to have the red link at least. −[[User:Ebrahim|Ebrahim]]<sup>[[User talk:Ebrahim|talk]]</sup> 18:06, 30 July 2024 (UTC)
:::We're hoping to upstream this so other wikis can benefit from it in [[phab:T371411]] so I'm focusing on addressing this as part of that task rather than edits to individual project's [[MediaWiki:Vector-2022.css]]. I've made sure the red link requirement is part of that ticket! [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 23:16, 30 July 2024 (UTC)