Generalize animation standby

PLLR banner.css

@@ -1,20 +1,41 @@
-@-moz-document domain("pillar.alkemics.com") {
-     :root {
+@-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:not(:only-child) {
+        --state: running;
+    }
+
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+        --state: paused;
+    }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;
         }
+
         to {
             background-position: var(--stripe-size) 0;
         }

PREP banner.css

@@ -1,25 +1,42 @@
 @-moz-document domain("ppr-app.supplierxm.salsify.com"),
-domain("ppr-admin.alkemics.com") {
-     :root {
+domain("ppr-admin.alkemics.com"),
+domain("localstream.alkemics.com") {
+    :root {
         --stripe-size: 100px;
         --color1: hsl(194, 71%, 30%);
         --color2: hsl(194, 77%, 35%);
-        --duration: 20s;
+        --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);
     }
+
     .AuthLayoutFooter {
         --stripe-size: 200px;
         --duration: 40s;
     }
+
+    .PageTop>.navbar:not(:only-child) {
+        --state: running;
+    }
+
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+        --state: paused;
+    }
+
     @keyframes alkegrad {
         from {
             background-position: 0 0;
         }
+
         to {
             background-position: var(--stripe-size) 0;
         }

README.md

@@ -27,9 +27,7 @@ Repeate for each styles you want to enables.
 * `PRD banner.css`: Change the Production banner and login's footer
   ![example of Prod banner](public/PRD_banner_ex.png)
 * `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.
-* `Retailers Sigils.css`: Change the top-right user icon to a Shop one, and make it orange. It actually don't know if you are logged as a Retailer or not.
-  * ![example of orange shop icon](public/user-orange-shop.png)
-* `Suppliers Sigils.css`: change the top-right user icon to a Factory one, and make it turquoise. It actually don't know if you are logged as a Manufacturer or not.  
-  * ![example of orange shop icon](public/user-teal-factory.png)
+* `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)
 * `Alkessian.less`: Change the black navbar of Jira & Confluence back to the default white one and add slight animations.
    ![example of Confluence navbar](public/alkessian-banner.png)

Retailers Sigils.css

@@ -1,9 +0,0 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("ppr-app.supplierxm.salsify.com"),
-domain("ltg-stream.alkemics.com"),
-domain("int.alkemics.com") {
-    #navbar-profile .dropdown-toggle .mdi-account::before {
-        content: "\F4DC";
-        color: orange;
-    }
-}

Sigils.css

@@ -0,0 +1,14 @@
+@-moz-document domain("salsify.com"),
+domain("salsify.com"),
+domain("alkemics.com"),
+domain("alkemics.com") {
+    li.HelpCenter#academy-access ~ li#navbar-profile > a > i.mdi-account::before {
+        content: "\F20F";
+        color: violet;
+    }
+
+    li.HelpCenter:not(#academy-access) ~ li#navbar-profile > a > i.mdi-account::before {
+        content: "\F4DC";
+        color: orange;
+    }
+}

Suppliers Sigils.css

@@ -1,9 +0,0 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("ppr-app.supplierxm.salsify.com"),
-domain("ltg-stream.alkemics.com"),
-domain("int.alkemics.com") {
-    #navbar-profile .dropdown-toggle .mdi-account::before {
-        content: "\F20F";
-        color: turquoise;
-    }
-}