Since some people might want to copy this styleset in lieu of Vector 2022's introduction to Wikivoyage, these are the changes that this styleset makes, summarised:

• Reducing whitespace and balancing layout elements.
  • Changes to the display of the SiteNotice.
    • Width is about 60% of the page width
    • (N) Element is now surrounded with a rounded box with a dotted, Wikivoyage-green border.
    • When not in use or hidden, the SiteNotice occupies no space in the layout, which it should have by default.
  • Compacting the footer by reducing its padding and moving the footer icons to a position relative to the bottom right corner.
  • Making the page title / page title placeholder a consistent height.
  • Reducing top margins to 0.5rem (8px).
  • Making line height (spacing between lines) 0.85rem (13.6px).
  • (N) Making the Wikivoyage label in the top left of the header move accordingly.

• Improving legibility and removing clutter
  • Side bar subheadings have been made bold.
  • Removing "Switch to old look" button.
  • Removing "Rendered with Parsoid" icon.
  • Removing file upload (usage discouraged) and RealTime Recent Changes (superseded) from the tools-bar.
  • Slight reconfiguration of TOCs on pages using Discussion Tools.
  • Featured articles (at the bottom of articles) now appear less visually intrusive.
  • (N) Capitalisation has been forced upon descriptions in search results and featured articles.

• Applying branding and colour
  • TOC arrows have been switched with a blue compass arrow as featured in the site logo.
  • Watchlist star is displayed in gold.
  • (N) WikiLoves heart on user talk pages is displayed in red.
  • Log out button in the user menu in bold, red.
  • Interlanguage selector in light blue.
  • DOTM, OTBP and FTT icons in the pagebanner stylistically consistent with Vector 2022.

• Tweaks to extensions and resolving problems that Vector 2022 introduced to them.
  • Forcing at least a 5:1 pagebanner to be displayed.
  • Dots in pagebanner TOC no longer treated as hyperlinks.

― Wauteurz (talk) 22:39, 3 December 2024 (UTC)Reply

• Visual: Wikivoyage icon or wordmark pinned to the far left of the sticky header.
  • QOL: Clicking it returns the user to the page's top.
• Visual: Stylistically consistent icons used in div.mw-indicators. (NB: Icons not defined by ID, cannot change them smoothly)
• Layout: Language selector moved to sidebar. (NB: Depends on a site-wide setting)

― Wauteurz (talk) 16:12, 29 November 2024 (UTC)Reply

To use these Vector 2022 modifications on your own client, navigate to either Special:MyPage/common.css (applies to any skin) or Special:MyPage/vector-2022.css (applies only to Vector 2022), and enter the following lines:

/* Importing Wauteurz' common.css */  @import url('https://en.wikivoyage.org/w/index.php?title=User:Wauteurz/common.css&action=raw&ctype=text/css');  

To undo this again, simply blank the page again. ― Wauteurz (talk) 16:53, 29 November 2024 (UTC)Reply

I think I've touched on all issues that have been verbalised before. The ones that can reasonably be fixed through CSS manipulation, that is. I doubt I'll make many more large edits to this stylesheet in the short run, so I suppose it's time to have a vote on whether or not to push these to MediaWiki:vector-2022.css. In principle, that would be support for the entire list of changes listed above. If there are any changes that you don't support though, then please do mention them. We can vote on those separately at a later stage.
― Wauteurz (talk) 00:12, 1 December 2024 (UTC)Reply

Support as creator. ― Wauteurz (talk) 00:13, 1 December 2024 (UTC)Reply

Qualified strong support In general this is a massive improvement over the Vector2022 skin as it stands now on Wikivoyage. In particular, this largely resolves the issue of page banner de-emphasis in Vector2022, which subtracts so much from each article's visual tone. While I have not been able to review each of the changes individually, I would like to only withhold my support for now for changes that aren't merely an attempt to regress to the Vector2010 theme. For example, although I am not necessarily opposed to the gold watchlist star, I believe this is a new feature that deserves wider debate before integration. Brycehughes (talk) 01:17, 1 December 2024 (UTC)Reply

