Merge pull request #1 from alk-spriet/prototype

Prototype

LTG banner.css

@@ -6,24 +6,18 @@ domain("ltg-admin.alkemics.com") {
         --color2: hsl(261, 80%, 59%);
         --duration: 30s;
     }
-    .Navbar::before {
-        z-index: -10;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        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%);
+    .AuthLayoutFooter,
+    .Navbar.navbar.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: stripeTransform var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear infinite;
     }
-    @keyframes stripeTransform {
-        0% {
-            transform: translateX(0);
+    @keyframes alkegrad {
+        from {
+            background-position: 0 0;
         }
-        100% {
-            transform: translateX(calc(var(--stripe-size) * -1));
+        to {
+            background-position: var(--stripe-size) 0;
         }
     }
 }

PLR banner.css

@@ -1,28 +1,22 @@
 @-moz-document domain("int.alkemics.com") {
      :root {
         --stripe-size: 100px;
-        --color1: hsl(195, 70%, 45%);
-        --color2: hsl(195, 70%, 50%);
+        --color1: hsl(205, 70%, 45%);
+        --color2: hsl(205, 70%, 50%);
         --duration: 30s;
     }
-    .Navbar::before {
-        z-index: -10;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        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%);
+    .AuthLayoutFooter,
+    .Navbar.navbar.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 75%);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: stripeTransform var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear infinite;
     }
-    @keyframes stripeTransform {
-        0% {
-            transform: translateX(0);
+    @keyframes alkegrad {
+        from {
+            background-position: 0 0;
         }
-        100% {
-            transform: translateX(calc(var(--stripe-size) * -1));
+        to {
+            background-position: var(--stripe-size) 0;
         }
     }
 }

PPR banner.css

@@ -1,28 +1,27 @@
-@-moz-document domain("ppr-stream.alkemics.com") {
+@-moz-document domain("ppr-stream.alkemics.com"),
+domain("ppr-admin.alkemics.com") {
      :root {
         --stripe-size: 100px;
         --color1: hsl(194, 71%, 30%);
         --color2: hsl(194, 77%, 35%);
-        --duration: 30s;
+        --duration: 20s;
     }
-    .Navbar::before {
-        z-index: -10;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        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%);
+    .AuthLayoutFooter,
+    .Navbar.navbar.Navbar--PPR.bg-inverse {
+        background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: stripeTransform var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear infinite;
     }
-    @keyframes stripeTransform {
-        0% {
-            transform: translateX(0);
+    .AuthLayoutFooter {
+        --stripe-size: 200px;
+        --duration: 40s;
+    }
+    @keyframes alkegrad {
+        from {
+            background-position: 0 0;
         }
-        100% {
-            transform: translateX(calc(var(--stripe-size) * -1));
+        to {
+            background-position: var(--stripe-size) 0;
         }
     }
 }

PRD banner.css

@@ -1,5 +1,7 @@
-@-moz-document domain("stream.alkemics.com") {
-    .Navbar.bg-inverse {
+@-moz-document domain("stream.alkemics.com"),
+domain("admin.alkemics.com") {
+    .AuthLayoutFooter,
+    .Navbar.navbar.bg-inverse {
         background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9);
         background-size: 400% 100% !important;
         animation: salsigrad 60s linear infinite !important;

README.md

@@ -1,6 +1,10 @@
 # xStyle custom CSS for Alkemics front
 
-This content aims to change a little the Alkemics interface to help you recognise at glance certains informations. It also refresh the interface a little.
+## What is this?
+
+This content aims to change a little the Alkemics interface to help you recognise at a glance certains informations. It also refresh the interface a little. Changes are made inside your broswer via an extension, so it doesn't reflect elsewhere.
+
+![example of banner](/public/illustration.png)
 
 ## Give me an example
 

Retailers Sigils.css

@@ -2,7 +2,7 @@
 domain("ppr-stream.alkemics.com"),
 domain("ltg-stream.alkemics.com"),
 domain("int.alkemics.com") {
-    .mdi-account::before {
+    #navbar-profile .dropdown-toggle .mdi-account::before {
         content: "\F4DC";
         color: orange;
     }

Suppliers Sigils.css

@@ -2,7 +2,7 @@
 domain("ppr-stream.alkemics.com"),
 domain("ltg-stream.alkemics.com"),
 domain("int.alkemics.com") {
-    .mdi-account::before {
+    #navbar-profile .dropdown-toggle .mdi-account::before {
         content: "\F20F";
         color: turquoise;
     }

testing/test.css

@@ -0,0 +1,28 @@
+:root {
+    --stripe-size: 100px;
+    --color1: hsl(194, 71%, 30%);
+    --color2: hsl(194, 77%, 35%);
+    --duration: 20s;
+}
+
+div {
+    height: var(--stripe-size);
+    width: calc(var(--stripe-size) * 7);
+    margin: auto;
+    border: 1px solid black;
+}
+
+div {
+    background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
+    background-size: var(--stripe-size) var(--stripe-size);
+    animation: alkegrad var(--duration) linear infinite;
+}
+
+@keyframes alkegrad {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: var(--stripe-size) 0;
+    }
+}

testing/test.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="./test.css" rel="stylesheet">
+</head>
+
+<body>
+    <div></div>
+</body>
+
+</html>