mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 10:50:52 +00:00
59fd0cd5dc
All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
102 lines
3 KiB
Plaintext
102 lines
3 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%;
|
||
@menu-button-icon-size: 3.5em;
|
||
|
||
// 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( @width-breakpoint-tablet / @font-size-browser, em );
|
||
@width-branding-box: @device-width-tablet-ems - (3 * @menu-button-icon-size + @width-icon-gutter) - @width-search-box;
|
||
|
||
@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-last-modified-bar-active: #00af89;
|
||
@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;
|
||
|
||
// note since content does not use view border box we have to include padding.
|
||
@max-width-content-tablet: @width-breakpoint-desktop - ( 2 * @padding-content-tablet );
|
||
|
||
// 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;
|