docs(PREP): Updated com image

Worked on a new feature that make the strips hidden while idle. They fade in and move during loading, then fade out.

I don't know the performance toll on usage.

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "PREP"
+    ]
+}

PPR banner.css

@@ -0,0 +1,37 @@
+@-moz-document domain("ppr-stream.alkemics.com"),
+domain("ppr-admin.alkemics.com") {
+     :root {
+        --stripe-size: 100px;
+        --color1: hsla(194, 71%, 30%, 1);
+        --color2: hsla(194, 77%, 35%, 1);
+        --duration: 1s;
+        --state: running;
+    }
+    .AuthLayoutFooter,
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, hsla(194, 77%, 35%, 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 0s infinite normal var(--state);
+        transition: background 200ms linear;
+    }
+    .AuthLayoutFooter {
+        --stripe-size: 200px;
+        --duration: 40s;
+    }
+    .navbar:only-child {
+        --state: paused;
+        --color2: hsla(194, 71%, 30%, 1);
+    }
+    .PageTop>.Loader {
+        visibility: hidden;
+    }
+    @keyframes alkegrad {
+        from {
+            background-position: 0 0;
+        }
+        to {
+            background-position: var(--stripe-size) 0;
+        }
+    }
+}

PRD banner.css

@@ -1,5 +1,5 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("admin.supplierxm.salsify.com") {
+@-moz-document domain("stream.alkemics.com"),
+domain("admin.alkemics.com") {
     .AuthLayoutFooter,
     .Navbar.navbar.bg-inverse {
         background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);

PREP banner.css

@@ -1,27 +0,0 @@
-@-moz-document domain("ppr-app.supplierxm.salsify.com"),
-domain("ppr-admin.alkemics.com") {
-     :root {
-        --stripe-size: 100px;
-        --color1: hsl(194, 71%, 30%);
-        --color2: hsl(194, 77%, 35%);
-        --duration: 20s;
-    }
-    .AuthLayoutFooter,
-    .Navbar.navbar.Navbar--PPR.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
-        background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
-    }
-    .AuthLayoutFooter {
-        --stripe-size: 200px;
-        --duration: 40s;
-    }
-    @keyframes alkegrad {
-        from {
-            background-position: 0 0;
-        }
-        to {
-            background-position: var(--stripe-size) 0;
-        }
-    }
-}

README.md

@@ -2,10 +2,28 @@
 
 ## What is this?
 
-This repository aims to tweak some website visuals. Changes are made inside your broswer via an extension, so it doesn't actually break anything.
+This content aims to change a little the Alkemics interface to help you recognise at a glance certains informations. It also refresh the interface a little. Changes are made inside your broswer via an extension, so it doesn't reflect elsewhere.
 
 ![example of banner](/public/illustration.png)
 
+## Give me an example
+
+### Change banners
+
+If you are on Preprod, the teal navbar will be enhanced with a light strip. On Load testing, the stip is purple. On your Pillar, the stip is cyan. On Prod, the navbar change colors using Salsify colors. The logon footer also work that way.
+
+![example of PPR banner](public/PPR_banner_ex.png)
+![example of Pillar banner](public/PLR_banner_ex.png)
+
+If you have multiple windows or tabs on theses opened, you will quickly see on which one you are.
+
+### Change user icon to a factory or a shop
+
+If you use a Chrome profil for Retailers accounts, you can change the top right user icon to a shop one.
+If you use a Chrome profil for Manufacturers, it can change it to a factory.
+
+![example of orange shop icon](public/user-orange-shop.png)
+
 ## How does it works?
 
 Nothing is changed on the software itself: It's your broswer that applies more CSS rules to make it happens. It relies on the Chrome extension xStyle, and that make it easy to turn them on or off, just in case it conflict with the website.
@@ -19,17 +37,12 @@ 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
+* `PPR banner.css`: Change the Preproduction banner
+* `PLR banner.css`: Change your Pillar banner
+* `LTG banner.css`: Change the Load Testing banner
 * `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)
-* `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`: Change the top-right user icon to a Shop one, and make it orange. It actually don't know if you'r logged as a Retailer or not.
+* `Suppliers Sigils.css`: change the top-right user icon to a Factory one, and make it turquoise. It actually don't know if you're logged as a Manufacturer or not.  

Retailers Sigils.css

@@ -1,5 +1,5 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("ppr-app.supplierxm.salsify.com"),
+@-moz-document domain("stream.alkemics.com"),
+domain("ppr-stream.alkemics.com"),
 domain("ltg-stream.alkemics.com"),
 domain("int.alkemics.com") {
     #navbar-profile .dropdown-toggle .mdi-account::before {

Suppliers Sigils.css

@@ -1,5 +1,5 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("ppr-app.supplierxm.salsify.com"),
+@-moz-document domain("stream.alkemics.com"),
+domain("ppr-stream.alkemics.com"),
 domain("ltg-stream.alkemics.com"),
 domain("int.alkemics.com") {
     #navbar-profile .dropdown-toggle .mdi-account::before {

Whiter banner.css

@@ -1,5 +1,5 @@
-@-moz-document domain("app.supplierxm.salsify.com"),
-domain("ppr-app.supplierxm.salsify.com"),
+@-moz-document domain("stream.alkemics.com"),
+domain("ppr-stream.alkemics.com"),
 domain("ltg-stream.alkemics.com"),
 domain("int.alkemics.com") {
     .Navbar {

alkessian.less

@@ -1,77 +0,0 @@
-/* ==UserStyle==
-@name Alkessian
-@type less
-@homepageURL .
-@originalMD5 076868a0c478e1e1daef8e0dfb34cf70
-==/UserStyle== */
-
-@-moz-document domain("alkemics.atlassian.net") {
-    /* Header itself */
-    header {
-        background-color: var(--ds-surface, white) !important;
-        color: var(--ds-text-subtlest, #42526e) !important;
-        font-family: "Charlie Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif;
-        --icon-primary-color: var(--ds-text-subtlest, #42526e) !important;
-    }
-    /* Alkemics Logos */
-    header nav img {
-        filter: invert(1) hue-rotate(180deg);
-        max-width: 90px !important;
-        width: 28px;
-        height: 32px;
-        object-fit: none;
-        object-position: 45%;
-    }
-    header nav a:first-of-type {
-        margin-right: 0;
-        &:hover {
-            background-color: transparent;
-        }
-    }
-    /* Buttons */
-    header a,
-    header button {
-        background-color: transparent !important;
-        color: var(--ds-text-subtlest, #42526e) !important;
-        svg {
-            --icon-secondary-color: white;
-            transition: transform .2s;
-        }
-        &:hover {
-            color: var(--ds-text-subtle, hsl(216, 100%, 40%)) !important;
-            background-color: var(--ds-background-neutral-hovered, hsla(216, 100%, 40%, 0.1)) !important;
-        }
-        &[aria-expanded="true"] {
-            color: var(--ds-text-subtle, hsl(216, 100%, 40%)) !important;
-            background-color: var(--ds-background-neutral-pressed, hsla(216, 100%, 40%, 0.2)) !important;
-            svg {
-                transform: rotatex(0.5turn);
-            }
-        }
-        &#createGlobalItem {
-            border-radius: 2px;
-            &:hover {
-                outline: 3px solid var(--ds-background-neutral-hovered, hsla(216, 100%, 40%, 0.8));
-            }
-        }
-    }
-    /* Search box */
-    header input {
-        box-shadow: none !important;
-        outline: 1px solid rgba(66, 83, 110, 0.4) !important;
-        border: none !important;
-        border-radius:3px !important;
-        background-color: var(--ds-surface, white) !important;
-        &::placeholder {
-            color: var(--ds-text-subtlest, #42526e) !important;
-        }
-        &:hover:not(:focus) {
-            color: var(--ds-text-subtle, hsl(216, 100%, 40%)) !important;
-            background-color: var(--ds-background-neutral-hovered, hsla(216, 100%, 40%, 0.1)) !important;
-            outline: 3px solid hsla(216, 100%, 40%, 0.8) !important;
-        }
-        &:focus {
-            outline: 3px solid hsla(216, 100%, 40%, 0.8) !important;
-        }
-    }
-}