From 69e8f11166e0e70ddc5a4b90e4ce84dee47d474f Mon Sep 17 00:00:00 2001
From: Monochromish <79590499+Monochromish@users.noreply.github.com>
Date: Sat, 2 Apr 2022 02:42:32 +1100
Subject: [PATCH] Adds gradient animation to the `Replay <year>` button on home
 screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sweet 🍬🍭
---
 src/renderer/less/pages.less | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index c5c0dc42..ea5601b3 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -1167,6 +1167,17 @@
   }
 }
 
+@keyframes gradient-animation {
+  0% {
+    background-position: 0% 0%;
+  }
+  50% {
+    background-position: 100% 0%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+}
 
 //Home
 .home-page {
@@ -1174,7 +1185,9 @@
   //padding-top: var(--navbarHeight);
 
   .md-btn-replay {
-    background    : var(--replayGradient);
+    background-image: linear-gradient(-45deg, #2e2173, #925042);
+    animation: gradient-animation 5s ease-in-out infinite;
+    background-size: 400% 400%;
     border        : 0px;
     box-shadow    : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
     text-transform: uppercase;
@@ -1184,7 +1197,9 @@
   .md-btn-replay--hero {
     font-size     : 1em;
     padding       : 16px;
-    background    : var(--replayGradient);
+    background-image: linear-gradient(-45deg, #2e2173, #925042);
+    animation: gradient-animation 5s ease-in-out infinite;
+    background-size: 400% 400%;
     border        : 0px;
     box-shadow    : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
     margin-top    : 1em;