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

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

* refactor(#28): Tweak colors

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "conventionalCommits.scopes": [
+        "#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));
+            }
+        }
+    }
+
+}

LDTG 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,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(220, 100%, 63%);
-        --color2: hsl(205, 70%, 50%);
+        --color2: rgba(0, 0, 0, 0.15);
-        --duration: 30s;
+        --duration: 1s;
+        --state: paused;
     }
+
     .AuthLayoutFooter,
-    .Navbar.navbar.bg-inverse {
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
-        background: repeating-linear-gradient(-45deg, var(--color2) 25%, 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 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,25 +1,42 @@
 @-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%);
+        --color1: hsl(194, 77%, 35%);
-        --color2: hsl(194, 77%, 35%);
+        --color2: rgba(0, 0, 0, 0.15);
-        --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%, transparent 50%, transparent 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 {
         --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("app.supplierxm.salsify.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

@@ -19,17 +19,23 @@ Repeate for each styles you want to enables.
 
 ## What each styles do?
 
-* `PPR banner.css`: Change the Preproduction banner and login's footer
+* `PREP banner.css`: Change the Preproduction banner and login's footer
-  ![example of PPR banner](public/PPR_banner_ex.png)
+  ![example of PREP banner](public/PREP_banner.jpg)
-* `PLR banner.css`: Change your Pillar banner and login's footer
+* `PLLR banner.css`: Change your Pillar banner and login's footer
-  ![example of Pillar banner](public/PLR_banner_ex.png)
+  ![example of PLLR banner](public/PLLR_banner.jpg)
-* `LTG banner.css`: Change the Load Testing banner and login's footer
+* `PERF banner.css`: Change the Load Testing banner and login's footer
-* `PRD banner.css`: Change the Production banner and login's footer
+  ![example of PERF banner](public/PERF_banner.jpg)
-  ![example of Prod banner](public/PRD_banner_ex.png)
+* `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.
-* `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.
+* `Navbar color on Notif.css`: Emphase the notification banner by coloring the navbar as well, with a nice and tidy `transition`.
-  * ![example of orange shop icon](public/user-orange-shop.png)
+  ![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 are 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 orange shop icon](public/user-teal-factory.png)
+  ![example of a not-cicle logo that can takes all space](public/squared-logo.png)
-* `Alkessian.less`: Change the black navbar of Jira & Confluence back to the default white one and add slight animations.
+* `Blinkers.less`: Enable your blinkers when you use pagination arrows.  
-   ![example of Confluence navbar](public/alkessian-banner.png)
+  ![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("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,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("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;
-    }
-}

Whiter banner.css

@@ -1,22 +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 {
-        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;
+    }
+}

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;
-        }
-    }
-}