MediaWiki 1.31 upgrade/CSS changes

In general, it has been found that MW 1.31 is far less tolerant of small coding gaffes, like missing end quotes for example, than previous versions. If CSS appears to be only partially loading, check for similar errors.

Vector tabs

Share tab changes to black on hover

Fix:

div.vectorMenu h3:hover span,
div.vectorMenu h3:focus span {
   color: #fff; /* or whatever colour suits */
}

Down arrows on the share and more menus look wrong

Arrows are in the wrong place

Fix:

div.vectorMenu h3 span::after {
   right: -5px; /* or whatever value works */
   top: 0;  /* or whatever value works */
}

Arrows are hard to see

Arrow too dark	Arrow too light
div.vectorMenu h3 span::after { filter: invert(1); }	div.vectorMenu h3 span::after { filter: unset; }

Arrows conflict with custom arrows

To remove default down arrows:

div.vectorMenu h3 span::after {
   display: none;
}

To remove custom arrows: depends on the wiki's custom styles. The following is the former default arrow code that may still be present on some wikis and can be removed to use the new default arrows:

Hydra	Hydradark
div#mw-head div.vectorMenu { background-image:url(https://commons.gamepedia.com/media/commons.gamepedia.com/8/87/Vector_menu_downarrow_dark.png); }	div#mw-head div.vectorMenu { background-image:url(https://commons.gamepedia.com/media/commons.gamepedia.com/0/0b/Vector_menu_downarrow.png); }

Watch/unwatch button is in the wrong place

1.31 changed the CSS selector used to apply the default styles to the watch/unwatch (star) button, which caused the default styles to override certain custom styles that some wikis apply to their watch buttons. To return the button to its pre-update custom appearance, the first step is to update the selectors in the custom styles to match the default:

Replace	With
#ca-unwatch	.vectorTabs #ca-unwatch
#ca-watch	.vectorTabs #ca-watch

The above changes are also needed when those selectors are combined with others. For example, #ca-unwatch.icon a would need to be updated to .vectorTabs #ca-unwatch.icon a.

Additional fixes

If the above selector changes don't solve the positioning issues, one of the following fixes may be needed in addition. Depending on your wiki's styles, these fixes may not be effective.

Watch button...	Fix
Has a custom height set	.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a { padding-top: 0; }
Does not have a custom height set	.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a { padding-top: 16px; /* adjust as needed */ }

Logo and sidebar

Margin too large above sidebar

Fix:

#mw-panel #p-logo + .portal {
	margin-top: 0;
}

Logo overlaps the content area or navigation on small screens

Fix:

#p-logo {
	left: 0;
}
@media screen and (min-width: 982px) {
	#p-logo {
		left: 0.5em;
	}
}

Wiki source editor

Edit options text too dark on hydradark wikis

div.editOptions now needs to have the text colour specified on hydradark wikis:

.editOptions {
	color: #fff; /* change as needed */
}

Editor "insert" buttons out of place

Msupload button causes rest of "insert" section of toolbar to be weirdly pushed down. The difference between it and the other insert section buttons is a lack of a vertical-align. Therefore, solution:

#msupload-container {
    vertical-align: middle;
}

History

Selected revisions text too dark on hydradark wikis

#pagehistory li.selected {
	color: #fff; /* change as needed */
}

Notifications

The selector for the background for "All Notifications" has changed and in Hydradark, this makes for a white bg with white text. The following css fixes that:

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    background: inherit;
}

System messages table

With Mediawiki 1.31, the old arrow icons used for navigating this large table have been replaced with text-style buttons. On darker themed wikis, the "First" and "Previous" buttons can be difficult to read. You can add some css to heighten the contrast.

Add:

.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    color: #000;
}

Mobile view

Mobile Frontend updates have added some changes to CSS that can break some mobile headers.

CSS may need to be made more specific in Mediawiki:Mobile.css. This can be accomplished by prepending .skin-minerva to the rule declaration.

Y ticketed Fix for mobile CSS not loading at all

Consistently found errors

These are CSS errors that will likely not be tolerable on MediaWiki 1.31 that have been consistently on wikis with older default-loadout CSS:

• color rule missing # in table.wikitable td, table.wikitable tr td, table.wikitable > tr > td, table.wikitable > * > tr > td ruleset.
• Border color incomplete on table.navbox (#67676 should be #676767)
• ox instead of px, frequently but not exclusively found in border size properties.
• Misplaced { in front page image styles on 2 column main pages:

#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image
    height: 114px;{

• background-repeat: x,y should be background-repeat: repeat.
• #transparent, #black and other similar wrong color values.
• Missing semicolon in box-shadow property of .fpbanner ruleset.
• Misplaced comma in link ruleset:

a, 
a:visited,
div#content a.extiw,
div#content a.extiw:visited,
div#content a.external, {