From 0e519c839eb12ef5ac6388fb025dfe9ea9339332 Mon Sep 17 00:00:00 2001
From: Simon Priet <spriet@alkemics.com>
Date: Thu, 18 Nov 2021 11:49:02 +0100
Subject: [PATCH] Updated PRD banner with an animated slowly moving strip

---
 PRD banner.css | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/PRD banner.css b/PRD banner.css
index 662479c..ac145ed 100644
--- a/PRD banner.css	
+++ b/PRD banner.css	
@@ -1,17 +1,28 @@
 @-moz-document domain("stream.alkemics.com") {
-    .Navbar {
-        animation-duration: 3s;
-        animation-name: slidein;
-        animation-iteration-count: infinite;
-        animation-direction: alternate;
+     :root {
+        --stripe-size: 100px;
+        --color1: #005564;
+        --color2: rgb(0, 0, 0);
+        --duration: 10s;
     }
-    @keyframes slidein {
-        from {
-            background-color: black;
+    .Navbar::before {
+        z-index: -10;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: calc(-1 * var(--stripe-size));
+        width: calc(100% + var(--stripe-size));
+        height: 100%;
+        background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
+        background-size: var(--stripe-size) var(--stripe-size);
+        animation: stripeTransform var(--duration) linear infinite;
+    }
+    @keyframes stripeTransform {
+        0% {
+            transform: translateX(0);
         }
-
-        to {
-            background-color: rgb(30, 180, 155);
+        100% {
+            transform: translateX(calc(var(--stripe-size) * 1));
         }
     }
 }
\ No newline at end of file