Merge pull request #10 from jackyzha0/react

add focus opacity change, password input

1 files changed, 24 insertions, 7 deletions

diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index 902a096..720b736 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -14,19 +14,39 @@ form {
   width: 100%;
 }
 
-textarea, input[type=text] {
+textarea, input[type=text], input[type=password] {
   width: 100%;
   font-family: 'Roboto Mono', monospace;
   font-size: 0.8em;
-  padding: 0.8em;
+  padding: calc(0.8em - 1px);
   border-radius: 3px;
   border: 1px solid #565656;
   outline: none;
-  margin: 1.2em 0;
+  margin: 1.7em 0;
+}
+
+textarea, input[type=text], input[type=password] {
+  opacity: 0.5;
+  transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+textarea:focus, input[type=text]:focus, input[type=password]:focus {
+  opacity: 1;
+}
+
+.passwordInput {
+  transform: translateY(-1.6em);
+}
+
+input[type=password] {
+  margin-top: 0 !important;
+  font-weight: 700;
 }
 
 textarea {
   height: 50vh;
+  resize: vertical;
+  min-height: 2em;
 }
 
 a {
@@ -38,9 +58,6 @@ input[type=submit] {
   font-weight: 700;
   color: #faf9f5;
   background-color: #111111;
-  padding: 0.75em 2em;
-}
-
-input[type=submit]:focus {
+  padding: 0.8em 2em;
   outline: 0;
 }
\ No newline at end of file