From 62ceaeba8f9cf1406b7ba9a92bf23440e07235ca Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Wed, 13 Dec 2023 14:55:24 +0100
Subject: [PATCH] [gui] remove login animations

---
 web/html/login.html | 158 ++++----------------------------------------
 1 file changed, 13 insertions(+), 145 deletions(-)

diff --git a/web/html/login.html b/web/html/login.html
index 82b85964..24b245bc 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -27,6 +27,7 @@
     text-align: center;
     align-items: center;
     justify-content: center;
+    width: 100%;
   }
   .title {
     font-size: 32px;
@@ -36,7 +37,6 @@
     overflow: hidden;
   }
   #login {
-    animation: charge 0.5s both;
     background-color: #fff;
     border-radius: 2rem;
     padding: 3rem;
@@ -45,24 +45,6 @@
   #login:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
   }
-  @keyframes charge {
-    from {
-      transform: translateY(5rem);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-  @keyframes wave {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
   .wave {
     opacity: 0.6;
     position: absolute;
@@ -70,20 +52,20 @@
     left: 50%;
     width: 6000px;
     height: 6000px;
-    background-color: rgba(14, 73, 181, 0.08);
+    background-color: rgba(0, 135, 113, 0.08);
     margin-left: -3000px;
     transform-origin: 50% 48%;
     border-radius: 46%;
-    animation: wave 72s infinite linear;
     pointer-events: none;
+    rotate: 125deg;
   }
   .wave2 {
-    animation: wave 88s infinite linear;
-    opacity: 0.3;
+    opacity: 0.4;
+    rotate: 70deg;
   }
   .wave3 {
-    animation: wave 80s infinite linear;
-    opacity: 0.1;
+    opacity: 0.2;
+    rotate: 90deg;
   }
   .under {
     background-color: #dce9f5;
@@ -100,120 +82,8 @@
   .dark h1 {
     color: rgba(255, 255, 255, 0.85);
   }
-  .ant-btn-primary-login {
-    color: #0e49b5;
-    background-color: #edf4fa;
-    border-color: #a9c5e7;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: none;
-    width: 100%;
-  }
-  .ant-btn-primary-login:focus,
-  .ant-btn-primary-login:hover {
-    color: #fff;
-    background-color: #0c3f9d;
-    border-color: #0e49b5;
-    background-image: linear-gradient(
-      270deg,
-      rgba(123, 199, 77, 0) 30%,
-      #2f67c2,
-      rgba(123, 199, 77, 0) 100%
-    );
-    background-repeat: no-repeat;
-    animation: ma-bg-move ease-in-out 5s infinite;
-    background-position-x: -500px;
-    width: 95%;
-    animation-delay: -0.5s;
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-  }
-  .ant-btn-primary-login.active,
-  .ant-btn-primary-login:active {
-    color: #fff;
-    background-color: #04308f;
-    border-color: #04308f;
-  }
-  @keyframes ma-bg-move {
-    0% {
-      background-position: -500px 0;
-    }
-    50% {
-      background-position: 1000px 0;
-    }
-    100% {
-      background-position: 1000px 0;
-    }
-  }
-  .wave-btn-bg {
-    position: relative;
-    border-radius: 25px;
-    width: 100%;
-  }
-  .dark .wave-btn-bg {
-    color: #fff;
-    position: relative;
-    background-color: #0e49b5;
-    border: 2px double transparent;
-    background-origin: border-box;
-    background-clip: padding-box, border-box;
-    background-size: 300%;
-    animation: wave-btn-tara 4s ease infinite;
-    transition: all 0.5s ease;
-    width: 100%;
-  }
-  .dark .wave-btn-bg-cl {
-    background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
-      radial-gradient(circle at left top, #0e49b5, #387eff, #0e49b5) !important;
-    border-radius: 3em;
-  }
-  .dark .wave-btn-bg-cl:hover {
-    width: 95%;
-  }
-  .dark .wave-btn-bg-cl:before {
-    position: absolute;
-    content: "";
-    top: -5px;
-    left: -5px;
-    bottom: -5px;
-    right: -5px;
-    z-index: -1;
-    background: inherit;
-    background-size: inherit;
-    border-radius: 4em;
-    opacity: 0;
-    transition: 0.5s;
-  }
-  .dark .wave-btn-bg-cl:hover::before {
-    opacity: 1;
-    filter: blur(20px);
-    animation: wave-btn-tara 8s linear infinite;
-  }
-  @keyframes wave-btn-tara {
-    to {
-      background-position: 300%;
-    }
-  }
-  .dark .ant-btn-primary-login {
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    background-image: linear-gradient(
-      rgba(13, 14, 33, 0.45),
-      rgba(13, 14, 33, 0.35)
-    );
-    border-radius: 2rem;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    height: 46px;
-    position: relative;
-    white-space: nowrap;
-    cursor: pointer;
-    touch-action: manipulation;
-    padding: 0 15px;
-    width: 100%;
-    animation: none;
-    background-position-x: 0;
-    box-shadow: none;
+  .ant-form-item {
+    margin-bottom: 16px;
   }
 </style>
 <body>
@@ -246,12 +116,10 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl">
-                                    <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
-                                              :style="loading ? { width: '50px' } : { display: 'inline-block' }">
-                                        [[ loading ? '' : '{{ i18n "login" }}' ]]
-                                    </a-button>
-                                </div>
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'inline-block', width: '100%' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
                             </a-row>
                         </a-form-item>
                         <a-form-item>