Convert content.externallinks.css to less

As suggested in the comment, since the blocking
bug was fixed 3.5 years ago.

Change-Id: I345f81ca5b9672c34525d223f01844df0a74f617

diff --git a/resources/Resources.php b/resources/Resources.php
index d718fb6..df14fcd 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -132,7 +132,7 @@ return [
 
        'mediawiki.skinning.content.externallinks' => [
                'styles' => [
-                       'resources/src/mediawiki.skinning/content.externallinks.css' => [ 'media' => 'screen' ],
+                       'resources/src/mediawiki.skinning/content.externallinks.less' => [ 'media' => 'screen' ],
                ],
        ],
 

diff --git a/resources/src/mediawiki.skinning/content.externallinks.css b/resources/src/mediawiki.skinning/content.externallinks.css
deleted file mode 100644 (file)
index 5afa51d..0000000
--- a/resources/src/mediawiki.skinning/content.externallinks.css
+++ /dev/null
@@ -1,103 +0,0 @@
-/*!
- * Icons and colors for external links.
- */
-
-/* T68091 is blocking is from converting this file to LESS
- * and using the .background-image-svg mixin. */
-
-/* SVG support using a transparent gradient to guarantee cross-browser
- * compatibility ( browsers able to understand gradient syntax support also SVG ).
- * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
-
-.mw-parser-output a.external,
-.link-https {
-       background: url( images/external-ltr.png ) center right no-repeat;
-       /* @embed */
-       background-image: -webkit-linear-gradient( transparent, transparent ), url( images/external-ltr.svg );
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/external-ltr.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href^='mailto:' ],
-.link-mailto {
-       background: url( images/mail.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/mail.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href^='ftp://' ],
-.link-ftp {
-       background: url( images/ftp-ltr.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/ftp-ltr.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href^='irc://' ],
-.mw-parser-output a.external[ href^='ircs://' ],
-.link-irc {
-       background: url( images/chat-ltr.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/chat-ltr.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href$='.ogg' ],
-.mw-parser-output a.external[ href$='.OGG' ],
-.mw-parser-output a.external[ href$='.mid' ],
-.mw-parser-output a.external[ href$='.MID' ],
-.mw-parser-output a.external[ href$='.midi' ],
-.mw-parser-output a.external[ href$='.MIDI' ],
-.mw-parser-output a.external[ href$='.mp3' ],
-.mw-parser-output a.external[ href$='.MP3' ],
-.mw-parser-output a.external[ href$='.wav' ],
-.mw-parser-output a.external[ href$='.WAV' ],
-.mw-parser-output a.external[ href$='.wma' ],
-.mw-parser-output a.external[ href$='.WMA' ],
-.link-audio {
-       background: url( images/audio-ltr.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/audio-ltr.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href$='.ogm' ],
-.mw-parser-output a.external[ href$='.OGM' ],
-.mw-parser-output a.external[ href$='.avi' ],
-.mw-parser-output a.external[ href$='.AVI' ],
-.mw-parser-output a.external[ href$='.mpeg' ],
-.mw-parser-output a.external[ href$='.MPEG' ],
-.mw-parser-output a.external[ href$='.mpg' ],
-.mw-parser-output a.external[ href$='.MPG' ],
-.link-video {
-       background: url( images/video.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/video.svg );
-       padding-right: 13px;
-}
-
-.mw-parser-output a.external[ href$='.pdf' ],
-.mw-parser-output a.external[ href$='.PDF' ],
-.mw-parser-output a.external[ href*='.pdf#' ],
-.mw-parser-output a.external[ href*='.PDF#' ],
-.mw-parser-output a.external[ href*='.pdf?' ],
-.mw-parser-output a.external[ href*='.PDF?' ],
-.link-document {
-       background: url( images/document-ltr.png ) center right no-repeat;
-       /* @embed */
-       background-image: linear-gradient( transparent, transparent ), url( images/document-ltr.svg );
-       padding-right: 13px;
-}
-
-/* Interwiki styling */
-.mw-parser-output a.extiw,
-.mw-parser-output a.extiw:active {
-       color: #36b;
-}
-
-/* External link color */
-.mw-parser-output a.external {
-       color: #36b;
-}

diff --git a/resources/src/mediawiki.skinning/content.externallinks.less b/resources/src/mediawiki.skinning/content.externallinks.less
new file mode 100644 (file)
index 0000000..c6390c0
--- /dev/null
+++ b/resources/src/mediawiki.skinning/content.externallinks.less
@@ -0,0 +1,96 @@
+/*!
+ * Icons and colors for external links.
+ */
+
+@import 'mediawiki.mixins';
+
+.mw-parser-output a.external,
+.link-https {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/external-ltr.svg', 'images/external-ltr.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href^='mailto:' ],
+.link-mailto {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/mail.svg', 'images/mail.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href^='ftp://' ],
+.link-ftp {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/ftp-ltr.svg', 'images/ftp-ltr.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href^='irc://' ],
+.mw-parser-output a.external[ href^='ircs://' ],
+.link-irc {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/chat-ltr.svg', 'images/chat-ltr.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href$='.ogg' ],
+.mw-parser-output a.external[ href$='.OGG' ],
+.mw-parser-output a.external[ href$='.mid' ],
+.mw-parser-output a.external[ href$='.MID' ],
+.mw-parser-output a.external[ href$='.midi' ],
+.mw-parser-output a.external[ href$='.MIDI' ],
+.mw-parser-output a.external[ href$='.mp3' ],
+.mw-parser-output a.external[ href$='.MP3' ],
+.mw-parser-output a.external[ href$='.wav' ],
+.mw-parser-output a.external[ href$='.WAV' ],
+.mw-parser-output a.external[ href$='.wma' ],
+.mw-parser-output a.external[ href$='.WMA' ],
+.link-audio {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/audio-ltr.svg', 'images/audio-ltr.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href$='.ogm' ],
+.mw-parser-output a.external[ href$='.OGM' ],
+.mw-parser-output a.external[ href$='.avi' ],
+.mw-parser-output a.external[ href$='.AVI' ],
+.mw-parser-output a.external[ href$='.mpeg' ],
+.mw-parser-output a.external[ href$='.MPEG' ],
+.mw-parser-output a.external[ href$='.mpg' ],
+.mw-parser-output a.external[ href$='.MPG' ],
+.link-video {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/video.svg', 'images/video.png' );
+       padding-right: 13px;
+}
+
+.mw-parser-output a.external[ href$='.pdf' ],
+.mw-parser-output a.external[ href$='.PDF' ],
+.mw-parser-output a.external[ href*='.pdf#' ],
+.mw-parser-output a.external[ href*='.PDF#' ],
+.mw-parser-output a.external[ href*='.pdf?' ],
+.mw-parser-output a.external[ href*='.PDF?' ],
+.link-document {
+       background-position: center right;
+       background-repeat: no-repeat;
+       .background-image-svg( 'images/document-ltr.svg', 'images/document-ltr.png' );
+       padding-right: 13px;
+}
+
+/* Interwiki styling */
+.mw-parser-output a.extiw,
+.mw-parser-output a.extiw:active {
+       color: #36b;
+}
+
+/* External link color */
+.mw-parser-output a.external {
+       color: #36b;
+}