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") {
: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%;
}
}
}

66
test.css
View File

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

5
test.html
View File

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