mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-15 02:13:49 +00:00
10076c1b61
Split apart the extensive mainmenu.less file into a few component-like
files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay.
Two variables, @duration and @easing, were moved to minerva.variables.
The separation is imperfect as some overlap still exists but is far
better than before.
This patch is focused on division without regression. Please limit any
refactor requests.
No user visible changes intended. The only selector that was cognizantly
changed was to duplicate the drawer visibility on main menu and
notifications overlay:
// Old: mainmenu.less
.navigation-drawer,
.transparent-shield {
visibility: visible;
}
// ---
// New: MainMenu.less
#mw-mf-page-left,
.transparent-shield {
visibility: visible;
}
// New: NotifcationsOverlay.less
.navigation-enabled {
.notifications-overlay {
visibility: visible;
}
}
The is unfortunately useless. It is best to reproduce these changes
locally by renaming mainmenu.less to MainMenu.less and extract parts to
MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until
the result matches.
Bug: T206354
Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
143 lines
4.1 KiB
Plaintext
143 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
|
||
@menuWidth: 75%;
|
||
@menuWidthTablet: 600px;
|
||
@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;
|