mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 23:55:53 +00:00
91af0e098d
Now that the header collapses at small resolutions (I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the search toggle to show the search box when clicked and hides it when the user clicks outside the search box. * Adds searchToggle.js to perform handle the toggle behavior of the searchbox. * Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less so that these can be used to set the start margin of the search box (enabling its start edge to match the tab text start edge). * Modifies screen.less to only apply search max-width when >= @width-breakpoint-tablet Bug: T284242 Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
158 lines
6.1 KiB
Plaintext
158 lines
6.1 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`.
|
|
|
|
@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;
|