mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-14 11:15:33 +00:00
8e4da83908
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
218 lines
8.7 KiB
Plaintext
218 lines
8.7 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import 'mediawiki.ui/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
|
|
|
|
// Sizing calculation primitives.
|
|
@font-size-root: 100%;
|
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
|
|
|
//
|
|
// == Page content ==
|
|
//
|
|
|
|
@color-base--subtle: #54595d;
|
|
@color-link-selected: @color-base;
|
|
|
|
@outline-color-base--focus: @color-primary;
|
|
|
|
//
|
|
// == Typography ==
|
|
//
|
|
// Typography in Wikimedia Design Style Guide:;
|
|
// https://design.wikimedia.org/style-guide/visual-style_typography.html
|
|
// Historic overview and background information of fonts in Wikimedia software:
|
|
// https://www.mediawiki.org/wiki/Wikimedia_User_Interface/Use_cases/Font_family_stack
|
|
// Source of this font stack definition in WikimediaUI Base:
|
|
// https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$202
|
|
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
|
|
|
// Body content uses the user setting in browser / operating system default sans-serif font:
|
|
// For example, Arial on Windows, Roboto on Android.
|
|
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
|
|
// @font-family-sans is set in mediawiki.variables/variables.less
|
|
|
|
// Fallback for headings, language: ja,he,ko. See T73240, T65817, T65843, T65844, T65827.
|
|
@font-family-sans--fallback: sans-serif;
|
|
|
|
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
|
@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-heading: 1.3;
|
|
@line-height-code: 1.3;
|
|
@line-height-footer-info: 1.4;
|
|
@line-height-footer-buttons: 2;
|
|
|
|
@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
|
|
|
|
@size-icon: unit( 20 / @font-size-browser, em );
|
|
@size-indicator: unit( 12 / @font-size-browser, em );
|
|
|
|
@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 );
|
|
|
|
// 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;
|
|
@border-color-pagetitle: #eaecf0;
|
|
// Use `rgba()` notation for better Safari support, see T254489.
|
|
@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
|
|
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
|
@padding-top-content: 0.5em;
|
|
@padding-blockquote: 8px 32px;
|
|
// T311311 Match VE toolbar styles
|
|
@border-bottom-tabs: @border-width-base @border-style-base @colorGray12;
|
|
|
|
@background-color-secondary--modern: #f8f9fa;
|
|
@background-color-page-container: @background-color-base;
|
|
|
|
// Navigation
|
|
@background-color-secondary: #f6f6f6;
|
|
@color-nav-subtle: #444;
|
|
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
|
|
@line-height-nav: 1.125em;
|
|
|
|
// Navigation: Main
|
|
@font-size-nav-main: inherit;
|
|
|
|
@font-size-nav-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.
|
|
|
|
@font-size-nav-main-body: unit( 12 / @font-size-browser, em );
|
|
@margin-start-nav-main-body: 0.5em;
|
|
|
|
// Navigation: Portal
|
|
// Font size of the Portal links.
|
|
@font-size-portal-list-item: @font-size-nav-main-body;
|
|
|
|
// Margin space from the start of the Portal (left edge in LTR
|
|
// languages).
|
|
@margin-start-portal: 0.7em;
|
|
|
|
// Margin space from the end of the Portal (right edge in LTR
|
|
// languages).
|
|
@margin-end-portal: 0.6em;
|
|
|
|
// Margin space from the start of the Portal body (left edge in LTR languages).
|
|
@margin-start-portal-body: @margin-start-nav-main-body;
|
|
|
|
// 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-vertical-tabs: 18px 0 7px 0;
|
|
|
|
// Dropdowns
|
|
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
|
// Remove this variable after VectorPageTools is enabled everywhere
|
|
@padding-dropdown-menu-item: 0 12px;
|
|
@padding-vertical-dropdown-menu-item: 6px;
|
|
@padding-horizontal-dropdown-menu-item: 14px;
|
|
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
|
|
|
// Main menu
|
|
@selector-main-menu-open: ~'#mw-sidebar-checkbox:checked';
|
|
@selector-main-menu-closed: ~'#mw-sidebar-checkbox:not( :checked )';
|
|
|
|
// TOC
|
|
@height-toc-scroll-indicator: 30px;
|
|
@padding-vertical-toc: 20px;
|
|
@padding-right-toc: 12px;
|
|
// Sidebar TOC uses increased left padding and a negative left margin to achieve
|
|
// a 15px spacing without clipping the chevron icon
|
|
// https://phabricator.wikimedia.org/T312156#8095894
|
|
@padding-left-toc: 15px + @padding-right-toc;
|
|
@size-toc-subsection-toggle-icon: 1.834em;
|
|
|
|
// Sidebar
|
|
@width-sidebar-px: 220px;
|
|
@width-sidebar-px-wide: 244px;
|
|
|
|
// 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;
|
|
|
|
// Language button
|
|
@height-button-lang: unit( 32 / @font-size-browser, em );
|
|
|
|
// 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-sticky-header: unit( 50px / @font-size-browser, rem );
|
|
|
|
// Z-indices
|
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
|
// @z-index-ui-datepicker-cover: -1;
|
|
@z-index-base: 0;
|
|
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
|
|
@z-index-header: 4;
|
|
@z-index-sidebar: 1;
|
|
@z-index-menu-checkbox: 1;
|
|
@z-index-search-button: 1;
|
|
@z-index-search-loader: 1;
|
|
// Ensure that this is displayed on top of .vector-body and clickable.
|
|
@z-index-indicators: 1;
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-range: 1;
|
|
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
|
|
@z-index-menu: 3;
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
// @z-index-ui-slider-handle: 2;
|
|
// Display on top of page tabs (T39158, T50078).
|
|
@z-index-personal: 100;
|
|
@z-index-sidebar-button: 101;
|
|
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
|
|
// @z-index-ui-selectable-helper: 100;
|
|
@z-index-overlay: 101;
|
|
// 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 );
|
|
|
|
// Grid
|
|
@grid-row-gap: 24px;
|