refactor(#28): Switch to 1 color hue (#30)

* refactor(#28): Switch to 1 color hue

* refactor(#28): Tweak colors

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "conventionalCommits.scopes": [
-        "PREP"
+        "#11",
+        "13",
+        "#28",
+        "#28"
     ]
 }

Blinkers.less

@@ -0,0 +1,17 @@
+@-moz-document domain("supplierxm.salsify.com"),
+domain("alkemics.com") {
+
+    button:not([disabled]) .mdi-arrow-right-bold,
+    button:not([disabled]) .mdi-arrow-left-bold {
+        &:not([disabled]):hover {
+            animation: car-blinkers 900ms steps(1, end) infinite;
+        }
+    }
+
+    @keyframes car-blinkers {
+        45% {
+            color: rgb(0, 190, 0);
+            /*filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.15));*/
+        }
+    }
+}

Jirafy.less

@@ -0,0 +1,53 @@
+@-moz-document domain("atlassian.net") {
+
+    /*@font-face {
+        font-family: "Charlie Text";
+        src: url("https://wac-cdn.atlassian.com/static/master/4260/assets/build/fonts/charlie-sans/charlie-text/Charlie_Text-Regular.woff2") format("woff");
+        src: url("https://wac-cdn.atlassian.com/static/master/4260/assets/build/fonts/charlie-sans/charlie-text/Charlie_Text-Semibold.woff2") format("woff");
+        src: url("https://wac-cdn.atlassian.com/static/master/4260/assets/build/fonts/charlie-sans/charlie-text/Charlie_Text-Bold.woff2") format("woff");
+        src: url("https://wac-cdn.atlassian.com/static/master/4260/assets/build/fonts/charlie-sans/charlie-text/Charlie_Text-Black.woff2") format("woff");
+    }*/
+
+    /* Shorten the Salsify Icon */
+    header nav img {
+        filter: hue-rotate(30deg);
+        // max-width: 90px !important;
+        width: 32px;
+        height: 32px;
+        object-fit: cover;
+        object-position: left;
+    }
+
+    header nav:has(img:first-of-type) a {
+        margin: unset;
+    }
+
+    /* Buttons */
+    header a,
+    header button {
+        background-color: transparent !important;
+
+        svg {
+            transition: transform .2s;
+        }
+
+        &[aria-expanded="true"] {
+            color: var(--ds-text-subtle, hsl(218, 31%, 30%)) !important;
+            background-color: var(--ds-background-neutral-pressed, hsla(216, 100%, 40%, 0.2)) !important;
+
+            svg {
+                transform: rotate(-0.25turn);
+            }
+        }
+
+        &#createGlobalItem {
+            border-radius: 2px;
+            color: var(--ds-text-subtle, hsl(218, 31%, 30%));
+
+            &:hover {
+                outline: 3px solid var(--ds-background-neutral-hovered, hsla(216, 100%, 40%, 0.8));
+            }
+        }
+    }
+
+}

LTG banner.css

@@ -1,23 +0,0 @@
-@-moz-document domain("ltg-stream.alkemics.com"),
-domain("ltg-admin.alkemics.com") {
-     :root {
-        --stripe-size: 100px;
-        --color1: hsl(261, 65%, 51%);
-        --color2: hsl(261, 80%, 59%);
-        --duration: 30s;
-    }
-    .AuthLayoutFooter,
-    .Navbar.navbar.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
-        background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
-    }
-    @keyframes alkegrad {
-        from {
-            background-position: 0 0;
-        }
-        to {
-            background-position: var(--stripe-size) 0;
-        }
-    }
-}

Navbar color on Notif.css

@@ -0,0 +1,32 @@
+@-moz-document domain("supplierxm.salsify.com"),
+domain("alkemics.com") {
+    /*:root {
+        --color1: hsla(194, 71%, 30%, 1);
+        --navbar-gradient-color: rgb(20, 157, 199); 
+    }*/
+
+    .PageTop>.Navbar::after {
+        background-color: var(--navbar-gradient-color);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0%;
+        width: 100%;
+        z-index: -1;
+        transition: height .4s ease 0s;
+    }
+
+    .PageTop>.Navbar--PPR:has(+ :is(.NotificationAnimation-enter-done, .NotificationAnimation-enter-active))::after {
+        height: 100%;
+    }
+
+    .PageTop>.Navbar:has(+ .Notification--success) {
+        --navbar-gradient-color: #48b071;
+    }
+
+    .PageTop>.Navbar:has(+ .Notification--error) {
+        --navbar-gradient-color: #e64c42;
+    }
+
+
+}

