/material-vector

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)
  • 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)
  • Edge: open the menu "Settings and more" (Alt+F), choose "Settings", then "Appearance", and select "Dark" option on "Default theme" section (support page)

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: Firefox and Chrome don't support dark mode on Linux by the OS settings and Edge doesn't have a Linux version

Compatibility

Wikis

Fully compatible

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

  • mediawiki.org
  • *.miraheze.org
  • *.wikibooks.org
  • wikidata.org
  • *.wikimedia.org
  • *.wikinews.org
  • *.wikipedia.org
  • *.wikiquote.org
  • *.wikisource.org
  • *.wikiversity.org
  • *.wikivoyage.org
  • *.wiktionary.org

Partially compatible

  • 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)

  • desciclopedia.org
  • *.everybodywiki.com
  • *.icannwiki.org
  • iphonedevwiki.net
  • theiphonewiki.com
  • *.uncyclomedia.co
  • *.uncyclomedia.org
  • uncyclopedia.ca
  • *.uncyclopedia.co
  • wiki.cancaonova.com
  • wiki.creativecommons.org

Incompatible

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

  • *.fandom.com
  • *.wikihow.com

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: