diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..9fbbe3c Binary files /dev/null and b/.DS_Store differ diff --git a/PRD banner.css b/PRD banner.css index f978736..351fa3e 100644 --- a/PRD banner.css +++ b/PRD banner.css @@ -1,28 +1,18 @@ @-moz-document domain("stream.alkemics.com") { - :root { - --stripe-size: 100px; - --color1: hsl(234, 71%, 48%); - --color2: hsl(239, 100%, 60%); - --duration: 6s; + .Navbar.bg-inverse { + background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9); + background-size: 400% 100% !important; + animation: salsigrad 60s linear infinite !important; } - .Navbar::before { - z-index: -10; - content: ""; - position: absolute; - top: 0; - left: calc(-1 * var(--stripe-size)); - 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%); - background-size: var(--stripe-size) var(--stripe-size); - animation: stripeTransform var(--duration) linear infinite; - } - @keyframes stripeTransform { + @keyframes salsigrad { 0% { - transform: translateX(0); + background-position: 0% 0%; + } + 50% { + background-position: 100% 50%; } 100% { - transform: translateX(calc(var(--stripe-size) * 1)); + background-position: 0% 0%; } } } \ No newline at end of file diff --git a/test.css b/test.css index c464343..b157867 100644 --- a/test.css +++ b/test.css @@ -1,54 +1,18 @@ -:root { - --stripe-size: 100px; - --color1: #c44; - --color2: #313131; - --duration: 4s; +.Navbar { + background: linear-gradient(-45deg, #00e1d0, #00c4ff, #0562e8, #8a25f9) !important; + background-size: 400% 400% !important; + animation: salsigrad 15s linear infinite !important; + height: 100vh; } -body { - display: flex; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.stripe { - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} - -.stripe::before { - content: ""; - position: absolute; - top: 0; - left: calc(-1 * var(--stripe-size)); - 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%); - background-size: var(--stripe-size) var(--stripe-size); - -webkit-animation: stripeTransform var(--duration) linear infinite; - animation: stripeTransform var(--duration) linear infinite; -} - - -@keyframes stripeTransform { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(calc(var(--stripe-size) * 1)); - } -} - -@keyframes stripeBackgroundPosition { - 0% { - background-position: 0 0; - } - 100% { - background-position: calc(var(--stripe-size) * 1) 0; - } +@keyframes salsigrad { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } } \ No newline at end of file diff --git a/test.html b/test.html index 25f1a24..d406187 100644 --- a/test.html +++ b/test.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,11 @@ Document + -
+

+ \ No newline at end of file