diff --git a/css/black.css b/css/black.css
index df9cb2f..5b32fa5 100644
--- a/css/black.css
+++ b/css/black.css
@@ -4,10 +4,7 @@ html,
body {
margin: 0;
padding: 0;
- width: 100%;
- height: 100%;
- overflow-x: auto;
- overflow-y: hidden;
+ height: 100vh;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
background: #1E2B34;
@@ -15,7 +12,6 @@ body {
}
body {
- padding-top: 50px;
-webkit-font-smoothing: antialiased;
}
@@ -26,6 +22,10 @@ body {
}
}
+.trn {
+ /* trn is a marker that the content needs translated; used by main-unminified.js */
+}
+
button:focus {
outline: 0;
}
@@ -59,46 +59,97 @@ body::-webkit-scrollbar-thumb:hover,
border-radius: 0;
}
a.navbar-brand {
- height: 50px;
padding: 0;
}
.navbar-brand img {
height: 100%;
}
-.container {
- margin: 0;
+.widget-row > .widget-box {
+ /*
+ .navbar is 50px; so we take 25px off of each of our two widget-row's
+ */
+ --navBar: 25px;
+ height: calc(50vh - var(--navBar));
+ overflow-y: hidden
+}
+
+/* remove gutter */
+.row.no-gutter {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.row.no-gutter [class*='col-'] {
+ padding-right: 0;
+ padding-left: 0;
+}
+
+.row [class*='col-']:not(:last-child) {
+ border-right: 2px solid #18252E;
+}
+
+.container-fluid {
padding: 0;
- display:table;
- width: 100%;
- box-sizing: border-box;
font-size: 90%;
}
-.center {
- text-align: center;
+.navbar {
+ margin-bottom: 0 !important;
}
+/* /remove gutter */
-.row {
- margin: 0;
- padding: 0;
- height: 100%;
- display: table-row;
+/*
+ The last div in the widget box needs to be scrollable; in order to do that we must set the height.
+ All widget-boxes have a .row-header so we need to subtract that from the height
+ If the widget-box has a nav-header (35px) we need to subtract that from the height too:
+*/
+.widget-box > div.row-header + div:last-child {
+ --navBar: 25px;
+ --rowHeader: 38px;
+ --navHeader: 0;
+ height: calc(50vh - (var(--navBar) + var(--rowHeader) + var(--navHeader)));
+ overflow-y: auto;
+}
+.widget-box > div.nav-header + div:last-child {
+ --navBar: 25px;
+ --rowHeader: 38px;
+ --navHeader: 35px;
+ height: calc(50vh - (var(--navBar) + var(--rowHeader) + var(--navHeader)));
+ overflow-y: auto;
}
-.row-container {
- width: 100%;
+#updates-box > #updates {
+ /* This makes the twitter widget scroll */
height: 100%;
}
-.row .no-float {
- margin: 0;
- padding: 0;
- display: table-cell;
- float: none;
+#balance > div:first-child {
+ /* The react balance widget wraps everything in a single div without any ID or class and it ends up scrolling ever-so-slightly in most cases without this */
+ overflow: hidden;
+}
+
+#balance > div > div:nth-child(2) > div {
+ /* To see why we do this check screen widths between 768px-992px (bootstrap's responsive breakpoints).
+ In essence the Balance needs a min width just before bootstrap's breakpoint kicks in and gives it the whole screen width
+ */
+ overflow-x: auto;
+}
+
+#balance .tab-content .table-balances {
+ /* We need overflow-x:auto on Balances to keep it from getting clipped. However, the table is ever-so slightly too wide for the bootstrap md-3 column without it in chrome AND overflow-x:auto (it fits with overflow-x:hidden */
+ /*width: 305px;*/
+ width: 100%;
}
-.row .no-float:not(:last-child) {
- border-right: 2px solid #18252E;
+
+#balance .tab-content {
+ /* #balance has .padding-sides on it's contents so this (from .widget-box .tab-content) isn't needed */
+ padding-left: 0px;
+ padding-right: 0px;
+}
+
+.widget-box .tab-content {
+ padding: 15px;
}
.row-header {
@@ -253,10 +304,6 @@ a:hover {
text-decoration: none;
}
-.align-right {
- text-align: right !important;
-}
-
.padding {
padding-top: 12px;
padding-bottom: 5px;
@@ -264,50 +311,6 @@ a:hover {
padding-right: 12px;
}
-.padding-sides {
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.padding-right {
- padding-right: 12px !important;
-}
-
-.clear {
- clear: both;
-}
-
-.token-container {
- width: 880px;
- margin: 0 auto;
-}
-.token {
- float: left;
- width: 200px;
- height: 200px;
- margin: 10px;
- font-size: 36px;
- border: 5px solid #ccc;
- text-align: center;
- line-height: 180px;
- font-weight: bold;
- border-radius: 200px;
-}
-.token:hover {
- background: #036;
- color: #fff;
- cursor: pointer;
-}
-
-.static-container {
- padding-top: 20px;
- background: #fff;
- padding: 20px;
- border: 10px solid #ccc;
- height: calc(100vh - 50px);
- overflow-y: auto;
-}
-
.modal-dialog.large {
width: 90%; /* respsonsive width */
text-align: center;
@@ -520,6 +523,11 @@ fieldset[disabled] .form-control {
color: hsla(0,0%,100%,.8);
}
+.form-horizontal > .form-group [class*='col-'] {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
#transferFormToken td,
#transferFormBase td {
position: relative;
@@ -545,12 +553,27 @@ fieldset[disabled] .form-control {
font-size: 12px;
font-weight: bold;
line-height: 30px;
+ /* Height matches inputs such as .form-control */
+ height: 36px;
+ /*
+ This padding makes the New Order Buy/Sell and modal Buy/Sell buttons same height and text vertical alignment as the
+ Deposit/Withdraw buttons in the balance box. Technically the .btn-success & .btn-danger buttons (New Order Buy/Sell
+ buttons) and the modal dialog buttons are missing the .btn-xs styles that the Deposit buttons have but changing
+ styles here is seems safer than mucking with that JavaScript.
+ */
+ padding: 1px 5px;
text-align: center;
cursor: pointer;
color: #fff;
user-select: none;
background-color: #3d84d6 !important;
- transition: background-color .2s ease-in-out;
+ transition: background-color .2s ease-in-out;
+}
+
+.modal-footer .btn {
+ /* Buy button in footer of dialogs needs some breathing room or it looks squished */
+ padding-left: 12px;
+ padding-right: 12px;
}
.btn:hover,
@@ -559,18 +582,7 @@ fieldset[disabled] .form-control {
}
.btn-success {
- flex: 1;
- border: none;
- border-radius: 1px;
- font-size: 12px;
- font-weight: bold;
- line-height: 30px;
- text-align: center;
- cursor: pointer;
- color: #fff;
- user-select: none;
background-color: #4da53c !important;
- transition: background-color .2s ease-in-out;
}
.btn-success:hover {
@@ -578,32 +590,11 @@ fieldset[disabled] .form-control {
}
.btn-danger {
- flex: 1;
- border: none;
- border-radius: 1px;
- font-size: 12px;
- font-weight: bold;
- line-height: 30px;
- text-align: center;
- cursor: pointer;
- color: #fff;
- user-select: none;
background-color: #ff6939 !important;
- transition: background-color .2s ease-in-out;
}
.btn-danger:hover {
- flex: 1;
- border-radius: 1px;
- font-size: 12px;
- font-weight: bold;
- line-height: 30px;
- text-align: center;
- cursor: pointer;
- color: #fff;
- user-select: none;
background-color: #ff5620 !important;
- transition: background-color .2s ease-in-out;
}
#myTrades tbody tr:nth-child(even),
@@ -707,7 +698,11 @@ fieldset[disabled] .form-control {
height: 330px;
}
- .row-box.height4 {
- height: 400px;
+ #new-order-box {
+ height: 440px;
}
-}
+
+ #new-order-box .tab-content {
+ height: auto;
+ }
+}
\ No newline at end of file
diff --git a/css/small.css b/css/small.css
deleted file mode 100644
index 3de7393..0000000
--- a/css/small.css
+++ /dev/null
@@ -1,49 +0,0 @@
-html, body {
- height: auto;
- overflow-x: auto;
- overflow-y: auto;
-}
-.row .no-float {
- display: block;
-}
-.row .no-float:not(:last-child) {
- border: 0;
-}
-.row {
- height: auto;
- display: block;
-}
-.row-container {
- height: auto;
-}
-.row-box.fifty {
- height: auto;
-}
-.row-box.thirty {
- height: auto;
-}
-.row-box.seventy {
- height: auto;
-}
-.row-box.forty {
- height: auto;
-}
-.row-box.sixty {
- height: auto;
-}
-.row-box.hundred {
- height: auto;
-}
-
-.token-container {
- width: 100%;
- margin: 0 auto;
-}
-.token {
- width: 100px;
- height: 100px;
- margin: 5px;
- font-size: 16px;
- line-height: 100px;
- border-radius: 100px;
-}
diff --git a/css/white.css b/css/white.css
deleted file mode 100644
index 1f45b74..0000000
--- a/css/white.css
+++ /dev/null
@@ -1,381 +0,0 @@
-@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';
-
-html,body {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- overflow-x: auto;
- overflow-y: hidden;
- font-family: 'Open Sans', sans-serif;
- background: #ffffff;
-}
-
-.navbar.navbar-default {
- background: #fff;
- border: 0;
- border-radius: 0;
-}
-a.navbar-brand {
- height: 50px;
- padding: 0;
-}
-.navbar-brand img {
- height: 100%;
-}
-
-.container {
- margin: 0;
- padding: 0;
- display:table;
- width: 100%;
- margin-top: -20px;
- box-sizing: border-box;
- font-size: 90%;
-}
-
-.center {
- text-align: center;
-}
-
-.row {
- margin: 0;
- padding: 0;
- height: 100%;
- display: table-row;
-}
-
-.row-container {
- width: 100%;
- height: 100%;
-}
-
-.row .no-float {
- margin: 0;
- padding: 0;
- display: table-cell;
- float: none;
-}
-.row .no-float:not(:last-child) {
- border-right: 1px solid #666;
-}
-
-.row-header {
- width: 100%;
- background: #ccc;
- color: #000;
- text-transform: uppercase;
- font-size: 16px;
- padding: 8px;
- height: 38px;
-}
-
-.row-box {
- height: auto;
- color: #000;
- overflow-y: none;
-}
-
-.row-box.height1 {
- height: calc(100vh - 89px);
-}
-.row-box.height2 {
- height: calc(50vh - 98px);
-}
-.row-box.height3 {
- height: calc(50vh - 81px);
-}
-.row-box.height4 {
- height: calc(40vh - 61px);
-}
-.row-box.height5 {
- height: calc(60vh - 135px);
-}
-.row-box.height6 {
- height: calc(40vh - 81px);
-}
-.row-box.height7 {
- height: calc(60vh - 45px);
-}
-.row-box.table-header {
- height: 35px;
- border-bottom: 1px solid #666;
- padding-top: 5px;
-}
-tr.table-header {
- height: 25px;
- border-bottom: 1px solid #666;
- vertical-align:bottom;
-}
-tr.mid-header {
- border-top: 1px solid #666;
- border-bottom: 1px solid #666;
-}
-.table {
- border: 0;
- margin-top: 5px;
-}
-.table td,th,tr {
- text-align: center;
-}
-.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
- border: none;
-}
-tr.clickable-row:hover {
- cursor: pointer;
- background: #111;
-}
-
-.sell {
- color: #f00;
-}
-.buy {
- color: #0f0;
-}
-
-.scroll {
- overflow-y: auto;
-}
-
-.row-box.nav-header {
- height: 35px;
- border-bottom: 1px solid #666;
-}
-
-.nav-tabs > li > a {
- color: #000;
-}
-
-.nav-tabs.two > li {
- width: 50%;
-}
-.nav-tabs.three > li {
- width: calc(100%/3);
-}
-.nav-tabs.four > li {
- width: calc(100%/4);
-}
-.nav-tabs.columns {
- border-bottom: 0;
-}
-.nav-tabs.columns > li > a {
- border-radius: 0;
- height: 35px;
- line-height: 17px;
- width: 100%;
- text-align: center;
- background: #ccc;
- color: #000;
- border: 0;
-}
-.nav-tabs.columns > li.active > a {
- color: #000;
- background: #999;
- border: 0;
-}
-.nav-tabs.columns > li > a:hover {
- color: #000;
- background: #666;
- border: 0;
-}
-
-.input-xs {
- height: 22px;
- padding: 2px 5px;
- font-size: 12px;
- line-height: 1.5;
- border-radius: 3px;
-}
-
-.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
- padding: 2px;
-}
-
-a {
- color: #003;
-}
-a:hover {
- color: #336;
- text-decoration: none;
-}
-
-.align-right {
- text-align: right !important;
-}
-
-.padding {
- padding-top: 12px;
- padding-bottom: 5px;
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.padding-sides {
- padding-left: 12px;
- padding-right: 12px;
-}
-
-.padding-right {
- padding-right: 12px !important;
-}
-
-.clear {
- clear: both;
-}
-
-.token-container {
- width: 880px;
- margin: 0 auto;
-}
-.token {
- float: left;
- width: 200px;
- height: 200px;
- margin: 10px;
- font-size: 36px;
- border: 5px solid #ccc;
- text-align: center;
- line-height: 180px;
- font-weight: bold;
- border-radius: 200px;
-}
-.token:hover {
- background: #036;
- color: #fff;
- cursor: pointer;
-}
-
-.static-container {
- padding-top: 20px;
- background: #fff;
- padding: 20px;
- border: 10px solid #ccc;
- height: calc(100vh - 50px);
- overflow-y: auto;
-}
-
-.modal-dialog.large {
- width: 90%; /* respsonsive width */
- text-align: center;
-}
-
-.modal-dialog a {
- color: #33f;
-}
-
-.modal-dialog a:hover {
- color: #333;
-}
-
-pre {
- overflow-x: auto;
-}
-pre code {
- overflow-wrap: normal;
- white-space: pre;
-}
-
-.dropdown-menu {
- max-height: 500px;
- overflow-y: auto;
-}
-
-.chat-button {
- background: #fc3;
- color: #000;
- vertical-align: middle;
- outline: 5px #fff solid;
- outline-offset: -5px;
-}
-
-.warning {
- color: #f00;
-}
-
-.table-balances {
- margin: 0 !important;
-}
-
-.table-balances td {
- width: 33%;
-}
-
-.four-columns {
- width: calc(100%/4);
-}
-.three-columns {
- width: calc(100%/3);
-}
-
-.overflow-hidden {
- max-width: 90px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.padding-left {
- padding-left: 10px !important;
-}
-
-#chartPrice {
- overflow: hidden;
-}
-
-#chartDepth {
- overflow: hidden;
-}
-
-.big-icon {
- font-size: 150%;
-}
-
-.tooltip-inner {
- white-space:pre-wrap;
-}
-
-.ad {
- background: #fff;
- text-align: center;
-}
-/**/
-.ad .ledger-img{
- width: 600px;
- margin-left: -16px;
-}
-
-
-.ttip {
- position: relative;
- display: inline-block;
-}
-
-.ttip .text {
- visibility: hidden;
- width: 120px;
- background-color: black;
- color: #fff;
- text-align: center;
- border-radius: 6px;
- padding: 10px;
- position: absolute;
- z-index: 1;
- bottom: 150%;
- left: 50%;
- margin-left: -60px;
-}
-
-.ttip .text::after {
- content: "";
- position: absolute;
- top: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: black transparent transparent transparent;
-}
-
-.ttip:hover .text {
- visibility: visible;
-}
diff --git a/index.html b/index.html
index fbb7de7..9fdbb05 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,6 @@
-
- 
- 
-