From b745fe4f6c5d229ff5b0ec261f8bd87820317945 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Mon, 25 Jan 2016 18:33:07 +0000 Subject: [PATCH] Use background-image-svg mixin for SVG/PNG fallbacks Change-Id: I00266b088b16fa749f3ee59d9ce4890ed025c887 --- extension.json | 8 ++--- ...tings.css => ext.uls.displaysettings.less} | 10 +++--- ...ettings.css => ext.uls.inputsettings.less} | 34 ++++++------------- resources/css/ext.uls.interlanguage.css | 21 ------------ resources/css/ext.uls.interlanguage.less | 19 +++++++++++ .../css/{ext.uls.pt.css => ext.uls.pt.less} | 10 +++--- 6 files changed, 41 insertions(+), 61 deletions(-) rename resources/css/{ext.uls.displaysettings.css => ext.uls.displaysettings.less} (81%) rename resources/css/{ext.uls.inputsettings.css => ext.uls.inputsettings.less} (62%) delete mode 100644 resources/css/ext.uls.interlanguage.css create mode 100644 resources/css/ext.uls.interlanguage.less rename resources/css/{ext.uls.pt.css => ext.uls.pt.less} (78%) diff --git a/extension.json b/extension.json index a739c61d..c6db061c 100644 --- a/extension.json +++ b/extension.json @@ -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" }, diff --git a/resources/css/ext.uls.displaysettings.css b/resources/css/ext.uls.displaysettings.less similarity index 81% rename from resources/css/ext.uls.displaysettings.css rename to resources/css/ext.uls.displaysettings.less index 90fd1492..01dedd47 100644 --- a/resources/css/ext.uls.displaysettings.css +++ b/resources/css/ext.uls.displaysettings.less @@ -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; diff --git a/resources/css/ext.uls.inputsettings.css b/resources/css/ext.uls.inputsettings.less similarity index 62% rename from resources/css/ext.uls.inputsettings.css rename to resources/css/ext.uls.inputsettings.less index 10658075..70f6b329 100644 --- a/resources/css/ext.uls.inputsettings.css +++ b/resources/css/ext.uls.inputsettings.less @@ -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 { diff --git a/resources/css/ext.uls.interlanguage.css b/resources/css/ext.uls.interlanguage.css deleted file mode 100644 index 85c1be99..00000000 --- a/resources/css/ext.uls.interlanguage.css +++ /dev/null @@ -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; -} diff --git a/resources/css/ext.uls.interlanguage.less b/resources/css/ext.uls.interlanguage.less new file mode 100644 index 00000000..c5617567 --- /dev/null +++ b/resources/css/ext.uls.interlanguage.less @@ -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; +} diff --git a/resources/css/ext.uls.pt.css b/resources/css/ext.uls.pt.less similarity index 78% rename from resources/css/ext.uls.pt.css rename to resources/css/ext.uls.pt.less index 0c9813c0..91d96ea7 100644 --- a/resources/css/ext.uls.pt.css +++ b/resources/css/ext.uls.pt.less @@ -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; }