wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-12 07:55:21 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.zebra.styles/variables.less

174 lines
7.3 KiB
Plaintext
Raw Normal View History

Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
@import 'mediawiki.skin.variables.less';
//
// == Media query breakpoints ==
styles: Replace legacy Vector breakpoint tokens where applicable 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
2023-10-19 07:10:22 +00:00
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
//
styles: Replace legacy Vector breakpoint tokens where applicable 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
2023-10-19 07:10:22 +00:00
@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`.
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// 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 ==
//
styles: Remove references to WikimediaUI Base and use skin variables 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
2023-10-18 07:22:22 +00:00
// 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.
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
@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;
[Zebra] Adjust content padding Introduces Codex-based spacing variables for the padding of the content area. Padding is adjusted by using CSS custom properties assigned at the HTML element, then changes only these custom properties at the new breakpoint. Also folds in changes from 3433525 (add top-margin to indicators) into the zebra module. Bug: T335155 Change-Id: Ic4883b86043882bd2ef5f71b3079896caab87531
2023-04-28 16:34:20 +00:00
// 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;
Add initial Zebra design update for page layout Implements the zebra design update via the skins.vector.zebra.styles module. Refactors: - Moves common variable and mixin imports from individual files to skin.less file. - Applies font-sizes to menu containers instead of individual menu links. - Adds mixins for dropdown and content-box styles. - Unifies padding for pinned and unpinned menu states (including TOC). Bug: T332600 Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
2023-04-20 05:34:45 +00:00
// Dropdowns & menus
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
[Zebra] Unify ToC & menu scroll behaviour - Refactor the TOC toggle button position - Move the TOC/pinnable scrollable element from `.vector-pinnable-element` to `.vector-pinned-container` and `.vector-dropdown-content`. - Applies The Fade™️, as well as a vh max-height, to both pinned menus and dropdowns. Changes the way The Fade™️ is positioned by using position:sticky so that it can be applied to dropdowns, sidebar menus as well as all ToC permutations. Bug: T335155 Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
2023-05-03 15:53:54 +00:00
@padding-horizontal-dropdown-menu: 16px;
@padding-vertical-dropdown-menu: 16px;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
@padding-vertical-dropdown-menu-item: 6px;
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
// TOC
[Zebra] Unify ToC & menu scroll behaviour - Refactor the TOC toggle button position - Move the TOC/pinnable scrollable element from `.vector-pinnable-element` to `.vector-pinned-container` and `.vector-dropdown-content`. - Applies The Fade™️, as well as a vh max-height, to both pinned menus and dropdowns. Changes the way The Fade™️ is positioned by using position:sticky so that it can be applied to dropdowns, sidebar menus as well as all ToC permutations. Bug: T335155 Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
2023-05-03 15:53:54 +00:00
@size-toc-subsection-toggle: 22px;
@size-toc-subsection-toggle-icon: 0.7rem;
[Zebra] Dropdown heading styles Improve dropdown heading styles in accordance with new designs. Bug: T335155 Change-Id: I3665c25bfe2aa3a14178f57714ce466fb2a0f6d6
2023-05-04 17:23:34 +00:00
@toc-list-item-padding-start: 12px;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// 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;
[Zebra] Adjust content padding Introduces Codex-based spacing variables for the padding of the content area. Padding is adjusted by using CSS custom properties assigned at the HTML element, then changes only these custom properties at the new breakpoint. Also folds in changes from 3433525 (add top-margin to indicators) into the zebra module. Bug: T335155 Change-Id: Ic4883b86043882bd2ef5f71b3079896caab87531
2023-04-28 16:34:20 +00:00
// Pre-content
@margin-top-pre-content: 8px;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// 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
styles: Apply Codex `z-index` tokens Applying central Codex design tokens in new architecture. This should already show the working principle of the new architecture. Replacing `@z-index-menu` by `z-index-dropdown`. Note this is also removing obsolete `@z-index-sidebar-button`. Bug: T285592 Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-03-14 08:37:58 +00:00
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
Avoid setting large z-index on headers Bug: T340747 Change-Id: If78b2b6f0d98dc6b83263f5d94a7527afebde91c
2023-07-06 17:09:36 +00:00
@z-index-header: @z-index-stacking-3;
styles: Apply Codex `z-index` tokens Applying central Codex design tokens in new architecture. This should already show the working principle of the new architecture. Replacing `@z-index-menu` by `z-index-dropdown`. Note this is also removing obsolete `@z-index-sidebar-button`. Bug: T285592 Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-03-14 08:37:58 +00:00
@z-index-search-button: @z-index-stacking-1;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// Ensure that this is displayed on top of .vector-body and clickable.
styles: Apply Codex `z-index` tokens Applying central Codex design tokens in new architecture. This should already show the working principle of the new architecture. Replacing `@z-index-menu` by `z-index-dropdown`. Note this is also removing obsolete `@z-index-sidebar-button`. Bug: T285592 Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-03-14 08:37:58 +00:00
@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;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// See skinStyles/jquery.ui/jquery.ui.slider.css.
// @z-index-ui-slider-range: 1;
styles: Apply Codex `z-index` tokens Applying central Codex design tokens in new architecture. This should already show the working principle of the new architecture. Replacing `@z-index-menu` by `z-index-dropdown`. Note this is also removing obsolete `@z-index-sidebar-button`. Bug: T285592 Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-03-14 08:37:58 +00:00
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// 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
//
Change Zebra module to match current Vector styles Changes the skins.vector.zebra.styles module to match the current Vector 2022 styles. **Visual changes** (All pertaining to zebra.vector.zebra.styles) - There are no grey backgrounds - Context boxes with white backgrounds and drop-shadows are removed - Page-tools sidebar width is the same as TOC sidebar width - Content container is narrowed from 960px to 948px to prevent shifting content when pinning TOC or main menu. Bug: T347638 Change-Id: If6e1ef21f076f6a9f0f8cafb2d745a7c13afb471
2023-10-30 15:22:46 +00:00
@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
[Zebra] Make sidebar columns equal width Makes the columns that contain the ToC and Page Tools menu equal width. Moves these width declarations into the grid.less file and converts them, as well as a few associated width variables, to rems. Widens the content column to maintain the same line-length as pre-zebra, due to the extra side-padding on the content container. Scopes the non-zebra grid.less less file to the zebra-disabled flag. Bug: T335155 Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
2023-04-24 22:48:12 +00:00
@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 );
Create skins.vector.zebra.styles module Creates a new skins.vector.zebra.styles module that will hold style modifications for the Vector Zebra update. Affected files are copied from skins.vector.styles without modification (at this point) to improve revision history in git. The new module should compile without error and existing styles should not be affected. Bug: T332600 Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:35:48 +00:00
// 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;
Add initial Zebra design update for page layout Implements the zebra design update via the skins.vector.zebra.styles module. Refactors: - Moves common variable and mixin imports from individual files to skin.less file. - Applies font-sizes to menu containers instead of individual menu links. - Adds mixins for dropdown and content-box styles. - Unifies padding for pinned and unpinned menu states (including TOC). Bug: T332600 Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
2023-04-20 05:34:45 +00:00
@grid-column-gap: 24px;
Add replace .vector-sidebar-container-no-toc with .vector-toc-available and .vector-toc-not-available Bug: T318011 Change-Id: Ib07ace50e762c2e9f59e668ad6746574a60a144b
2023-09-28 19:41:34 +00:00
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
@width-page-content: minmax(0, 1fr);
[Zebra] Make sidebar columns equal width Makes the columns that contain the ToC and Page Tools menu equal width. Moves these width declarations into the grid.less file and converts them, as well as a few associated width variables, to rems. Widens the content column to maintain the same line-length as pre-zebra, due to the extra side-padding on the content container. Scopes the non-zebra grid.less less file to the zebra-disabled flag. Bug: T335155 Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
2023-04-24 22:48:12 +00:00
@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
Add replace .vector-sidebar-container-no-toc with .vector-toc-available and .vector-toc-not-available Bug: T318011 Change-Id: Ib07ace50e762c2e9f59e668ad6746574a60a144b
2023-09-28 19:41:34 +00:00
@grid-template-column-desktop: ~'@{width-column-desktop} @{width-page-content}';
@grid-template-column-desktop-wide: ~'@{width-column-desktop-wide} @{width-page-content}';
Reference in a new issue Copy permalink