mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-18 00:30:40 +00:00
dd154b4ea7
The values have slightly changed: - Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile only experience but should make barely a difference to vast majority of our users. - Biggest difference is in `min-width-breakpoint-desktop`, which is increased by 120px in comparison to `@width-breakpoint-desktop: 1000px` Also removing one out-dated feature phone clause. TECHNICAL CHANGES: * The previous breakpoint was tied to the maximum content width. The previous maximum content width is preserved, and several media queries are adjusted to make use of it. * The header (logo) is not optimized for 640px-720px. For now a temporary fix is but in place which will be investigated as part of T366859 VISUAL CHANGES: * 6 visual changes which improve alignment in language and visual editor overlay and diffs (where wikidiff2 is not installed) Bug: T349793 Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779 Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
113 lines
3.6 KiB
Plaintext
113 lines
3.6 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
||
|
||
/**
|
||
* System font stack for sans-serif fonts
|
||
*
|
||
* `-apple-system` ('San Francisco') – Support: Safari 9+ macOS and iOS, Firefox macOS
|
||
* `BlinkMacSystemFont` ('San Francisco') – Chrome 48+ macOS and iOS
|
||
* `Segoe UI` – Windows Vista & newer
|
||
* `Roboto` – Android 4.0
|
||
* `Lato` – Wikimedia Design choice, OFL licensed
|
||
* `Helvetica, Arial, sans-serif` – (Generic) Web fallback
|
||
* Note that CSS Fonts Module Level 4's `system-ui` value has resulted in unresolved
|
||
* side-effects in certain OS/language combinations and is therefore not included as of now.
|
||
*/
|
||
@font-family-base: @font-family-system-sans;
|
||
|
||
@font-size-browser: 16; // Assumed browser default of `16px`.
|
||
@font-size-root: 100%;
|
||
@font-size-root--feature-phone: 0.8 * @font-size-root;
|
||
// T282315: Use rem instead of em to avoid font-size compounding, resulting in smaller than intended text
|
||
@font-size-minerva-small: unit( 14 / @font-size-browser, rem ); // Equals `14px` at `16px` browser default.
|
||
@font-size-minerva-smallest: unit( 13 / @font-size-browser, rem ); // Equals `13px` at `16px` browser default.
|
||
|
||
//
|
||
// Icons
|
||
//
|
||
@icon-padding-medium: @size-75;
|
||
@icon-size-medium: @size-icon-medium;
|
||
@min-size-icon: @min-size-icon-medium;
|
||
@size-icon: 1.5em;
|
||
@width-icon-gutter: 1em;
|
||
|
||
// Navigation Drawers
|
||
@drawer-width-right: 60%;
|
||
|
||
// Headings
|
||
@font-size-h1: 1.7em;
|
||
@font-size-h2: 1.5em;
|
||
@font-size-h3: 1.2em;
|
||
|
||
// Content
|
||
@padding-content: 16px;
|
||
@margin-content: 16px;
|
||
|
||
// Header
|
||
@height-site-header: unit( 54 / @font-size-browser, em );
|
||
@height-overlay-header: unit( 48 / @font-size-browser, em );
|
||
@padding-vertical-header: 0.15em;
|
||
@width-search-box: 375/16em;
|
||
@device-width-tablet-ems: unit( @min-width-breakpoint-tablet / @font-size-browser, em );
|
||
// This is the minimum width at which the logo can be rendered safely for logged in users,
|
||
// using advanced mobile mode,
|
||
// without overflowing the viewport at @min-width-breakpoint-tablet.
|
||
//
|
||
// This is calculated by taking @min-width-breakpoint-tablet and counting the space available
|
||
// after accounting for 3 icons - main menu, notification bell and user menu icon,
|
||
// and the search bar.
|
||
@min-size-interactive-touch-ems: unit( @min-size-interactive-touch / @font-size-browser, em );
|
||
@min-width-branding-box-ems: @device-width-tablet-ems - ( 3 * @min-size-interactive-touch-ems ) - @width-search-box;
|
||
// FIXME: This is the min-width before T349793 was merged. Remove when T366859 is resolved.
|
||
@T366859-min-width-branding-box-ems: 10.0625em;
|
||
|
||
@top-spacing-title-section: @spacing-125;
|
||
|
||
// Page actions
|
||
// TODO: Replace by `@font-size-minerva-small`.
|
||
@font-size-tag-line: 0.85em;
|
||
|
||
// colors
|
||
@opaque: rgba( 0, 0, 0, 0.8 );
|
||
|
||
@background-color-toast-notification: #202122;
|
||
|
||
// Typography
|
||
@line-height-content: 1.65;
|
||
|
||
@margin-heading: 0.5em;
|
||
|
||
// blockquote
|
||
@padding-start-blockquote: @spacing-200;
|
||
// Make it a tad smaller on mobile to fit more contents.
|
||
@padding-end-blockquote: @spacing-150;
|
||
@padding-vertical-blockquote: @spacing-50;
|
||
|
||
// custom tablet styling
|
||
@padding-content-tablet: 3.35em;
|
||
|
||
// This value was previously derived from taking the old tablet breakpoint of 720px
|
||
// and subtracting ( 2 * @padding-content-tablet ) ) to account for the lack of
|
||
// view border box.
|
||
// This may be reassessed in phab:T366860.
|
||
@max-width-content-tablet: 993.3px;
|
||
|
||
// Wiki specific variables
|
||
@width-infobox: 320px;
|
||
|
||
// z-index:
|
||
@z-index-occluded: -1;
|
||
@z-index-base: 0;
|
||
@z-index-above-content: 1;
|
||
@z-index-drawer: 2;
|
||
@z-index-overlay: 3;
|
||
@z-index-over-overlay: 4;
|
||
|
||
// Animations & Transitions
|
||
// Transitions > Timing Functions
|
||
@transition-timing-function-menu: ease-in-out;
|
||
|
||
// = Print
|
||
@color-print: #000;
|
||
@color-print-subtle: #999;
|
||
@border-color-print: #999;
|