PERF banner.css

@@ -0,0 +1,45 @@
+@-moz-document domain("ltg-app.supplierxm.salsify.com"),
+domain("ltg-admin.supplierxm.salsify.com") {
+    :root {
+        --stripe-size: 100px;
+        --color1: hsl(180, 78%, 35%);
+        --color2: rgba(0, 0, 0, 0.15);
+        --duration: 1s;
+        --state: running;
+    }
+
+    .AuthLayoutFooter,
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, transparent 50%, transparent 75%);
+        background-color: var(--color1);
+        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;
+    }
+
+
+    .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,35 +1,41 @@
-@-moz-document domain("ppr-stream.alkemics.com"),
+@-moz-document domain("pillar.alkemics.com"),
-domain("ppr-admin.alkemics.com") {
+domain("localstream.alkemics.com") {
     :root {
         --stripe-size: 100px;
-        --color1: hsla(194, 71%, 30%, 1);
+        --color1: hsl(220, 100%, 63%);
-        --color2: hsla(194, 77%, 35%, 1);
+        --color2: rgba(0, 0, 0, 0.15);
         --duration: 1s;
         --state: paused;
     }
+
     .AuthLayoutFooter,
     .Navbar.navbar.Navbar--PPR.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, transparent 50%, transparent 75%);
         background-color: var(--color1);
         background-size: var(--stripe-size) var(--stripe-size);
         animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
     }
+
     .AuthLayoutFooter {
         --stripe-size: 200px;
         --duration: 40s;
     }
-    .PageTop>.navbar:not(:only-child) {
+
+    .PageTop>.navbar:where( :has(+ .Loader),
+        :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;
         }

PLR banner.css

@@ -1,22 +0,0 @@
-@-moz-document domain("pillar.alkemics.com") {
-     :root {
-        --stripe-size: 100px;
-        --color1: hsl(205, 70%, 45%);
-        --color2: hsl(205, 70%, 50%);
-        --duration: 30s;
-    }
-    .AuthLayoutFooter,
-    .Navbar.navbar.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
-        background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
-    }
-    @keyframes alkegrad {
-        from {
-            background-position: 0 0;
-        }
-        to {
-            background-position: var(--stripe-size) 0;
-        }
-    }
-}

PREP banner.css

@@ -0,0 +1,44 @@
+@-moz-document domain("ppr-app.supplierxm.salsify.com"),
+domain("ppr-admin.supplierxm.salsify.com/") {
+    :root {
+        --stripe-size: 100px;
+        --color1: hsl(194, 77%, 35%);
+        --color2: rgba(0, 0, 0, 0.15);
+        --duration: 1s;
+        --state: paused;
+    }
+
+    .AuthLayoutFooter,
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, transparent 50%, transparent 75%);
+        background-color: var(--color1);
+        background-size: var(--stripe-size) var(--stripe-size);
+        animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
+        will-change: background-position;
+    }
+
+    .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;
+        }
+    }
+}

PROD banner.css