I think I agree. I haven't used any vector skin that much, so I have difficulties seeing the changes, but I trust you on the most important issues, and I think they need to be fixed quickly as vector-2022 already is there for non-logged-in users – and I haven't noticed any major problems. I also think that the independent less urgent and debatable things can wait for a few weeks at least. –LPfi (talk) 12:54, 1 December 2024 (UTC)Reply

I'll reorganise the vote here a bit. As Brycehughes made clear to me, it's very beneficial to have some screenshots for reference. Alongside them, I've divided the changes I've made into four sets, which make it a tad easier for everyone to express what they do and do not find important.

The four changesets can be found HERE.

Please be so kind as to vote on the different changesets under the relevant header.
― Wauteurz (talk) 16:53, 1 December 2024 (UTC)Reply

@Brycehughes @LPfi, feel free to recast your votes for the categories below.

@Andree.sk, I've noticed you've also enabled these changes. Feel free to give your feedback and make a vote once you're ready for it.
― Wauteurz (talk) 16:56, 1 December 2024 (UTC)Reply

Support, I like all the changes! :-) -- andree 19:31, 3 December 2024 (UTC)Reply

Ultimately, if ".vector-column-end { display: none}" is added, and "somehow" we moved ".vector-page-tools-landmark" under "#vector-main-menu-pinned-container" (probably not possible without JS), it looks very much like the old theme :) Also, I'd like to see "contributions" icon in the top, without clicking the avatar icon... Not sure it's the way to go, though... -- andree 19:45, 3 December 2024 (UTC)Reply

Could be a welcome addition to some, but at that point, why not make every sidebar menu pin-able, and be able to pin any menu to either sidebar? I personally love the addition of the right sidebar and appreciate that Tools live there now. It's very useful to me, but I'd also love to see the main menu on the left be pinned so you don't have to scroll all the way up a page to go to Recent Changes, for example. That'd be best achieved through modifications to the skin itself though. I for one am not going to burn my fingers on that much JS with my decade-old knowledge of a language that I may or may not remember from my high school IT classes.

I have considered some changes to the sticky header myself, but I'd rather make it more consistent with the normal header (Add the logo, Alerts, Notices and Watchlist to it). Regardless, both of these are very much subject to personal preference. I don't think they'd ever get the support to be implemented site-wide, but I could see them at one point being facilitated for people to insert into their own common/vector-2022 files as they see fit.
― Wauteurz (talk) 20:51, 3 December 2024 (UTC)Reply

For sure, if all the menus were somehow move-able (I guess it's the same thing as you mean by "pinnable"), that'd be great. Either way, with use of JS, it's almost too trivial:

m=$("#vector-main-menu-pinned-container").parent().parent().parent() $(".vector-page-tools-landmark").appendTo(m) $(".vector-column-end").hide() 

But yeah, this is not critical, and most likely vector-2022 authors know why they introduced the right tools column. I am just used (for too many years) to finding the tool links (e.g. wikidata) at particular spot in the left column, that's all. I'm slowly getting used to the new situation :-) -- andree 08:27, 4 December 2024 (UTC)Reply

Hi there, interface admin here, but also a maintainer of WikidataPageBanner and Vector 2022 codebases. I am not going to wade into the aesthetics of the proposed design but wanted to provide feedback from a technical perspective which I think would be a requirement . I took a look at the code in User:Wauteurz/common.css. Firstly, it would help if you could clean up the stylesheet a little, to make it clearer what exactly you are proposing, before running a vote, as many of the rules inside it currently do not apply (for example the one for .mw-ui-icon-language-progressive) and some are commented out and it's not clear if that's intentional or a bug which makes it harder to reason with the CSS and know what to recommend from a technical perspective. Unlike the old skin, the new skin is in active development. Please note the frontend stable policy doesn't cover these kind of CSS overrides so please represent this in your vote, that this style if applied would likely need various revisions during the year and you would need the community to be respondent for those changes. I would recommend you have one interface admin strongly supporting this change and available to do this sort of maintenance for that reason. I can say with great certainty that over the course of next year there is one upcoming project that will likely lead to those vector rules no longer working, and possibly breaking the layout until fixed. I would like to provide some recommendations that should help you achieve the styling you want but in different, more supported means:

