From: Hector A Escobedo <ninjahector.escobedo@gmail.com>
Date: Tue, 19 Nov 2013 16:05:41 +0000 (-0500)
Subject: shared.css: Start vectorizing common icons
X-Git-Tag: 1.31.0-rc.0~18015^2
X-Git-Url: https://git.cyclocoop.org/%7B%24admin_url%7Dcompta/operations/supprimer.php?a=commitdiff_plain;h=e78e2f17269d94d725180e3b2c5462fa25fc76c7;p=lhc%2Fweb%2Fwiklou.git

shared.css: Start vectorizing common icons

This is in response to bug 35345.

I am working under the MediaWiki Google Code-In project,
and this is my first commit. I have some experience
with CSS and vector images, so it seems like a good
place to start. This is for the following task:
https://google-melange.appspot.com/gci/task/view/google/gci2013/5795046364282880

Only the Atom feed icon has been vectorized so far,
but I plan on adding more subsequently. Preliminary
testing shows that this approach works fine on Firefox.
Changed so that older browsers use the old PNG image,
while newer ones that support gradients use the SVG.

Bug: 35345
Change-Id: I842690df6934f4f14807dfc8d20ec2c0b0007df6
---

diff --git a/skins/common/images/feed-icon.svg b/skins/common/images/feed-icon.svg
new file mode 100644
index 0000000000..0aa76f5498
--- /dev/null
+++ b/skins/common/images/feed-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
+<defs>
+<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+<stop  offset="0.0" stop-color="#E3702D"/><stop  offset="0.1071" stop-color="#EA7D31"/>
+<stop  offset="0.3503" stop-color="#F69537"/><stop  offset="0.5" stop-color="#FB9E3A"/>
+<stop  offset="0.7016" stop-color="#EA7C31"/><stop  offset="0.8866" stop-color="#DE642B"/>
+<stop  offset="1.0" stop-color="#D95B29"/>
+</linearGradient>
+</defs>
+<rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#CC5D15"/>
+<rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#F49C52"/>
+<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+<circle cx="68" cy="189" r="24" fill="#FFF"/>
+<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+</svg>
diff --git a/skins/common/shared.css b/skins/common/shared.css
index ac7265a8af..f5b6231da7 100644
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -485,7 +485,11 @@ a.new {
 /* feed links */
 a.feedlink {
 	/* @embed */
-	background: url(images/feed-icon.png) center left no-repeat;
+	background-image: url(images/feed-icon.png);
+	background-image: linear-gradient(transparent, transparent), url(images/feed-icon.svg);
+	background-position: center left;
+	background-repeat: no-repeat;
+	background-size: 12px 12px;
 	padding-left: 16px;
 }