mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-13 17:57:06 +00:00
bd83398659
Creates a new skins.vector.search module that replaces the searchSuggest module from MediaWiki core. This module creates a new Vue app using the WVUI search widget for the new search experience. The legacy search input form is still retains on pageload, and the new search kicks on search input focus. In order to manage that transition, the legacy search input is styled to resemble the new WVUI input, and the new input is manually focused after the component mounts. Vue is also added as a dev-dependency to help with type-checking. Other changes: * the entry in skin.json is reordered alphabetically after skins.vector.js Bug: T264355 Change-Id: Ibb9561a77a14734297cb4d0ddcd415fc0750b45d
144 lines
5.5 KiB
Plaintext
144 lines
5.5 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;
|
|
|
|
//
|
|
// == 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`.
|
|
// 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`.
|
|
|
|
// Search
|
|
@width-search-button: unit( 24 / @font-size-browser / @font-size-search-input, em );
|
|
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
|
|
|
// 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: 3;
|
|
@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 .mw-body-content 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: 2;
|
|
// 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;
|