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
This commit is contained in:
parent
a4b0de18c9
commit
7cbccd37a6
@ -18,24 +18,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
line-height: 1.125em;
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 0.75em;
|
margin-left: 0.75em;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
font-size: @menu-personal-font-size;
|
font-size: @menu-personal-font-size;
|
||||||
|
line-height: @line-height-menu-personal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icon for Usernames */
|
/* Icon for Usernames */
|
||||||
#pt-userpage,
|
#pt-userpage a,
|
||||||
#pt-anonuserpage {
|
#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-position: left top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
/* SVG support using a transparent gradient to guarantee cross-browser
|
background-size: @line-height-menu-personal @line-height-menu-personal;
|
||||||
* compatibility (browsers able to understand gradient syntax support also SVG) */
|
padding-left: 16px !important; // stylelint-disable-line declaration-no-important
|
||||||
.background-image-svg('images/user-icon.svg', 'images/user-icon.png');
|
|
||||||
padding-left: 15px !important; // stylelint-disable-line declaration-no-important
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show "Not logged in" text in gray */
|
/* Show "Not logged in" text in gray */
|
||||||
|
BIN
images/user-avatar.png
Normal file
BIN
images/user-avatar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 261 B |
7
images/user-avatar.svg
Normal file
7
images/user-avatar.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<g fill="#54595d">
|
||||||
|
<path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
|
||||||
|
<circle cx="10" cy="5.5" r="4.5"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 254 B |
Binary file not shown.
Before Width: | Height: | Size: 198 B |
@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13.836" viewBox="0 0 12 13.836">
|
|
||||||
<path fill="#72777d" d="M1.938,6.656c-1.32,1.485-1.47,3.15-0.97,4.25c0.323,0.707,0.78,1.127,1.313,1.375 c0.496,0.229,1.074,0.273,1.658,0.282c0.023,0,0.04,0.03,0.062,0.03h4.187c0.61,0,1.225-0.125,1.75-0.405 c0.527-0.28,0.961-0.718,1.188-1.376c0.335-0.964,0.175-2.529-1.094-4.03C9.094,7.954,7.68,8.719,6.065,8.719 c-1.677,0-3.182-0.812-4.125-2.063H1.938z"/>
|
|
||||||
<path fill="#72777d" d="M6.063,0c-1.89,0-3.595,1.674-3.594,3.563C2.467,5.45,4.173,7.155,6.06,7.155 c1.89,0,3.564-1.705,3.563-3.593C9.625,1.673,7.95,0,6.063,0L6.063,0z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 666 B |
@ -1,6 +1,7 @@
|
|||||||
@import 'mediawiki.ui/variables';
|
@import 'mediawiki.ui/variables';
|
||||||
|
|
||||||
@html-font-size: 100%;
|
@html-font-size: 100%;
|
||||||
|
@font-size-browser: 16; // Assumed browser default of `16px`
|
||||||
|
|
||||||
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
|
||||||
@font-family-sans-serif: sans-serif;
|
@font-family-sans-serif: sans-serif;
|
||||||
@ -41,3 +42,4 @@
|
|||||||
|
|
||||||
// Personal menu
|
// Personal menu
|
||||||
@menu-personal-font-size: 0.75em;
|
@menu-personal-font-size: 0.75em;
|
||||||
|
@line-height-menu-personal: 14 / @font-size-browser / @menu-personal-font-size; // equals `1.667em`≈`14px`
|
||||||
|
Loading…
Reference in New Issue
Block a user