style input elements

core/static/core/style.css

@@ -1,17 +1,17 @@
 html, body, div,
 h1, h2, h3, h4, h5, h6,
 a, p, b, i,
-form, label,
+form, label, input,
 table, thead, tbody, tr, td {
     margin: 0;
     border: none;
     padding: 0;
+    font-family: monospace;
 }
 
 html, body {
     width: 100%;
     height: 100%;
-    font-family: monospace;
     font-size: 14px;
 }
 
@@ -79,18 +79,73 @@ form {
     margin: 12px 0;
 }
 
-form label {
+label {
     display: none;
 }
 
-form input {
+input {
-    margin: 0 0 6px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    border: 1px solid #666666;
+    border-radius: 4px;
+    padding: 6px;
+    font-size: 1rem;
+    background-color: #1E1E1E;
+    color: #BBBBBB;
+    box-shadow: 0 0 3px #1E1E1E;
+    transition: border 100ms, color 100ms, box-shadow 100ms;
+}
+
+input:hover, input:focus {
+    border: 1px solid #77AAEE;
+    color: #EEEEEE;
+    box-shadow: 0 0 3px #77AAEE;
 }
 
 form p {
     color: #EE9966;
 }
 
+
+#login-form {
+    display: flex;
+    flex-direction: column;
+}
+
+#username-textbox, #password-textbox {
+    flex: 0 1 auto;
+    max-width: 180px;
+    margin: 3px 0;
+}
+
+#login-button {
+    flex: 0 1 auto;
+    max-width: 120px;
+    margin: 3px 0;
+}
+
+
+@media only screen and (min-width: 600px) {
+    #login-form {
+        flex-direction: row;
+    }
+
+    #username-textbox {
+        flex: 1 0 auto;
+        margin: 3px 3px 3px 0;
+    }
+
+    #password-textbox {
+        flex: 1 0 auto;
+        margin: 3px;
+    }
+
+    #login-button {
+        flex: 1 0 auto;
+        margin: 3px 0 3px 3px;
+    }
+}
+
 table {
     border-collapse: collapse;
     margin: 16px 0;
@@ -152,6 +207,23 @@ td {
     }
 }
 
+#amount-form {
+    display: flex;
+    flex-direction: row;
+}
+
+#amount-textbox {
+    flex: 1 0 auto;
+    max-width: 180px;
+    margin: 3px 3px 3px 0;
+}
+
+#amount-button {
+    flex: 1 0 auto;
+    max-width: 120px;
+    margin: 3px 0 3px 3px;
+}
+
 #transaction-list {
     margin: 12px 0;
     display: flex;
@@ -196,7 +268,7 @@ td {
 
 .amount-block {
     margin-right: 6px;
-    background-color: #222222;
+    background-color: #1E1E1E;
     border-radius: 4px;
     color: #BBBBBB;
 }

core/templates/core/balance.html

@@ -12,10 +12,10 @@
 
     <h1>balance prediction</h1>
 
-    <form method="get" action="{% url 'core:balance' %}">
+    <form id="amount-form" method="get" action="{% url 'core:balance' %}">
-        <label for="amount"></label>
+        <label for="amount-textbox"></label>
-        <input id="amount" name="amount" type="number" step="0.01" placeholder="amount">
+        <input id="amount-textbox" name="amount" type="number" step="0.01" placeholder="amount">
-        <input type="submit" value="predict"/>
+        <input id="amount-button" type="submit" value="predict"/>
         {% if amount_error %}
             <p>try a number, stupid</p>
         {% endif %}

core/templates/registration/login.html

@@ -6,13 +6,13 @@
 
 {% block content %}
 
-    <form method="post" action="{% url 'login' %}">
+    <form id="login-form" method="post" action="{% url 'login' %}">
         {% csrf_token %}
-        <label for="username"></label>
+        <label for="username-textbox"></label>
-        <input id="username" name="username" type="text" placeholder="username">
+        <input id="username-textbox" name="username" type="text" placeholder="username" autocomplete="off">
-        <label for="password">password</label>
+        <label for="password-textbox">password</label>
-        <input id="password" name="password" type="password" placeholder="password">
+        <input id="password-textbox" name="password" type="password" placeholder="password">
-        <input type="submit" value="login"/>
+        <input id="login-button" type="submit" value="login"/>
         <input type="hidden" name="next" value="{{ next }}"/>
         {% if form.errors %}
             <p>nope.</p>