Use background-image-svg mixin for SVG/PNG fallbacks

Change-Id: I00266b088b16fa749f3ee59d9ce4890ed025c887
This commit is contained in:
Ed Sanders
2016-01-25 18:33:07 +00:00
parent 00349ab0eb
commit b745fe4f6c
6 changed files with 41 additions and 61 deletions

View File

@@ -109,7 +109,7 @@
},
"ext.uls.displaysettings": {
"scripts": "js/ext.uls.displaysettings.js",
"styles": "css/ext.uls.displaysettings.css",
"styles": "css/ext.uls.displaysettings.less",
"dependencies": [
"ext.uls.languagesettings",
"ext.uls.mediawiki",
@@ -174,7 +174,7 @@
},
"ext.uls.inputsettings": {
"scripts": "js/ext.uls.inputsettings.js",
"styles": "css/ext.uls.inputsettings.css",
"styles": "css/ext.uls.inputsettings.less",
"dependencies": [
"ext.uls.ime",
"ext.uls.languagesettings",
@@ -350,12 +350,12 @@
"remoteExtPath": "UniversalLanguageSelector/lib"
},
"ext.uls.pt": {
"styles": "css/ext.uls.pt.css",
"styles": "css/ext.uls.pt.less",
"localBasePath": "resources",
"remoteExtPath": "UniversalLanguageSelector/resources"
},
"ext.uls.interlanguage": {
"styles": "css/ext.uls.interlanguage.css",
"styles": "css/ext.uls.interlanguage.less",
"localBasePath": "resources",
"remoteExtPath": "UniversalLanguageSelector/resources"
},

View File

@@ -1,10 +1,8 @@
@import "mediawiki.mixins";
div.display-settings-block {
/* @embed */
background: transparent url('../images/display.png') no-repeat left top;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/display.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/display.svg');
background: transparent no-repeat left top;
.background-image-svg( '../images/display.svg', '../images/display.png' );
background-size: 20px auto;
color: #252525;
padding-left: 26px;

View File

@@ -1,10 +1,8 @@
@import "mediawiki.mixins";
div.input-settings-block {
/* @embed */
background: transparent url('../images/input.png') no-repeat left top;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/input.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/input.svg');
background: transparent no-repeat left top;
.background-image-svg( '../images/input.svg', '../images/input.png' );
background-size: 20px auto;
color: #252525;
padding-left: 26px;
@@ -37,12 +35,8 @@ div.input-settings-block {
}
.uls-ime-disable-link {
/* @embed */
background: transparent url('../images/remove-input.png') no-repeat left top;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/remove-input.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/remove-input.svg');
background: transparent no-repeat left top;
.background-image-svg( '../images/remove-input.svg', '../images/remove-input.png' );
background-size: auto 16px;
padding-left: 22px;
padding-right: 26px;
@@ -51,12 +45,8 @@ div.input-settings-block {
}
.uls-ime-more-settings-link {
/* @embed */
background: transparent url('../images/cog.png') no-repeat center top;
/* @embed */
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog.svg');
/* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/cog.svg');
background: transparent no-repeat center top;
.background-image-svg( '../images/cog.svg', '../images/cog.png' );
background-size: auto 14px;
border-left: 1px solid #CCCCCC;
width: 22px;
@@ -134,12 +124,8 @@ div.input-settings-block {
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');
background: transparent no-repeat left center;
.background-image-svg( '../images/help.svg', '../images/help.png' );
}
.ime-checked .ime-perime-help:hover {

View File

@@ -1,21 +0,0 @@
#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: 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;
}

View File

@@ -0,0 +1,19 @@
@import "mediawiki.mixins";
#p-lang .uls-settings-trigger {
background: transparent no-repeat right top;
.background-image-svg( '../images/cog-sprite.svg', '../images/cog-sprite.png' );
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;
}

View File

@@ -1,3 +1,5 @@
@import "mediawiki.mixins";
/*
* The trigger can be placed in the personal toolbar near the username
* or near the interlanguage links.
@@ -8,12 +10,8 @@
* 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: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
background: transparent no-repeat scroll left center;
.background-image-svg( '../../lib/jquery.uls/images/icon-language.svg', '../../lib/jquery.uls/images/icon-language.png' );
padding-left: 30px;
}