diff --git a/Jirafy.less b/Jirafy.less new file mode 100644 index 0000000..80c1a3a --- /dev/null +++ b/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)); + } + } + } + +} \ No newline at end of file diff --git a/README.md b/README.md index 03456c5..afe28ff 100644 --- a/README.md +++ b/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. - ![example of Confluence navbar](public/alkessian-banner.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) * `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) diff --git a/alkessian.less b/alkessian.less deleted file mode 100644 index c1ff424..0000000 --- a/alkessian.less +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/public/jirafy-animated.gif b/public/jirafy-animated.gif new file mode 100644 index 0000000..2c28842 Binary files /dev/null and b/public/jirafy-animated.gif differ diff --git a/public/jirafy-small-icon.png b/public/jirafy-small-icon.png new file mode 100644 index 0000000..b490f82 Binary files /dev/null and b/public/jirafy-small-icon.png differ