1 files changed, 73 insertions, 0 deletions
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
new file mode 100644
index 0000000..429bc42
--- /dev/null
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -0,0 +1,73 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-top: -66px
+
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    /*max-width: 300px;*/
+    gap: 10px;
+
+    & > div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.border {
+    border-style: solid;
+    border-width: 1px;
+    padding: 10px;
+    margin: 10px;
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 0 10px 10px black;
+}
+
+#bar {
+    height: 5px;
+    width: 100%;
+    appearance: none;
+    overflow: hidden;
+    /*margin-top: -5px;*/
+}
+
+#bar::-webkit-progress-bar {
+    background-color: lightgray;
+    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
+}
+
+.color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+.color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; }
+
+#requirement2, #statusText, #passwordStatusText, #usernameStatusText {
+    color: red;
+}
+
+#passReq {
+    display: flex;
+    flex-direction: column;
+}
+
+#box > div {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    gap: 20px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+