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

Bring personal tools' icons on baseline with label 

Put icons on baseline as good as possible cross-browser. It's
complete waste of time trying. And is partly originated
in different internal text node sizing in various browsers,
biggest browser share difference is Chrome/Yandex/Safari 5 on Windows
against all others. Partly it's a result of us relying on `sans-serif`
generic font family instead of `Arial` – it results in different letter
baseline position within font's virtual letter box, which eats my limited
time on Planet Earth uselessly away.
Also adding and renaming LESS variable for proper code style.

Bug: T207075
Change-Id: I92acb9851a3c0acdbc40a4a4528a91c7332c9293
This commit is contained in:
Volker E 2018-10-15 16:19:45 -07:00
parent d3ed21abc9
commit f42faabb49
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/personalMenu.less
View File

@ -20,26 +20,38 @@
li {
float: left;
margin-left: 0.75em;
margin-top: 0.5em;
font-size: @menu-personal-font-size;
// `padding-top` instead of `margin-top` necessary for
// anonymous user icon position below
padding-top: 0.5em;
font-size: @font-size-menu-personal;
line-height: @line-height-menu-personal;
white-space: nowrap;
}
}
/* Icon for Usernames */
#pt-userpage a,
#pt-anonuserpage {
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
#pt-userpage a {
// SVG support using a transparent gradient to guarantee cross-browser
// compatibility (browsers able to understand gradient syntax support also SVG)
.background-image-svg( 'images/user-avatar.svg', 'images/user-avatar.png' );
background-position: left top;
background-position: @background-position-menu-personal-icon;
background-repeat: no-repeat;
background-size: @line-height-menu-personal @line-height-menu-personal;
// Same as `#p-personal li` above
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
padding-left: 16px !important; // stylelint-disable-line declaration-no-important
}
/* Show "Not logged in" text in gray */
#pt-userpage {
padding-top: 0 !important; // stylelint-disable-line declaration-no-important
a {
display: inline-block;
}
}
/* Show anonymous "Not logged in" text in gray */
#pt-anonuserpage {
color: #54595d;
}

5
variables.less
View File

@ -41,5 +41,6 @@
@menu-main-body-padding: 0.3em 0 0 0;
// Personal menu
@menu-personal-font-size: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @menu-personal-font-size; // equals `1.667em`≈`14px`
@background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal );
@font-size-menu-personal: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px`