From 7c6d88d7f50227818a0c26a34a7a5d92df384538 Mon Sep 17 00:00:00 2001
From: scar <91326008+alk-spriet@users.noreply.github.com>
Date: Thu, 7 Apr 2022 20:44:40 +0200
Subject: [PATCH] feat(PREP): Strips fades in and animate on loading pages
 content

Worked on a new feature that make the strips hidden while idle. They fade in and move during loading, then fade out.

I don't know the performance toll on usage.
---
 .vscode/settings.json |  5 +++++
 PPR banner.css        | 20 +++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..529b068
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "PREP"
+    ]
+}
\ No newline at end of file
diff --git a/PPR banner.css b/PPR banner.css
index cd72f08..065c26e 100644
--- a/PPR banner.css	
+++ b/PPR banner.css	
@@ -2,20 +2,30 @@
 domain("ppr-admin.alkemics.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: running;
     }
     .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, hsla(194, 77%, 35%, 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;
     }
+    .navbar:only-child {
+        --state: paused;
+        --color2: hsla(194, 71%, 30%, 1);
+    }
+    .PageTop>.Loader {
+        visibility: hidden;
+    }
     @keyframes alkegrad {
         from {
             background-position: 0 0;