2018-05-20 18:58:47 +00:00
|
|
|
@import 'mediawiki.skin.variables.less';
|
2017-07-20 21:58:01 +00:00
|
|
|
|
2022-06-23 21:33:47 +00:00
|
|
|
//
|
|
|
|
// == 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
|
|
|
|
|
2023-04-18 21:57:55 +00:00
|
|
|
// Defines the minimum viewport width, at which point the layout will not get any
|
|
|
|
// smaller and will start horizontal scrolling instead.
|
|
|
|
@min-width-supported: unit( 500px / @font-size-browser, em );
|
|
|
|
|
2020-08-27 09:43:55 +00:00
|
|
|
// Sizing calculation primitives.
|
2019-09-18 22:26:38 +00:00
|
|
|
@font-size-root: 100%;
|
2018-10-09 19:29:58 +00:00
|
|
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2020-03-07 09:27:37 +00:00
|
|
|
//
|
|
|
|
// == Page content ==
|
|
|
|
//
|
|
|
|
|
2019-09-26 21:12:01 +00:00
|
|
|
@color-link-selected: @color-base;
|
|
|
|
|
2023-04-23 13:48:55 +00:00
|
|
|
@outline-color-base--focus: @color-progressive;
|
2020-06-12 00:39:50 +00:00
|
|
|
|
2020-08-27 09:43:55 +00:00
|
|
|
//
|
|
|
|
// == 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
|
2020-09-16 21:29:04 +00:00
|
|
|
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
2020-08-27 09:43:55 +00:00
|
|
|
|
|
|
|
// 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.
|
2018-05-20 18:58:47 +00:00
|
|
|
// @font-family-sans is set in mediawiki.variables/variables.less
|
2020-08-27 09:43:55 +00:00
|
|
|
|
|
|
|
// Fallback for headings, language: ja,he,ko. See T73240, T65817, T65843, T65844, T65827.
|
|
|
|
@font-family-sans--fallback: sans-serif;
|
|
|
|
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
2020-08-27 08:27:50 +00:00
|
|
|
@font-size-base--trident-hack: calc( 1em ~'*' unit( @font-size-base ) );
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-reset: @font-size-root;
|
2019-09-27 17:49:02 +00:00
|
|
|
@font-size-heading-1: 1.8em;
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-heading-2: 1.5em;
|
|
|
|
@font-size-heading-3: 1.2em;
|
|
|
|
@font-size-notification: 0.8em;
|
|
|
|
@font-size-site-notice: 0.8em;
|
2020-05-14 22:19:50 +00:00
|
|
|
@font-size-footer: unit( 12 / @font-size-browser, em );
|
2020-08-27 09:43:55 +00:00
|
|
|
|
2019-09-27 04:25:59 +00:00
|
|
|
@line-height-base: 1.6;
|
2023-03-15 13:06:26 +00:00
|
|
|
@line-height-heading: 1.375;
|
2019-09-27 04:25:59 +00:00
|
|
|
@line-height-code: 1.3;
|
|
|
|
@line-height-footer-info: 1.4;
|
|
|
|
@line-height-footer-buttons: 2;
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2021-03-22 22:59:18 +00:00
|
|
|
@size-icon: unit( 20 / @font-size-browser, em );
|
|
|
|
|
2014-08-07 11:38:34 +00:00
|
|
|
// FIXME: Use global variable since Echo and CentralNotice use this variable
|
2019-09-28 07:25:09 +00:00
|
|
|
@border-color-content: #a7d7f9;
|
2017-10-08 02:58:20 +00:00
|
|
|
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
|
|
|
|
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
|
2020-06-08 21:02:09 +00:00
|
|
|
@border-color-portal-heading: #c8ccd1;
|
|
|
|
// Use `rgba()` notation for better Safari support, see T254489.
|
2020-10-19 22:23:21 +00:00
|
|
|
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
2022-06-06 21:39:57 +00:00
|
|
|
@padding-top-content: 0.5em;
|
2020-10-19 22:23:21 +00:00
|
|
|
@padding-blockquote: 8px 32px;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2022-08-03 20:27:39 +00:00
|
|
|
@background-color-secondary--modern: #f8f9fa;
|
|
|
|
@background-color-page-container: @background-color-base;
|
|
|
|
|
2014-08-07 11:38:34 +00:00
|
|
|
// Navigation
|
2019-09-26 21:12:01 +00:00
|
|
|
@background-color-secondary: #f6f6f6;
|
2019-09-27 04:25:59 +00:00
|
|
|
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
|
2019-09-29 20:21:41 +00:00
|
|
|
@line-height-nav: 1.125em;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2019-09-29 20:21:41 +00:00
|
|
|
// Navigation: Personal tools
|
2020-10-16 22:27:43 +00:00
|
|
|
@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 );
|
2020-04-06 21:57:13 +00:00
|
|
|
@top-personal-tools: 6px;
|
2019-09-29 20:21:41 +00:00
|
|
|
@font-size-nav-personal: 0.75em;
|
2019-09-27 04:25:59 +00:00
|
|
|
// Using `unit()` without second parameter to achieve a unitless output for `line-height`.
|
2019-09-29 20:21:41 +00:00
|
|
|
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
|
2019-09-18 22:26:38 +00:00
|
|
|
|
2019-09-26 23:43:42 +00:00
|
|
|
// Tabs
|
|
|
|
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
2021-06-30 07:36:23 +00:00
|
|
|
@padding-horizontal-tabs: 8px;
|
2023-02-22 13:04:29 +00:00
|
|
|
@padding-top-tabs: 12px;
|
2023-02-04 02:01:56 +00:00
|
|
|
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
|
2022-10-19 20:43:40 +00:00
|
|
|
|
|
|
|
// Dropdowns
|
|
|
|
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
2022-12-19 16:27:54 +00:00
|
|
|
@padding-vertical-dropdown-menu-item: 6px;
|
|
|
|
@padding-horizontal-dropdown-menu-item: 14px;
|
2022-11-17 04:45:51 +00:00
|
|
|
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2023-02-04 02:01:56 +00:00
|
|
|
// Scroll Indicator
|
|
|
|
@height-scroll-indicator: 30px;
|
|
|
|
// The amount of space that should be between the bottom of the viewport and the
|
|
|
|
// bottom of the scroll indicator.
|
|
|
|
@max-height-bottom-spacing-scroll-indicator: 16px;
|
|
|
|
|
2023-02-09 22:50:25 +00:00
|
|
|
// TOC and Page tools Pinned elements
|
|
|
|
@padding-top-pinned-element: unit( (30px - @padding-top-tabs) / @font-size-browser, em);
|
|
|
|
|
|
|
|
// Page Tools
|
|
|
|
// 2.34 (height of #firstHeading) - the padding on the pinned element to allow
|
|
|
|
// for 30px of space between the top of the pinned element and the top of the viewport.
|
|
|
|
@margin-top-pinned-page-tools: (@font-size-heading-1 * @line-height-heading) - @padding-top-pinned-element;
|
|
|
|
|
2022-12-20 18:09:01 +00:00
|
|
|
// TOC
|
2022-12-22 23:10:29 +00:00
|
|
|
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
|
2022-12-20 22:58:44 +00:00
|
|
|
@size-toc-subsection-toggle-icon: 1.834em;
|
2023-02-09 22:50:25 +00:00
|
|
|
// Add the top padding of .mw-body element to @margin-top-pinned-page-tools
|
|
|
|
// since it starts higher on the page.
|
|
|
|
@margin-top-pinned-toc: @margin-top-pinned-page-tools + @padding-top-content;
|
2022-12-20 18:09:01 +00:00
|
|
|
|
2019-09-18 22:26:38 +00:00
|
|
|
// Search
|
2022-06-13 20:57:13 +00:00
|
|
|
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
|
2020-10-30 19:39:13 +00:00
|
|
|
@min-width-search-button: 28px;
|
|
|
|
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
2019-09-18 22:26:38 +00:00
|
|
|
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
2022-02-01 20:52:16 +00:00
|
|
|
// 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
|
2021-06-30 07:36:23 +00:00
|
|
|
@size-search-expand: 24px;
|
2021-09-09 21:03:15 +00:00
|
|
|
@margin-end-search: 12px;
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2022-07-20 14:32:24 +00:00
|
|
|
// Language button
|
|
|
|
@height-button-lang: unit( 32 / @font-size-browser, em );
|
2021-05-03 13:48:46 +00:00
|
|
|
|
2023-04-29 18:22:30 +00:00
|
|
|
// Pre-content
|
|
|
|
@margin-top-pre-content: 8px;
|
|
|
|
|
2023-03-31 19:25:09 +00:00
|
|
|
// Header
|
|
|
|
// T245190 T296321 For sticky header, set an explicit height. This is needed for scroll padding
|
2021-12-07 19:41:46 +00:00
|
|
|
// 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.
|
2023-03-31 19:25:09 +00:00
|
|
|
@height-header: unit( 50px / @font-size-browser, rem );
|
2021-12-07 19:41:46 +00:00
|
|
|
|
2020-04-02 16:50:46 +00:00
|
|
|
// Z-indices
|
|
|
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
|
|
|
// @z-index-ui-datepicker-cover: -1;
|
|
|
|
@z-index-base: 0;
|
2020-11-19 17:12:53 +00:00
|
|
|
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
|
2020-12-18 17:51:44 +00:00
|
|
|
@z-index-header: 4;
|
2020-04-02 16:50:46 +00:00
|
|
|
@z-index-menu-checkbox: 1;
|
|
|
|
@z-index-search-button: 1;
|
2020-09-21 07:53:32 +00:00
|
|
|
@z-index-search-loader: 1;
|
2021-05-21 01:02:07 +00:00
|
|
|
// Ensure that this is displayed on top of .vector-body and clickable.
|
2020-04-02 16:50:46 +00:00
|
|
|
@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).
|
2020-12-18 17:51:44 +00:00
|
|
|
@z-index-menu: 3;
|
2020-04-02 16:50:46 +00:00
|
|
|
// 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;
|
|
|
|
// 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;
|
2020-03-30 20:07:35 +00:00
|
|
|
|
|
|
|
// Transitions
|
2021-12-07 19:41:46 +00:00
|
|
|
// Sticky header hide/show transition
|
|
|
|
@transition-sticky-header: transform 250ms linear;
|
2021-08-30 22:44:00 +00:00
|
|
|
|
|
|
|
//
|
|
|
|
// Layout
|
|
|
|
//
|
2022-09-15 18:53:18 +00:00
|
|
|
@max-width-page-container: unit( 1596px / @font-size-browser, em ); // T305069 - 99.75em @ 16
|
|
|
|
@max-width-content-container: unit( 960px / @font-size-browser, em ); // T305069 - 60em @ 16
|
2022-09-01 16:23:55 +00:00
|
|
|
@padding-horizontal-page-container: unit( 24px / @font-size-browser, em );
|
2022-09-15 18:53:18 +00:00
|
|
|
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em );
|
|
|
|
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em );
|
2023-02-28 19:48:31 +00:00
|
|
|
// T314419 - Scroll padding is modified primarily to bring section headings into a position that is
|
|
|
|
// easier to read, which is slightly lower than the very top of the page. The primary use-case is when
|
2023-03-06 18:51:28 +00:00
|
|
|
// navigating sections via the table of contents. When changing this value, also change the value in
|
2023-04-10 19:31:50 +00:00
|
|
|
// resources/skins.vector.scripts/setupIntersectionObservers.js
|
2023-03-06 16:49:15 +00:00
|
|
|
@scroll-padding-top: 75px;
|
2022-06-30 22:37:08 +00:00
|
|
|
|
|
|
|
// Grid
|
|
|
|
@grid-row-gap: 24px;
|
2023-01-09 18:20:21 +00:00
|
|
|
@grid-column-gap: 36px;
|
2023-01-13 19:08:51 +00:00
|
|
|
@width-column-start-desktop: unit( 196px / @font-size-browser, em ); // Total width including gap is 232px
|
|
|
|
@width-column-start-desktop-wide: unit( 248px / @font-size-browser, em ); // Total width including gap is 284px
|