diff --git a/PERF banner.css b/PERF banner.css index a9cc028..755e6de 100644 --- a/PERF banner.css +++ b/PERF banner.css @@ -1,21 +1,43 @@ -@-moz-document domain("ltg-stream.alkemics.com"), -domain("ltg-admin.alkemics.com") { - :root { +@-moz-document domain("ltg-app.supplierxm.salsify.com"), +domain("ltg-admin.supplierxm.salsify.com") { + :root { --stripe-size: 100px; - --color1: hsl(261, 65%, 51%); - --color2: hsl(261, 80%, 59%); - --duration: 30s; + --color1: hsl(180, 63%, 30%); + --color2: hsl(180, 63%, 37%); + --duration: 1s; + --state: running; } + .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, hsla(261, 80%, 59%, 0) 25%, var(--color1) 50%, var(--color1) 75%); + background-color: var(--color2); background-size: var(--stripe-size) var(--stripe-size); - animation: alkegrad var(--duration) linear infinite; + animation: alkegrad var(--duration) linear 0s infinite normal var(--state); + transition: background 200ms linear; } + + .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; } diff --git a/PLLR banner.css b/PLLR banner.css index 958cdf1..cdefe86 100644 --- a/PLLR banner.css +++ b/PLLR banner.css @@ -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; } diff --git a/PREP banner.css b/PREP banner.css index 6230848..7a80ec7 100644 --- a/PREP banner.css +++ b/PREP banner.css @@ -1,17 +1,20 @@ @-moz-document domain("ppr-app.supplierxm.salsify.com"), -domain("ppr-admin.alkemics.com") { +domain("ppr-admin.supplierxm.salsify.com/") { :root { --stripe-size: 100px; - --color1: hsl(194, 71%, 30%); - --color2: hsl(194, 77%, 35%); - --duration: 20s; + --color1: hsla(194, 71%, 30%, 1); + --color2: hsla(194, 77%, 35%, 1); + --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); + will-change: background-position; } .AuthLayoutFooter { @@ -19,6 +22,16 @@ domain("ppr-admin.alkemics.com") { --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; diff --git a/PROD banner.css b/PROD banner.css index b773a97..196ebda 100644 --- a/PROD banner.css +++ b/PROD banner.css @@ -1,18 +1,22 @@ @-moz-document domain("app.supplierxm.salsify.com"), domain("admin.supplierxm.salsify.com") { + .AuthLayoutFooter, .Navbar.navbar.bg-inverse { - background: linear-gradient(-45deg, rgb(60, 180, 255),rgb(46, 112, 255), rgb(118, 55, 252)); + background: linear-gradient(-45deg, rgb(60, 180, 255), rgb(46, 112, 255), rgb(118, 55, 252)); background-size: 200% 100% !important; animation: salsigrad 60s linear infinite !important; } + @keyframes salsigrad { 0% { background-position: 0% 0%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 0%; } diff --git a/README.md b/README.md index 2ec0ffc..ad4a17c 100644 --- a/README.md +++ b/README.md @@ -19,13 +19,14 @@ Repeate for each styles you want to enables. ## What each styles do? -* `PPR banner.css`: Change the Preproduction banner and login's footer - ![example of PPR banner](public/PPR_banner_ex.png) -* `PLR banner.css`: Change your Pillar banner and login's footer - ![example of Pillar banner](public/PLR_banner_ex.png) -* `LTG banner.css`: Change the Load Testing banner and login's footer -* `PRD banner.css`: Change the Production banner and login's footer - ![example of Prod banner](public/PRD_banner_ex.png) +* `PREP banner.css`: Change the Preproduction banner and login's footer + ![example of PREP banner](public/PREP_banner_animated.mov) +* `PLLR banner.css`: Change your Pillar banner and login's footer + ![example of PLLR banner](public/PLLR_banner_animated.mov) +* `PERF banner.css`: Change the Load Testing banner and login's footer + ![example of PERF banner](public/PERF_banner_animated.mov) +* `PROD banner.css`: Change the Production banner and login's footer + ![example of Prod banner](public/PROD_banner_animated.mov) * `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files. * `Sigils.css`: Change the top-right user icon to a Shop or Factory depending on if you are logged as ar Retailer or a Supplier. * ![example of orange shop icon](public/user-orange-shop.png) ![example of violet factory icon](public/user-violet-factory.png) diff --git a/public/PERF_banner.jpg b/public/PERF_banner.jpg new file mode 100644 index 0000000..98234db Binary files /dev/null and b/public/PERF_banner.jpg differ diff --git a/public/PERF_banner_animated.mov b/public/PERF_banner_animated.mov new file mode 100644 index 0000000..c0933a7 Binary files /dev/null and b/public/PERF_banner_animated.mov differ diff --git a/public/PLLR_banner.jpg b/public/PLLR_banner.jpg new file mode 100644 index 0000000..4a7ed83 Binary files /dev/null and b/public/PLLR_banner.jpg differ diff --git a/public/PLLR_banner_animated.mov b/public/PLLR_banner_animated.mov new file mode 100644 index 0000000..b29552d Binary files /dev/null and b/public/PLLR_banner_animated.mov differ diff --git a/public/PLR_banner_ex.png b/public/PLR_banner_ex.png deleted file mode 100644 index 6cdd28e..0000000 Binary files a/public/PLR_banner_ex.png and /dev/null differ diff --git a/public/PPR_banner_ex.png b/public/PPR_banner_ex.png deleted file mode 100644 index 77f459b..0000000 Binary files a/public/PPR_banner_ex.png and /dev/null differ diff --git a/public/PRD_banner_ex.png b/public/PRD_banner_ex.png deleted file mode 100644 index 3466526..0000000 Binary files a/public/PRD_banner_ex.png and /dev/null differ diff --git a/public/PREP_banner.jpg b/public/PREP_banner.jpg new file mode 100644 index 0000000..c044f7d Binary files /dev/null and b/public/PREP_banner.jpg differ diff --git a/public/PREP_banner_animated.mov b/public/PREP_banner_animated.mov new file mode 100644 index 0000000..cc9931c Binary files /dev/null and b/public/PREP_banner_animated.mov differ diff --git a/public/PROD_banner.jpg b/public/PROD_banner.jpg new file mode 100644 index 0000000..26727b6 Binary files /dev/null and b/public/PROD_banner.jpg differ diff --git a/public/PROD_banner_animated.mov b/public/PROD_banner_animated.mov new file mode 100644 index 0000000..d6c2828 Binary files /dev/null and b/public/PROD_banner_animated.mov differ