mediawiki-skins-Vector/resources/common/variables.less

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

//
// == Media query breakpoints ==
//
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px

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

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

@color-base--subtle: #54595d;
@color-link-selected: @color-base;

@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;
@border-color-pagetitle: #eaecf0;
// 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: 0.5em;
@padding-horizontal-content: 0.5em;
@padding-blockquote: 8px 32px;
@border-tabs: 1px @border-style-base #eaecf0;

// 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;

// Menu button
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16

// Sidebar
@width-sidebar-px: 220;
@width-sidebar-px-wide: 244;
@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
@margin-toc-start-content-wide: unit( ( @width-sidebar-px-wide + 52 ) / @font-size-browser, em ); // 18.5em;
@width-sidebar: unit( @width-sidebar-px / @font-size-browser, em );
@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );

// Search
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
@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 @size-typeahead-search-focus-addition in Codex
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#703
@size-search-expand: 24px;
@margin-end-search: 12px;

// language button
@height-lang-button: unit( 32 / @font-size-browser, em );

// T296321 For sticky header, set an explicit height. This is needed for scroll padding
// and for other sticky elements on the page. Setting the height in relative units enables
// the header's height to adapt to the browser's font size setting. Because
// this variable is used to determine top offsets for sticky elements where the
// font-size might not be 16px, using rem avoids the cascading effects of em units.
@height-sticky-header: unit( 50px / @font-size-browser, rem );

// 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;
// Sticky header hide/show transition
@transition-sticky-header: transform 250ms linear;

//
// Layout
//
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );

// Grid
@grid-row-gap: 24px;