@@ -1,18 +1,22 @@
-@-moz-document domain("stream.alkemics.com"),
+@-moz-document domain("app.supplierxm.salsify.com"),
-domain("admin.alkemics.com") {
+domain("admin.supplierxm.salsify.com") {
+
     .AuthLayoutFooter,
     .Navbar.navbar.bg-inverse {
-        background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);
+        background: linear-gradient(-45deg, rgb(60, 180, 255), rgb(46, 112, 255), rgb(118, 55, 252));
-        background-size: 400% 100% !important;
+        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

@@ -2,28 +2,10 @@
 
 ## What is this?
 
-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.
+This repository aims to tweak some website visuals. Changes are made inside your broswer via an extension, so it doesn't actually break anything.
 
 ![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.
@@ -37,12 +19,23 @@ Repeate for each styles you want to enables.
 
 ## What each styles do?
 
-* `PPR banner.css`: Change the Preproduction banner
+* `PREP banner.css`: Change the Preproduction banner and login's footer
-* `PLR banner.css`: Change your Pillar banner
+  ![example of PREP banner](public/PREP_banner.jpg)
-* `LTG banner.css`: Change the Load Testing banner
+* `PLLR banner.css`: Change your Pillar banner and login's footer
-* `PRD banner.css`: Change the Production banner and login's footer
+  ![example of PLLR banner](public/PLLR_banner.jpg)
-
+* `PERF banner.css`: Change the Load Testing banner and login's footer
+  ![example of PERF banner](public/PERF_banner.jpg)
+* `PROD banner.css`: Change the Production banner and login's footer
+  ![example of Prod banner](public/PROD_banner_animated.gif)
 * `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.
-
+* `Navbar color on Notif.css`: Emphase the notification banner by coloring the navbar as well, with a nice and tidy `transition`.
-* `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.
+  ![example of Color switching](public/navbar-notification-animated.gif)
-* `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.  
+* `Squared logo place`: Remove the `border-radius` used for company logos, to allow more shapes than just circles.  
+  ![example of a not-cicle logo that can takes all space](public/squared-logo.png)
+* `Blinkers.less`: Enable your blinkers when you use pagination arrows.  
+  ![Example of blinkers](public/pagniation-are-blinkers.gif)
+* `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 factory icon](public/user-white-factory.png) ![example of shop icon](public/user-white-shop.png)
+* `Jirafy.less`: Animate the Jira navbar with a light rotation on buttons. Lighten the Create button as well.
+  ![icon take less space](public/jirafy-small-icon.png)
+  ![nice animation on click](public/jirafy-animated.gif)

Retailers Sigils.css

@@ -1,9 +0,0 @@
-@-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 {
-        content: "\F4DC";
-        color: orange;
-    }
-}

Sigils.css

@@ -0,0 +1,12 @@
+@-moz-document domain("salsify.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: coral;*/
+    }
+}

Squared logo place.css

@@ -0,0 +1,6 @@
+@-moz-document domain("supplierxm.salsify.com"),
+domain("alkemics.com") {
+    .MultipleOrganizationLabel>img {
+        border-radius: initial;
+    }
+}

Suppliers Sigils.css

@@ -1,9 +0,0 @@
-@-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 {
-        content: "\F20F";
-        color: turquoise;
-    }
-}

Whiter banner.css

@@ -1,22 +0,0 @@
-@-moz-document domain("stream.alkemics.com"),
-domain("ppr-stream.alkemics.com"),
-domain("ltg-stream.alkemics.com"),
-domain("int.alkemics.com") {
-    .Navbar {
-        color: white !important;
-    }
-    .Navbar .active {
-        color: white !important;
-        font-weight: bold !important;
-    }
-    .Navbar a.nav-link:hover {
-        color: white !important;
-        font-weight: bold !important;
-    }
-    .Navbar__menu>li.nav-item a.nav-link.active:after {
-        background: white;
-    }
-    .AuthLayoutFooter__logo {
-        border-top: 1px solid #fff;
-    }
-}

Whiter banner.less

@@ -0,0 +1,31 @@
+@-moz-document domain("supplierxm.salsify.com"),
+domain("alkemics.com") {
+    .Navbar.bg-inverse {
+        --white: white;
+        --bold: bold;
+        color: var(--white);
+
+        a.nav-link,
+        .SharingUnitDropdown__DropdownLabel {
+            color: var(--white) !important;
+
+            &:is(.active, :hover),
+            .SharingUnitDropdown__DropdownLabelActive {
+                color: var(--white) !important;
+                font-weight: var(--bold) !important;
+
+                .SharingUnitDropdown__OptionText {
+                    font-weight: 300;
+                }
+            }
+
+            &::after {
+                background: white !important;
+            }
+        }
+    }
+
+    .AuthLayoutFooter__logo {
+        border-top-color: #fff;
+    }
+}