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

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
This commit is contained in:
Volker E 2019-09-26 16:43:42 -07:00
parent 0dcc6bf431
commit 9055676640
7 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/common.less
View File

@ -70,7 +70,7 @@ body {
& h1,
&-content h1 {
font-size: @content-heading-font-size;
font-size: @font-size-heading-first;
}
.firstHeading {
@ -80,8 +80,8 @@ body {
.mw-indicators {
float: right;
font-size: @font-size-base;
line-height: @content-line-height;
font-size: @content-font-size;
/* Ensure that this is displayed on top of .mw-body-content and clickable */
position: relative;
z-index: 1;
@ -97,8 +97,8 @@ body {
.mw-body-content {
position: relative;
font-size: @font-size-base;
line-height: @content-line-height;
font-size: @content-font-size;
z-index: 0;
p {
@ -111,8 +111,8 @@ body {
}
h2 {
font-size: 1.5em;
margin-top: 1em;
font-size: @font-size-heading-2;
}
h3,
@ -126,7 +126,7 @@ body {
}
h3 {
font-size: 1.2em;
font-size: @font-size-heading-3;
}
h3,
@ -137,12 +137,12 @@ body {
h4,
h5,
h6 {
font-size: 100%; /* (reset) */
font-size: @font-size-reset; // Reset.
}
.toc h2 {
font-family: @font-family-sans;
font-size: 100%; /* (reset) */
font-size: @font-size-reset; // Reset.
}
}
@ -168,5 +168,5 @@ pre,
/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
font-size: 0.8em;
font-size: @font-size-site-notice;
}

2
components/footer.less
View File

@ -15,7 +15,7 @@
color: @color-base;
margin: 0;
padding: 0.5em 0;
font-size: 0.7em;
font-size: @font-size-footer;
}
}

8
components/navigation.less
View File

@ -72,11 +72,11 @@
/* Panel */
#mw-panel {
font-size: @menu-main-font-size;
position: absolute;
top: 0;
width: 10em;
left: 0;
font-size: @font-size-menu-main;
.portal {
margin: 0 0.6em 0 0.7em;
@ -86,13 +86,13 @@
background-repeat: no-repeat;
h3 {
font-size: @menu-main-heading-font-size;
color: @menu-main-heading-color;
font-weight: normal;
margin: 0.5em 0 0 (@menu-main-body-margin-left/@menu-main-heading-font-size);
margin: 0.5em 0 0 ( @menu-main-body-margin-left / @font-size-menu-main-heading );
padding: 0.25em 0;
cursor: default;
border: 0;
font-size: @font-size-menu-main-heading;
}
.body {
@ -111,7 +111,7 @@
line-height: 1.125em;
margin: 0;
padding: 0.25em 0;
font-size: @menu-main-body-font-size;
font-size: @font-size-menu-main-body;
word-wrap: break-word;
a {

8
components/tabs.less
View File

@ -72,7 +72,7 @@
padding-left: 0.615em; // Equals `8px` at computed `font-size` of `13px` below
padding-right: 0.615em;
cursor: pointer;
font-size: 0.8125em; // Equals `13px` at browser default of `16px`
font-size: @font-size-tabs;
}
}
@ -104,10 +104,10 @@
span {
position: relative;
display: block;
font-size: 0.8125em;
padding-left: 0.615em;
padding-top: 1.25em;
padding-right: 16px;
font-size: @font-size-tabs;
font-weight: normal;
color: #444;
@ -182,7 +182,7 @@
padding: 0.625em;
white-space: nowrap;
cursor: pointer;
font-size: 0.8125em;
font-size: @font-size-tabs;
}
&.selected a,
@ -198,7 +198,7 @@
.background-image('images/tab-break.png');
background-repeat: no-repeat;
background-position: bottom right;
font-size: 1em;
font-size: @font-size-reset;
height: 2.5em;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
// act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well.

3
skinStyles/mediawiki.notification.less
View File

@ -1,9 +1,10 @@
@import 'mediawiki.ui/variables';
@import '../variables.less';
/* mediawiki.notification */
.mw-notification-area {
font-size: 0.8em;
font-size: @font-size-notification;
}
.mw-notification-area-layout {

2
skinStyles/ooui.less
View File

@ -8,5 +8,5 @@
body > .oo-ui-windowManager,
.oo-ui-defaultOverlay {
font-size: @content-font-size;
font-size: @font-size-base;
}

24
variables.less
View File

@ -15,25 +15,31 @@
@color-link-visited: #0b0080;
@color-link-selected: @color-base;
@font-size-base: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@font-size-reset: @font-size-root;
@font-size-heading-first: 1.8em;
@font-size-heading-2: 1.5em;
@font-size-heading-3: 1.2em;
@font-size-notification: 0.8em;
@font-size-site-notice: 0.8em;
// FIXME: Use global variable since Echo and CentralNotice use this variable
@content-border-color: #a7d7f9;
@content-font-size: 0.875em;
@pureBlack: #000;
@content-line-height: 1.6;
@content-padding: 1em;
@content-heading-font-size: 1.8em;
@heading-line-height: 1.3;
// Navigation
@background-color-secondary: #f6f6f6;
// Main menu
@menu-main-font-size: inherit;
@font-size-menu-main: inherit;
@menu-main-heading-font-size: 0.75em;
@font-size-menu-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.
@menu-main-heading-color: #444;
@menu-main-body-font-size: 0.75em;
@font-size-menu-main-body: unit( 12 / @font-size-browser, em );
@menu-main-body-margin-left: 0.5em;
@menu-main-body-padding: 0.3em 0 0 0;
@ -42,6 +48,14 @@
@font-size-menu-personal: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px`
// Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
// 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`.
// 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;