[ux] make forms styles centralized and uniform

public/css/app/aux.styl

@@ -23,20 +23,9 @@
 
   input
     width: 100%
-    display: block
-    height: 35px
-    font-size: 14px
-    padding: 10px 0.5em
     margin-bottom: 15px
-    background-color: #f9fafa
-    border: 1px solid #eeeeee
-    color: #2e2d2d
     borderbox()
 
-    &:focus
-      border: 1px solid #a7d9eb
-      outline: 0px
-
   button, .andyetLogin
     text-decoration: none
     text-align: center

public/css/app/chat.styl

@@ -148,8 +148,5 @@
     padding: 5px
     borderbox()
 
-    &:focus
-      border-color: #bbb
-
     &.editing
       background-color: yellow

public/css/app/forms.styl

@@ -0,0 +1,25 @@
+input[type=text], input[type=email], input[type=search], textarea
+  -webkit-appearance: none
+  roundall(3px)
+  padding: 10px
+  background: white
+  border: 1px solid $grayOutline
+  font-size: 0.8em
+  borderbox()
+
+  transition: border .2s ease-in 0
+  -webkit-transition: border .2s ease-in 0
+  -moz-transition: border .2s ease-in 0
+
+input[type=text], input[type=email], input[type=search]
+  height: 8px
+
+textarea
+  resize: none
+
+input[type=text]:focus, 
+input[type=email]:focus, 
+input[type=search]:focus,
+textarea:focus
+  outline: none
+  border: 1px solid lighten($activeBlue, 50%)

public/css/otalk.css

@@ -612,9 +612,6 @@ td {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.chatBox textarea:focus {
-  border-color: #bbb;
-}
 .chatBox textarea.editing {
   background-color: #ff0;
 }
@@ -703,22 +700,11 @@ body #menu {
 }
 #loginbox input {
   width: 100%;
-  display: block;
-  height: 35px;
-  font-size: 14px;
-  padding: 10px 0.5em;
   margin-bottom: 15px;
-  background-color: #f9fafa;
-  border: 1px solid #eee;
-  color: #2e2d2d;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-#loginbox input:focus {
-  border: 1px solid #a7d9eb;
-  outline: 0px;
-}
 #loginbox button,
 #loginbox .andyetLogin {
   text-decoration: none;
@@ -748,3 +734,43 @@ body #menu {
   padding-bottom: 10px;
   border-bottom: 1px solid #f8f8f8;
 }
+input[type=text],
+input[type=email],
+input[type=search],
+textarea {
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #e4e4e4;
+  font-size: 0.8em;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: border 0.2s ease-in 0;
+  -o-transition: border 0.2s ease-in 0;
+  transition: border 0.2s ease-in 0;
+  -moz-transition: border 0.2s ease-in 0;
+  -webkit-transition: border 0.2s ease-in 0;
+  -moz-transition: border 0.2s ease-in 0;
+}
+input[type=text],
+input[type=email],
+input[type=search] {
+  height: 8px;
+}
+textarea {
+  resize: none;
+}
+input[type=text]:focus,
+input[type=email]:focus,
+input[type=search]:focus,
+textarea:focus {
+  outline: none;
+  border: 1px solid #78daff;
+}

public/css/otalk.styl

@@ -6,3 +6,4 @@
 @import 'app/connectionStatus'
 @import 'app/layout'
 @import 'app/aux'
+@import 'app/forms'