mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 19:59:35 +00:00
b55d95c70c
Replacing the legacy Vector breakpoint tokens with the Codex standard ones. All names have been unified, only some legacy values remain for backwards compatibility. Also - replacing a wrongly applied min-width with the correct max-width token, - replacing a width with an equal value min-width one and - removing the now equal value mobile min-width one. Note that we can't do some reference magic here alike `@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as this would take the Codex value from skin variables and not the legacy value. Also note, that we could move all those Vector legacy definitions into Vector's 'mediawiki.skin.variables.less' file(s), but that would mean that extensions don't rely on the Codex default values, but on Vector's and we want latter to move to the standard, also in foresight of further standardization to build for all feature teams like a shared Grid. Bug: T331403 Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
180 lines
7.8 KiB
Plaintext
180 lines
7.8 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
|
|
//
|
|
// == Media query breakpoints ==
|
|
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
|
|
//
|
|
@max-width-breakpoint-mobile: 719px;
|
|
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
|
|
@max-width-breakpoint-tablet: 999px;
|
|
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
|
|
@max-width-breakpoint-desktop: 1199px;
|
|
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
|
|
|
|
// 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 );
|
|
|
|
// Sizing calculation primitives.
|
|
@font-size-root: 100%;
|
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
|
|
|
//
|
|
// == Page content ==
|
|
//
|
|
|
|
@color-link-selected: @color-base;
|
|
|
|
//
|
|
// == Typography ==
|
|
//
|
|
// Font family stack is defined in Codex “WikimediaUI“ theme, available
|
|
// through 'mediawiki.less/mediawiki.skin.variables.less' in MediaWiki core:
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex-design-tokens/src/theme-wikimedia-ui.json#429
|
|
// See also Vector's 'mediawiki.skin.variables.less' overrides.
|
|
|
|
@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-code: 1.3;
|
|
@line-height-footer-info: 1.4;
|
|
@line-height-footer-buttons: 2;
|
|
|
|
@size-icon: unit( 20 / @font-size-browser, 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-start-blockquote: 4px @border-style-base #eaecf0;
|
|
@padding-top-content: 0.5em;
|
|
@padding-blockquote: 8px 32px;
|
|
|
|
@background-color-secondary--modern: #f8f9fa;
|
|
@background-color-page-container: @background-color-base;
|
|
|
|
// Navigation
|
|
@background-color-secondary: #f6f6f6;
|
|
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
|
|
@line-height-nav: 1.125em;
|
|
|
|
// 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
|
|
@padding-horizontal-tabs: 8px;
|
|
@padding-top-tabs: 12px;
|
|
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
|
|
|
|
// Dropdowns
|
|
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
|
@padding-vertical-dropdown-menu-item: 6px;
|
|
@padding-horizontal-dropdown-menu-item: 14px;
|
|
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
|
|
|
// 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;
|
|
|
|
// 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-xx-small ) - @padding-top-pinned-element;
|
|
|
|
// TOC
|
|
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
|
|
@size-toc-subsection-toggle-icon: unit( @font-size-large, rem);
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// Pre-content
|
|
@margin-top-pre-content: 8px;
|
|
|
|
// Header
|
|
// T245190 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-header: unit( 50px / @font-size-browser, rem );
|
|
|
|
// Z-indices
|
|
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
|
|
@z-index-header: @z-index-stacking-3;
|
|
@z-index-search-button: @z-index-stacking-1;
|
|
@z-index-search-loader: @z-index-stacking-1;
|
|
// Ensure that this is displayed on top of .vector-body and clickable.
|
|
@z-index-indicators: @z-index-stacking-1;
|
|
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
|
|
// @z-index-dropdown: 50; in Codex.
|
|
// @z-index-overlay is 450 in new Codex tokens; was 101.
|
|
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-range: 1;
|
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
|
// @z-index-ui-datepicker-cover: -1;
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-handle: 2;
|
|
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
|
|
// @z-index-ui-selectable-helper: 100;
|
|
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
|
|
// @z-index-ui-tooltip: 9999;
|
|
|
|
// Transitions
|
|
// Sticky header hide/show transition
|
|
@transition-sticky-header: transform 250ms linear;
|
|
|
|
//
|
|
// Layout
|
|
//
|
|
@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
|
|
@padding-horizontal-page-container: unit( 24px / @font-size-browser, em );
|
|
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, em );
|
|
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, em );
|
|
// 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
|
|
// navigating sections via the table of contents. When changing this value, also change the value in
|
|
// resources/skins.vector.scripts/setupIntersectionObservers.js
|
|
@scroll-padding-top: 75px;
|
|
|
|
// Grid
|
|
@grid-row-gap: 24px;
|
|
@grid-column-gap: 36px;
|
|
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
|
|
@width-page-content: minmax(0, 1fr);
|
|
@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
|
|
@grid-template-column-desktop: ~'@{width-column-start-desktop} @{width-page-content}';
|
|
@grid-template-column-desktop-wide: ~'@{width-column-start-desktop-wide} @{width-page-content}';
|