golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
VectorGOLEM/variables.less

97 lines
3.7 KiB
Plaintext
Raw Normal View History

hygiene: Make LESS imports non-ambigious Some LESS parsers will get confused with the lack of file extension. It's better to be explicit and in alignment with recent change in core I379334d7729e587a2a00. It was already weirdly mixed in this repo with some imports featuring extension and some not. Change-Id: If5065cf9e30289de9b4fd33315bd65b75959ecb7
2019-10-25 20:46:51 +00:00
@import 'mediawiki.ui/variables.less';
Print styles: footer Tones down license information and makes last updated primary information in printed view Additional changes: * variables now inherits from mediawiki.ui Bug: T169823 Change-Id: Ie678967a27baec8715cf86b6a0f7e7651f867be1
2017-07-20 21:58:01 +00:00
Increase distance of button to container Increasing the distance of the button slightly changes the position from end, putting the icon in a more appropriate place (harmonized whitespace of input value and icon). Also simplifying `font-size` calculations readability and equalling their values in search input and button. Bug: T225331 Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
2019-09-18 22:26:38 +00:00
@font-size-root: 100%;
Update user avatar icon Updating user avatar icon to overhauled standard WikimediaUI icon. Also: - change `line-height` of personal menu to `14px` for better positioning and introducing corresponding LESS variables - slightly increase user avatar icon to be on par with ULS one - putting avatar icon within link on active user, an awful user experience that has long bugged me. Bug: T123810 Change-Id: Iabde041090a87968b5f82e36fd81419083f80984
2018-10-09 19:29:58 +00:00
@font-size-browser: 16; // Assumed browser default of `16px`
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Add comments to the font-stacks, reference documentation Bug: T244794 Change-Id: Ie8f357ff747ffda9a41eb65856839e0f83f3853d
2020-03-07 09:27:37 +00:00
//
// == Typography ==
//
// Detailed documentation of the font choices:
// 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
// See T73240 for a related discussion concerning the serif font stack.
// Note: Numbers in Georgia font are non-lining, the font-feature to change this is documented at:
// https://www.mediawiki.org/wiki/Talk:Typography_refresh/Archive_2#Numbers_looks_weird_in_article_title
@font-family-serif:
'Linux Libertine', // GNU+Linux, alternative to Times New Roman.
'Georgia', // Windows, intended as a serif typeface that would appear elegant but
// legible printed small or on low-resolution screens.
'Times', // Windows, very similar to Times New Roman with subtle differences.
serif; // Platform default: 'Times New Roman' on Windows.
//
// Body content uses the user setting in browser / the system default sans-serif font:
// Arial on Windows, Roboto on Android.
Update LESS variable naming scheme for `@font-family*` variables Reyling only on base font family variables. It's debatable if something like `@font-family-base` would make sense, but with only 3 variables the abstraction would seem over-engineered for the time being. Change-Id: I294ef8753dd3c73f4ed3fd89d43978dfaf6e0f06
2019-09-26 22:48:15 +00:00
// FIXME: Use WikimediaUI Base's OS specific default sans-serif fonts.
Add comments to the font-stacks, reference documentation Bug: T244794 Change-Id: Ie8f357ff747ffda9a41eb65856839e0f83f3853d
2020-03-07 09:27:37 +00:00
Update LESS variable naming scheme for `@font-family*` variables Reyling only on base font family variables. It's debatable if something like `@font-family-base` would make sense, but with only 3 variables the abstraction would seem over-engineered for the time being. Change-Id: I294ef8753dd3c73f4ed3fd89d43978dfaf6e0f06
2019-09-26 22:48:15 +00:00
@font-family-sans: sans-serif;
Add comments to the font-stacks, reference documentation Bug: T244794 Change-Id: Ie8f357ff747ffda9a41eb65856839e0f83f3853d
2020-03-07 09:27:37 +00:00
// Fallback for headings, language: ja,he,ko. See T73240,T65817,T65843,T65844,T65827.
Update LESS variable naming scheme for `@font-family*` variables Reyling only on base font family variables. It's debatable if something like `@font-family-base` would make sense, but with only 3 variables the abstraction would seem over-engineered for the time being. Change-Id: I294ef8753dd3c73f4ed3fd89d43978dfaf6e0f06
2019-09-26 22:48:15 +00:00
@font-family-sans--fallback: sans-serif;
Print mode: Define when to use serif and when to use sans-serif Additional changes: * Define variables for fonts and use them * Group and make clearer where fonts apply Bug: T169823 Change-Id: I0b7d557048859936f2eb2f646202bc8071bb84ba
2017-07-25 21:41:00 +00:00
Add comments to the font-stacks, reference documentation Bug: T244794 Change-Id: Ie8f357ff747ffda9a41eb65856839e0f83f3853d
2020-03-07 09:27:37 +00:00
//
// == Page content ==
//
Align LESS color variables to naming scheme, combine and cleanup Merging similar value applications in generalized variables, and aligning to property-identifier-modifier scheme. Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 21:12:01 +00:00
@background-color-base: #fff;
@color-base: #222;
Variablize all `color` property values Also going with `--modifier` naming scheme when direct pseudo-class modifying variable. And fixing small typo. Change-Id: Ife2f9dc9cb57c063a43e4b3dfad3c737aaf3b72b
2019-09-30 06:36:58 +00:00
@color-base--emphasized: #000;
Align LESS color variables to naming scheme, combine and cleanup Merging similar value applications in generalized variables, and aligning to property-identifier-modifier scheme. Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 21:12:01 +00:00
@color-link: #0645ad;
Variablize all `color` property values Also going with `--modifier` naming scheme when direct pseudo-class modifying variable. And fixing small typo. Change-Id: Ife2f9dc9cb57c063a43e4b3dfad3c737aaf3b72b
2019-09-30 06:36:58 +00:00
@color-link--visited: #0b0080;
@color-link-new: #a55858;
Align LESS color variables to naming scheme, combine and cleanup Merging similar value applications in generalized variables, and aligning to property-identifier-modifier scheme. Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 21:12:01 +00:00
@color-link-selected: @color-base;
Unify LESS variable naming scheme for `@font-size-*` variables Unifying variable naming to property-identifier-modifier scheme, while also collecting all non-print values variables in corresponding file. We will amend the `em` based values to calculations that will enable rendered full pixel values and also fix some connected usability issues in the future. Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 23:43:42 +00:00
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@font-size-reset: @font-size-root;
Unify heading font size variable naming Follow-up to I378e8a2af91fe079 Change-Id: Ib1affae440f23e7d9b648ce4b8b85cf2d3a2e1d2
2019-09-27 17:49:02 +00:00
@font-size-heading-1: 1.8em;
Unify LESS variable naming scheme for `@font-size-*` variables Unifying variable naming to property-identifier-modifier scheme, while also collecting all non-print values variables in corresponding file. We will amend the `em` based values to calculations that will enable rendered full pixel values and also fix some connected usability issues in the future. Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
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;
Unify LESS variable naming scheme for `@line-height-*` variables Unifying variable naming to property-identifier-modifier scheme. Settling on non-em-based `line-height` values with one exception of Vector tabs, where removing `em` would lead to different calculation. Also removing unneeded `inherit` assignment on content paragraphs that has been part since Ic5ba836364. Bug: T4013 Change-Id: I514467e4065d27de8d0ea82cdd3d23ccef6cffe3
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;
Unify LESS variable naming scheme for `@font-size-*` variables Unifying variable naming to property-identifier-modifier scheme, while also collecting all non-print values variables in corresponding file. We will amend the `em` based values to calculations that will enable rendered full pixel values and also fix some connected usability issues in the future. Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 23:43:42 +00:00
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
// FIXME: Use global variable since Echo and CentralNotice use this variable
Unify LESS variable naming scheme for `@border-*` variables Unifying variable naming to property-identifier-modifier scheme and use already existing variables out of mediawiki.ui variables file, which gets imported by Vector and its variables (like `@border-width-base`) are already in use in a few places. Change-Id: Ic25b1517bf180a9bce437215c1309bb9f4dd15be
2019-09-28 07:25:09 +00:00
@border-color-content: #a7d7f9;
Replace raster image gradients with CSS where easily applicable Replace raster image gradients (before base64 embedded) for modern browsers by CSS gradients. Only relying on conventional image URLs in browsers that don't support linear-gradient. Also - adding a darkened border for inactive tabs to harmonize visual perception of border as one continuous line and - DRYing tab separator selectors, saving ~8 bytes gzipped. Bug: T63099 Bug: T121730 Change-Id: I76d32b84ddff06a2c7ef983e6f89ca6e74257a67
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% );
Unify LESS variable naming scheme for `@margin-*`/`@padding-*` variables Unifying variable naming to property-identifier-modifier scheme. Also removing `@padding` variable with only one single usage, instead of extracting it from its place of application enable simpler readability. Change-Id: I602fe645b233000bcecaeee6cf19d20e49a64c78
2019-09-28 06:24:34 +00:00
@padding-content: 1em;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
// Navigation
Align LESS color variables to naming scheme, combine and cleanup Merging similar value applications in generalized variables, and aligning to property-identifier-modifier scheme. Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 21:12:01 +00:00
@background-color-secondary: #f6f6f6;
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
@color-nav-subtle: #444;
Unify LESS variable naming scheme for `@line-height-*` variables Unifying variable naming to property-identifier-modifier scheme. Settling on non-em-based `line-height` values with one exception of Vector tabs, where removing `em` would lead to different calculation. Also removing unneeded `inherit` assignment on content paragraphs that has been part since Ic5ba836364. Bug: T4013 Change-Id: I514467e4065d27de8d0ea82cdd3d23ccef6cffe3
2019-09-27 04:25:59 +00:00
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
@line-height-nav: 1.125em;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
// Navigation: Main
@font-size-nav-main: inherit;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
@font-size-nav-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
@font-size-nav-main-body: unit( 12 / @font-size-browser, em );
@margin-left-nav-main-body: 0.5em;
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 11:38:34 +00:00
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
// Navigation: Personal tools
@background-position-nav-personal-icon: left ( 4 / @font-size-browser / @font-size-nav-personal );
@background-size-nav-personal-icon: 14 / @font-size-browser / @font-size-nav-personal;
@font-size-nav-personal: 0.75em;
Unify LESS variable naming scheme for `@line-height-*` variables Unifying variable naming to property-identifier-modifier scheme. Settling on non-em-based `line-height` values with one exception of Vector tabs, where removing `em` would lead to different calculation. Also removing unneeded `inherit` assignment on content paragraphs that has been part since Ic5ba836364. Bug: T4013 Change-Id: I514467e4065d27de8d0ea82cdd3d23ccef6cffe3
2019-09-27 04:25:59 +00:00
// Using `unit()` without second parameter to achieve a unitless output for `line-height`.
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 20:21:41 +00:00
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
Increase distance of button to container Increasing the distance of the button slightly changes the position from end, putting the icon in a more appropriate place (harmonized whitespace of input value and icon). Also simplifying `font-size` calculations readability and equalling their values in search input and button. Bug: T225331 Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
2019-09-18 22:26:38 +00:00
Unify LESS variable naming scheme for `@font-size-*` variables Unifying variable naming to property-identifier-modifier scheme, while also collecting all non-print values variables in corresponding file. We will amend the `em` based values to calculations that will enable rendered full pixel values and also fix some connected usability issues in the future. Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 23:43:42 +00:00
// Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
Increase distance of button to container Increasing the distance of the button slightly changes the position from end, putting the icon in a more appropriate place (harmonized whitespace of input value and icon). Also simplifying `font-size` calculations readability and equalling their values in search input and button. Bug: T225331 Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
2019-09-18 22:26:38 +00:00
// Search
@width-search-button: 24 / @font-size-browser / @font-size-search-input;
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
Unify LESS variable naming scheme for `@font-size-*` variables Unifying variable naming to property-identifier-modifier scheme, while also collecting all non-print values variables in corresponding file. We will amend the `em` based values to calculations that will enable rendered full pixel values and also fix some connected usability issues in the future. Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 23:43:42 +00:00
// Footer
// FIXME: Currently calculates at 11.2px, which is worth nothing and unreadable for a big
// part of our audiences. Push up _at least_ to 12px.
@font-size-footer: 0.7em;