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
@@ -249,6 +249,14 @@ $wgResourceModules['jquery.webfonts'] = array(
|
||||
'targets' => array( 'desktop', 'mobile' ),
|
||||
) + $resourcePaths;
|
||||
|
||||
$wgResourceModules['ext.uls.pt'] = array(
|
||||
'styles' => 'resources/css/ext.uls.pt.css',
|
||||
) + $resourcePaths;
|
||||
|
||||
$wgResourceModules['ext.uls.interlanguage'] = array(
|
||||
'styles' => 'resources/css/ext.uls.interlanguage.css',
|
||||
) + $resourcePaths;
|
||||
|
||||
// A module named rangy is defined in VisualExtension with more features of rangy.
|
||||
// Here we need only the core library. This module is loaded dynamically from
|
||||
// client when rangy is undefined. If VE is present rangy will be defined, the module
|
||||
|
||||
@@ -45,7 +45,7 @@ class UniversalLanguageSelectorHooks {
|
||||
* Hook: BeforePageDisplay
|
||||
*/
|
||||
public static function addModules( $out, $skin ) {
|
||||
global $wgULSGeoService, $wgULSEventLogging;
|
||||
global $wgULSPosition, $wgULSGeoService, $wgULSEventLogging;
|
||||
|
||||
$user = $out->getUser();
|
||||
if ( !$user->getBoolOption( 'uls-enable') ) {
|
||||
@@ -76,6 +76,12 @@ class UniversalLanguageSelectorHooks {
|
||||
$out->addModules( 'ext.uls.interface' );
|
||||
}
|
||||
|
||||
if ( $wgULSPosition === 'personal' ) {
|
||||
$out->addModules( 'ext.uls.pt' );
|
||||
} else {
|
||||
$out->addModules( 'ext.uls.interlanguage' );
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
@@ -130,30 +44,3 @@ 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