bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put overhauled icon on baseline and unify code with Vector's

Browse Source 
Putting icon on link label baseline as good as possible cross-browser
and unify code with Vector skin's code. With one improvement,
putting icon in `:before` selector in order to be able to specifically
change icon independent from link, which opens up `opacity` or state
changes.
Also cleaning up CSS by
- reducing specificity
- changing to `stylelint-disable-line` only on specific selectors
- removing initial value `transparent`

Bug: T207075
Change-Id: Ib5d446434263441eb85aa2e96a0e4dbde1034c1c
Depends-on: I92acb9851a3c0acdbc40a4a4528a91c7332c9293
This commit is contained in:
Volker E
2018-10-15 18:58:47 -07:00
committed by jenkins-bot
parent 5425ac76aa
commit f6e5d24941
2 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/css/ext.uls.pt-monobook.less
View File

@@ -1,6 +1,4 @@
/* stylelint-disable selector-max-id */ #pt-uls .uls-trigger { // stylelint-disable-line selector-max-id
#pt-uls a.uls-trigger {
// Use same padding-left as #pt-userpage // Use same padding-left as #pt-userpage
padding-left: 20px; padding-left: 20px;
} }

43
resources/css/ext.uls.pt.less
View File

@@ -1,6 +1,14 @@
/* stylelint-disable indentation, selector-max-id */
@import 'mediawiki.mixins'; @import 'mediawiki.mixins';
/* stylelint-disable selector-max-id */ // Similar to from Vector's 'personalMenu.less' file.
@font-size-browser: 16; // Assumed browser default of `16px`
// ULS personal tool menu
@background-position-menu-uls-icon: left ( 1 / @font-size-browser / @font-size-menu-uls );
@background-size-menu-uls-icon: 16 / @font-size-browser / @font-size-menu-uls;
@padding-top-menu-uls-icon: 4 / @font-size-browser / @font-size-menu-uls;
@padding-left-menu-uls-icon: 20 / @font-size-browser / @font-size-menu-uls;
@font-size-menu-uls: 0.75em;
/* /*
* The trigger can be placed in the personal toolbar near the username * The trigger can be placed in the personal toolbar near the username
@@ -12,19 +20,38 @@
* Copied from jquery.uls.css with the path changed. * Copied from jquery.uls.css with the path changed.
*/ */
.uls-trigger { .uls-trigger {
background: transparent no-repeat scroll left center; background: no-repeat left center;
.background-image-svg( '../../lib/jquery.uls/images/language.svg', '../../lib/jquery.uls/images/language.png' ); .background-image-svg( '../../lib/jquery.uls/images/language.svg', '../../lib/jquery.uls/images/language.png' );
// Let the SVG image fit without cropping or stretch // Let the SVG image fit without cropping or stretch
background-size: contain; background-size: contain;
padding-left: 24px; padding-left: 24px;
} }
#pt-uls a.uls-trigger { #pt-uls {
padding-left: 1.25em; padding-top: 0 !important; // stylelint-disable-line declaration-no-important
// Let the SVG image fit without cropping or stretch
background-size: 1.15em; .uls-trigger {
/* Fix alignment in vector: https://phabricator.wikimedia.org/T61239 */ background-image: none;
line-height: 1; // Same values as Vector's `#p-personal li`.
display: inline-block;
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
padding-left: 0;
// Putting the icon in before in order to apply `opacity`.
&:before {
content: '';
.background-image-svg( '../../lib/jquery.uls/images/language.svg', '../../lib/jquery.uls/images/language.png' );
// Same values as Vector's `#pt-userpage a`.
background-position: @background-position-menu-uls-icon;
// Support Edge: Can't be `contain`, see T207075.
background-repeat: no-repeat;
background-size: @background-size-menu-uls-icon @background-size-menu-uls-icon;
padding-top: @padding-top-menu-uls-icon;
padding-left: @padding-left-menu-uls-icon;
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
opacity: 0.67;
}
}
} }
/* Opera for some inexplicable reason confuses right and left padding with */ /* Opera for some inexplicable reason confuses right and left padding with */