Refactor the css so that embedded images are optimally loaded
Change-Id: If19d20fb22afafbf62c355394dcda825a0151ac6
This commit is contained in:
Santhosh Thottingal
committed by
Niklas Laxström
Niklas Laxström
parent
50eb932756
commit
81c4dfe848
@@ -1,77 +1,3 @@
|
||||
/*
|
||||
* The trigger can be placed in the personal toolbar near the username
|
||||
* or near the interlanguage links.
|
||||
*/
|
||||
|
||||
/*
|
||||
* A hack to load the icon before the rest of the module is lazy-loaded.
|
||||
* Copied from jquuery.uls.css with the path changed.
|
||||
*/
|
||||
.uls-trigger {
|
||||
/* @embed */
|
||||
background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
/* @embed */
|
||||
background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
#pt-uls a.uls-trigger {
|
||||
padding-left: 30px;
|
||||
/* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#p-lang .uls-settings-trigger {
|
||||
/* @embed */
|
||||
background: transparent url('../images/cog-sprite.png') no-repeat right top;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
/* @embed */
|
||||
background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skin-vector #p-lang .uls-settings-trigger {
|
||||
/* Put it in the middle of the first row of the section title */
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#p-lang .uls-settings-trigger:hover {
|
||||
background-position: right -16px;
|
||||
}
|
||||
|
||||
/* Opera for some inexplicable reason confuses right and left padding with */
|
||||
/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
|
||||
/* but will make other browsers ignore this rule. */
|
||||
x:-o-prefocus, body.rtl li#pt-uls {
|
||||
/* @noflip */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#settings-block {
|
||||
border-top: 1px solid #C9C9C9;
|
||||
background: #f8f8f8;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
|
||||
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: linear-gradient(#FBFBFB, #F0F0F0);
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.uls-menu a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -96,18 +22,6 @@ x:-o-prefocus, body.rtl li#pt-uls {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#settings-block div.display-settings-block,
|
||||
#settings-block div.input-settings-block {
|
||||
display: inline-block;
|
||||
margin: 8px 15px;
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
#settings-block div.display-settings-block:hover,
|
||||
#settings-block div.input-settings-block:hover {
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.uls-ui-languages button {
|
||||
width: 23%;
|
||||
text-overflow: ellipsis;
|
||||
@@ -129,31 +43,4 @@ button.uls-more-languages {
|
||||
|
||||
div.display-settings-block:hover .settings-text {
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
/* Ime menu customizations */
|
||||
.ime-perime-help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ime-checked .ime-perime-help {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.75;
|
||||
padding: 0;
|
||||
/* @embed */
|
||||
background: transparent url('../images/help.png') left center no-repeat;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
|
||||
}
|
||||
|
||||
.ime-checked .ime-perime-help:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -125,3 +125,30 @@ div.input-settings-block {
|
||||
.uls-input-settings .uls-ime-help {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Ime menu customizations */
|
||||
.ime-perime-help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ime-checked .ime-perime-help {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.75;
|
||||
padding: 0;
|
||||
/* @embed */
|
||||
background: transparent url('../images/help.png') left center no-repeat;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
|
||||
}
|
||||
|
||||
.ime-checked .ime-perime-help:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
23
resources/css/ext.uls.interlanguage.css
Normal file
23
resources/css/ext.uls.interlanguage.css
Normal file
@@ -0,0 +1,23 @@
|
||||
#p-lang .uls-settings-trigger {
|
||||
/* @embed */
|
||||
background: transparent url('../images/cog-sprite.png') no-repeat right top;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
/* @embed */
|
||||
background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skin-vector #p-lang .uls-settings-trigger {
|
||||
/* Put it in the middle of the first row of the section title */
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#p-lang .uls-settings-trigger:hover {
|
||||
background-position: right -16px;
|
||||
}
|
||||
@@ -1,3 +1,18 @@
|
||||
#settings-block {
|
||||
border-top: 1px solid #C9C9C9;
|
||||
background: #f8f8f8;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
|
||||
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: linear-gradient(#FBFBFB, #F0F0F0);
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.uls-menu h3 {
|
||||
border-bottom: medium none;
|
||||
font-size: 14pt;
|
||||
|
||||
61
resources/css/ext.uls.pt.css
Normal file
61
resources/css/ext.uls.pt.css
Normal file
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
* The trigger can be placed in the personal toolbar near the username
|
||||
* or near the interlanguage links.
|
||||
*/
|
||||
|
||||
/*
|
||||
* A hack to load the icon before the rest of the module is lazy-loaded.
|
||||
* Copied from jquery.uls.css with the path changed.
|
||||
*/
|
||||
.uls-trigger {
|
||||
/* @embed */
|
||||
background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
/* @embed */
|
||||
background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
#pt-uls a.uls-trigger {
|
||||
padding-left: 30px;
|
||||
/* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Opera for some inexplicable reason confuses right and left padding with */
|
||||
/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */
|
||||
/* but will make other browsers ignore this rule. */
|
||||
x:-o-prefocus, body.rtl li#pt-uls {
|
||||
/* @noflip */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
#settings-block {
|
||||
border-top: 1px solid #C9C9C9;
|
||||
background: #f8f8f8;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0));
|
||||
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0);
|
||||
background: linear-gradient(#FBFBFB, #F0F0F0);
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#settings-block div.display-settings-block,
|
||||
#settings-block div.input-settings-block {
|
||||
display: inline-block;
|
||||
margin: 8px 15px;
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
#settings-block div.display-settings-block:hover,
|
||||
#settings-block div.input-settings-block:hover {
|
||||
color: #252525;
|
||||
}
|
||||
Reference in New Issue
Block a user