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

Merge pull request #2 from alk-spriet:atlassian-alkemics-black-navbar-fix

Browse Source 
redesign navbar to be less contrasted
This commit is contained in:
Simon Priet 2022-11-14 16:58:57 +01:00 committed by Simon
commit 0ffca2fa78
3 changed files with 71 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -41,8 +41,7 @@ Repeate for each styles you want to enables.
* `PLR banner.css`: Change your Pillar banner
* `LTG banner.css`: Change the Load Testing banner
* `PRD banner.css`: Change the Production banner and login's footer
* `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'r logged as a Retailer or not.
* `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.
* `Alkessian.less`: Change the black navbar of Jira & Confluence back to the default white one and add slight animations.

54
alkemics confluence.css
View File

@ -1,54 +0,0 @@
@-moz-document domain("alkemics.atlassian.net") {
/* Alkemics Logos */
img[alt="Custom logo"], img.css-1hb0n4g {
filter: invert(1) hue-rotate(180deg);
max-width: 90px !important;
position: relative;
left: 6px;
}
.css-1qtw0hy, .css-zwjaeb {
transition: transform .2s;
}
.css-1qtw0hy:hover, .css-zwjaeb:hover {
background: initial;
transform: scale(1.1);
}
/* Header itself */
header.css-1cychdt, header.css-6hmkez {
background-color: var(--ds-surface, #FFFFFF) !important;
color: var(--ds-text-subtlest, #6B778C) !important;
}
/* Buttons */
.css-kve6ut, .css-13bvg1k, .css-1kj55cl, .css-413l0e, .css-1jxgs6o {
background-color: transparent !important;
color: var(--ds-text-subtle, #344563) !important;
}
.css-10mdjbw, .css-1ybrxj4, .css-1skwa4f, .css-1ybrxj4:active, .css-doss7v, .css-vp2hxp, .css-1dp89g8, .css-iig378 {
color: var(--ds-text-subtle, #0052CC) !important;
background-color: var(--ds-background-neutral-hovered, rgba(222, 235, 255, 0.9)) !important;
}
.css-o9fpps, .css-gory0e, .css-jxyy9u, .css-vwrzum, .css-1kj55cl {
color: var(--ds-text-subtle, #0052CC) !important;
background-color: var(--ds-background-neutral-pressed, rgba(222, 235, 255, 0.7)) !important;
}
.css-6fxxam, .css-1yofrci {
border: 2px solid var(--ds-border, #DFE1E6);
box-shadow: none;
background-color: var(--ds-surface, #FFFFFF);
color: var(--ds-text-subtlest, #6B778C);
}
/* Some SVG icons in the header */
.css-pxzk9z > svg {
fill: white !important;
}
.css-hakgx8 > svg {
fill: var(--ds-text-subtlest, #6B778C) !important;
}
/* Search box */
.css-41z9ik, .css-1dy4npw {
box-shadow: none;
}
.css-6fxxam::placeholder, .css-1dy4npw::placeholder {
color: var(--ds-text-subtlest, #6B778C);
}
}

70
alkessian.less Normal file
View File

@ -0,0 +1,70 @@
@-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;
}
}
}