mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-04 12:09:30 +00:00
e3d2ab5031
In preparation for enabling responsive Vector on Wikifunctions, we lower the support threshold to 320px for Vector. Minor adjustments are made to the header to make it use two lines at lower resolutions. Fixes to tables to make them responsive will be made shortly as part of T330527 which will complete the responsive behaviour. Bug: T361573 Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
169 lines
7.1 KiB
Plaintext
169 lines
7.1 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-color-portal-heading: @border-color-subtle;
|
|
@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}';
|