initial commit

src/web/css/form.css

@@ -0,0 +1,107 @@
+.form {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    padding: 10px;
+    transform: scale(0.5);
+    opacity: 0;
+    transition: 0.3s;
+    position: absolute;
+    margin: auto;
+}
+
+.form.active {
+    pointer-events: all;
+    opacity: 1;
+    transform: scale(1);
+}
+
+.formbody {
+    width: 50%;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(from black h s 20%);
+    opacity: 0.7;
+    border-radius: 20px;
+    padding: 10px;
+}
+
+.formheader {
+    width: 100%;
+    text-align: center;
+}
+
+.forminputbody {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+.forminputlabel {
+    text-align: center;
+    font-style: normal;
+    font-size: 20px;
+    margin: 5px 0;
+}
+
+.forminput {
+    padding: 10px;
+    border-radius: 10px;
+    border: 2px solid;
+    transition: 0.2s;
+    background-color: inherit;
+}
+
+.forminput:focus {
+    border: 5px solid;
+}
+
+.formbutton {
+    padding: 10px;
+    border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.formbutton:hover {
+    opacity: 0.6;
+}
+
+@media screen and (max-width: 800px) {
+    .forminputbody {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .formbody {
+        height: 60%;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .formbody {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 300px) {
+    .formbody {
+        height: 60%;
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .formheader {
+        font-size: 20px;
+    }
+}