From edafb4aafe4a3766af5758f28c8c029c20cecd80 Mon Sep 17 00:00:00 2001
From: top <top@noreply.fsdfsd.net>
Date: Thu, 6 Jun 2024 18:27:30 +0000
Subject: [PATCH] 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: https://fsdfsd.net/rDrama/rDrama/pulls/227
Co-authored-by: top <top@noreply.fsdfsd.net>
Co-committed-by: top <top@noreply.fsdfsd.net>
---
 files/assets/css/awards.css                   |  5 -----
 files/assets/css/dark_themes.css              |  8 ++-----
 files/assets/css/main.css                     | 17 ++++----------
 .../images/animations/gold_gradient.svg       | 22 +++++++++++++++++++
 4 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 files/assets/images/animations/gold_gradient.svg

diff --git a/files/assets/css/awards.css b/files/assets/css/awards.css
index 72150e603..3612bad96 100644
--- a/files/assets/css/awards.css
+++ b/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); }
diff --git a/files/assets/css/dark_themes.css b/files/assets/css/dark_themes.css
index 860627320..f38daad0c 100644
--- a/files/assets/css/dark_themes.css
+++ b/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 {
diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 4eee733b3..5396e7469 100644
--- a/files/assets/css/main.css
+++ b/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;
 }
diff --git a/files/assets/images/animations/gold_gradient.svg b/files/assets/images/animations/gold_gradient.svg
new file mode 100644
index 000000000..85c7f6298
--- /dev/null
+++ b/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>
\ No newline at end of file