MediaWiki 1.33 upgrade/CSS changes

From Gamepedia Help Wiki
Jump to: navigation, search

Here are CSS changes that are likely needed with the MediaWiki 1.33 upgrade.

Preferences[edit | edit source]

Example Drop-down menus on dark-themed Wiki Preference pages loads with a white flash. Element .oo-ui-dropdownInputWidget.oo-ui-widget-enabled has a white background. → Ticket was sent!


TOC collapse/show link[edit | edit source]

The "link" to show/collapse the TOC on a page is no longer actually an <a> element. As such, it will need to be specifically styled to match the link color/style as desired.

label.toctogglelabel { color: #F37F20; }

TablePager class[edit | edit source]

The TablePager class (previously used on pages such as Special:AllMessages and Special:AbuseFilter/history) does not exist anymore. As such, previous selectors that were dependent on that class might not be working anymore, notably the hover color. This was replaced some time ago by .mw-datatable but continued to work until the most recent version of MediaWiki.

The selectors for the pagination for these multi-page tables has also changed. The new selectors for the graphical navigation arrows are:

  • .oo-ui-image-progressive.oo-ui-icon-first, .mw-ui-icon-first-progressive::before
  • .oo-ui-image-progressive.oo-ui-icon-previous, .mw-ui-icon-previous-progressive::before
  • .oo-ui-image-progressive.oo-ui-icon-next, .mw-ui-icon-next-progressive::before
  • .oo-ui-image-progressive.oo-ui-icon-last, .mw-ui-icon-last-progressive::before

they all use a background-image whose color can be changed by looking for the following string: g fill=%22%2336c and changing the final 3 characters.

Recent Changes[edit | edit source]

Light-themed Wikis:
This could need a tweak of the background colour on light-themed Wikis with a coloured content background. Standard is #f8f9fa, which is okay when content area is actually white or light grey.

Suggestion to either make it transparent or to change it to rgba(255,255,255,0.1). Font color should be considered.

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { background-color: #f8f9fa; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }


Border colour probably also should be altered. Standard is #a2a9b1 - which is a light grey - okay with the white content background.
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { border: 1px solid #a2a9b1; border-bottom: 0; background-color: #f8f9fa; border-radius: 2px 2px 0 0; padding: 0 0.6em 0.6em 0.6em; margin-top: 1em; line-height: normal; }

Dark-themed Wikis standard:
.skin-hydradark .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { background: transparent; }

Standard on dark-themed Wikis is just transparent and probably can stay on most Wikis.

Buttons[edit | edit source]

(Live updates, Saved Filters, 500 Changes)
Can be necessary to tweak it with the chosen Wiki colors.

Light-themed Wiki standard (no background-color):
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: #222; }

If you add a background color here, this also will affect some button elements inside the Pop-up element. This also has standard background-color #fff, it can be necessary to adjust it, depending on the Wiki's colors.
.oo-ui-popupWidget-popup { background-color: #fff; border: 1px solid #a2a9b1; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.25); }

Light-themed Wiki hover element standard:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { background-color: #fff; color: #444; border-color: #a2a9b1; }

Light-themed Wiki active element standard:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: #2a4b8d; color: #fff; border-color: #2a4b8d; }

Misc[edit | edit source]

Role-Buttons[edit | edit source]

Element should be styled especially on dark wikis - text of the role-buttons (see Special:ActiveUsers, when you choose a role from the drop-down menu) is not readable, because of the #f8f9fa background and white font! This might be related to the issue named under "Preferences" on this page.
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) { background-color: #f8f9fa; padding-right: 1.64285714em; }
Also white bg on dark wikis:
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { background-color: #fff; -webkit-transition: border-color 250ms,box-shadow 250ms; -moz-transition: border-color 250ms,box-shadow 250ms; transition: border-color 250ms,box-shadow 250ms; }


"Save button" "Save draft button"[edit | edit source]

You can find this in the preferences panel at the bottom. The standard background color, when the button is not active is #c8ccd1. Font colour is #fff, which makes it a little hard to read.
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { background-color: #c8ccd1; color: #fff; border-color: #c8ccd1; }

And for some more styling: The active button standard background color, when something was changed in the preferences is #36c. Might need a color adjustment.
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #fff; background-color: #36c; border-color: #36c; }

Same element with a hover effect. Standard:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: #447ff5; border-color: #447ff5; }

Checkbox[edit | edit source]

You also can find this on the preferences panel - editing, misc, etc. or if you edit this page, right below the summary. Standard also is #36c, a blue, which might fit or not fit to your chosen Wiki colors.
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span { background-color: #36c; border-color: #36c; }