Redo login page

1 files changed, 33 insertions, 7 deletions

diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index f38865b..810d924 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -7,7 +7,7 @@
     overflow: hidden;
     background-color: transparent;
     background-blend-mode: darken;
-    margin-top: -150px;
+    margin-top: -66px;
 }
 
 #bg-cr {
@@ -16,7 +16,8 @@
     top:0;
     width: 100vw;
     height: calc(100vh + 150px);
-    background: linear-gradient(to bottom, rgba(84, 45, 0, 0) 30%, rgba(84, 45, 0, 0.1) 40%), url("/login-cr.png");
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg");
+    background-size: cover;
     opacity: calc(var(--opacity-cr));
     z-index: 1;
 }
@@ -26,31 +27,38 @@
     top:0;
     width: 100vw;
     height: 100vh;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 30%), url("/login-jf.png");
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg");
+    /*backdrop-filter: brightness(1%);*/
+    background-size: cover;
     opacity: var(--opacity-jf);
     z-index: 1;
 }
 
 #box {
+    animation: ease-in-out fadeIn .1s;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    /*align-items: center;*/
     aspect-ratio: 4/5;
     min-height: 50vh;
-    margin-top: 15vh;
+    /*margin-top: 15vh;*/
     gap: 10px;
     background-color: color-mix(in srgb, var(--background-color), transparent 50%);
     backdrop-filter: blur(10px);
-    padding: 50px 40px;
+    padding: 30px;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
     border-color: var(--highlight-color);
     z-index: 2;
+    justify-content: center;
 }
 
 #greeting {
-    font-size: 32px;
+    color: var(--highlight-color);
+    padding: 0;
+    margin: 0;
+    /*font-size: 32px;*/
     /* text-decoration: underline;
     text-decoration-color: var(--highlight-color); */
 }
@@ -70,3 +78,21 @@
     text-decoration-thickness: 1px;
     text-decoration-color: var(--highlight-color);
 }
+
+input {
+    width: 100%;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+@keyframes fadeIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}