/material-vector

MediaWiki Vector skin with Material Design inspiration

Primary LanguageCSSMIT LicenseMIT

Material Vector

Image

Modified CSS of MediaWiki's default skin Vector used by me on Wikimedia Foundation projects (like Wikipedia, Commons, etc.) and possible other MediaWiki-based websites using Vector skin with inspiration in Material Design.

Files

Features

  • Sticky navbar with user actions, notifications, and search bar
  • Page actions positioned at the left side
  • Improved table of contents styles
  • Content text justified with automatic hyphenation (hyphenation only works with Chromium-based browsers on macOS and Firefox)
  • Dark mode (preliminary support)
  • Use globally: Material Vector don't override other MediaWiki skins customized styles

Specific for the Portuguese Wikipedia

Installing

Using MediaWiki

MediaWiki have built-in custom user stylesheets support. If this feature has been activated, you must create User:YourUsername/common.css (or User:YourUsername/vector.css) page with the contents of global.css. To enable it on all Wikimedia wikis, you must create a page at https://meta.wikimedia.org/wiki/Special:MyPage/global.css.

Using a browser extension

Stylus

Install Stylus, available on Chrome Web Store for Google Chrome, Microsoft Edge (enable Allow extensions from other stores option) or other Chromium-based browser, on Mozilla Addons for Firefox and Opera Addons for Opera. Them, access material-vector.user.css from here and click on "Install style" button.

Note

Stylus doesn't support @import CSS at-rule that Material Vector uses to get Roboto and Roboto Mono webfont (for the users that doesn't have these typefaces installed) from Google Fonts within @-moz-document Mozilla Format at-rule, used to specify the URLs that the stylesheets will be applied.

For best viewing the theme, you can add the below code on Stylus by clicking into the extension icon, option "Open style manager", then click on "Material Vector" and choose "Import" option on "Mozilla Format" section. After that, copy the code and click on "Append to style" button.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Roboto+Mono:400,100,100italic,300,300italic,500,400italic,500italic,700,700italic|Cabin:400,400italic,500,500italic,600,600italic,700,700italic&subset=latin,greek,cyrillic,greek-ext,vietnamese,cyrillic-ext,latin-ext");

This stylesheet will be loaded on all pages that you visit, but not affects it. You also can manually specific URLs that will be used with these fonts.

Alternatively, you can download and install these typefaces from Google Fonts: Roboto / Roboto Mono.

  • On Windows, unzip downloaded files and copy fonts to C:\Windows\Fonts folder or open Settings (Win+I), click on "Personalization", then "Fonts" and drag fonts files to the Settings window

If you don't care about this issue, your system default font will be displayed instead.

Dark mode

Setting under browser

  • Chrome: dark mode must be enabled on the OS settings (support page)
  • Edge: open the menu "Settings and more" (Alt+F), choose "Settings", then "Appearance", and select "Dark" option on "Default theme" section (support page)
  • Firefox: dark mode must be enabled on the OS settings or using ui.systemUsesDarkTheme property of about:config, setting "1" (without quotes) number value (support page for about:config)

Setting under OS

To work correctly within Microsoft Edge, use "System default" option on the browser settings

  • Windows 10 (version 1607 (Anniversary Update) or latter): open Settings (Win+I), then "Personalization" > "Colors", and select "Dark" option on "Choose your default Windows mode" section (support page)
  • macOS (version 10.14 (Mojave) or latter): open Apple menu (Image), then "System Preferences", click on "General" and select "Dark" on "Appearance options" section (support page)
  • Linux: Chrome, Edge (Dev) and Firefox don't support dark mode on Linux by the OS settings

Compatibility

Wikis

Fully compatible

Material Vector works fine with these wikis, with less or none issues

Wiki URL
MediaWiki Wiki mediawiki.org
Miraheze *.miraheze.org
Wikibooks *.wikibooks.org
Wikidata wikidata.org
Wikimedia Foundation *.wikimedia.org
Wikinews *.wikinews.org
Wikipedia *.wikipedia.org
Wikiquote *.wikiquote.org
Wikisource *.wikisource.org
Wikiversity *.wikiversity.org
Wikivoyage *.wikivoyage.org
Wiktionary *.wiktionary.org

Partially compatible

Wiki URL
MozillaWiki wiki.mozilla.org

Possibly compatible

These wikis use Vector as their default skin or have an option to enable it, but uses an older/unsupported MediaWiki version (not added to material-vector.user.css)

Wiki URL
Portuguese Uncyclopedia (Desciclopédia em português) desciclopedia.org
EverybodyWiki *.everybodywiki.com
ICANNWiki *.icannwiki.org
Infogov São Paulo infogov.imprensaoficial.com.br
iPhone Development Wiki iphonedev.wiki
The iPhone Wiki theiphonewiki.com
Uncyclomedia Foundation *.uncyclomedia.co
UnMeta-Wiki *.uncyclomedia.org
Uncyclopedia (first fork) *.uncyclopedia.co
Uncyclopedia (second fork) uncyclopedia.com
Wiki Canção Nova wiki.cancaonova.com
Creative Commons Wiki wiki.creativecommons.org
The Document Foundation Wiki wiki.documentfoundation.org
VideoLAN Wiki wiki.videolan.org

Incompatible

These wikis don't use Vector as their default skin and doesn't have an option to enable it

Wiki URL
Fandom *.fandom.com
wikiHow *.wikihow.com

New Vector

The wikis listed below are testing the new Vector skin by default. Logged users of these wikis can opt-out, and the users of the other wikis can opt-in for the new skin. See Reading/Web/Desktop Improvements page on MediaWiki wiki for aditional information.

Wiki URL Group
Wikimedia Incubator incubator.wikimedia.org Second group
Office Wiki office.wikimedia.org First group
Bengali Wikipedia (বাংলা উইকিপিডিয়া) bn.wikipedia.org Second group
Basque Wikipedia (Euskarazko Wikipedia) eu.wikipedia.org First group
Persian Wikipedia (ویکی‌پدیای فارسی) fa.wikipedia.org First group
French Wikipedia (Wikipédia en français) fr.wikipedia.org First group
Hebrew Wikipedia (ויקיפדיה העברית) he.wikipedia.org First group
Korean Wikipedia (한국어 위키백과) ko.wikipedia.org Second group
Portuguese Wikipedia (Wikipédia em português) pt.wikipedia.org Second group
Serbian Wikipedia (Википедија на српском језику) sr.wikipedia.org Second group
Turkish Wikipedia (Türkçe Vikipedi) tr.wikipedia.org Second group
Venetian Wikipedia (Wikipedia Vèneta) vec.wikipedia.org Second group
French Wiktionary (Wiktionnaire en français) fr.wiktionary.org First group
Portuguese Wikiversity (Wikiversidade em português) pt.wikiversity.org First group
German Wikivoyage (Deutschsprachige Wikivoyage) de.wikivoyage.org Second group

Browsers

Material Vector was been tested in the latest versions of the following desktop browsers (no mobile support, since Minerva is the default mobile skin for Wikimedia and possibility others MediaWiki-based wikis)

License

Material Vector:

Icons used: