2017-07-12 15:12:40 +00:00
|
|
|
|
@import 'mediawiki.ui/variables';
|
2020-09-25 18:17:15 +00:00
|
|
|
|
@import 'mediawiki.skin.variables.less';
|
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
|
|
|
|
*/
|
2020-03-08 03:34:44 +00:00
|
|
|
|
@font-family-system-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
|
|
|
|
|
|
@font-family-base: @font-family-system-sans;
|
2019-07-18 15:27:18 +00:00
|
|
|
|
|
2019-07-31 17:59:52 +00:00
|
|
|
|
@font-size-browser: 16; // Assumed browser default of `16px`.
|
2019-12-06 05:46:50 +00:00
|
|
|
|
@font-size-root: 100%;
|
|
|
|
|
|
@font-size-root--feature-phone: 0.8 * @font-size-root;
|
2021-07-17 02:31:56 +00:00
|
|
|
|
// 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.
|
2017-08-16 19:30:33 +00:00
|
|
|
|
|
|
|
|
|
|
// colors
|
|
|
|
|
|
@grayMediumLight: @colorGray10;
|
|
|
|
|
|
@grayMediumDark: @colorGray5;
|
|
|
|
|
|
@grayMedium: @colorGray7;
|
|
|
|
|
|
@grayLight: @colorGray12;
|
|
|
|
|
|
@grayLightest: @colorGray14;
|
2019-10-18 17:38:19 +00:00
|
|
|
|
@background-color-primary: @wmui-color-accent90;
|
2019-12-24 11:16:49 +00:00
|
|
|
|
@grayDrawerShadow: rgba( 0, 0, 0, 0.35 );
|
2017-08-16 19:30:33 +00:00
|
|
|
|
|
2019-07-29 09:50:05 +00:00
|
|
|
|
/*
|
2019-10-18 17:38:19 +00:00
|
|
|
|
* FIXME: Use these variables directly from wikimedia-ui-base when available.
|
2019-07-29 09:50:05 +00:00
|
|
|
|
*/
|
2019-10-18 17:38:19 +00:00
|
|
|
|
@wmui-color-accent90: #eaf3ff;
|
2019-07-29 09:50:05 +00:00
|
|
|
|
@wmui-color-green30: #14866d;
|
|
|
|
|
|
@wmui-color-red30: #b32424;
|
|
|
|
|
|
@wmui-color-grey30: #a2a9b1;
|
|
|
|
|
|
|
2019-09-13 20:29:14 +00:00
|
|
|
|
//
|
|
|
|
|
|
// Icons
|
|
|
|
|
|
//
|
2019-09-24 17:23:01 +00:00
|
|
|
|
@icon-touch-area-sm: 34;
|
2019-09-16 17:40:34 +00:00
|
|
|
|
@icon-touch-area-md: 44;
|
2019-10-23 12:44:52 +00:00
|
|
|
|
@icon-color: @colorGray5;
|
2019-09-13 20:29:14 +00:00
|
|
|
|
|
2019-09-24 17:23:01 +00:00
|
|
|
|
// 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 );
|
2020-02-13 06:38:36 +00:00
|
|
|
|
@margin-icon-md-labelled: 8px;
|
2019-09-13 20:29:14 +00:00
|
|
|
|
|
2017-07-12 15:12:40 +00:00
|
|
|
|
// Navigation Drawers
|
|
|
|
|
|
@rightDrawerWidth: 60%;
|
|
|
|
|
|
@primaryNavBackgroundColor: @colorGray14;
|
[UI] [new] add user menu
Add new user menu. The changes required include:
- Break up AuthMenuEntry into reusable components. They're now simple,
independent, static functions in AuthUtil that are easy to reason
about and compose.
There's lots of verbose code because of the builder and director
patterns. That is, most of the code is for building the thing we
actually want to build instead of just building it. It's easy to write
but no fun to read--even simple configurations are extremely verbose
expressions that must be threaded through the system.
These builders are also single purpose and unlikely to be reusable
unlike a URI builder, for example. As objects, they're not especially
composable either.
- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
inheritance. Inheritance has not worked well on the frontend of
MobileFrontend. I don't think it's going to work well here. E.g., I
could have made changes to the base class' getPersonalTools() method
such that the client passes a parameter for the advanced config or
maybe I just override it in the subclass. In either case, I think it
makes the whole hierarchy nuanced and harder to reason about for
something that should be simple.
- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.
- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
the entry name, AuthMenuEntry.
- Extension:SandboxLink is needed to display the sandbox link in the
user menu.
- Performance note: the toolbar is now processed in MinervaTemplate,
which corresponds to removing the buildPersonalUrls() override.
- To mimic the design of main menu, the following steps would be
necessary:
1. Create a user/Default and user/Advanced user menu builder and also
a user/IBuilder interface.
2. Create a user/Director.
3. Create a service entry for Minerva.Menu.UserDirector in
ServiceWiring. The Director is actually powerless and doesn't get
to make any decisions--the appropriate builder is passed in from
ServiceWiring which checks the mode.
4. Access the service in SkinMinerva to set a userMenuHTML data member
on the Minerva QuickTemplate.
5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
and do the usual song and dance of inflating a Mustache template.
This patch does everything except add a service, which was agreed to
be unnecessary, so that logic is now in SkinMinerva.
- Wrap the existing echo user notifications button and new user menu
button in a nav element. This seems like a semantic improvement.
- The existing styling and logic for the search bar and search overlay
are pretty messy and delicate. Changes made to that LESS endeavored to
be surgical. There's lots of room for improvement in the toolbar but
it's out of scope.
- Rename logout icon to logOut.
Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-06-25 20:12:58 +00:00
|
|
|
|
@menuButtonIconSize: 3.5em;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
|
|
|
// Headings
|
|
|
|
|
|
@fontSizeH1: 1.7em;
|
|
|
|
|
|
@fontSizeH2: 1.5em;
|
|
|
|
|
|
@fontSizeH3: 1.2em;
|
|
|
|
|
|
|
|
|
|
|
|
// Content
|
|
|
|
|
|
@contentPadding: 16px;
|
|
|
|
|
|
@contentMargin: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
// Header
|
2019-02-06 13:48:03 +00:00
|
|
|
|
@siteHeaderHeight: unit( 54 / @font-size-browser, em );
|
|
|
|
|
|
@overlayHeaderHeight: unit( 48 / @font-size-browser, em );
|
2019-07-18 15:27:18 +00:00
|
|
|
|
@headerVerticalPadding: 0.15em;
|
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;
|
2019-07-31 17:59:52 +00:00
|
|
|
|
@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @font-size-browser, em );
|
[UI] [new] add user menu
Add new user menu. The changes required include:
- Break up AuthMenuEntry into reusable components. They're now simple,
independent, static functions in AuthUtil that are easy to reason
about and compose.
There's lots of verbose code because of the builder and director
patterns. That is, most of the code is for building the thing we
actually want to build instead of just building it. It's easy to write
but no fun to read--even simple configurations are extremely verbose
expressions that must be threaded through the system.
These builders are also single purpose and unlikely to be reusable
unlike a URI builder, for example. As objects, they're not especially
composable either.
- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
inheritance. Inheritance has not worked well on the frontend of
MobileFrontend. I don't think it's going to work well here. E.g., I
could have made changes to the base class' getPersonalTools() method
such that the client passes a parameter for the advanced config or
maybe I just override it in the subclass. In either case, I think it
makes the whole hierarchy nuanced and harder to reason about for
something that should be simple.
- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.
- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
the entry name, AuthMenuEntry.
- Extension:SandboxLink is needed to display the sandbox link in the
user menu.
- Performance note: the toolbar is now processed in MinervaTemplate,
which corresponds to removing the buildPersonalUrls() override.
- To mimic the design of main menu, the following steps would be
necessary:
1. Create a user/Default and user/Advanced user menu builder and also
a user/IBuilder interface.
2. Create a user/Director.
3. Create a service entry for Minerva.Menu.UserDirector in
ServiceWiring. The Director is actually powerless and doesn't get
to make any decisions--the appropriate builder is passed in from
ServiceWiring which checks the mode.
4. Access the service in SkinMinerva to set a userMenuHTML data member
on the Minerva QuickTemplate.
5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
and do the usual song and dance of inflating a Mustache template.
This patch does everything except add a service, which was agreed to
be unnecessary, so that logic is now in SkinMinerva.
- Wrap the existing echo user notifications button and new user menu
button in a nav element. This seems like a semantic improvement.
- The existing styling and logic for the search bar and search overlay
are pretty messy and delicate. Changes made to that LESS endeavored to
be surgical. There's lots of room for improvement in the toolbar but
it's out of scope.
- Rename logout icon to logOut.
Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-06-25 20:12:58 +00:00
|
|
|
|
@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @iconGutterWidth) - @searchBoxWidth;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
|
|
|
@titleSectionSpacingTop: 20px;
|
|
|
|
|
|
|
2019-01-10 22:59:56 +00:00
|
|
|
|
// Page actions
|
|
|
|
|
|
@taglineFontSize: 0.85em;
|
2019-02-13 19:42:15 +00:00
|
|
|
|
@pageActionBorder: 1px;
|
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 );
|
|
|
|
|
|
|
|
|
|
|
|
@lastModifiedBarActiveBackgroundColor: #00af89;
|
|
|
|
|
|
@toastNotificationColor: @colorGray2;
|
|
|
|
|
|
|
2019-12-06 05:12:46 +00:00
|
|
|
|
// Typography
|
|
|
|
|
|
@font-family-serif: '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
|
|
|
|
|
|
*/
|
2019-12-06 05:12:46 +00:00
|
|
|
|
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
|
|
|
|
|
|
@line-height-content: 1.65;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
|
|
|
@headingMargin: 0.5em;
|
|
|
|
|
|
|
2018-10-13 18:55:34 +00:00
|
|
|
|
// blockquote
|
2020-10-19 22:05:45 +00:00
|
|
|
|
@padding-start-blockquote: 32px;
|
|
|
|
|
|
// Make it a tad smaller on mobile to fit more contents.
|
|
|
|
|
|
@padding-end-blockquote: 24px;
|
|
|
|
|
|
@padding-vertical-blockquote: 8px;
|
2017-07-12 15:12:40 +00:00
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
|
|
|
|
|
// Wiki specific variables
|
|
|
|
|
|
@infoboxWidth: 320px;
|
|
|
|
|
|
|
|
|
|
|
|
@lastModifiedBarBgColor: @chromeColor;
|
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;
|
|
|
|
|
|
|
2020-04-17 19:47:19 +00:00
|
|
|
|
// Opacity
|
2020-05-04 17:50:55 +00:00
|
|
|
|
@opacity-icon-base: 0.87; // = `#222` on `background-color: #fff`, closest to `#202122`
|
2020-04-17 19:47:19 +00:00
|
|
|
|
@opacity-icon-subtle: 0.66; // = `#565656 on `background-color: #fff`, closest to `#54595d`
|
|
|
|
|
|
|
2017-10-23 16:37:32 +00:00
|
|
|
|
// z-index:
|
2019-04-04 21:20:39 +00:00
|
|
|
|
@z-indexOccluded: -1;
|
2019-05-14 10:17:45 +00:00
|
|
|
|
@z-indexBase: 0;
|
|
|
|
|
|
@z-indexAboveContent: 1;
|
|
|
|
|
|
@z-indexDrawer: 2;
|
|
|
|
|
|
@z-indexOverlay: 3;
|
|
|
|
|
|
@z-indexOverOverlay: 4;
|
2017-10-19 02:49:01 +00:00
|
|
|
|
|
|
|
|
|
|
// Print specific
|
|
|
|
|
|
@colorPrintSubtle: #999;
|
|
|
|
|
|
@borderColorPrint: #999;
|
2019-08-01 20:35:10 +00:00
|
|
|
|
|
2019-10-23 04:01:22 +00:00
|
|
|
|
// Animations & Transitions
|
2022-09-17 06:53:13 +00:00
|
|
|
|
// Transitions > Timing Functions
|
2019-10-24 21:50:38 +00:00
|
|
|
|
@transition-timing-function-menu: ease-in-out;
|