From 08cf0b139523af08ea5a297788c9994846ba2eec Mon Sep 17 00:00:00 2001 From: jrobson Date: Thu, 26 Sep 2013 11:43:00 -0700 Subject: [PATCH] Turn screen.css into screen.less * Separate external links into own less file to showcase how many unnecessary css rules we have * Introduce new mixins to allow embedding for list-style-image * Replace use of /* embed */ with mediawiki mixins Change-Id: If79d2d1f72579627597b291eec759441d6763c34 --- resources/Resources.php | 3 +- .../mediawiki.less/mediawiki.mixins.less | 10 ++ skins/vector/externalLinks.less | 75 ++++++++++ skins/vector/{screen.css => screen.less} | 135 +++--------------- 4 files changed, 109 insertions(+), 114 deletions(-) create mode 100644 skins/vector/externalLinks.less rename skins/vector/{screen.css => screen.less} (79%) diff --git a/resources/Resources.php b/resources/Resources.php index ca0426395c..880726b214 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -92,7 +92,8 @@ return array( 'common/commonElements.css' => array( 'media' => 'screen' ), 'common/commonContent.css' => array( 'media' => 'screen' ), 'common/commonInterface.css' => array( 'media' => 'screen' ), - 'vector/screen.css' => array( 'media' => 'screen' ), + 'vector/screen.less' => array( 'media' => 'screen' ), + 'vector/externalLinks.less' => array( 'media' => 'screen' ), 'vector/screen-hd.css' => array( 'media' => 'screen and (min-width: 982px)' ), ), 'remoteBasePath' => $GLOBALS['wgStylePath'], diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less index 3763b87964..8c9b825f32 100644 --- a/resources/mediawiki.less/mediawiki.mixins.less +++ b/resources/mediawiki.less/mediawiki.mixins.less @@ -27,3 +27,13 @@ /* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg); /* @embed */ background-image: linear-gradient(transparent, transparent), url(@svg); } + +/* Caution: Does not support localisable images */ +.list-style-image(@url) when (embeddable(@url)) { + list-style-image: embed(@url); + list-style-image: url(@url)!ie; +} + +.list-style-image(@url) when not (embeddable(@url)) { + list-style-image: url(@url); +} diff --git a/skins/vector/externalLinks.less b/skins/vector/externalLinks.less new file mode 100644 index 0000000000..5b02abbd7c --- /dev/null +++ b/skins/vector/externalLinks.less @@ -0,0 +1,75 @@ +// FIXME: This size of this CSS is ridiculous. Please refactor (see bug 54604) +@import "mediawiki.mixins.less"; + +div#content a.external { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/external-link-ltr-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="https://"], +.link-https { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/lock-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="mailto:"], +.link-mailto { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/mail-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="news:"] { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/news-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="ftp://"], +.link-ftp { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/file-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="irc://"], +div#content a.external[href ^="ircs://"], +.link-irc { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/talk-icon.png'); + padding-right: 13px; +} +div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"], +div#content a.external[href $=".mid"], div#content a.external[href $=".MID"], +div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"], +div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"], +div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"], +div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"], +.link-audio { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/audio-icon.png'); + padding-right: 13px; +} +div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"], +div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"], +div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"], +div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"], +.link-video { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/video-icon.png'); + padding-right: 13px; +} +div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"], +div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"], +div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"], +.link-document { + background-position: center right; + background-repeat: no-repeat; + .background-image('images/document-icon.png'); + padding-right: 13px; +} diff --git a/skins/vector/screen.css b/skins/vector/screen.less similarity index 79% rename from skins/vector/screen.css rename to skins/vector/screen.less index c164c6dd55..cccdd7a9ac 100644 --- a/skins/vector/screen.css +++ b/skins/vector/screen.less @@ -10,6 +10,7 @@ * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and * "IGNORED BY IE6" comments. */ +@import "mediawiki.mixins.less"; /* Framework */ html, @@ -45,8 +46,7 @@ div#content { #mw-page-base { height: 5em; background-color: white; - /* @embed */ - background-image: url(images/page-fade.png); + .background-image('images/page-fade.png'); background-position: bottom left; background-repeat: repeat-x; } @@ -128,8 +128,7 @@ div.vectorTabs { height: 2.5em; } div.vectorTabs { - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: bottom left; background-repeat: no-repeat; padding-left: 1px; @@ -157,8 +156,7 @@ div.vectorTabs ul li { margin: 0; padding: 0; background-color: #f3f3f3; - /* @embed */ - background-image: url(images/tab-normal-fade.png); + .background-image('images/tab-normal-fade.png'); background-position: bottom left; background-repeat: repeat-x; white-space: nowrap; @@ -168,8 +166,7 @@ div.vectorTabs ul > li { display: block; } div.vectorTabs li.selected { - /* @embed */ - background-image: url(images/tab-current-fade.png); + .background-image('images/tab-current-fade.png'); } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs li a { @@ -202,8 +199,7 @@ div.vectorTabs span > a { } div.vectorTabs span { display: inline-block; - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: bottom right; background-repeat: no-repeat; } @@ -221,27 +217,17 @@ div.vectorTabs li.new a:visited{ div.vectorMenu { direction: ltr; float: left; - /* @embed */ - background-image: url(images/arrow-down-icon.png); /* SVG support using a transparent gradient to guarantee cross-browser * compatibility (browsers able to understand gradient syntax support also SVG) */ - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg); + .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png'); background-position: 100% 60%; background-repeat: no-repeat; cursor: pointer; } div.vectorMenuFocus { - /* @embed */ - background-image: url(images/arrow-down-focus-icon.png); /* SVG support using a transparent gradient to guarantee cross-browser * compatibility (browsers able to understand gradient syntax support also SVG) */ - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg); + .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png'); background-position: 100% 60%; } /* @noflip */ @@ -252,8 +238,7 @@ body.rtl div.vectorMenu { /* @noflip */ div#mw-head div.vectorMenu h3 { float: left; - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-repeat: no-repeat; } /* This will be flipped - unlike the one above it */ @@ -282,8 +267,7 @@ div.vectorMenu h3 a { width: 24px; height: 1.9em; text-decoration: none; - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-repeat: no-repeat; } /* This will be flipped - unlike the one above it */ @@ -396,8 +380,7 @@ div#simpleSearch { border: solid 1px #aaa; color: black; background-color: white; - /* @embed */ - background-image: url(images/search-fade.png); + .background-image('images/search-fade.png'); background-position: top left; background-repeat: repeat-x; } @@ -489,8 +472,7 @@ div#mw-panel div.portal div.body { margin: 0; padding-top: 0.5em; margin-left: 1.25em; - /* @embed */ - background-image: url(images/portal-break.png); + .background-image('images/portal-break.png'); background-repeat: no-repeat; background-position: top left; } @@ -588,8 +570,7 @@ div#footer #footer-places li { clear: both; margin: 0 !important; padding: 0 !important; - /* @embed */ - background-image: url(images/preferences-break.png); + .background-image('images/preferences-break.png'); background-position: bottom left; background-repeat: no-repeat; } @@ -603,8 +584,7 @@ div#footer #footer-places li { white-space: nowrap; list-style-type: none; list-style-image: none; - /* @embed */ - background-image: url(images/preferences-break.png); + .background-image('images/preferences-break.png'); background-position: bottom right; background-repeat: no-repeat; } @@ -627,8 +607,7 @@ div#footer #footer-places li { text-decoration: underline; } #preftoc li.selected a { - /* @embed */ - background-image: url(images/preferences-fade.png); + .background-image('images/preferences-fade.png'); background-position: bottom; background-repeat: repeat-x; color: #333; @@ -686,8 +665,7 @@ div#content { ul { list-style-type: disc; - /* @embed */ - list-style-image: url(images/bullet-icon.png); + .list-style-image('images/bullet-icon.png'); } pre, .mw-code { @@ -703,82 +681,16 @@ pre, .mw-code { margin-top: 0; font-size: 1.6em; } -div#content a.external { - /* @embed */ - background: url(images/external-link-ltr-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="https://"], -.link-https { - /* @embed */ - background: url(images/lock-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="mailto:"], -.link-mailto { - /* @embed */ - background: url(images/mail-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="news:"] { - /* @embed */ - background: url(images/news-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="ftp://"], -.link-ftp { - /* @embed */ - background: url(images/file-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="irc://"], -div#content a.external[href ^="ircs://"], -.link-irc { - /* @embed */ - background: url(images/talk-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"], -div#content a.external[href $=".mid"], div#content a.external[href $=".MID"], -div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"], -div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"], -div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"], -div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"], -.link-audio { - /* @embed */ - background: url(images/audio-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"], -div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"], -div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"], -div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"], -.link-video { - /* @embed */ - background: url(images/video-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"], -div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"], -div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"], -.link-document { - /* @embed */ - background: url(images/document-icon.png) center right no-repeat; - padding-right: 13px; -} /* Icon for Usernames */ #pt-userpage, #pt-anonuserpage, #pt-login { - /* @embed */ - background: url(images/user-icon.png) left top no-repeat; + background-position: left top; + background-repeat: no-repeat; /* SVG support using a transparent gradient to guarantee cross-browser * compatibility (browsers able to understand gradient syntax support also SVG) */ - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url(images/user-icon.svg); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url(images/user-icon.svg); + .background-image-svg('images/user-icon.svg', 'images/user-icon.png'); padding-left: 15px !important; } @@ -830,8 +742,7 @@ div#bodyContent { margin-top: -0.8em !ie; height: 0; overflow: hidden; - /* @embed */ - background-image: url(images/watch-icons.png); + .background-image('images/watch-icons.png'); } #ca-unwatch.icon a { background-position: -43px 60%; @@ -849,8 +760,7 @@ div#bodyContent { } #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { - /* @embed */ - background-image: url(images/watch-icon-loading.gif); + .background-image('images/watch-icon-loading.gif'); background-position: 5px 60%; } #ca-unwatch.icon a span, @@ -858,8 +768,7 @@ div#bodyContent { display: none; } div.vectorTabs ul { - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: right bottom; background-repeat: no-repeat; } -- 2.20.1