2017-07-12 15:12:40 +00:00
|
|
|
|
@import 'mediawiki.ui/variables';
|
2017-08-16 19:30:33 +00:00
|
|
|
|
|
|
|
|
|
@z-indexBase: 0;
|
2019-04-04 21:20:39 +00:00
|
|
|
|
@z-indexOverOverlay: 3;
|
2017-08-16 19:30:33 +00:00
|
|
|
|
|
2019-01-17 08:46:26 +00:00
|
|
|
|
/**
|
|
|
|
|
* System font stack for sans-serif fonts
|
|
|
|
|
*
|
2019-03-27 22:35:33 +00:00
|
|
|
|
* `-apple-system` ('San Francisco') – Support: Safari 9+ macOS and iOS, Firefox macOS
|
|
|
|
|
* `BlinkMacSystemFont` ('San Francisco') – Chrome 48+ macOS and iOS
|
2019-01-17 08:46:26 +00:00
|
|
|
|
* `Segoe UI` – Windows Vista & newer
|
2019-03-27 22:35:33 +00:00
|
|
|
|
* `Roboto` – Android 4.0
|
|
|
|
|
* `Lato` – Wikimedia Design choice, OFL licensed
|
2019-01-17 08:46:26 +00:00
|
|
|
|
* `Helvetica, Arial, sans-serif` – (Generic) Web fallback
|
|
|
|
|
* Note that CSS Fonts Module Level 4's `system-ui` value has resulted in unresolved
|
2019-03-27 22:35:33 +00:00
|
|
|
|
* side-effects in certain OS/language combinations and is therefore not included as of now.
|
2019-01-17 08:46:26 +00:00
|
|
|
|
*/
|
|
|
|
|
@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
|
|
|
|
|
@fontFamilyBase: @fontFamilySans;
|
2017-08-16 19:30:33 +00:00
|
|
|
|
@tocFontSize: 0.8em;
|
|
|
|
|
|
|
|
|
|
@indicatorFontSize: 0.4em;
|
|
|
|
|
|
|
|
|
|
// colors
|
|
|
|
|
@grayMediumLight: @colorGray10;
|
|
|
|
|
@grayMediumDark: @colorGray5;
|
|
|
|
|
@grayMedium: @colorGray7;
|
|
|
|
|
@grayLight: @colorGray12;
|
|
|
|
|
@grayLightest: @colorGray14;
|
|
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@skinContentBgColor: #fff;
|
|
|
|
|
|
|
|
|
|
// Navigation Drawers
|
|
|
|
|
@menuWidth: 75%;
|
|
|
|
|
@menuWidthTablet: 600px;
|
|
|
|
|
@rightDrawerWidth: 60%;
|
|
|
|
|
@primaryNavBackgroundColor: @colorGray14;
|
|
|
|
|
|
|
|
|
|
// Headings
|
|
|
|
|
@firstHeadingFontSize: 2.6525em; // 42px
|
|
|
|
|
@fontSizeH1: 1.7em;
|
|
|
|
|
@fontSizeH2: 1.5em;
|
|
|
|
|
@fontSizeH3: 1.2em;
|
|
|
|
|
|
|
|
|
|
// Content
|
|
|
|
|
@contentPadding: 16px;
|
|
|
|
|
@contentMargin: 16px;
|
|
|
|
|
|
|
|
|
|
// Header
|
|
|
|
|
@headerHeight: 3.35em;
|
2019-04-04 21:20:39 +00:00
|
|
|
|
@headerMarginTop: -1px; // used to hide the header border top when a banner is not present
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@searchBoxWidth: 375/16em;
|
|
|
|
|
@iconSizeTotal: @iconSize + @iconGutterWidth + @iconGutterWidth;
|
2018-02-05 19:17:54 +00:00
|
|
|
|
@deviceWidthTabletEms: unit( @width-breakpoint-tablet/16, em );
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@brandingBoxWidth: @deviceWidthTabletEms - ( @iconSizeTotal * 3 ) - @searchBoxWidth;
|
|
|
|
|
|
|
|
|
|
@titleSectionSpacingTop: 20px;
|
|
|
|
|
@titleSectionSpacingBottom: 25px;
|
|
|
|
|
|
2019-01-10 22:59:56 +00:00
|
|
|
|
// Page actions
|
|
|
|
|
@taglineFontSize: 0.85em;
|
2019-02-13 19:42:15 +00:00
|
|
|
|
@pageActionBorder: 1px;
|
2019-04-04 21:20:39 +00:00
|
|
|
|
@pageActionFontSize: 0.9em;
|
|
|
|
|
@pageActionToolbarHeight: 44px; // total height is 46px. 2px added by border on .page-actions-menu
|
2019-01-10 22:59:56 +00:00
|
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
|
// colors
|
|
|
|
|
@chromeColor: @grayLightest;
|
|
|
|
|
@semiTransparent: rgba( 0, 0, 0, 0.8 );
|
|
|
|
|
|
2018-03-14 21:00:02 +00:00
|
|
|
|
@linkColor: @colorProgressive;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@redLinkColor: @colorErrorText;
|
|
|
|
|
@lastModifiedBarActiveBackgroundColor: #00af89;
|
|
|
|
|
@toastNotificationColor: @colorGray2;
|
|
|
|
|
|
|
|
|
|
// Use when an element is selected. FIXME: This should be in mediawiki ui.
|
|
|
|
|
@selectedBackgroundColor: #e6eeff;
|
|
|
|
|
|
|
|
|
|
// messages
|
|
|
|
|
@colorWarningBackground: #feb;
|
|
|
|
|
@colorWarningBorder: #fde29b;
|
|
|
|
|
@colorWarningText: #850;
|
|
|
|
|
@colorSuccessBorder: #b7fdb5;
|
|
|
|
|
@colorErrorBackground: #fae3e3;
|
|
|
|
|
@colorErrorBorder: #fac5c5;
|
|
|
|
|
|
|
|
|
|
// typography
|
|
|
|
|
@fontFamilyHeading: 'Linux Libertine', 'Georgia', 'Times', serif;
|
2019-04-16 01:05:29 +00:00
|
|
|
|
/**
|
|
|
|
|
* 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;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@fontScalingFactor: 1;
|
|
|
|
|
@contentLineHeight: 1.65;
|
|
|
|
|
|
|
|
|
|
@headingMargin: 0.5em;
|
|
|
|
|
@sectionIconWidth: 30px;
|
|
|
|
|
|
2018-10-13 18:55:34 +00:00
|
|
|
|
// blockquote
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@blockquotePaddingRight: 25px;
|
|
|
|
|
@blockquotePaddingLeft: 30px;
|
|
|
|
|
|
|
|
|
|
// custom tablet styling
|
|
|
|
|
@contentPaddingTablet: 3.35em;
|
|
|
|
|
|
|
|
|
|
// note since content does not use view border box we have to include padding.
|
2017-09-28 14:23:45 +00:00
|
|
|
|
@contentMaxWidthTablet: @width-breakpoint-desktop - ( 2 * @contentPaddingTablet );
|
2017-07-12 15:12:40 +00:00
|
|
|
|
@contentTopPadding: 1.6em;
|
|
|
|
|
|
|
|
|
|
// Wiki specific variables
|
|
|
|
|
@infoboxWidth: 320px;
|
|
|
|
|
|
|
|
|
|
@lastModifiedBarBgColor: @chromeColor;
|
|
|
|
|
@lastModifiedBarActiveBgColor: @lastModifiedBarActiveBackgroundColor;
|
2017-08-08 09:27:37 +00:00
|
|
|
|
@lastModifiedBarTextColor: @colorTextLight;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
|
|
@footerBorderColor: @grayLight;
|
|
|
|
|
|
|
|
|
|
@notificationBackgroundRead: @colorGray14;
|
|
|
|
|
@notificationColorRead: @colorGray5;
|
|
|
|
|
@notificationBackgroundUnread: @colorDestructive;
|
|
|
|
|
@notificationColorUnread: #fff;
|
|
|
|
|
|
2017-10-23 16:37:32 +00:00
|
|
|
|
// z-index:
|
2019-04-04 21:20:39 +00:00
|
|
|
|
@z-indexOccluded: -1;
|
|
|
|
|
@z-indexDrawer: 1;
|
|
|
|
|
@z-indexOverlay: 2;
|
2017-10-19 02:49:01 +00:00
|
|
|
|
|
|
|
|
|
// Print specific
|
|
|
|
|
@colorPrintSubtle: #999;
|
|
|
|
|
@borderColorPrint: #999;
|