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

redesign navbar to be less contrasted

Browse Source
This commit is contained in:
Simon 2022-11-14 16:57:31 +01:00
parent 17c0ae5bee
commit bd7de8d2dc
1 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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