Set envs to animate on loading only (except PROD) (#18)

Simply update the code with what i've been using lately so it only animate when the `.Loader` is created by react. Except for PROD where animation runs anytime.

Use both the new `:has()` pseudo-class and fallback to regular `:not(:only-child())` for unsupported browser (Firefox)

PERF banner.css

@@ -1,21 +1,43 @@
-@-moz-document domain("ltg-stream.alkemics.com"),
-domain("ltg-admin.alkemics.com") {
+@-moz-document domain("ltg-app.supplierxm.salsify.com"),
+domain("ltg-admin.supplierxm.salsify.com") {
     :root {
         --stripe-size: 100px;
-        --color1: hsl(261, 65%, 51%);
-        --color2: hsl(261, 80%, 59%);
-        --duration: 30s;
+        --color1: hsl(180, 63%, 30%);
+        --color2: hsl(180, 63%, 37%);
+        --duration: 1s;
+        --state: running;
     }
+
     .AuthLayoutFooter,
-    .Navbar.navbar.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, hsla(261, 80%, 59%, 0) 25%, var(--color1) 50%, var(--color1) 75%);
+        background-color: var(--color2);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
+        transition: background 200ms linear;
     }
+
+    .AuthLayoutFooter {
+        --stripe-size: 200px;
+        --duration: 40s;
+    }
+
+
+    .PageTop>.navbar:where( :has(+ .Loader),
+        :not(:only-child)) {
+        --state: running;
+    }
+
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+    }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;
         }
+
         to {
             background-position: var(--stripe-size) 0;
         }

PLLR banner.css

@@ -1,20 +1,41 @@
-@-moz-document domain("pillar.alkemics.com") {
+@-moz-document domain("pillar.alkemics.com"),
+domain("localstream.alkemics.com") {
     :root {
         --stripe-size: 100px;
-        --color1: hsl(205, 70%, 45%);
+        --color1: hsl(205, 84%, 41%);
         --color2: hsl(205, 70%, 50%);
-        --duration: 30s;
+        --duration: 1s;
+        --state: paused;
     }
+
     .AuthLayoutFooter,
-    .Navbar.navbar.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
+        background-color: var(--color1);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
     }
+
+    .AuthLayoutFooter {
+        --stripe-size: 200px;
+        --duration: 40s;
+    }
+
+    .PageTop>.navbar:where( :has(+ .Loader),
+        :not(:only-child)) {
+        --state: running;
+    }
+
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+    }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;
         }
+
         to {
             background-position: var(--stripe-size) 0;
         }

PREP banner.css

@@ -1,17 +1,20 @@
 @-moz-document domain("ppr-app.supplierxm.salsify.com"),
-domain("ppr-admin.alkemics.com") {
+domain("ppr-admin.supplierxm.salsify.com/") {
     :root {
         --stripe-size: 100px;
-        --color1: hsl(194, 71%, 30%);
-        --color2: hsl(194, 77%, 35%);
-        --duration: 20s;
+        --color1: hsla(194, 71%, 30%, 1);
+        --color2: hsla(194, 77%, 35%, 1);
+        --duration: 1s;
+        --state: paused;
     }
 
     .AuthLayoutFooter,
     .Navbar.navbar.Navbar--PPR.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
+        background-color: var(--color1);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
+        will-change: background-position;
     }
 
     .AuthLayoutFooter {
@@ -19,6 +22,16 @@ domain("ppr-admin.alkemics.com") {
         --duration: 40s;
     }
 
+    .PageTop>.navbar:where( :has(+ .Loader),
+        :not(:only-child)) {
+        --state: running;
+    }
+
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+    }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;

PROD banner.css

@@ -1,18 +1,22 @@
 @-moz-document domain("app.supplierxm.salsify.com"),
 domain("admin.supplierxm.salsify.com") {
+
     .AuthLayoutFooter,
     .Navbar.navbar.bg-inverse {
         background: linear-gradient(-45deg, rgb(60, 180, 255), rgb(46, 112, 255), rgb(118, 55, 252));
         background-size: 200% 100% !important;
         animation: salsigrad 60s linear infinite !important;
     }
+
     @keyframes salsigrad {
         0% {
             background-position: 0% 0%;
         }
+
         50% {
             background-position: 100% 50%;
         }
+
         100% {
             background-position: 0% 0%;
         }

README.md

@@ -19,13 +19,14 @@ Repeate for each styles you want to enables.
 
 ## What each styles do?
 
-* `PPR banner.css`: Change the Preproduction banner and login's footer
-  ![example of PPR banner](public/PPR_banner_ex.png)
-* `PLR banner.css`: Change your Pillar banner and login's footer
-  ![example of Pillar banner](public/PLR_banner_ex.png)
-* `LTG banner.css`: Change the Load Testing banner and login's footer
-* `PRD banner.css`: Change the Production banner and login's footer
-  ![example of Prod banner](public/PRD_banner_ex.png)
+* `PREP banner.css`: Change the Preproduction banner and login's footer
+  ![example of PREP banner](public/PREP_banner_animated.mov)
+* `PLLR banner.css`: Change your Pillar banner and login's footer
+  ![example of PLLR banner](public/PLLR_banner_animated.mov)
+* `PERF banner.css`: Change the Load Testing banner and login's footer
+  ![example of PERF banner](public/PERF_banner_animated.mov)
+* `PROD banner.css`: Change the Production banner and login's footer
+  ![example of Prod banner](public/PROD_banner_animated.mov)
 * `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files.
 * `Sigils.css`: Change the top-right user icon to a Shop or Factory depending on if you are logged as ar Retailer or a Supplier.
   * ![example of orange shop icon](public/user-orange-shop.png) ![example of violet factory icon](public/user-violet-factory.png)