• Please consider upstreaming your changes to banners (and associated indicators) to the WikidataPageBanner extension - I am desperate for contributors there in and have made multiple pleas to this community in the past to help me improve it, particularly for improving the banner display in Vector 2022 so that other projects can benefit from them. There is even a tool for pushing them to the codebase - https://www.mediawiki.org/wiki/Gerrit_patch_uploader. If your changes are in the extension itself, they will be much more stable and you will benefit from code review and support from Wikimedia developers. I will personally help you through that process and make sure they get merged if you are willing. (We have a policy that nobody can self-merge code and as the sole maintainer of the extension that creates challenges for improvements! :-))
• Make sure any JS changes follow the frontend stable policy. If they don't, you code is likely to break in future releases.
• Avoid altering colors. The color palette for Vector 2022 is carefully chosen to meet accessibility guidelines and to support complex theming. If you haven't discovered it yet the Vector 2022 skin has dark mode and changes to color without using CSS variables is likely going to lead to accessibility issues. More information here. The logout link for example is inaccessible in dark mode. The watchstar is inaccessible in both.
• Rather than remove Unnecessary sidebar elements via CSS e.g. t-upload you can make requests via the site request process to have them disabled. All menus are configurable at that level. The switch to old look button and rendered by Parsoid links can also be removed by this process. FWIW the switch to old look button should be phased out soon, and only exists since there are < 10 projects still using legacy Vector and to aid the transition to the new skin.
• Avoid altering layout of `.vector-` and `.cdx-` prefixed elements. These are frequently changing so you are styling a moving target that will often change. The changes to pinnable elements in particular are super risky as the logic there is extremely complicated and hacking them to behave differently, you'd be risking breaking availability of those menus in future or now (menu state persists for anonymous users for example). While I am sure any breaking change will be quickly fixed, if it even takes 4hrs for an interface admin to be notified and to fix the problem, that's 4hrs where the site is unusable. Use `mw-` prefixed classes and defensive selectors, which also guarantee an expected DOM order where possible as those are much more stable.

A few bugs I noticed in my testing to take a look at:

• The design doesn't seem to take into account the table of contents outside the banner and it juts out of the page when the main menu is collapsed.
• The logout link doesn't meet accessibility guidelines.

Hope this is helpful! Jdlrobson (talk) 06:46, 6 December 2024 (UTC)Reply

@Jdlrobson: Your comments are most definitely helpful, don't worry about that. Let me preface all this by saying that my CSS skills are definitely limited, and I'm working out fixes as I go. The edit history of the stylesheet probably demonstrates that as well. I'm deliberately steering clear of editing JS, since my skills on that front are closer to non-existent than capable.

A lot of the changes I have made, have been made purely as a temporary measure: They're not intended to be around forever. They should be removed once the respective development teams get around to fixing them in a more proper and permanent way. Stability has been given a reduced priority because of that, but I'm also not going out of my way to compromise the skin as a whole. The reason why these changes are being proposed though, is because Vector 2022 was rolled out on Wikivoyage despite its editors explaining repeatedly that the skin was not yet ready for Wikivoyage - Mostly so because of the banners breaking - and this plea being seemingly left to the wind. The fix I've implemented for pagebanners has come from ButteBag's personal stylesheet, who I believe has already provided a patch to the extension.

