diff --git a/components/personalMenu.less b/components/personalMenu.less index 979831f..9bb13f3 100644 --- a/components/personalMenu.less +++ b/components/personalMenu.less @@ -18,24 +18,25 @@ } li { - line-height: 1.125em; float: left; margin-left: 0.75em; margin-top: 0.5em; font-size: @menu-personal-font-size; + line-height: @line-height-menu-personal; white-space: nowrap; } } /* Icon for Usernames */ -#pt-userpage, +#pt-userpage a, #pt-anonuserpage { + // 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-repeat: no-repeat; - /* 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-icon.svg', 'images/user-icon.png'); - padding-left: 15px !important; // stylelint-disable-line declaration-no-important + background-size: @line-height-menu-personal @line-height-menu-personal; + padding-left: 16px !important; // stylelint-disable-line declaration-no-important } /* Show "Not logged in" text in gray */ diff --git a/images/user-avatar.png b/images/user-avatar.png new file mode 100644 index 0000000..70ebd9e Binary files /dev/null and b/images/user-avatar.png differ diff --git a/images/user-avatar.svg b/images/user-avatar.svg new file mode 100644 index 0000000..aa4ef95 --- /dev/null +++ b/images/user-avatar.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/user-icon.png b/images/user-icon.png deleted file mode 100644 index eb376a4..0000000 Binary files a/images/user-icon.png and /dev/null differ diff --git a/images/user-icon.svg b/images/user-icon.svg deleted file mode 100644 index e6f23a3..0000000 --- a/images/user-icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/variables.less b/variables.less index 4555136..c71917d 100644 --- a/variables.less +++ b/variables.less @@ -1,6 +1,7 @@ @import 'mediawiki.ui/variables'; @html-font-size: 100%; +@font-size-browser: 16; // Assumed browser default of `16px` @font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif; @font-family-sans-serif: sans-serif; @@ -41,3 +42,4 @@ // Personal menu @menu-personal-font-size: 0.75em; +@line-height-menu-personal: 14 / @font-size-browser / @menu-personal-font-size; // equals `1.667em`≈`14px`