Salsify/front-ui-tweaker
1
0
Fork 0
Code Issues 4 Pull Requests 3 Packages Projects Releases Wiki Activity

Alkemics Jira is gone, long life to Jirafy! #20

Merged
alk-spriet merged 1 commits from change-alkessian-to-jirafy into main 2023-05-26 00:22:01 +02:00
Conversation 0 Commits 1 Files Changed 5 +56 -103
5 changed files with 56 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Jirafy.less Normal file
View File

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

5
README.md
View File

@ -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)

101
alkessian.less
View File

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

BIN
public/jirafy-animated.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
public/jirafy-small-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB