From 85740c9ec7c1fdb293f41d07a8701d3b0ebf3c8e Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 6 Feb 2016 17:30:40 -0800 Subject: Frontpage facelift --- public/css/coinos.css | 80 +++++++++++++++++++++++++++++++------------------- public/css/coinos.less | 54 ++++++++++++++++------------------ public/css/index.css | 49 ------------------------------- public/css/index.less | 30 ------------------- 4 files changed, 76 insertions(+), 137 deletions(-) delete mode 100644 public/css/index.css delete mode 100644 public/css/index.less (limited to 'public/css') 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; -} diff --git a/public/css/coinos.less b/public/css/coinos.less index 11f19007..de35aaf7 100644 --- a/public/css/coinos.less +++ b/public/css/coinos.less @@ -1,11 +1,15 @@ +@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; width: 100%; position: absolute; top: 0px; height: 30px; margin: 0; float: none; z-index: 1; margin-bottom: -30px; } @@ -14,6 +18,22 @@ div.container-fluid { .navbar-collapse.in { overflow-y: visible; } #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; } .nav li a { padding: 10px 0 10px 10px; } @@ -33,12 +53,13 @@ div#calculator { #amount { width: 5em; } #received { font-size: 16px; width: 100%; } strong#total { font-size: 30px; } - p#address { font-size: 16px; padding-top: 10px; } - p#address a { color: #000 } + #address { padding-top: 10px; } + #address a { color: #fff; text-decoration: none; } #title { display: none; } #title a { color: #000; text-decoration: none; } - #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 250px; width: 100%; } + #logo { display: none; padding: 10px 0; margin-bottom: 10px; max-height: 225px; width: 100%; } #error { margin-top: 10px; } + #qr { padding-bottom: 10px; } } td#total { font-weight: bold; text-align: right; } @@ -56,29 +77,6 @@ td#total { font-weight: bold; text-align: right; } 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; -} diff --git a/public/css/index.css b/public/css/index.css deleted file mode 100644 index 8a3cd940..00000000 --- a/public/css/index.css +++ /dev/null @@ -1,49 +0,0 @@ -@import "bootstrap.min.css"; -@import "bootstrap-responsive.min.css"; -@import "font-awesome.css"; -.hero-unit { - background: url(/img/vancouver.jpg); - background-size: 100% 100%; -} -.hero-unit p { - background: rgba(255, 255, 255, 0.5); -} -.navbar-inverse, -.navbar-inverse .navbar-link, -.navbar-inverse .brand, -.navbar-inverse .nav > li > a { - color: #eee; -} -footer { - background: black; - color: #ddd; - padding: 10px 0px 2px 5px; - margin: 0; - text-align: right; -} -#ask, -#bid { - color: white; -} -div.directory { - width: 500px; - float: left; - border: 1px dashed #ccc; - padding: 10px; - margin: 10px; -} -div.directory img { - height: 180px; - float: left; - padding-right: 10px; -} -div.directory p { - font-size: 13px; -} -div.directory h2 a { - text-decoration: none; - color: #000; -} -div.row-fluid td.first { - text-align: right; -} diff --git a/public/css/index.less b/public/css/index.less deleted file mode 100644 index a470c098..00000000 --- a/public/css/index.less +++ /dev/null @@ -1,30 +0,0 @@ -@import "bootstrap.min.css"; -@import "bootstrap-responsive.min.css"; -@import "font-awesome.css"; - -.hero-unit { - background: url(/img/vancouver.jpg); - background-size: 100% 100%; -} - -.hero-unit p { - background: rgba(255, 255, 255, 0.5); -} - -.navbar-inverse, .navbar-inverse .navbar-link, .navbar-inverse .brand, .navbar-inverse .nav > li > a { color: #eee; } - -footer { - background: black; - color: #ddd; - padding: 10px 0px 2px 5px; - margin: 0; - text-align: right; -} - -#ask, #bid { color: white; } -div.directory { width: 500px; float: left; border: 1px dashed #ccc; padding: 10px; margin: 10px; } -div.directory img { height: 180px; float: left; padding-right: 10px; } -div.directory p { font-size: 13px; } -div.directory h2 a { text-decoration: none; color: #000; } -div.row-fluid td.first { text-align: right; } - -- cgit v1.2.3