diff --git a/components/personalMenu.less b/components/personalMenu.less
index 979831f31..9bb13f327 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 000000000..70ebd9e82
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 000000000..aa4ef9541
--- /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 eb376a490..000000000
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 e6f23a3d3..000000000
--- a/images/user-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
diff --git a/variables.less b/variables.less
index 455513664..c71917d5e 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`