From 7cbccd37a63aa9612083833f5dbbaf395dc3bba8 Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 9 Oct 2018 12:29:58 -0700 Subject: [PATCH] Update user avatar icon Updating user avatar icon to overhauled standard WikimediaUI icon. Also: - change `line-height` of personal menu to `14px` for better positioning and introducing corresponding LESS variables - slightly increase user avatar icon to be on par with ULS one - putting avatar icon within link on active user, an awful user experience that has long bugged me. Bug: T123810 Change-Id: Iabde041090a87968b5f82e36fd81419083f80984 --- components/personalMenu.less | 13 +++++++------ images/user-avatar.png | Bin 0 -> 261 bytes images/user-avatar.svg | 7 +++++++ images/user-icon.png | Bin 198 -> 0 bytes images/user-icon.svg | 5 ----- variables.less | 2 ++ 6 files changed, 16 insertions(+), 11 deletions(-) create mode 100644 images/user-avatar.png create mode 100644 images/user-avatar.svg delete mode 100644 images/user-icon.png delete mode 100644 images/user-icon.svg 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 0000000000000000000000000000000000000000..70ebd9e8232515f0f4360757fe32f561ce3db03c GIT binary patch literal 261 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQa_5nU2u0T2@G8TqnfQ;a%*w9#z zNN5Cz3qipVu@Mmw!IAMH5wXEQH4#v8dmag0khvv6e!&bMe{GEku@rcAWJgb>k(B7Y zJ9B37$=?3~luz_@aSV~TJoT(QUxNXU%SDU5?T>!X7Zp)pWf83ZnNoQo{1Q{d&Djff zxVvU^8L+Q%>`UL{Siev{_S*dX*QO^KW~dx)GM*Kb8>1m2IW59Q$M=TG@*eK8wUP_n gPjqard$gJN?+>1dhhFAI11)3lboFyt=akR{0H@(wjQ{`u literal 0 HcmV?d00001 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 eb376a490da6fc33fbc2a1d8a0f5ea415efd81e5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 198 zcmeAS@N?(olHy`uVBq!ia0vp^JV4CH!3HFy_x^nYq|GTkba>Da^dVAJ)?OJ~?;|!=xk4yasce9h#ZjbT!@`|I*H2 z#>;47qLRRU>Tkd;#*XXFKLTVJMCbEwXFbx`%C;*rfcc#BQ|W?TvRS{XO*Vc`;N{>v wB(W^fcB0fZW%paPOkMAjyKUHGB$lx;oWH@gBhACL9q2FyPgg&ebxsLQ00`JdBLDyZ 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`