adapte Alkessian.less to Salsify's Jira (#20)

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

README.md

@@ -30,8 +30,9 @@ Repeate for each styles you want to enables.
 * `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)
-* `Alkessian.less`: Change the black navbar of Jira & Confluence back to the default white one and add slight animations.
+* `Jirafy.less`: Animate the Jira navbar with a light rotation on buttons. Lighten the Create button as well.
-   ![example of Confluence navbar](public/alkessian-banner.png)
+  ![icon take less space](public/jirafy-small-icon.png)
+  ![nice animation on click](public/jirafy-animated.gif)
 * `Navbar color on Notif.css`: Emphase the notification banner by coloring the navbar as well, with a nice and tidy `transition`.
   ![example of Color switching with success](public/navbar_notification_success.gif)
   ![example of Color switching with success](public/navbar_notification_error.gif)

alkessian.less

@@ -1,101 +0,0 @@
-@-moz-document domain("alkemics.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");
-    }*/
-    /* Header itself */
-    header {
-        background-color: var(--ds-surface, white) !important;
-        color: var(--ds-text-subtlest, #42526e) !important;
-        font-family: "Charlie Text", -apple-system, "Segoe UI", Ubuntu, sans-serif;
-        /*font-size:12pt;*/
-        --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;
-        }
-    }
-
-    .iZanro {
-        background-color: transparent;
-
-        * {
-            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;
-        }
-    }
-}