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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

30
PRD banner.css
View File

@ -1,28 +1,18 @@
@-moz-document domain("stream.alkemics.com") { @-moz-document domain("stream.alkemics.com") {
:root { .Navbar.bg-inverse {
--stripe-size: 100px; background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);
--color1: hsl(234, 71%, 48%); background-size: 400% 100% !important;
--color2: hsl(239, 100%, 60%); animation: salsigrad 60s linear infinite !important;
--duration: 6s;
} }
.Navbar::before { @keyframes salsigrad {
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 {
0% { 0% {
transform: translateX(0); background-position: 0% 0%;
}
50% {
background-position: 100% 50%;
} }
100% { 100% {
transform: translateX(calc(var(--stripe-size) * 1)); background-position: 0% 0%;
} }
} }
} }

66
test.css
View File

@ -1,54 +1,18 @@
:root { .Navbar {
--stripe-size: 100px; background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9) !important;
--color1: #c44; background-size: 400% 400% !important;
--color2: #313131; animation: salsigrad 15s linear infinite !important;
--duration: 4s; height: 100vh;
} }
body { @keyframes salsigrad {
display: flex; 0% {
height: 100vh; background-position: 0% 50%;
overflow: hidden; }
margin: 0; 50% {
} background-position: 100% 50%;
}
.stripe { 100% {
position: relative; background-position: 0% 50%;
display: flex; }
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.stripe::before {
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);
-webkit-animation: stripeTransform var(--duration) linear infinite;
animation: stripeTransform var(--duration) linear infinite;
}
@keyframes stripeTransform {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(var(--stripe-size) * 1));
}
}
@keyframes stripeBackgroundPosition {
0% {
background-position: 0 0;
}
100% {
background-position: calc(var(--stripe-size) * 1) 0;
}
} }

5
test.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,9 +8,11 @@
<title>Document</title> <title>Document</title>
<link href="test.css" rel="stylesheet" type="text/css"> <link href="test.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<div class="stripe"> <div class="Navbar">
<br> <br>
</div> </div>
</body> </body>
</html> </html>