mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2025-01-05 19:34:14 +00:00
eb8f186a79
Removing all references to WikimediaUI Base and replacing them with the Codex equivalents. Also removing variables redefinitions that are not needed anymore. Only value difference is a last family added before general fallback called 'Source Serif Pro', which basically will never be visible due to the general availability of Georgia and Times. Also removing general font stack comments, see Codex design tokens comments for these context explanations. Bug: T334934 Change-Id: I61aa44e40830ffdb308aaea4ca30af0f25ba2274
181 lines
7.9 KiB
Plaintext
181 lines
7.9 KiB
Plaintext
@import 'mediawiki.skin.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
|
|
|
|
// 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
|
|
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
|
@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: 1.834em;
|
|
// 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}';
|