mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-13 17:57:06 +00:00
13de4ff225
We will couple the roll out of the consolidated user links code with the roll out of the new icon styles. This change is restricted to the user links feature and will result in some slight UI discrepencies until Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5 is merged. Bug: T191021 Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
174 lines
6.7 KiB
Plaintext
174 lines
6.7 KiB
Plaintext
@import 'mediawiki.ui/variables.less';
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
// Sizing calculation primitives.
|
|
@font-size-root: 100%;
|
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
|
|
|
//
|
|
// == Page content ==
|
|
//
|
|
|
|
@color-base--subtle: #54595d;
|
|
@color-link: #0645ad;
|
|
@color-link--visited: #0b0080;
|
|
@color-link-new: #a55858;
|
|
@color-link-selected: @color-base;
|
|
|
|
// See oojs/ui/src/themes/wikimediaui/common.less.
|
|
@background-color-frameless--hover: rgba( 0, 24, 73, 7/255 ); // equivalent to @wmui-color-base90 on white
|
|
|
|
@outline-color-base--focus: @color-primary;
|
|
|
|
//
|
|
// == Icons ==
|
|
// FIXME: Use mediawiki.skin.variables when available.
|
|
//
|
|
@icon-touch-area-sm: 34;
|
|
@icon-touch-area-md: 44;
|
|
@font-size-browser: 16; // Assumed browser default of `16px`.
|
|
// Small icon
|
|
@icon-glyph-size-sm: 16;
|
|
@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em );
|
|
@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em );
|
|
// Medium icon
|
|
@icon-glyph-size-md: 20;
|
|
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
|
|
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
|
|
|
|
//
|
|
// == Typography ==
|
|
//
|
|
// Typography in Wikimedia Design Style Guide:;
|
|
// https://design.wikimedia.org/style-guide/visual-style_typography.html
|
|
// Historic overview and background information of fonts in Wikimedia software:
|
|
// 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
|
|
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
|
|
|
// Body content uses the user setting in browser / operating system default sans-serif font:
|
|
// For example, Arial on Windows, Roboto on Android.
|
|
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
|
|
// @font-family-sans is set in mediawiki.variables/variables.less
|
|
|
|
// Fallback for headings, language: ja,he,ko. See T73240, T65817, T65843, T65844, T65827.
|
|
@font-family-sans--fallback: sans-serif;
|
|
|
|
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
|
@font-size-base--trident-hack: calc( 1em ~'*' unit( @font-size-base ) );
|
|
@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;
|
|
@font-size-footer: unit( 12 / @font-size-browser, em );
|
|
|
|
@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;
|
|
|
|
@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
|
|
|
|
@size-icon: unit( 20 / @font-size-browser, em );
|
|
|
|
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
|
|
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
|
|
|
|
// 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% );
|
|
@border-color-portal-heading: #c8ccd1;
|
|
// Use `rgba()` notation for better Safari support, see T254489.
|
|
@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
|
|
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
|
@padding-top-content: 1.25em;
|
|
@padding-horizontal-content: 0.5em;
|
|
@padding-blockquote: 8px 32px;
|
|
|
|
// 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-start-nav-main-body: 0.5em;
|
|
|
|
// Navigation: Portal
|
|
// Font size of the Portal links.
|
|
@font-size-portal-list-item: @font-size-nav-main-body;
|
|
|
|
// Margin space from the start of the Portal (left edge in LTR
|
|
// languages).
|
|
@margin-start-portal: 0.7em;
|
|
|
|
// Margin space from the end of the Portal (right edge in LTR
|
|
// languages).
|
|
@margin-end-portal: 0.6em;
|
|
|
|
// Margin space from the start of the Portal body (left edge in LTR languages).
|
|
@margin-start-portal-body: @margin-start-nav-main-body;
|
|
|
|
// Navigation: Personal tools
|
|
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
|
|
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
|
|
@top-personal-tools: 6px;
|
|
@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`.
|
|
@padding-horizontal-tabs: 8px;
|
|
|
|
// Search
|
|
@min-width-search-button: 28px;
|
|
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
|
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
|
// Derived from @spacing-start-typeahead-search-figure + @spacing-end-typeahead-search-figure in WVUI
|
|
// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#645
|
|
@size-search-expand: 24px;
|
|
|
|
// language button
|
|
@height-lang-button: unit( 32 / @font-size-browser, em );
|
|
|
|
// Z-indices
|
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
|
// @z-index-ui-datepicker-cover: -1;
|
|
@z-index-base: 0;
|
|
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
|
|
@z-index-header: 4;
|
|
@z-index-sidebar: 1;
|
|
@z-index-menu-checkbox: 1;
|
|
@z-index-search-button: 1;
|
|
@z-index-search-loader: 1;
|
|
// Ensure that this is displayed on top of .vector-body and clickable.
|
|
@z-index-indicators: 1;
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-range: 1;
|
|
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
|
|
@z-index-menu: 3;
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-handle: 2;
|
|
// Display on top of page tabs (T39158, T50078).
|
|
@z-index-personal: 100;
|
|
@z-index-sidebar-button: 101;
|
|
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
|
|
// @z-index-ui-selectable-helper: 100;
|
|
@z-index-overlay: 101;
|
|
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
|
|
// @z-index-ui-tooltip: 9999;
|
|
|
|
// Transitions
|
|
@transition-duration-base: 100ms;
|