From: Prateek Saxena <prtksxna@gmail.com>
Date: Tue, 15 Dec 2015 11:03:20 +0000 (+0530)
Subject: mw.ForeignStructuredUpload.BookletLayout: Option 4: Image improvements
X-Git-Tag: 1.31.0-rc.0~8673^2
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/ajouter.php?a=commitdiff_plain;h=4ebc75547a46f80dc044dcea7b2b1bc756dd2ab0;p=lhc%2Fweb%2Fwiklou.git

mw.ForeignStructuredUpload.BookletLayout: Option 4: Image improvements

Add higher quality PNGs. Also added SVGs, and now using the
.background-image-svg() mixing to use SVGs.

Change-Id: I8d8fbf8e58b4ef5d9956731c8b85d5db07b3f5ed
---

diff --git a/resources/Resources.php b/resources/Resources.php
index 02d87d4406..3955651b42 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1245,7 +1245,7 @@ return array(
 	),
 	'mediawiki.ForeignStructuredUpload.BookletLayout' => array(
 		'scripts' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js',
-		'styles' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css',
+		'styles' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less',
 		'dependencies' => array(
 			'mediawiki.ForeignStructuredUpload',
 			'mediawiki.Upload.BookletLayout',
diff --git a/resources/src/mediawiki/bookletlayout/option4/camera.png b/resources/src/mediawiki/bookletlayout/option4/camera.png
index f52391f20a..a48f9fbf4a 100644
Binary files a/resources/src/mediawiki/bookletlayout/option4/camera.png and b/resources/src/mediawiki/bookletlayout/option4/camera.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/camera.svg b/resources/src/mediawiki/bookletlayout/option4/camera.svg
new file mode 100644
index 0000000000..dc43b5defa
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/camera.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" height="162" width="264" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00AF89;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#FFFFFF;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st3{fill:#E5E5E5;}
+	.st4{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st5{fill:#9B9A9A;}
+	.st6{fill:none;stroke:#E5E5E5;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<rect x="62.3" y="28.1" class="st0" width="137.6" height="105"/>
+<g>
+	<path class="st1" d="M73.1,57v64.4h45.3V78.5h25.3v42.9h45.3V57H73.1z M94.3,107.6H80.9V94.3h13.3V107.6z M94.3,91.9H80.9V78.5
+		h13.3V91.9z M109.9,107.6H96.6V94.3h13.3V107.6z M109.9,91.9H96.6V78.5h13.3V91.9z M164.3,107.6h-13.3V94.3h13.3V107.6z
+		 M164.3,91.9h-13.3V78.5h13.3V91.9z M179.9,107.6h-13.3V94.3h13.3V107.6z M179.9,91.9h-13.3V78.5h13.3V91.9z"/>
+	<rect x="73.1" y="48.5" class="st1" width="116" height="5.7"/>
+	<rect x="73.1" y="39.9" class="st1" width="116" height="5.7"/>
+</g>
+<rect x="62.3" y="124" class="st1" width="137.6" height="1.7"/>
+<g>
+	<g>
+		<rect x="6.7" y="7.4" class="st2" width="35.3" height="12.7"/>
+		<rect x="42" y="11.1" class="st3" width="2.3" height="5.7"/>
+	</g>
+	<rect x="8.2" y="9.1" class="st3" width="5.2" height="9.2"/>
+	<rect x="14.5" y="9.1" class="st3" width="5.2" height="9.2"/>
+	<rect x="21" y="9.1" class="st3" width="5.2" height="9.2"/>
+</g>
+<circle class="st3" cx="252.7" cy="12.1" r="6.2"/>
+<rect x="239.3" y="9.1" class="st3" width="5.3" height="7.7"/>
+<rect x="233" y="9.1" class="st3" width="5.3" height="7.7"/>
+<rect x="214" y="143.3" class="st3" width="5.3" height="7.7"/>
+<rect x="207.6" y="143.3" class="st3" width="5.3" height="7.7"/>
+<rect x="50.4" y="143.3" class="st3" width="5.3" height="7.7"/>
+<rect x="39" y="143.3" class="st3" width="5.3" height="7.7"/>
+<line class="st4" x1="73.1" y1="148" x2="189.1" y2="148"/>
+<line class="st4" x1="132" y1="143.1" x2="132" y2="152.9"/>
+<line class="st4" x1="189.1" y1="144.3" x2="189.1" y2="151.7"/>
+<line class="st4" x1="73.1" y1="144.3" x2="73.1" y2="151.7"/>
+<line class="st4" x1="86" y1="145.5" x2="86" y2="150.5"/>
+<line class="st4" x1="100.7" y1="145.5" x2="100.7" y2="150.5"/>
+<line class="st4" x1="115.3" y1="145.5" x2="115.3" y2="150.5"/>
+<line class="st4" x1="145.8" y1="145.5" x2="145.8" y2="150.5"/>
+<line class="st4" x1="160.5" y1="145.5" x2="160.5" y2="150.5"/>
+<line class="st4" x1="175.2" y1="145.5" x2="175.2" y2="150.5"/>
+<g>
+	<rect x="113.8" y="154.1" class="st5" width="3.2" height="4.7"/>
+	<polygon class="st5" points="113.8,154.1 115.3,152.3 116.9,154.1 	"/>
+</g>
+<g>
+	<g>
+		<polyline class="st6" points="34.3,147.1 31.5,147.1 34.3,144.3 31.5,147.1 34.3,147.1 31.5,149.9 		"/>
+	</g>
+	<polygon class="st3" points="33.9,149.5 32.1,151.7 30.3,149.5 	"/>
+</g>
+<line class="st6" x1="48.9" y1="143.2" x2="45.9" y2="151.1"/>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/graphics.png b/resources/src/mediawiki/bookletlayout/option4/graphics.png
index 6fcc2c5f98..5613f8800c 100644
Binary files a/resources/src/mediawiki/bookletlayout/option4/graphics.png and b/resources/src/mediawiki/bookletlayout/option4/graphics.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/graphics.svg b/resources/src/mediawiki/bookletlayout/option4/graphics.svg
new file mode 100644
index 0000000000..ff3d6821b2
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/graphics.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#9B9A9A;stroke-miterlimit:10;}
+	.st2{fill:#E5E5E5;}
+	.st3{fill:#9B9A9A;}
+	.st4{fill:#00AF89;}
+	.st5{fill:#FFFFFF;}
+	.st6{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="2" y1="10.5" x2="262" y2="10.5"/>
+<line class="st0" x1="2" y1="24.8" x2="262" y2="24.8"/>
+<g>
+	<rect x="6.9" y="32.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="32.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="42.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="42.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="51.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="51.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="60.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="60.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="70.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="70.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="79.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="79.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="88.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="88.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="98.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="98.1" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="107.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="107.4" class="st1" width="9.3" height="9.3"/>
+	<rect x="6.9" y="116.8" class="st1" width="9.3" height="9.3"/>
+	<rect x="16.2" y="116.8" class="st1" width="9.3" height="9.3"/>
+</g>
+<rect x="3.2" y="12.7" class="st2" width="9.3" height="9.3"/>
+<rect x="3.2" y="3.4" class="st2" width="4.7" height="4.7"/>
+<rect x="10.2" y="3.4" class="st2" width="4.7" height="4.7"/>
+<rect x="16.9" y="3.4" class="st2" width="4.7" height="4.7"/>
+<rect x="249.2" y="3.4" class="st2" width="4.7" height="4.7"/>
+<rect x="255.9" y="3.4" class="st2" width="4.7" height="4.7"/>
+<rect x="14.6" y="12.7" class="st2" width="9.3" height="9.3"/>
+<rect x="239.9" y="12.7" class="st2" width="9.3" height="9.3"/>
+<rect x="228.9" y="12.7" class="st2" width="9.3" height="9.3"/>
+<rect x="251.2" y="12.7" class="st2" width="9.3" height="9.3"/>
+<g>
+	<path class="st2" d="M73.5,13.7V21H26.6v-7.3H73.5 M74.5,12.7H25.6V22h48.9V12.7L74.5,12.7z"/>
+</g>
+<g>
+	<path class="st2" d="M117.8,13.7V21H76.9v-7.3H117.8 M118.8,12.7H75.9V22h42.9V12.7L118.8,12.7z"/>
+</g>
+<g>
+	<path class="st2" d="M162.5,13.7V21h-40.9v-7.3H162.5 M163.5,12.7h-42.9V22h42.9V12.7L163.5,12.7z"/>
+</g>
+<rect x="209.7" y="30.3" class="st2" width="50.9" height="32.3"/>
+<rect x="209.7" y="30.3" class="st3" width="50.9" height="5.7"/>
+<g>
+	<rect x="212.2" y="38.5" class="st3" width="6.2" height="6.2"/>
+	<rect x="239.9" y="38.5" class="st3" width="6.2" height="2.5"/>
+	<rect x="239.9" y="42.2" class="st3" width="6.2" height="2.5"/>
+	<g>
+		<path class="st3" d="M237.2,39.5v4.2H221v-4.2H237.2 M238.2,38.5H220v6.2h18.2V38.5L238.2,38.5z"/>
+	</g>
+</g>
+<g>
+	<rect x="212.2" y="46.5" class="st3" width="6.2" height="6.2"/>
+	<rect x="239.9" y="46.5" class="st3" width="6.2" height="2.5"/>
+	<rect x="239.9" y="50.2" class="st3" width="6.2" height="2.5"/>
+	<g>
+		<path class="st3" d="M237.2,47.5v4.2H221v-4.2H237.2 M238.2,46.5H220v6.2h18.2V46.5L238.2,46.5z"/>
+	</g>
+</g>
+<rect x="209.7" y="66.6" class="st2" width="50.9" height="32.3"/>
+<rect x="209.7" y="66.6" class="st3" width="50.9" height="5.7"/>
+<g>
+	<path class="st3" d="M257.2,75.8V80h-44.1v-4.2H257.2 M258.2,74.8h-46.1V81h46.1V74.8L258.2,74.8z"/>
+</g>
+<g>
+	<path class="st3" d="M257.2,81v4.2h-44.1V81H257.2 M258.2,80h-46.1v6.2h46.1V80L258.2,80z"/>
+</g>
+<g>
+	<path class="st3" d="M257.2,86.2v4.2h-44.1v-4.2H257.2 M258.2,85.2h-46.1v6.2h46.1V85.2L258.2,85.2z"/>
+</g>
+<g>
+	<path class="st3" d="M257.2,91.3v4.2h-44.1v-4.2H257.2 M258.2,90.3h-46.1v6.2h46.1V90.3L258.2,90.3z"/>
+</g>
+<ellipse class="st1" cx="218.3" cy="85.7" rx="0" ry="10.2"/>
+<rect x="69.5" y="47.5" class="st4" width="108" height="82.4"/>
+<circle class="st5" cx="123.5" cy="88.7" r="6.6"/>
+<circle class="st5" cx="116.9" cy="106.2" r="6.6"/>
+<circle class="st5" cx="154.5" cy="80.3" r="6.6"/>
+<circle class="st5" cx="93.1" cy="81.5" r="6.6"/>
+<circle class="st5" cx="141.7" cy="114.1" r="6.6"/>
+<circle class="st6" cx="123.5" cy="88.7" r="18.2"/>
+<circle class="st6" cx="123.5" cy="88.7" r="31.7"/>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/search.png b/resources/src/mediawiki/bookletlayout/option4/search.png
index 5dca7fa3f5..26d6beb965 100644
Binary files a/resources/src/mediawiki/bookletlayout/option4/search.png and b/resources/src/mediawiki/bookletlayout/option4/search.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/search.svg b/resources/src/mediawiki/bookletlayout/option4/search.svg
new file mode 100644
index 0000000000..7bcf826362
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/search.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#E5E5E5;}
+	.st4{opacity:0.5;fill:#E5E5E5;enable-background:new    ;}
+	.st5{fill:#E5E5E5;stroke:#E5E5E5;}
+	.st6{fill:#9B9B9B;}
+	.st7{fill:#4470B6;}
+	.st8{fill:#D0D1D1;}
+	.st9{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#D02227;stroke-miterlimit:10;}
+	.st11{fill:#D02227;}
+</style>
+<g id="Layer_1" class="st0">
+	<g class="st1">
+		<path class="st2" d="M24.8,151.4l-11.5,10l-12.9-9.6V0.5h263v151.7l-9,6.7V42.5h-39v112.6l-4.4-3.7l-7.6,5.3V42.5h-155v110.8
+			l-9.8,8L24.8,151.4z"/>
+		<path class="st3" d="M263,1v151l-8,6V42h-40v112l-3.3-2.8l-0.6-0.5l-0.6,0.4l-6.5,4.6V42H48v111.1l-9.3,7.7l-13.3-9.6l-0.6-0.5
+			l-0.6,0.5l-10.9,9.5L1,151.5V1L263,1L263,1z M264,0H0v152l13.4,10l11.5-10l13.9,10l10.2-8.4V43h154v114.7l8.1-5.7l4.9,4.2V43h38
+			v116.9l10-7.4V0L264,0z M203,43H49v110.6l2.1-1.6l12.6,10l13.8-10l14.2,10l13-10l13,10l13.8-10l12.1,10l13.4-10l14.2,10l13-10
+			l13,10l5.8-4.3L203,43L203,43z"/>
+		<path class="st4" d="M254,43h-38v113.2l7.6,5.8l13.8-10l13.9,10l2.7-2.1V43z"/>
+		<path class="st5" d="M2,14.5h260"/>
+		<path class="st3" d="M232.5,5h26v6h-26V5z M208.5,5h22v6h-22V5z M142,6v4H50V6H142z M143,5H49v6h94V5z M184.5,5h22v6h-22V5z
+			 M161.5,5h13v6h-13V5z M176.5,5h6v6h-6V5z M153.5,5h6v6h-6V5z M9,5h32v6H9V5z M52,7h2v2h-2V7z M11,36c0-7.7,6.3-14,14-14
+			s14,6.3,14,14s-6.3,14-14,14S11,43.7,11,36z M38,107V72H13v35H38z M38,59v-5H13v5H38z"/>
+	</g>
+	<g class="st1">
+		<path class="st6" d="M123.8,68H85.6v7.8h38.1L123.8,68L123.8,68z M180.5,103v-8.8h-50.8v8.8H180.5z M90.8,80.6H69.9v8.6h20.8V80.6
+			z M189.3,88.4v-7.8h-37.7v7.8H189.3z M100.7,94.1H75v7.8h25.7V94.1z M175.2,68H129v7.8h46.2V68z"/>
+		<path class="st7" d="M94.7,80.6v9.2h51.6v-9.2L94.7,80.6z"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M94,94h75v44H94V94z"/>
+		<path class="st7" d="M169,94h-31v44h31V94z M150.8,118.1l5.9,9.7l3.2-3l4.8,6.1l-21.1,0l6.2-12.8H150.8z"/>
+		<g transform="scale(-1 1)">
+			<path class="st8" d="M-102,100h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,100.2-101.4,100-102,100z"/>
+			<path class="st8" d="M-102,104h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,104.2-101.4,104-102,104z"/>
+			<path class="st8" d="M-102,108h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0
+				C-101,108.2-101.4,108-102,108z"/>
+			<path class="st8" d="M-102,112h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,112.2-101.4,112-102,112z"/>
+			<path class="st8" d="M-102,116h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,116.2-101.4,116-102,116z"/>
+			<path class="st8" d="M-102,120h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,120.2-101.4,120-102,120z"/>
+			<path class="st8" d="M-102,124h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,124.2-101.4,124-102,124z"/>
+			<path class="st8" d="M-102,128h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0
+				C-101,128.2-101.4,128-102,128z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_2">
+	<g>
+		<rect x="4.8" y="5.5" class="st2" width="93" height="5"/>
+		<path class="st3" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
+	</g>
+	<polygon class="st3" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 	"/>
+	<polygon class="st3" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 	"/>
+	<line class="st9" x1="2" y1="14.5" x2="262" y2="14.5"/>
+	<line class="st9" x1="2" y1="32.8" x2="262" y2="32.8"/>
+	<g>
+		<circle class="st10" cx="8.9" cy="22.6" r="3.6"/>
+		<line class="st10" x1="11.6" y1="25" x2="15" y2="28.5"/>
+	</g>
+	<rect x="20.9" y="19" class="st3" width="57.6" height="9.5"/>
+	<rect x="4.3" y="37" class="st3" width="69.2" height="32.7"/>
+	<rect x="4.3" y="72.5" class="st3" width="90.1" height="56.8"/>
+	<rect x="97" y="72.5" class="st11" width="106.5" height="56.8"/>
+	<rect x="206.3" y="72.5" class="st3" width="52.4" height="56.8"/>
+	<rect x="4.3" y="132.2" class="st3" width="36.5" height="25.3"/>
+	<rect x="43.7" y="132.2" class="st3" width="62.3" height="25.3"/>
+	<rect x="109.3" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="169.1" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="189.8" y="132.2" class="st3" width="18.1" height="25.3"/>
+	<rect x="210.6" y="132.2" class="st3" width="48.1" height="25.3"/>
+	<rect x="130" y="132.2" class="st3" width="36" height="25.3"/>
+	<rect x="115.2" y="37" class="st3" width="36.5" height="32.7"/>
+	<rect x="76.1" y="37" class="st3" width="36.5" height="32.7"/>
+	<rect x="154.6" y="37" class="st3" width="56" height="32.7"/>
+	<rect x="213.3" y="37" class="st3" width="45.4" height="32.7"/>
+	<path class="st2" d="M102.4,115.4l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8h-80.3L102.4,115.4z"/>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/bookletlayout/option4/website.png b/resources/src/mediawiki/bookletlayout/option4/website.png
index 9c1914fba6..7e007514ad 100644
Binary files a/resources/src/mediawiki/bookletlayout/option4/website.png and b/resources/src/mediawiki/bookletlayout/option4/website.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/website.svg b/resources/src/mediawiki/bookletlayout/option4/website.svg
new file mode 100644
index 0000000000..c6bf6fef18
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option4/website.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#E5E5E5;}
+	.st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}
+	.st3{fill:#D02227;}
+	.st4{fill:#9B9A9A;}
+</style>
+<g>
+	<rect x="4.8" y="5.5" class="st0" width="93" height="5"/>
+	<path class="st1" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>
+</g>
+<polygon class="st1" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 "/>
+<polygon class="st1" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 "/>
+<line class="st2" x1="2" y1="14.5" x2="262" y2="14.5"/>
+<rect x="44" y="48.4" class="st3" width="106.5" height="56.8"/>
+<path class="st0" d="M49.3,91.2l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8H49.3L49.3,91.2z"/>
+<circle class="st1" cx="55" cy="32.3" r="11.9"/>
+<g>
+	<rect x="70.7" y="27.4" class="st4" width="76.2" height="7"/>
+	<rect x="70.7" y="35.5" class="st4" width="22.3" height="1.7"/>
+	<rect x="95" y="35.5" class="st4" width="28.2" height="1.7"/>
+</g>
+<rect x="44" y="107.8" class="st1" width="23.3" height="23.3"/>
+<rect x="70.7" y="107.8" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="114" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="120.2" class="st1" width="79.8" height="1.8"/>
+<rect x="70.7" y="126.4" class="st1" width="79.8" height="1.8"/>
+<rect x="44" y="134.4" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="140.6" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="146.8" class="st1" width="106.5" height="1.8"/>
+<rect x="44" y="153" class="st1" width="106.5" height="1.8"/>
+<g>
+	<rect x="155.7" y="37.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="43.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="49.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="55.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="27.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="155.7" y="78.2" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="84.4" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="90.6" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="96.8" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="68.4" class="st1" width="57.3" height="7"/>
+</g>
+<g>
+	<rect x="155.7" y="116.7" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="122.9" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="129.1" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="135.3" class="st1" width="57.3" height="1.8"/>
+	<rect x="155.7" y="106.9" class="st1" width="57.3" height="7"/>
+</g>
+</svg>
diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css
deleted file mode 100644
index c50ad7f4db..0000000000
--- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/* All */
-
-.mw-foreignStructuredUpload-bookletLayout-license {
-	font-size: 90%;
-	line-height: 1.4em;
-	color: #555;
-}
-
-/* Option 2 */
-
-.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
-	background-repeat: no-repeat;
-	background-size: 3.5em;
-	min-height: 4em;
-	margin-bottom: 0.25em;
-	display: table;
-	vertical-align: middle;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-	width: 100%;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
-	/* Together with 'display: table' above, and FieldLayout styles, this aligns the text */
-	/* vertically to the middle. Don't try this at home, kids. */
-	display: table-row;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-ownwork {
-	/* @embed */
-	background-image: url(bookletlayout/option2/ownwork.png);
-	background-position: left center;
-	padding-left: 4.5em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-noderiv {
-	/* @embed */
-	background-image: url(bookletlayout/option2/noderiv.png);
-	background-position: right center;
-	padding-right: 4.5em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-useful {
-	/* @embed */
-	background-image: url(bookletlayout/option2/useful.png);
-	background-position: left center;
-	padding-left: 4.5em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-ccbysa {
-	/* @embed */
-	background-image: url(bookletlayout/option2/ccbysa.png);
-	background-position: right center;
-	padding-right: 4.5em;
-}
-
-/* Option 3 */
-
-.mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
-	display: inline-block;
-	margin-right: 2em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
-	/* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
-	color: #707070;
-}
-
-/* Option 4 */
-
-.mw-foreignStructuredUpload-bookletLayout-guide {
-	position: relative;
-	height: 315px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
-	display: table;
-	width: 150px;
-	height: 140px;
-	position: absolute;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
-	display: table-cell;
-	vertical-align: middle;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
-	top: 0;
-	left: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
-	bottom: 0;
-	right: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image {
-	position: absolute;
-	width: 200px;
-	height: 122px;
-	background-size: 200px;
-	background-repeat: no-repeat;
-	border: 1px solid #ccc;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
-	/* @embed */
-	background-image: url(bookletlayout/option4/camera.png);
-	top: 0;
-	right: 80px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
-	/* @embed */
-	background-image: url(bookletlayout/option4/graphics.png);
-	top: 50px;
-	right: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-website {
-	/* @embed */
-	background-image: url(bookletlayout/option4/website.png);
-	left: 0;
-	bottom: 50px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-search {
-	/* @embed */
-	background-image: url(bookletlayout/option4/search.png);
-	left: 80px;
-	bottom: 0;
-}
-
-.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
-	/* We're really tight on vertical space. */
-	margin-bottom: 0;
-}
diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
new file mode 100644
index 0000000000..51ddcdd1b3
--- /dev/null
+++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
@@ -0,0 +1,144 @@
+@import "mediawiki.mixins";
+
+/* All */
+
+.mw-foreignStructuredUpload-bookletLayout-license {
+	font-size: 90%;
+	line-height: 1.4em;
+	color: #555;
+}
+
+/* Option 2 */
+
+.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
+	background-repeat: no-repeat;
+	background-size: 3.5em;
+	min-height: 4em;
+	margin-bottom: 0.25em;
+	display: table;
+	vertical-align: middle;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
+	/* Together with 'display: table' above, and FieldLayout styles, this aligns the text */
+	/* vertically to the middle. Don't try this at home, kids. */
+	display: table-row;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-ownwork {
+	/* @embed */
+	background-image: url(bookletlayout/option2/ownwork.png);
+	background-position: left center;
+	padding-left: 4.5em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-noderiv {
+	/* @embed */
+	background-image: url(bookletlayout/option2/noderiv.png);
+	background-position: right center;
+	padding-right: 4.5em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-useful {
+	/* @embed */
+	background-image: url(bookletlayout/option2/useful.png);
+	background-position: left center;
+	padding-left: 4.5em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-ccbysa {
+	/* @embed */
+	background-image: url(bookletlayout/option2/ccbysa.png);
+	background-position: right center;
+	padding-right: 4.5em;
+}
+
+/* Option 3 */
+
+.mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
+	display: inline-block;
+	margin-right: 2em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+	/* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
+	color: #707070;
+}
+
+/* Option 4 */
+
+.mw-foreignStructuredUpload-bookletLayout-guide {
+	position: relative;
+	height: 315px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
+	display: table;
+	width: 150px;
+	height: 140px;
+	position: absolute;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
+	top: 0;
+	left: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
+	bottom: 0;
+	right: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image {
+	position: absolute;
+	width: 200px;
+	height: 122px;
+	background-color: #fff;
+	background-size: 200px;
+	background-repeat: no-repeat;
+	border: 1px solid #e5e5e5;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
+	/* @embed */
+	.background-image-svg('bookletlayout/option4/camera.svg','bookletlayout/option4/camera.png');
+	top: 0;
+	right: 80px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
+	/* @embed */
+	.background-image-svg('bookletlayout/option4/graphics.svg','bookletlayout/option4/graphics.png');
+	top: 50px;
+	right: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-website {
+	/* @embed */
+	.background-image-svg('bookletlayout/option4/website.svg','bookletlayout/option4/website.png');
+	left: 0;
+	bottom: 50px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-search {
+	/* @embed */
+	.background-image-svg('bookletlayout/option4/search.svg','bookletlayout/option4/search.png');
+	left: 80px;
+	bottom: 0;
+}
+
+.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
+	/* We're really tight on vertical space. */
+	margin-bottom: 0;
+}