Kaldari has uploaded a new change for review.
https://gerrit.wikimedia.org/r/106765
Change subject: Hi-res external link icons!!!
......................................................................
Hi-res external link icons!!!
Plus a new LESS function for using SVG images.
Change-Id: Ia950be58371947b83beda547658ec9088595cabe
---
M less/common/common.less
A less/common/images/external-link-ltr-icon.svg
A less/common/images/external-link-rtl-icon.png
A less/common/images/external-link-rtl-icon.svg
M less/mixins.less
5 files changed, 276 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/65/106765/1
diff --git a/less/common/common.less b/less/common/common.less
index 80eb240..6639c80 100644
--- a/less/common/common.less
+++ b/less/common/common.less
@@ -76,7 +76,9 @@
}
a.external {
- background: url(images/external-link-ltr-icon.png) center right
no-repeat;
+ .background-image-svg( 'images/external-link-ltr-icon.svg',
'images/external-link-ltr-icon.png' );
+ background-repeat: no-repeat;
+ background-position: center right;
padding-right: 13px;
}
diff --git a/less/common/images/external-link-ltr-icon.svg
b/less/common/images/external-link-ltr-icon.svg
new file mode 100644
index 0000000..d77b879
--- /dev/null
+++ b/less/common/images/external-link-ltr-icon.svg
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="10"
+ height="10"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.4 r9939"
+ sodipodi:docname="external-link-ltr-icon.svg"
+
inkscape:export-filename="/run/user/1000/gvfs/sftp:host=users.v-lo.krakow.pl,user=m4tx/home/WWW/m4tx/WWW/Wikimedia/skins/vector/images/external-link-ltr-icon.png"
+ inkscape:export-xdpi="144.13724"
+ inkscape:export-ydpi="144.13724">
+ <defs
+ id="defs4">
+ <marker
+ inkscape:stockid="Club"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Club"
+ style="overflow:visible">
+ <path
+ id="path3996"
+ d="M -1.5971367,-7.0977635 C -3.4863874,-7.0977635
-5.0235187,-5.5606321 -5.0235187,-3.6713813 C -5.0235187,-3.0147015
-4.7851656,-2.4444556 -4.4641095,-1.9232271 C -4.5028609,-1.8911157
-4.5437814,-1.8647646 -4.5806531,-1.8299921 C -5.2030765,-2.6849849
-6.1700514,-3.2751330 -7.3077730,-3.2751330 C -9.1970245,-3.2751331
-10.734155,-1.7380016 -10.734155,0.15124914 C -10.734155,2.0404999
-9.1970245,3.5776313 -7.3077730,3.5776313 C -6.3143268,3.5776313
-5.4391540,3.1355702 -4.8137404,2.4588126 C -4.9384274,2.8137041
-5.0235187,3.1803000 -5.0235187,3.5776313 C -5.0235187,5.4668819
-3.4863874,7.0040135 -1.5971367,7.0040135 C 0.29211394,7.0040135
1.8292454,5.4668819 1.8292454,3.5776313 C 1.8292454,2.7842354
1.5136868,2.0838028 1.0600576,1.5031550 C 2.4152718,1.7663868
3.7718375,2.2973711 4.7661444,3.8340272 C 4.0279463,3.0958289
3.5540908,1.7534117 3.5540908,-0.058529361 L 2.9247554,-0.10514681 L
3.5074733,-0.12845553 C 3.5074733,-1.9403966 3.9580199,-3.2828138
4.6962183,-4.0210121 C 3.7371277,-2.5387813 2.4390549,-1.9946496
1.1299838,-1.7134486 C 1.5341802,-2.2753578 1.8292454,-2.9268556
1.8292454,-3.6713813 C 1.8292454,-5.5606319 0.29211394,-7.0977635
-1.5971367,-7.0977635 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:0.74587913pt"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="DiamondM"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DiamondM"
+ style="overflow:visible">
+ <path
+ id="path3849"
+ d="M 0,-7.0710768 L -7.0710894,0 L 0,7.0710589 L 7.0710462,0 L
0,-7.0710768 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.4)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible">
+ <path
+ id="path3767"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="22.627417"
+ inkscape:cx="11.725312"
+ inkscape:cy="5.6780159"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="1920"
+ inkscape:window-height="1041"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-826.42859,-698.79077)">
+ <rect
+
style="fill:#ffffff;stroke:#0066cc;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+ id="rect2996"
+ width="5.9821429"
+ height="5.9821429"
+ x="826.92859"
+ y="702.30865"
+ inkscape:export-filename="/home/m4tx/Pulpit/eheheh.png"
+ inkscape:export-xdpi="90.085777"
+ inkscape:export-ydpi="90.085777" />
+ <g
+ id="g4815"
+
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,762.87,-359.88339)"
+ inkscape:export-filename="/home/m4tx/Pulpit/eheheh.png"
+ inkscape:export-xdpi="90.085777"
+ inkscape:export-ydpi="90.085777">
+ <path
+ sodipodi:nodetypes="cccccccccc"
+ inkscape:connector-curvature="0"
+ id="path4777"
+ d="m 796.90819,700.28317 3.70127,-3.70126 3.81174,3.81175
-0.0189,2.20336 -1.85234,0 0,3.8543 -3.80233,0 0,-3.97108 -1.8536,0 z"
+ style="fill:#0066ff;fill-opacity:1;stroke:none" />
+ <path
+ sodipodi:nodetypes="cccccccc"
+ inkscape:connector-curvature="0"
+ id="path4779"
+ d="m 800.60946,698.00244 3.46986,3.43865 -2.5702,0 0,4.07436
-1.7362,0 0,-4.07436 -2.61754,-3.6e-4 z"
+ style="fill:#ffffff;fill-opacity:1;stroke:none" />
+ </g>
+ </g>
+</svg>
diff --git a/less/common/images/external-link-rtl-icon.png
b/less/common/images/external-link-rtl-icon.png
new file mode 100644
index 0000000..5313234
--- /dev/null
+++ b/less/common/images/external-link-rtl-icon.png
Binary files differ
diff --git a/less/common/images/external-link-rtl-icon.svg
b/less/common/images/external-link-rtl-icon.svg
new file mode 100644
index 0000000..7ddf89e
--- /dev/null
+++ b/less/common/images/external-link-rtl-icon.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="10"
+ height="10"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48.4 r9939"
+ sodipodi:docname="external-link-ltr-icon.svg"
+
inkscape:export-filename="/run/user/1000/gvfs/sftp:host=users.v-lo.krakow.pl,user=m4tx/home/WWW/m4tx/WWW/Wikimedia/skins/vector/images/external-link-ltr-icon.png"
+ inkscape:export-xdpi="144.13724"
+ inkscape:export-ydpi="144.13724">
+ <defs
+ id="defs4">
+ <marker
+ inkscape:stockid="Club"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Club"
+ style="overflow:visible">
+ <path
+ id="path3996"
+ d="M -1.5971367,-7.0977635 C -3.4863874,-7.0977635
-5.0235187,-5.5606321 -5.0235187,-3.6713813 C -5.0235187,-3.0147015
-4.7851656,-2.4444556 -4.4641095,-1.9232271 C -4.5028609,-1.8911157
-4.5437814,-1.8647646 -4.5806531,-1.8299921 C -5.2030765,-2.6849849
-6.1700514,-3.2751330 -7.3077730,-3.2751330 C -9.1970245,-3.2751331
-10.734155,-1.7380016 -10.734155,0.15124914 C -10.734155,2.0404999
-9.1970245,3.5776313 -7.3077730,3.5776313 C -6.3143268,3.5776313
-5.4391540,3.1355702 -4.8137404,2.4588126 C -4.9384274,2.8137041
-5.0235187,3.1803000 -5.0235187,3.5776313 C -5.0235187,5.4668819
-3.4863874,7.0040135 -1.5971367,7.0040135 C 0.29211394,7.0040135
1.8292454,5.4668819 1.8292454,3.5776313 C 1.8292454,2.7842354
1.5136868,2.0838028 1.0600576,1.5031550 C 2.4152718,1.7663868
3.7718375,2.2973711 4.7661444,3.8340272 C 4.0279463,3.0958289
3.5540908,1.7534117 3.5540908,-0.058529361 L 2.9247554,-0.10514681 L
3.5074733,-0.12845553 C 3.5074733,-1.9403966 3.9580199,-3.2828138
4.6962183,-4.0210121 C 3.7371277,-2.5387813 2.4390549,-1.9946496
1.1299838,-1.7134486 C 1.5341802,-2.2753578 1.8292454,-2.9268556
1.8292454,-3.6713813 C 1.8292454,-5.5606319 0.29211394,-7.0977635
-1.5971367,-7.0977635 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:0.74587913pt"
+ transform="scale(0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="DiamondM"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DiamondM"
+ style="overflow:visible">
+ <path
+ id="path3849"
+ d="M 0,-7.0710768 L -7.0710894,0 L 0,7.0710589 L 7.0710462,0 L
0,-7.0710768 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.4)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lstart"
+ style="overflow:visible">
+ <path
+ id="path3767"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.8) translate(12.5,0)" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="22.627417"
+ inkscape:cx="11.725312"
+ inkscape:cy="5.6780159"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0"
+ inkscape:window-width="1920"
+ inkscape:window-height="1041"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-826.42859,-698.79077)">
+ <rect
+
style="fill:#ffffff;fill-opacity:1;stroke:#0066cc;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ id="rect2996"
+ width="5.9821429"
+ height="5.9821429"
+ x="-835.92859"
+ y="702.30865"
+ inkscape:export-filename="/home/m4tx/Pulpit/eheheh.png"
+ inkscape:export-xdpi="90.085777"
+ inkscape:export-ydpi="90.085777"
+ transform="scale(-1,1)" />
+ <g
+ id="g4815"
+
transform="matrix(-0.70710678,0.70710678,0.70710678,0.70710678,899.98717,-359.88339)"
+ inkscape:export-filename="/home/m4tx/Pulpit/eheheh.png"
+ inkscape:export-xdpi="90.085777"
+ inkscape:export-ydpi="90.085777">
+ <path
+ sodipodi:nodetypes="cccccccccc"
+ inkscape:connector-curvature="0"
+ id="path4777"
+ d="m 796.90819,700.28317 3.70127,-3.70126 3.81174,3.81175
-0.0189,2.20336 -1.85234,0 0,3.8543 -3.80233,0 0,-3.97108 -1.8536,0 z"
+ style="fill:#0066ff;fill-opacity:1;stroke:none" />
+ <path
+ sodipodi:nodetypes="cccccccc"
+ inkscape:connector-curvature="0"
+ id="path4779"
+ d="m 800.60946,698.00244 3.46986,3.43865 -2.5702,0 0,4.07436
-1.7362,0 0,-4.07436 -2.61754,-3.6e-4 z"
+ style="fill:#ffffff;fill-opacity:1;stroke:none" />
+ </g>
+ </g>
+</svg>
diff --git a/less/mixins.less b/less/mixins.less
index 39fb187..64027d1 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -26,6 +26,14 @@
background-size: @width @height;
}
+// Add SVG support using a transparent gradient to guarantee cross-browser
compatibility.
+// Browsers able to understand gradient syntax also support SVG.
+.background-image-svg( @svg, @fallback ) {
+ background-image: url(@fallback);
+ /* @embed */ background-image: -webkit-linear-gradient(transparent,
transparent), url(@svg);
+ /* @embed */ background-image: linear-gradient(transparent,
transparent), url(@svg);
+}
+
.vertical-gradient ( @startColor: gray, @endColor: white, @startPos: 0,
@endPos: 100% ) {
background-color: @endColor;
background-image: -moz-linear-gradient( top, @startColor @startPos,
@endColor @endPos ); // Firefox 3.6+
--
To view, visit https://gerrit.wikimedia.org/r/106765
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia950be58371947b83beda547658ec9088595cabe
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
