mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-03 19:57:19 +00:00
783d67e077
Replacing Vector specific variable with standard token that is meant for exactly the applied use cases. Note, I've left `border-color-subtle-transparent` because of that extra engineering leg. I assume it was meant for animating the property, which is not there. It seems better to me to replace this variable too with `border-color-transparent`. Change-Id: If264e04e576f044b98ec0d61b085f65af0110b6d
168 lines
7 KiB
Plaintext
168 lines
7 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( 300px / @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: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
|
@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 );
|
|
|
|
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
|
|
@border-start-blockquote: 4px @border-style-base @border-color-muted;
|
|
@padding-blockquote: 8px 32px;
|
|
|
|
@background-color-secondary--modern: @background-color-neutral-subtle;
|
|
@background-color-page-container: @background-color-base;
|
|
|
|
// Navigation
|
|
// 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;
|
|
|
|
// Content boxes
|
|
@border-radius-content-box: 4px;
|
|
@border-color-content-box: @background-color-interactive;
|
|
// Content padding
|
|
@padding-vertical-content-box: @spacing-150;
|
|
@padding-horizontal-content-box: @spacing-150;
|
|
// content box changes *horizontal* padding at wide resolutions
|
|
@padding-horizontal-content-box-wide: @spacing-300;
|
|
// Content box shadow
|
|
@box-shadow-content-box: @box-shadow-drop-medium;
|
|
|
|
// Dropdowns & menus
|
|
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
|
@padding-horizontal-dropdown-menu: 16px;
|
|
@padding-vertical-dropdown-menu: 16px;
|
|
@padding-vertical-dropdown-menu-item: 6px;
|
|
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
|
|
|
// TOC
|
|
@size-toc-subsection-toggle: 22px;
|
|
@size-toc-subsection-toggle-icon: 0.7rem;
|
|
@toc-list-item-padding-start: 12px;
|
|
|
|
// 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;
|
|
// 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, rem ); // T305069 - 99.75rem @ 16
|
|
@max-width-content-container: unit( 948px / @font-size-browser, rem ); // T335155
|
|
@padding-horizontal-page-container: unit( 24px / @font-size-browser, rem );
|
|
@padding-horizontal-page-container-desktop: unit( 44px / @font-size-browser, rem );
|
|
@padding-horizontal-page-container-desktop-wide: unit( 52px / @font-size-browser, rem );
|
|
// 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: 24px;
|
|
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
|
|
@width-page-content: minmax(0, 1fr);
|
|
@width-column-desktop: unit( 196px / @font-size-browser, rem ); // Total width including gap is 232px
|
|
@width-column-desktop-wide: unit( 248px / @font-size-browser, rem ); // Total width including gap is 284px
|
|
@grid-template-column-desktop: ~'@{width-column-desktop} @{width-page-content}';
|
|
@grid-template-column-desktop-wide: ~'@{width-column-desktop-wide} @{width-page-content}';
|