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

Generalize animation standby

Browse Source
This commit is contained in:
Simon 2022-12-09 17:32:49 +01:00
parent ac89147f8c
commit 9951818afa
2 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
PLLR banner.css
View File

@ -1,20 +1,41 @@
@-moz-document domain("pillar.alkemics.com") {
:root {
@-moz-document domain("pillar.alkemics.com"),
domain("localstream.alkemics.com") {
:root {
--stripe-size: 100px;
--color1: hsl(205, 70%, 45%);
--color1: hsl(205, 84%, 41%);
--color2: hsl(205, 70%, 50%);
--duration: 30s;
--duration: 1s;
--state: paused;
}
.AuthLayoutFooter,
.Navbar.navbar.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
.Navbar.navbar.Navbar--PPR.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-color: var(--color1);
background-size: var(--stripe-size) var(--stripe-size);
animation: alkegrad var(--duration) linear infinite;
animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
}
.AuthLayoutFooter {
--stripe-size: 200px;
--duration: 40s;
}
.PageTop>.navbar:not(:only-child) {
--state: running;
}
.PageTop>.Loader {
visibility: hidden;
animation: none;
--state: paused;
}
@keyframes alkegrad {
from {
background-position: 0 0;
}
to {
background-position: var(--stripe-size) 0;
}

27
PREP banner.css
View File

@ -1,25 +1,42 @@
@-moz-document domain("ppr-app.supplierxm.salsify.com"),
domain("ppr-admin.alkemics.com") {
:root {
domain("ppr-admin.alkemics.com"),
domain("localstream.alkemics.com") {
:root {
--stripe-size: 100px;
--color1: hsl(194, 71%, 30%);
--color2: hsl(194, 77%, 35%);
--duration: 20s;
--duration: 1s;
--state: paused;
}
.AuthLayoutFooter,
.Navbar.navbar.Navbar--PPR.bg-inverse {
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-color: var(--color1);
background-size: var(--stripe-size) var(--stripe-size);
animation: alkegrad var(--duration) linear infinite;
animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
}
.AuthLayoutFooter {
--stripe-size: 200px;
--duration: 40s;
}
.PageTop>.navbar:not(:only-child) {
--state: running;
}
.PageTop>.Loader {
visibility: hidden;
animation: none;
--state: paused;
}
@keyframes alkegrad {
from {
background-position: 0 0;
}
to {
background-position: var(--stripe-size) 0;
}