add balance prediction page and make it the default

core/static/core/style.css

@@ -28,19 +28,17 @@ body {
     color: #EEEEEE;
 }
 
-h1, p, a {
-    margin: 0;
-    border: none;
-    padding: 0;
-    text-decoration: none;
-}
-
 h1 {
-    margin-bottom: 12px;
+    margin: 0 0 12px;
+    padding: 0;
     font-size: 1.3rem;
     font-weight: bold;
 }
 
+p {
+    margin: 6px 0 10px;
+}
+
 #title, #navi, #content {
     flex: 0 1 0;
     width: 95%;
@@ -51,7 +49,7 @@ h1 {
 #title {
     font-size: 1.6rem;
     text-align: center;
-    color: #6699EE;
+    color: #77AAEE;
 }
 
 #navi {
@@ -62,7 +60,8 @@ h1 {
 }
 
 a {
-    color: #6699EE;
+    text-decoration: none;
+    color: #77AAEE;
     transition: color 100ms;
 }
 
@@ -70,19 +69,20 @@ a:hover, a:focus {
     color: #EEEEEE;
 }
 
+form {
+    margin: 12px 0;
+}
+
 form label {
     display: none;
 }
 
-#login-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+form input {
+    margin: 0 0 6px;
 }
 
-#id_username, #id_password, #login-warning, #login-button {
-    flex: 0 1 0;
-    margin: 4px;
+form p {
+    color: #EE9966;
 }
 
 table, thead, tbody, tfoot, tr, td {
@@ -103,7 +103,7 @@ thead {
 }
 
 tr {
-    border-bottom: 1px solid #444;
+    border-bottom: 1px solid #444444;
 }
 
 td {
@@ -151,3 +151,81 @@ td {
         max-width: 240px;
     }
 }
+
+#transaction-list {
+    margin: 12px 0;
+    border: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.transaction-block {
+    flex: 0 1 0;
+    max-width: 800px;
+    margin: 0 0 8px;
+    border-radius: 4px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+}
+
+.transaction-block-first {
+    flex: 1 0 0;
+    margin: 0 8px 0 0;
+}
+
+.transaction-block-second {
+    flex: 0 1 0;
+    margin: 0 0 0 8px;
+    align-items: end;
+}
+
+.transaction-block-first, .transaction-block-second {
+    border: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.date-block, .subject-block, .amount-block, .balance-block {
+    flex: 0 1 0;
+    padding: 3px;
+}
+
+.date-block, .amount-block, .balance-block {
+    white-space: nowrap;
+}
+
+.amount-block, .balance-block {
+    text-align: right;
+}
+
+.amount-block {
+    color: #BBBBBB;
+    background-color: #222222;
+    border-radius: 4px;
+    padding: 3px 6px;
+}
+
+.balance-block {
+    color: #000000;
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+@media only screen and (min-width: 480px) {
+    .transaction-block-first, .transaction-block-second {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .subject-block {
+        flex: 1 0 0;
+    }
+
+    .subject-block, .amount-block {
+        margin: 0 12px;
+    }
+}