wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-15 03:34:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Visual change] Normalize small font sizes in Vector 2022

Browse source 
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.

@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).

This removal requires the following changes:

* Removing max-height & box-sizing from tabs, since
  they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
  to use `unit( 12 / @font-size-browser, rem )` instead
  of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
  it's width/height depended on
  .mixin-vector-arrowed-dropdown-toggle()

Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
  is removed from Zebra

Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.

* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px

*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.

Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
This commit is contained in:
Jan Drewniak 2023-10-18 11:58:49 -04:00 committed by Jdlrobson
parent 0c4b6d9874
commit 751454d7a8
10 changed files with 11 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/skins.vector.styles/components/MenuTabs.less
View file

@ -67,10 +67,6 @@
display: inline-flex;
position: relative;
cursor: pointer;
// max-height & box-sizing to make link, watchstar & dropdown height consistent.
// NOTE: Was 40px instead of 41, but changed to avoid visual regressions.
max-height: unit( 41 / @font-size-tabs / @font-size-browser, em );
box-sizing: border-box;
font-weight: normal;
}

2
resources/skins.vector.styles/components/PageToolbar.less
View file

@ -2,7 +2,7 @@
.vector-page-toolbar-container {
display: flex;
font-size: @font-size-tabs;
font-size: unit( @font-size-small, rem );
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
box-shadow: 0 1px @border-color-portal-heading;
// Add bottom margin to account for box-shadow

1
resources/skins.vector.styles/components/PinnableHeader.less
View file

@ -30,6 +30,7 @@
color: @color-progressive;
cursor: pointer;
text-align: left;
font-size: unit( @font-size-small, rem );
&:hover {
color: @color-progressive--hover;

5
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -29,13 +29,10 @@
display: none;
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{size-toc-subsection-toggle-icon} - 1px )'; // leaves 6px between icon + text
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
left: -@spacing-subsection-toggle; // leaves 6px between icon + text
transition: @transition-duration-base;
color: transparent;
cursor: pointer;
// Vertically center the icon with the text
margin-top: 2px;
// Reset <button> default browser styles
border: 0;
background: none;

3
resources/skins.vector.styles/layouts/screen.less
View file

@ -93,8 +93,7 @@ body {
// are rendered.
#contentSub:not( :empty ),
#contentSub2 {
font-size: 84%;
line-height: 1.2em;
font-size: unit( @font-size-small, rem );
color: @color-subtle;
width: auto;
// Visually separate #contentSub and #contentSub2 (T315639)

6
resources/skins.vector.styles/mixins.less
View file

@ -22,10 +22,10 @@
&::after {
content: '';
background: url( ./images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
width: unit( 12 / @font-size-browser, rem );
height: unit( 12 / @font-size-browser, rem );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
margin-left: 7px;
}
}

2
resources/skins.vector.styles/typography.less
View file

@ -88,7 +88,7 @@ pre,
line-height: @line-height-base;
#siteSub {
font-size: 12.8px; // T311421
font-size: unit( @font-size-small, rem ); // T311421
}
h1 {

3
resources/skins.vector.styles/variables.less
View file

@ -76,7 +76,6 @@
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
// Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
@padding-horizontal-tabs: 8px;
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;
@ -103,7 +102,7 @@
// TOC
@spacing-subsection-toggle: 22px; // @size-toc-subsection-toggle-icon @ 12
@size-toc-subsection-toggle-icon: 1.834em;
@size-toc-subsection-toggle-icon: unit( @font-size-large, rem);
// Add the top padding of .mw-body element to @margin-top-pinned-page-tools
// since it starts higher on the page.
@margin-top-pinned-toc: @margin-top-pinned-page-tools + @padding-top-content;

12
resources/skins.vector.zebra.styles/mixins.less
View file

@ -14,14 +14,6 @@
box-sizing: border-box;
}
// Defines the arrow beside dropdown headings.
.mixin-vector-legacy-menu-heading-arrow {
content: '';
background: url( ../skins.vector.styles/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
}
.mixin-vector-arrowed-dropdown-toggle() {
display: inline-flex;
align-items: center;
@ -29,8 +21,8 @@
&::after {
content: '';
background: url( ../skins.vector.styles/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
width: unit( 16 / @font-size-browser, rem );
height: unit( 16 / @font-size-browser, rem );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
}

1
resources/skins.vector.zebra.styles/variables.less
View file

@ -77,7 +77,6 @@
@line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
// Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.
@padding-horizontal-tabs: 8px;
@padding-top-tabs: 12px;
@padding-vertical-tabs: @padding-top-tabs 0 7px 0;