2018-05-20 18:58:47 +00:00
|
|
|
@import 'mediawiki.skin.variables.less';
|
2022-01-12 19:36:45 +00:00
|
|
|
@import 'mediawiki.ui/variables.less';
|
2017-07-20 21:58:01 +00:00
|
|
|
|
2022-06-23 21:33:47 +00:00
|
|
|
//
|
|
|
|
|
// == Media query breakpoints ==
|
|
|
|
|
//
|
|
|
|
|
@min-width-mobile: @width-breakpoint-mobile; // Above 320px
|
|
|
|
|
@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px
|
|
|
|
|
@min-width-tablet: @width-breakpoint-tablet; // Above 720px
|
|
|
|
|
@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px
|
|
|
|
|
@min-width-desktop: @width-breakpoint-desktop; // Above 1000px
|
|
|
|
|
@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px
|
|
|
|
|
@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px
|
|
|
|
|
|
2020-08-27 09:43:55 +00:00
|
|
|
// Sizing calculation primitives.
|
2019-09-18 22:26:38 +00:00
|
|
|
@font-size-root: 100%;
|
2018-10-09 19:29:58 +00:00
|
|
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2020-03-07 09:27:37 +00:00
|
|
|
//
|
|
|
|
|
// == Page content ==
|
|
|
|
|
//
|
|
|
|
|
|
2020-06-12 01:17:24 +00:00
|
|
|
@color-base--subtle: #54595d;
|
2019-09-26 21:12:01 +00:00
|
|
|
@color-link-selected: @color-base;
|
|
|
|
|
|
2020-06-12 00:39:50 +00:00
|
|
|
@outline-color-base--focus: @color-primary;
|
|
|
|
|
|
2020-08-27 09:43:55 +00:00
|
|
|
//
|
|
|
|
|
// == Typography ==
|
|
|
|
|
//
|
|
|
|
|
// Typography in Wikimedia Design Style Guide:;
|
|
|
|
|
// https://design.wikimedia.org/style-guide/visual-style_typography.html
|
|
|
|
|
// Historic overview and background information of fonts in Wikimedia software:
|
|
|
|
|
// https://www.mediawiki.org/wiki/Wikimedia_User_Interface/Use_cases/Font_family_stack
|
|
|
|
|
// Source of this font stack definition in WikimediaUI Base:
|
|
|
|
|
// https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less$202
|
2020-09-16 21:29:04 +00:00
|
|
|
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
2020-08-27 09:43:55 +00:00
|
|
|
|
|
|
|
|
// Body content uses the user setting in browser / operating system default sans-serif font:
|
|
|
|
|
// For example, Arial on Windows, Roboto on Android.
|
|
|
|
|
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
|
2018-05-20 18:58:47 +00:00
|
|
|
// @font-family-sans is set in mediawiki.variables/variables.less
|
2020-08-27 09:43:55 +00:00
|
|
|
|
|
|
|
|
// Fallback for headings, language: ja,he,ko. See T73240, T65817, T65843, T65844, T65827.
|
|
|
|
|
@font-family-sans--fallback: sans-serif;
|
|
|
|
|
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
2020-08-27 08:27:50 +00:00
|
|
|
@font-size-base--trident-hack: calc( 1em ~'*' unit( @font-size-base ) );
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-reset: @font-size-root;
|
2019-09-27 17:49:02 +00:00
|
|
|
@font-size-heading-1: 1.8em;
|
2019-09-26 23:43:42 +00:00
|
|
|
@font-size-heading-2: 1.5em;
|
|
|
|
|
@font-size-heading-3: 1.2em;
|
|
|
|
|
@font-size-notification: 0.8em;
|
|
|
|
|
@font-size-site-notice: 0.8em;
|
2020-05-14 22:19:50 +00:00
|
|
|
@font-size-footer: unit( 12 / @font-size-browser, em );
|
2020-08-27 09:43:55 +00:00
|
|
|
|
2019-09-27 04:25:59 +00:00
|
|
|
@line-height-base: 1.6;
|
|
|
|
|
@line-height-heading: 1.3;
|
|
|
|
|
@line-height-code: 1.3;
|
|
|
|
|
@line-height-footer-info: 1.4;
|
|
|
|
|
@line-height-footer-buttons: 2;
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2020-05-28 03:18:56 +00:00
|
|
|
@size-sidebar-button: unit( 44 / @font-size-browser, em ); // Equals `2.75em`.
|
2021-03-22 22:59:18 +00:00
|
|
|
|
|
|
|
|
@size-icon: unit( 20 / @font-size-browser, em );
|
2022-07-19 19:25:18 +00:00
|
|
|
@size-indicator: unit( 12 / @font-size-browser, em );
|
2022-07-08 16:13:32 +00:00
|
|
|
// Copied from mediawiki.ui.icons
|
|
|
|
|
@icon-padding-md: unit( 12 / @font-size-browser, em );
|
2021-03-22 22:59:18 +00:00
|
|
|
|
|
|
|
|
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
|
|
|
|
|
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
|
|
|
|
|
|
2014-08-07 11:38:34 +00:00
|
|
|
// FIXME: Use global variable since Echo and CentralNotice use this variable
|
2019-09-28 07:25:09 +00:00
|
|
|
@border-color-content: #a7d7f9;
|
2017-10-08 02:58:20 +00:00
|
|
|
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
|
|
|
|
|
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
|
2020-06-08 21:02:09 +00:00
|
|
|
@border-color-portal-heading: #c8ccd1;
|
2022-06-06 21:39:57 +00:00
|
|
|
@border-color-pagetitle: #eaecf0;
|
2020-06-08 21:02:09 +00:00
|
|
|
// Use `rgba()` notation for better Safari support, see T254489.
|
|
|
|
|
@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
|
2020-10-19 22:23:21 +00:00
|
|
|
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
2022-06-06 21:39:57 +00:00
|
|
|
@padding-top-content: 0.5em;
|
2020-09-17 18:52:01 +00:00
|
|
|
@padding-horizontal-content: 0.5em;
|
2020-10-19 22:23:21 +00:00
|
|
|
@padding-blockquote: 8px 32px;
|
2022-07-19 11:23:35 +00:00
|
|
|
@border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
|
|
|
|
// Navigation
|
2019-09-26 21:12:01 +00:00
|
|
|
@background-color-secondary: #f6f6f6;
|
2019-09-29 20:21:41 +00:00
|
|
|
@color-nav-subtle: #444;
|
2019-09-27 04:25:59 +00:00
|
|
|
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
|
2019-09-29 20:21:41 +00:00
|
|
|
@line-height-nav: 1.125em;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2019-09-29 20:21:41 +00:00
|
|
|
// Navigation: Main
|
|
|
|
|
@font-size-nav-main: inherit;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2019-09-29 20:21:41 +00:00
|
|
|
@font-size-nav-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2019-09-29 20:21:41 +00:00
|
|
|
@font-size-nav-main-body: unit( 12 / @font-size-browser, em );
|
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.
Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.
It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.
Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.
Important changes:
* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.
* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.
* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.
Open questions:
* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?
* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.
[1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy
Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
|
|
|
@margin-start-nav-main-body: 0.5em;
|
|
|
|
|
|
|
|
|
|
// Navigation: Portal
|
|
|
|
|
// Font size of the Portal links.
|
|
|
|
|
@font-size-portal-list-item: @font-size-nav-main-body;
|
|
|
|
|
|
|
|
|
|
// Margin space from the start of the Portal (left edge in LTR
|
|
|
|
|
// languages).
|
|
|
|
|
@margin-start-portal: 0.7em;
|
|
|
|
|
|
2020-03-27 16:15:30 +00:00
|
|
|
// Margin space from the end of the Portal (right edge in LTR
|
|
|
|
|
// languages).
|
|
|
|
|
@margin-end-portal: 0.6em;
|
|
|
|
|
|
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
This commit is singularly focused on adding a link to the sidebar for
Vector, logged-in users. It does the bare minimum to fulfill the
requirements of T243281.
Additionally, it will help to answer the question "Do we need to use
abstractions (other than maybe different templates) to separate Legacy
Vector from Vector" by intentionally leaving out any abstractions in
order to make it easier to compare with a follow-up patch
(Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions.
It is a good thing to question whether or not we need addtional
abstractions in VectorTemplate and if they will help us as unnecessary
abstractions can have the opposite effect and just lead to further
frustrations down the road.
Therefore, I urge you, the reviewer, to let me know your thoughts! If
abstractions are viewed as not making our lives any easier, the
follow-up patches may be completely discarded and that's totally okay
with me. :) I think it's a good think to talk about now though.
Important changes:
* The VectorTemplate constructor was changed to allow injecting the
config, templateParser, and isLegacy boolean (only the config was
allowed before this commit). According to MediaWiki's Stable Interface
Policy, "Constructor signatures are generally considered unstable unless
explicitly declared stable for calling" [3]. Given that VecorTemplate's
constructor is not marked as stable, it is justified to do this without
warning according to the policy.
* Due to the above, the 'setTemplate' method is no longer needed and was
marked as deprecated.
* VectorTemplateTest was made to adapt to the new VectorTemplate
constructor. Additionally, it now extends from
MediaWikiIntegrationTestCase which my intelliphense server can pick up.
I *think* MediaWikiTestCase is just an alias to
MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed
to MediaWikiIntegrationTestCase in [2], but I'm willing to change it
back if there is pushback to this.
Open questions:
* What are VectorTemplate's responsibilities? To me, it acts right now
as a controller (because it echos the full HTML string from the
template), a model (because SkinTemplate::prepareQuickTemplate sets data
on it which it later retrieves through `$this->get()`), a presenter
(because it adds data tailored for a web-centric view), and a view
(because it renders HTML strings instead of letting the view/template be
solely responsible for that). Arguably, some business logic might be
mixed in there as well (because it checks to see if a User is logged
in/has necessary permissions to show x which my changes here add to).
This might not be a problem if we keep VectorTemplate relatively small,
but will it remain this way as we progress further in Desktop
Improvements?
* How do we write tests for VectorTemplate without exposing unnecessary
public methods? For example, if I want to test the `getSkinData()`
method to see what state will be sent to the template, how should I do
this? One option might be to use `TestingAccessWrapper` to expose these
private methods which is what
`VectorTemplateTest::testbuildViewsProps()` does. Another option is to
accept this method as public. Is there a better way? Keep in mind that
even with access to this method, there might be many things to mock.
[1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64
[2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76
[3] https://www.mediawiki.org/wiki/Stable_interface_policy
Bug: T243281
Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
|
|
|
// Margin space from the start of the Portal body (left edge in LTR languages).
|
|
|
|
|
@margin-start-portal-body: @margin-start-nav-main-body;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2019-09-29 20:21:41 +00:00
|
|
|
// Navigation: Personal tools
|
2020-10-16 22:27:43 +00:00
|
|
|
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
|
|
|
|
|
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
|
2020-04-06 21:57:13 +00:00
|
|
|
@top-personal-tools: 6px;
|
2019-09-29 20:21:41 +00:00
|
|
|
@font-size-nav-personal: 0.75em;
|
2019-09-27 04:25:59 +00:00
|
|
|
// Using `unit()` without second parameter to achieve a unitless output for `line-height`.
|
2019-09-29 20:21:41 +00:00
|
|
|
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
|
2019-09-18 22:26:38 +00:00
|
|
|
|
2019-09-26 23:43:42 +00:00
|
|
|
// Tabs
|
|
|
|
|
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
2021-06-30 07:36:23 +00:00
|
|
|
@padding-horizontal-tabs: 8px;
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2021-10-05 23:03:51 +00:00
|
|
|
// Menu button
|
|
|
|
|
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
|
|
|
|
|
|
2022-02-21 23:21:24 +00:00
|
|
|
// Sidebar
|
2022-04-28 18:21:52 +00:00
|
|
|
@width-sidebar-px: 220;
|
|
|
|
|
@width-sidebar-px-wide: 244;
|
|
|
|
|
@margin-toc-start-content: unit( ( @width-sidebar-px + 24 ) / @font-size-browser, em );
|
|
|
|
|
@margin-toc-start-content-wide: unit( ( @width-sidebar-px-wide + 52 ) / @font-size-browser, em ); // 18.5em;
|
|
|
|
|
@width-sidebar: unit( @width-sidebar-px / @font-size-browser, em );
|
|
|
|
|
@width-sidebar-wide: unit( @width-sidebar-px-wide / @font-size-browser, em );
|
2022-02-21 23:21:24 +00:00
|
|
|
|
2019-09-18 22:26:38 +00:00
|
|
|
// Search
|
2022-06-13 20:57:13 +00:00
|
|
|
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202
|
2020-10-30 19:39:13 +00:00
|
|
|
@min-width-search-button: 28px;
|
|
|
|
|
@width-search-button: unit( 28 / @font-size-browser / @font-size-search-input, em );
|
2019-09-18 22:26:38 +00:00
|
|
|
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
|
2022-02-01 20:52:16 +00:00
|
|
|
// Derived from @size-typeahead-search-focus-addition in Codex
|
|
|
|
|
// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#703
|
2021-06-30 07:36:23 +00:00
|
|
|
@size-search-expand: 24px;
|
2021-09-09 21:03:15 +00:00
|
|
|
@margin-end-search: 12px;
|
2019-09-26 23:43:42 +00:00
|
|
|
|
2022-07-20 14:32:24 +00:00
|
|
|
// Language button
|
|
|
|
|
@height-button-lang: unit( 32 / @font-size-browser, em );
|
2021-05-03 13:48:46 +00:00
|
|
|
|
2021-12-07 19:41:46 +00:00
|
|
|
// T296321 For sticky header, set an explicit height. This is needed for scroll padding
|
|
|
|
|
// and for other sticky elements on the page. Setting the height in relative units enables
|
|
|
|
|
// the header's height to adapt to the browser's font size setting. Because
|
|
|
|
|
// this variable is used to determine top offsets for sticky elements where the
|
|
|
|
|
// font-size might not be 16px, using rem avoids the cascading effects of em units.
|
|
|
|
|
@height-sticky-header: unit( 50px / @font-size-browser, rem );
|
|
|
|
|
|
2020-04-02 16:50:46 +00:00
|
|
|
// Z-indices
|
|
|
|
|
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
|
|
|
|
// @z-index-ui-datepicker-cover: -1;
|
|
|
|
|
@z-index-base: 0;
|
2020-11-19 17:12:53 +00:00
|
|
|
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
|
2020-12-18 17:51:44 +00:00
|
|
|
@z-index-header: 4;
|
2020-04-28 01:44:16 +00:00
|
|
|
@z-index-sidebar: 1;
|
2020-04-02 16:50:46 +00:00
|
|
|
@z-index-menu-checkbox: 1;
|
|
|
|
|
@z-index-search-button: 1;
|
2020-09-21 07:53:32 +00:00
|
|
|
@z-index-search-loader: 1;
|
2021-05-21 01:02:07 +00:00
|
|
|
// Ensure that this is displayed on top of .vector-body and clickable.
|
2020-04-02 16:50:46 +00:00
|
|
|
@z-index-indicators: 1;
|
|
|
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
|
|
|
// @z-index-ui-slider-range: 1;
|
|
|
|
|
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
|
2020-12-18 17:51:44 +00:00
|
|
|
@z-index-menu: 3;
|
2020-04-02 16:50:46 +00:00
|
|
|
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
|
|
|
|
// @z-index-ui-slider-handle: 2;
|
|
|
|
|
// Display on top of page tabs (T39158, T50078).
|
|
|
|
|
@z-index-personal: 100;
|
2020-03-30 20:07:35 +00:00
|
|
|
@z-index-sidebar-button: 101;
|
2020-04-02 16:50:46 +00:00
|
|
|
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
|
|
|
|
|
// @z-index-ui-selectable-helper: 100;
|
|
|
|
|
@z-index-overlay: 101;
|
|
|
|
|
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
|
|
|
|
|
// @z-index-ui-tooltip: 9999;
|
2020-03-30 20:07:35 +00:00
|
|
|
|
|
|
|
|
// Transitions
|
2021-12-07 19:41:46 +00:00
|
|
|
// Sticky header hide/show transition
|
|
|
|
|
@transition-sticky-header: transform 250ms linear;
|
2021-08-30 22:44:00 +00:00
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// Layout
|
|
|
|
|
//
|
2022-04-08 22:33:59 +00:00
|
|
|
@max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
|
2022-05-30 03:46:57 +00:00
|
|
|
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
|
2022-04-28 18:21:52 +00:00
|
|
|
@padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
|
|
|
|
|
@padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );
|
2022-06-30 22:37:08 +00:00
|
|
|
|
|
|
|
|
// Grid
|
|
|
|
|
@grid-row-gap: 24px;
|