1 files changed, 40 insertions, 21 deletions

diff --git a/frontend/common/form.css b/frontend/common/form.css
index f3ba85d..5b8f1e3 100644
--- a/frontend/common/form.css
+++ b/frontend/common/form.css
@@ -49,13 +49,24 @@ form .error input[type=password] {
   border-color: #f11;
 }
 
+/* form field descriptions */
+
+form label.description {
+  cursor: normal;
+  font-size: small;
+  color: #ddd;
+}
+
 /* text input */
 
 input[type=text],
 input[type=number],
 input[type=password] {
   padding: 0.5rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
+  color: #fff;
+  background: #111;
+  font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   width: 20rem;
   border-radius: 0.125rem;
@@ -64,19 +75,24 @@ input[type=password] {
 input[type=text]:focus,
 input[type=number]:focus,
 input[type=password]:focus {
-  border: 1px solid #000;
+  border: 1px solid #8ff;
+  background: #000;
 }
 
 textarea {
   width: 35rem;
   height: 20rem;
   padding: 0.5rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
+  font-family: 'Roboto', sans-serif;
+  background: #111;
+  color: #fff;
   font-size: 0.875rem;
   border-radius: 0.125rem;
 }
 textarea:focus {
-  border: 1px solid #000;
+  border: 1px solid #8ff;
+  background: #000;
 }
 
 /* checkbox */
@@ -114,7 +130,7 @@ input[type="checkbox"]:after {
   left: 0;
   width: 0.75rem;
   height: 0.75rem;
-  border: 0.0625rem solid #888;
+  border: 0.0625rem solid #ddd;
   content: "";
   background-color: #fff;
   background-repeat: no-repeat;
@@ -141,7 +157,7 @@ input[type="checkbox"]:checked:after {
   min-width: auto;
   background: #fff;
   border-radius: 0.125rem;
-  border: 1px solid #888;
+  border: 1px solid #ddd;
   padding: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -165,14 +181,14 @@ input[type="checkbox"]:checked:after {
   height: 0; 
   border-left: 0.375rem solid transparent;
   border-right: 0.375rem solid transparent;
-  border-top: 0.375rem solid #888;
+  border-top: 0.375rem solid #ddd;
 }
 .select.focus {
-  border-color: #11f;
+  border-color: #fff;
   background: #f4f4ff;
 }
 .select.focus:after {
-  border-top-color: #11f;
+  border-top-color: #fff;
 }
 .select:hover {
   background-color: #f4f4ff;
@@ -192,21 +208,22 @@ input[type="checkbox"]:checked:after {
 
 button {
   position: relative;
-  background: #fff;
+  background: #333;
   border-radius: 0.125rem;
-  border: 1px solid #888;
+  color: #ddd;
+  border: 1px solid;
   padding: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   cursor: pointer;
-  text-transform: uppercase;
+  /*text-transform: uppercase;*/
   transition: all 0.1s;
 }
 button:hover {
-  background-color: #f0f0ff;
-  border-color: #1111ff;
+  background-color: #000;
+  border-color: #fff;
 }
 button.process {
   padding-left: 1.5rem;
@@ -227,9 +244,9 @@ button.process:focus:after {
   border-left-color: #11f;
 }
 button:focus {
-  background: #f4f4ff;
-  border-color: #11f;
-  color: #11f;
+  background: #000;
+  border-color: #fff;
+  color: #fff;
   outline: 0;
 }
 button:disabled {
@@ -245,13 +262,15 @@ button:disabled:after {
   margin-right: 0.75rem;
 }
 button.submit {
-  color: #1111ff;
-  border-color: #1111ff;
+  border-color: #d8f;
+  color: #fff;
+  background: #111;
 }
+button.submit:focus,
 button.submit:hover {
+  border-color: #fff;
   color: #fff;
-  background: #1111ff;
-  border-color: #1111ff;
+  background: #222;
 }
 
 /* file upload, should always be inside a container */