mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-28 08:00:32 +00:00
bfdfc1165c
Slide the main menu over the page instead of sliding the page over the menu. Also, use viewport units for the main and notification menus. Note, this lays foundation work for T225213. Bug: T206354 Change-Id: I14b67d1e97b84086ea13e28df8148824a1f493e3
141 lines
4.1 KiB
Plaintext
141 lines
4.1 KiB
Plaintext
@import 'mediawiki.ui/variables';
|
||
|
||
/**
|
||
* 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.
|
||
*/
|
||
@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
|
||
@fontFamilyBase: @fontFamilySans;
|
||
|
||
@font-size-browser: 16; // Assumed browser default of `16px`.
|
||
@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.
|
||
@tocFontSize: @font-size-minerva-small;
|
||
|
||
@indicatorFontSize: 0.4em;
|
||
|
||
// colors
|
||
@grayMediumLight: @colorGray10;
|
||
@grayMediumDark: @colorGray5;
|
||
@grayMedium: @colorGray7;
|
||
@grayLight: @colorGray12;
|
||
@grayLightest: @colorGray14;
|
||
|
||
/*
|
||
* FIXME: Use these variables directly from mediawiki-ui-base when available.
|
||
*/
|
||
@wmui-color-green30: #14866d;
|
||
@wmui-color-red30: #b32424;
|
||
@wmui-color-grey30: #a2a9b1;
|
||
|
||
@skinContentBgColor: #fff;
|
||
|
||
// Navigation Drawers
|
||
@rightDrawerWidth: 60%;
|
||
@primaryNavBackgroundColor: @colorGray14;
|
||
@menuButtonIconSize: 3.5em;
|
||
|
||
// Headings
|
||
@firstHeadingFontSize: 2.6525em; // 42px
|
||
@fontSizeH1: 1.7em;
|
||
@fontSizeH2: 1.5em;
|
||
@fontSizeH3: 1.2em;
|
||
|
||
// Content
|
||
@contentPadding: 16px;
|
||
@contentMargin: 16px;
|
||
|
||
// Header
|
||
@headerHeight: unit( 54 / @font-size-browser, em );
|
||
@headerVerticalPadding: 0.15em;
|
||
@headerMarginTop: -1px; // used to hide the header border top when a banner is not present
|
||
@searchBoxWidth: 375/16em;
|
||
@iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
|
||
@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @font-size-browser, em );
|
||
@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @iconGutterWidth) - @searchBoxWidth;
|
||
|
||
@titleSectionSpacingTop: 20px;
|
||
@titleSectionSpacingBottom: 25px;
|
||
|
||
// Page actions
|
||
@taglineFontSize: 0.85em;
|
||
@pageActionBorder: 1px;
|
||
@pageActionToolbarHeight: 44px; // total height is 46px. 2px added by border on .page-actions-menu
|
||
|
||
// colors
|
||
@chromeColor: @grayLightest;
|
||
@semiTransparent: rgba( 0, 0, 0, 0.8 );
|
||
|
||
@linkColor: @colorProgressive;
|
||
@redLinkColor: @colorError;
|
||
@lastModifiedBarActiveBackgroundColor: #00af89;
|
||
@toastNotificationColor: @colorGray2;
|
||
|
||
// Use when an element is selected. FIXME: This should be in mediawiki ui.
|
||
@selectedBackgroundColor: #e6eeff;
|
||
|
||
// typography
|
||
@fontFamilyHeading: 'Linux Libertine', 'Georgia', 'Times', serif;
|
||
/**
|
||
* System font stack for monospace fonts, see T221043.
|
||
*
|
||
* `Menlo` – macOS 10.6+
|
||
* `Consolas` – Windows Vista & newer
|
||
* `Liberation Mono` – Fedora, Ubuntu, … OFL licensed
|
||
* `Courier New` – (Generic) web font fallback
|
||
*/
|
||
@fontFamilyMonospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
|
||
@fontScalingFactor: 1;
|
||
@contentLineHeight: 1.65;
|
||
|
||
@headingMargin: 0.5em;
|
||
@sectionIconWidth: 30px;
|
||
|
||
// blockquote
|
||
@blockquotePaddingRight: 25px;
|
||
@blockquotePaddingLeft: 30px;
|
||
|
||
// 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 );
|
||
@contentTopPadding: 1.6em;
|
||
|
||
// Wiki specific variables
|
||
@infoboxWidth: 320px;
|
||
|
||
@lastModifiedBarBgColor: @chromeColor;
|
||
@lastModifiedBarActiveBgColor: @lastModifiedBarActiveBackgroundColor;
|
||
@lastModifiedBarTextColor: @colorTextLight;
|
||
|
||
@footerBorderColor: @grayLight;
|
||
|
||
@notificationBackgroundRead: @colorGray14;
|
||
@notificationColorRead: @colorGray5;
|
||
@notificationBackgroundUnread: @colorDestructive;
|
||
@notificationColorUnread: #fff;
|
||
|
||
// z-index:
|
||
@z-indexOccluded: -1;
|
||
@z-indexBase: 0;
|
||
@z-indexAboveContent: 1;
|
||
@z-indexDrawer: 2;
|
||
@z-indexOverlay: 3;
|
||
@z-indexOverOverlay: 4;
|
||
|
||
// Print specific
|
||
@colorPrintSubtle: #999;
|
||
@borderColorPrint: #999;
|
||
|
||
// Animations
|
||
@menu-animation-duration: 0.25s;
|
||
@menu-animation-easing: ease-in-out;
|