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

Changed PROD banner to be animated gradient with Salsify colors

Browse Source
This commit is contained in:
Simon Priet
2021-11-22 14:49:52 +01:00
parent 1871b272c0
commit 9c5ded406a
4 changed files with 29 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
PRD banner.css
View File

@@ -1,28 +1,18 @@
@-moz-document domain("stream.alkemics.com") {
:root {
--stripe-size: 100px;
--color1: hsl(234, 71%, 48%);
--color2: hsl(239, 100%, 60%);
--duration: 6s;
.Navbar.bg-inverse {
background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);
background-size: 400% 100% !important;
animation: salsigrad 60s linear infinite !important;
}
.Navbar::before {
z-index: -10;
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--stripe-size));
width: calc(100% + var(--stripe-size));
height: 100%;
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size);
animation: stripeTransform var(--duration) linear infinite;
}
@keyframes stripeTransform {
@keyframes salsigrad {
0% {
transform: translateX(0);
background-position: 0% 0%;
}
50% {
background-position: 100% 50%;
}
100% {
transform: translateX(calc(var(--stripe-size) * 1));
background-position: 0% 0%;
}
}
}