I've organised these changes mostly because I do have some skills in this department, and want to ensure that Wikivoyage doesn't get the short end of the stick by having this skin forced on it, whilst the skin doesn't seem to respect Wikivoyage's style. I do not intend to maintain these changes forever, and hope that they'll be unnecessary sooner than later. My work here, in short, is out of implied necessity and passion for Wikivoyage more than ambition or passion for CSS, JS, or anything along those lines. I do not see myself as fit to help develop anything, because of a certain lack of skills, as well as an unpredictable private life, so I will not.

Other than that, I did get carried away and added some styling that I personally find nice additions, but that others may not, and may at times impair on accessibility issues that I do not encounter (being colourblind myself). They'll likely fail to be voted in, and I'll retain them then for my own private use once that happens.

I have been planning to change the layout of the document to be more structured, but haven't had the chance to do so yet. That will happen soon though. I'll also clearly define which of those changes (mostly the restyling and recolouring) I'll retain for my personal use. I'll still organize a vote about them, but like I said, the likely scenario will be that they'll be voted against.

Again, I will see about organizing the stylesheet better, cleaning it up somewhat, and seeing if I can avoid .vector and .cdx elements. The logout link I'll recolour to a simple red, which should resolve those issues.
― Wauteurz (talk) 14:37, 6 December 2024 (UTC)Reply

> being proposed though, is because Vector 2022 was rolled out on Wikivoyage despite its editors explaining repeatedly that the skin was not yet ready for Wikivoyage

If a phabricator ticket doesn't exist as a byproduct of those conversations nothing will happen.

The majority of tickets mentioning wikivoyage have been resolved:

https://phabricator.wikimedia.org/search/query/AgRvywEVbccj/#R

Only three remain open and I am aware that one of those has any open patch.

Perhaps filing some tickets based on the conversations you are having now will yield better results. Jdlrobson (talk) 16:33, 6 December 2024 (UTC)Reply

@Brycehughes, El Grafo, SHB2000, LPfi, Andree.sk: I do not know who of you do and do not intend to keep these changes applied for the long run (or even use them), hence why I'm pinging all of you. If you're not currently using my common.css on your end, or don't intend to keep them applied in the long term, then please ignore this ping.

I have published the desired changes to Wikivoyage's Vector-2022.css a week ago, and I've made some form of longer-term support for the changes that haven't made the cut. I will however blank my common.css in January, as it's not the truly correct place to make changes that only apply to Vector 2022. This means that if you've imported my common.css to work on your end, they will stop being applied once I blank the page. I have instead moved everything to Meta, and detailed how you can import the changes made to Wikivoyage (option 1), import all my changes (option 2), or cherry-pick the changes that you'd like to be applied on your side (option 3).

If anything is unclear in the given directions, or if something doesn't work as expected, then you know how to reach me. Happy holidays! ― Wauteurz (talk) 14:39, 19 December 2024 (UTC)Reply

In the above topic it sounds like most of the issues you fixed via your css will be part of the upstream version. Is that your feeling too? :-) -- andree 21:13, 19 December 2024 (UTC)Reply

I don't know what to expect, to be honest. I've made some temporary fixes, and I hope they'll be redundant within half a year because they've been upstreamed. Robson wants us to submit Phab tickets for issues with Vector 2022, but I mean, the dev team initially asked for our feedback through the Pub. We've given that, so they should be aware of the issues we have. Very little if anything at all has been added to those comments since.

I believe the skin should serve its projects, not the other way around. On top of that, I really can't be bothered to be involved in half a dozen Phab ticket submissions right now. Like I said in that topic - I picked up this project because I believe Wikivoyage deserves it, not because I desperately want to do it. Phabricator on top of that is a project I am very unfamiliar with. It's too much for me to manage right now. If someone else wants to submit those tickets for the changes I pushed to Mediawiki:Vector-2022.css, then please, be my guest and feel free to refer to and/or use what I've submitted in the past few weeks.
― Wauteurz (talk) 22:21, 19 December 2024 (UTC)Reply