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

Set envs to animate on loading only (except PROD) (#18)

Browse Source 
Simply update the code with what i've been using lately so it only animate when the `.Loader` is created by react. Except for PROD where animation runs anytime.

Use both the new `:has()` pseudo-class and fallback to regular `:not(:only-child())` for unsupported browser (Firefox)
This commit is contained in:
Simon Priet
2023-05-25 23:15:05 +02:00
committed by GitHub
parent 18ff7c284e
commit d258f86c9a
16 changed files with 91 additions and 30 deletions
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:where( :has(+ .Loader),
:not(:only-child)) {
--state: running;
}
.PageTop>.Loader {
visibility: hidden;
animation: none;
}
@keyframes alkegrad {
from {
background-position: 0 0;
}
to {
background-position: var(--stripe-size) 0;
}