mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-12-19 01:01:00 +00:00
38ca243e39
Replacing 'mediawiki.ui/variables.less' @import with new skin-aware 'mediawiki.skin.variables.less' standard. Removing calls for 'mediawiki.skin.variables.less' in favor for 'minerva.variables.less' for consistency. Also - replacing several static values with new Codex design token featuring skin variables of `background-color`, `color`, `border-*` and `transition` categories - renaming several Less variables to variable naming standard - moving a small number of MinervaNeue specific variables into 'minderva.variables.less' file. Those should be replaced in mid-future by Codex design tokens Please note, that this patch is not replacing all values with possible Codex tokens. It's just applying them on selected categories for consistency for now to keep the patch easier reviewable. Further replacements will be done in follow-up patches. Bump MediaWiki core required version to >= v1.41.0. Bug: T319381 Bug: T332541 Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75 Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
119 lines
3.5 KiB
Plaintext
119 lines
3.5 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.
|
||
|
||
// colors
|
||
@background-color-light: #eaecf0;
|
||
@background-color-lightest: #f8f9fa;
|
||
@box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
|
||
|
||
//
|
||
// Icons
|
||
//
|
||
@icon-touch-area-sm: 34;
|
||
@icon-touch-area-md: 44;
|
||
@icon-color: #54595d;
|
||
@min-size-icon: 20px;
|
||
@size-icon: 1.5em;
|
||
@width-icon-gutter: 1em;
|
||
|
||
// Small icon
|
||
@icon-glyph-size-sm: 16;
|
||
@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em );
|
||
@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em );
|
||
|
||
// Medium icon
|
||
@icon-glyph-size-md: 20;
|
||
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
|
||
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
|
||
@margin-icon-md-labelled: 8px;
|
||
|
||
// Navigation Drawers
|
||
@rightDrawerWidth: 60%;
|
||
@menuButtonIconSize: 3.5em;
|
||
|
||
// Headings
|
||
@fontSizeH1: 1.7em;
|
||
@fontSizeH2: 1.5em;
|
||
@fontSizeH3: 1.2em;
|
||
|
||
// Content
|
||
@contentPadding: 16px;
|
||
@contentMargin: 16px;
|
||
|
||
// Header
|
||
@siteHeaderHeight: unit( 54 / @font-size-browser, em );
|
||
@overlayHeaderHeight: unit( 48 / @font-size-browser, em );
|
||
@headerVerticalPadding: 0.15em;
|
||
@searchBoxWidth: 375/16em;
|
||
@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @font-size-browser, em );
|
||
@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @width-icon-gutter) - @searchBoxWidth;
|
||
|
||
@titleSectionSpacingTop: 20px;
|
||
|
||
// Page actions
|
||
// TODO: Replace by `@font-size-minerva-small`.
|
||
@taglineFontSize: 0.85em;
|
||
|
||
// colors
|
||
@semiTransparent: rgba( 0, 0, 0, 0.8 );
|
||
|
||
@lastModifiedBarActiveBackgroundColor: #00af89;
|
||
@background-color-toast-notification: #202122;
|
||
|
||
// Typography
|
||
@line-height-content: 1.65;
|
||
|
||
@headingMargin: 0.5em;
|
||
|
||
// blockquote
|
||
@padding-start-blockquote: 32px;
|
||
// Make it a tad smaller on mobile to fit more contents.
|
||
@padding-end-blockquote: 24px;
|
||
@padding-vertical-blockquote: 8px;
|
||
|
||
// custom tablet styling
|
||
@contentPaddingTablet: 3.35em;
|
||
|
||
// note since content does not use view border box we have to include padding.
|
||
@contentMaxWidthTablet: @width-breakpoint-desktop - ( 2 * @contentPaddingTablet );
|
||
|
||
// Wiki specific variables
|
||
@infoboxWidth: 320px;
|
||
|
||
// z-index:
|
||
@z-indexOccluded: -1;
|
||
@z-indexBase: 0;
|
||
@z-indexAboveContent: 1;
|
||
@z-indexDrawer: 2;
|
||
@z-indexOverlay: 3;
|
||
@z-indexOverOverlay: 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;
|