mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-12 07:55:21 +00:00
791b9bb0d5
Removes padding from the top and bottom of the .mw-body element so that the border of the sidebar menus align with border of the tab area. Also removes the bottom margin on the sidebar menus so that the bottom of the menus align with the bottom of the content. (This was an artifact from the gray background design). **Visual Changes** - The content will move up by 8px with this change. - The bottom of the TOC will also move down by 24px to align with the content. Bug: T351432 Change-Id: If0a8189b228ffb6fb63dfd8be40955653caa0b34
174 lines
7.3 KiB
Plaintext
174 lines
7.3 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: 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 );
|
|
|
|
// 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-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;
|
|
|
|
// 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}';
|