Adds the replacement gold animation (#227)

Any chance you could push this to only devrama so I can test some edge cases?

This seems to be really fast, most of the credit goes to @trihard for making the svg, I just did the lazy drop in bit.

Anyways, I don't really have a slow machine to test this on so I'm not sure how much this improves performance but should cut down on repaints

Co-authored-by: Mike Hawk <top@rdrama.net>
Reviewed-on: rDrama/rDrama#227
Co-authored-by: top <top@noreply.fsdfsd.net>
Co-committed-by: top <top@noreply.fsdfsd.net>

files/assets/css/awards.css

@@ -272,11 +272,6 @@
 	font-weight: 400;
 }
 
-@keyframes move-colors {
-	from {background-position: 0px;}
-	to {background-position: 1000px;}
-}
-
 @keyframes lgbt {
 	0% { filter: hue-rotate(0deg); }
 	100% { filter: hue-rotate(360deg); }

files/assets/css/dark_themes.css

@@ -8,12 +8,8 @@ lite-youtube, iframe {
 }
 
 .gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
-	background: repeating-linear-gradient(
-		45deg,
-		gold,
-		#debd00 20px,
-		#cdae00 60px
-	);
+	background: url("/i/animations/gold_gradient.svg");
+	background-size: 200% 200%;
 }
 
 code {

files/assets/css/main.css

@@ -7611,27 +7611,18 @@ blink {
 
 .gold-text:not(a), h1.gold-text.post-title a, :not(td) > a[href="/h/highrollerclub"]:not(.hole-flair) {
 	font-family: open sans,sans-serif !important;
-	background: repeating-linear-gradient(
-		45deg,
-		#a78e00,
-		#947d00 20px,
-		#847000 60px
-	);
+	background: url("/i/animations/gold_gradient.svg") repeat;
+	background-size: 200% 200%;
 	color: transparent !important;
 	font-weight: 700 !important;
 	background-clip: text !important;
 	-webkit-background-clip: text !important;
-	animation: 60s linear 0s infinite move-colors;
 }
 
 :not(td) > a[href="/h/highrollerclub"].hole-flair, .effortpost-flair {
 	font-family: open sans,sans-serif !important;
-	background: repeating-linear-gradient(
-		45deg,
-		#a78e00,
-		#947d00 20px,
-		#847000 60px
-	);
+	background: url("/i/animations/gold_gradient.svg");
+	background-size: 200% 200%;
 	font-weight: 700 !important;
 	animation: 60s linear 0s infinite move-colors;
 }

files/assets/images/animations/gold_gradient.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient gradientUnits="userSpaceOnUse" id="myGradient" x1="0" y1="0" x2="60" y2="0">
+            <stop offset="0%" stop-color="gold" />
+            <stop offset="33%" stop-color="#debd00" />
+            <stop offset="100%" stop-color="#cdae00" />
+        </linearGradient>
+        <pattern id="bg" patternUnits="userSpaceOnUse" width="60" height="1" patternTransform="rotate(-45 50 50)">
+            <rect width="100%" height="100%" fill="url(#myGradient)">
+            </rect>
+        </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#bg)"></rect>
+    <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="translate"
+        from="-84.852"
+        to="0"
+        dur="2s"
+        repeatCount="indefinite" />
+</svg>