Frontpage facelift

1 files changed, 50 insertions, 30 deletions

diff --git a/public/css/coinos.css b/public/css/coinos.css
index dc2a3e50..2f2a2b98 100644
--- a/public/css/coinos.css
+++ b/public/css/coinos.css
@@ -1,12 +1,23 @@
+@media (min-width: 580px) {
+  .mobile {
+    display: none;
+  }
+}
+@media (max-width: 360px) {
+  .tablet {
+    display: none;
+  }
+}
 h1 {
   margin-top: 0;
 }
 div.container-fluid {
-  max-width: 480px;
+  max-width: 580px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
-  padding-bottom: 50px;
+  padding: 0;
+  padding-bottom: 10px;
 }
 .navbar-toggle {
   background-color: #428bca;
@@ -33,6 +44,35 @@ div.container-fluid {
 #connection {
   display: none;
 }
+.numpad .btn,
+.tippad .btn {
+  margin-bottom: 5px;
+  padding: 10px;
+  width: 4.5em;
+}
+.numpad h2,
+.tippad h2 {
+  margin-bottom: 2px;
+  margin-top: 1px;
+}
+.numpad {
+  width: 18em;
+}
+.rates {
+  width: 14em;
+  margin-top: -15px;
+  text-align: right;
+}
+#payment h2 {
+  margin-bottom: 2px;
+}
+.no-transition {
+  -webkit-transition: height 0.01s;
+  -moz-transition: height 0.01s;
+  -ms-transition: height 0.01s;
+  -o-transition: height 0.01s;
+  transition: height 0.01s;
+}
 #nav .nav {
   margin-top: 30px;
 }
@@ -77,12 +117,12 @@ div#calculator #received {
 div#calculator strong#total {
   font-size: 30px;
 }
-div#calculator p#address {
-  font-size: 16px;
+div#calculator #address {
   padding-top: 10px;
 }
-div#calculator p#address a {
-  color: #000;
+div#calculator #address a {
+  color: #fff;
+  text-decoration: none;
 }
 div#calculator #title {
   display: none;
@@ -95,12 +135,15 @@ div#calculator #logo {
   display: none;
   padding: 10px 0;
   margin-bottom: 10px;
-  max-height: 250px;
+  max-height: 225px;
   width: 100%;
 }
 div#calculator #error {
   margin-top: 10px;
 }
+div#calculator #qr {
+  padding-bottom: 10px;
+}
 td#total {
   font-weight: bold;
   text-align: right;
@@ -116,29 +159,6 @@ td#total {
   background-image: url('../img/coinos_logo.svg') !important;
   background-size: 300px 80px;
 }
-#modal .tab-pane {
-  padding-top: 15px;
-}
-@media screen and (min-width: 768px) {
-  .modal-dialog {
-    width: 400px;
-    /* either % (e.g. 60%) or px (400px) */
-  }
-  #modal #qr {
-    padding-left: 40px;
-  }
-}
 @page {
   margin: 0;
 }
-div.pass-container {
-  height: 30px;
-}
-div.pass-bar {
-  height: 11px;
-  margin-top: 2px;
-}
-div.pass-hint {
-  font-family: arial;
-  font-size: 11px;
-}