mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 23:55:53 +00:00
ddf8706ae4
This patch results in an expected visual change for the main menu button when the flag is on When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
211 lines
8.4 KiB
Plaintext
211 lines
8.4 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 );
|
|
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
|
|
@icon-padding-md: 12px;
|
|
@icon-padding-md-next: 5px;
|
|
|
|
@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 );
|
|
@padding-dropdown-menu-item: 0 12px;
|
|
|
|
// Menu button
|
|
// Delete this variable when VisualEnhancementNext flag is enabled everywhere
|
|
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
|
|
|
// Main menu
|
|
@selector-main-menu-open: ~'#mw-sidebar-checkbox:checked';
|
|
@selector-main-menu-closed: ~'#mw-sidebar-checkbox:not( :checked )';
|
|
|
|
// 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;
|