Wauteurz' Vector 2022 modifications

This is a Wikivoyage user page.

These are a set of changes to the Vector 2022 skin that I have proposed for application to Wikivoyage back in early December 2024, in response to the skin being pushed to Wikivoyage without the site being strictly ready for that change. These are more short-term than long-term solutions, and will likely be broken when changes are being made to Vector 2022, as the skin is still in development. If or when these changes break any of the code listed below, they may be updated.

How to use

You're free to copy any of the code listed below into your own Vector-2022.css. Do so on Meta to apply this code across all Wikimedia projects that use Vector 2022. I suggest you add this page to your Wantlist if you want to know when a change might be necessary.

Target page

There are several locations where these changes can be put, with the effect changing based on the option you pick.

Recommended targets:
- Local Vector-2022.css file – Applies changes only on Wikivoyage when using Vector 2022.
- Global common.css file – Applies changes to all Wikimedia projects, across all skins.
Optional targets (functionality is not guaranteed):
- Local common.css file – Applies changes only on Wikivoyage, to all skins.

Applying changes

There are several ways of importing these changes to work on your end:

Option 1 – Import only changes that are live on Wikivoyage.: Go to your desired target page, and enter the following code:

/* Importing Wikivoyage Vector-2022.css */ 
@import url('https://en.wikivoyage.org/wiki/MediaWiki:Vector-2022.css&action=raw&ctype=text/css');

Option 2 – Import all my changes.: Go to your desired target page, and enter the following code:

/* Importing Wauteurz' Vector-2022.css */ 
@import url('https://meta.wikimedia.org/wiki/User:Wauteurz/global.css&action=raw&ctype=text/css');

Note that what you're importing here, is my global common.css file. Because it is global, it does not include the #Compass TOC arrows. If you want those to apply globally, import them manually copy-pasting the code listed here on a new line below the code above.

Option 3 – Pick what you like.: Go to your desired target page, and copy-paste any of the code blocks under #Modifications that you wish to use. This can be used in conjunction with the two options above (though combining it with the second option is redundant).

Modifications

These modifications haven't been pushed to Mediawiki:Vector-2022.css as they aren't deemed strictly necessary, and their appeal depends more on personal opinion than public need.

Disable Parsoid icon

.mw-parsoid-icon {
	display:none;
}

Compass TOC arrows

.mw-ui-icon-wikimedia-expand {
	-webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c8/Notification-icon-Wikivoyage-logo-black-single-arrow.svg");
	mask-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c8/Notification-icon-Wikivoyage-logo-black-single-arrow.svg");
	transform: rotate(90deg);
	background: #006699;
	max-width: 0.75rem;
	max-height: 0.75rem;
}

Gold Watchlist star

.vector-icon.mw-ui-icon-wikimedia-star, .vector-icon.mw-ui-icon-wikimedia-unStar {
	background-color: goldenrod;
}

Red WikiLove heart

.vector-icon.mw-ui-icon-wikimedia-heart {
	background-color: red;
}

Consistent blue for interlanguage links

.vector-dropdown#p-lang-btn,
.cdx-button#p-lang-btn-sticky-header {
	color: #006699;
}
.mw-ui-icon-language-progressive,
.mw-ui-icon-wikimedia-language {
	background-color: #006699;
}

More distinct log-out button

.mw-ui-icon-logOut { /* Recolouring icon */
	background-color: red;
}
a[title="Log out"] { /* Recolouring text */
	color: red;
	font-weight: bolder;
}
.mw-list-item#pt-logout #pt-logout-sticky-header { /* Slightly shifting the button down through padding */
	padding-top: 0.5rem;
}

Pagebanner labels consistent with Vector 2022's icon set

.oo-ui-icon-dotm {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/1f/OOjs_UI_icon_mapPin-invert.svg);
	transform: scale(0.8);
}
.oo-ui-icon-otbp {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/65/OOjs_UI_icon_wikitrail-ltr-invert.svg);
	transform: scale(0.9);
}
.oo-ui-icon-ftt {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/OOjs_UI_icon_articleCheck-ltr-invert.svg);
	transform: scale(0.9);
}
.oo-ui-icon-star {
	background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/ca/OOjs_UI_icon_unStar-invert.svg);
	transform: scale(0.9);
}

Less intrusive featured articles

.cdx-card__text {
	line-height: 1;
	font-size: 14px;
}

Force-capitalise first letters of Wikidata descriptions

.cdx-menu-item__text__description:first-letter,
.cdx-card__text__description:first-letter {
	text-transform: uppercase;
}