User:DemonDays64/vector.less

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

@import 'mediawiki.ui/variables.less';

@font-size-root: 100%; @font-size-browser: 16; // Assumed browser default of `16px`

// // == Typography == // // Detailed documentation of the font choices: // https://www.mediawiki.org/wiki/Wikimedia_User_Interface/Use_cases/Font_family_stack // Source of this font stack definition in WikimediaUI Base: // https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$202 // See T73240 for a related discussion concerning the serif font stack. // Note: Numbers in Georgia font are non-lining, the font-feature to change this is documented at: // https://www.mediawiki.org/wiki/Talk:Typography_refresh/Archive_2#Numbers_looks_weird_in_article_title

@font-family-serif: 'Linux Libertine', // GNU+Linux, alternative to Times New Roman. 'Georgia', // Windows, intended as a serif typeface that would appear elegant but // legible printed small or on low-resolution screens. 'Times', // Windows, very similar to Times New Roman with subtle differences. serif; // Platform default: 'Times New Roman' on Windows.

// // Body content uses the user setting in browser / the system default sans-serif font: // Arial on Windows, Roboto on Android. // FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.

@font-family-sans: sans-serif;

// Fallback for headings, language: ja,he,ko. See T73240,T65817,T65843,T65844,T65827. @font-family-sans--fallback: sans-serif;

// // == Page content == //

@background-color-base: #fff; @color-base: #222; @color-base--emphasized: #000; @color-link: #0645ad; @color-link--visited: #0b0080; @color-link-new: #a55858; @color-link-selected: @color-base;

@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`. @font-size-reset: @font-size-root; @font-size-heading-1: 1.8em; @font-size-heading-2: 1.5em; @font-size-heading-3: 1.2em; @font-size-notification: 0.8em; @font-size-site-notice: 0.8em; @line-height-base: 1.6; @line-height-heading: 1.3; @line-height-code: 1.3; @line-height-footer-info: 1.4; @line-height-footer-buttons: 2;

// FIXME: Use global variable since Echo and CentralNotice use this variable @border-color-content: #a7d7f9; // Due to darker background gradient, border needs to be darkened for aligned visual perception. @border-color-content--tabs-inactive: darken( @border-color-content, 10% ); @padding-content: 1em;

// Navigation @background-color-secondary: #f6f6f6; @color-nav-subtle: #444; // Navigation `line-height` has to be set in `em`s due to a rendering calculation issue. @line-height-nav: 1.125em;

// Navigation: Main @font-size-nav-main: inherit;

@font-size-nav-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.

@font-size-nav-main-body: unit( 12 / @font-size-browser, em ); @margin-left-nav-main-body: 0.5em;

// Navigation: Personal tools @background-position-nav-personal-icon: left ( 4 / @font-size-browser / @font-size-nav-personal ); @background-size-nav-personal-icon: 14 / @font-size-browser / @font-size-nav-personal; @font-size-nav-personal: 0.75em; // Using `unit()` without second parameter to achieve a unitless output for `line-height`. @line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.

// Tabs @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.

// Search @width-search-button: 24 / @font-size-browser / @font-size-search-input; @font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.

// Footer // FIXME: Currently calculates at 11.2px, which is worth nothing and unreadable for a big // part of our audiences. Push up _at least_ to 12px. @font-size-footer: 0.7em;