markets.html

---
layout: page
title: Bisq Markets ‹ Bisq - A decentralized bitcoin exchange network
ref: markets
lang: en
flag: 🌐
language: English
---
<!-- <h1>Bisq Markets</h1> -->

<link href="{{ '/css/chosen.css' | relative_url }}" rel="stylesheet">

<script defer src="/js/highstock.js"></script>
<script defer src="/js/drag-panes.js"></script>
<script defer src="/js/exporting.js"></script>

<script defer src="/js/chosen.jquery.min.js"></script>
<script defer src="/js/date.format.js"></script>
<script defer src="/js/markets.js"></script>



<div class="mt-0 mb-2">

  <div class="mb-5 px-0 col-12 col-md-6">
    <select id="currency" data-placeholder="Select BTC Pair" class="chosen-select" tabindex="10">
      {% include market_currency_selector.html %}
    </select>
  </div>

  <div id="container" style="height: 500px; min-width: 100%"></div>



</div>


<div id="tables" class="pt-5 pb-5">
{% assign item = site.data.en.markets %}
    <div class="row mt-5 mb-5" id="offers" style="display:none">
      <div class="col col-12 col-md-6 pr-3 pr-md-5">
        <h3>{{ item.buy }}</h3>
        <table class="mt-3" id="buy-offers">
          <thead id="buy-offers-header">
          </thead>
          <tbody id="buy-offers-body">
          </tbody>
        </table>
      </div>

      <div class="col col-12 col-md-6 pl-3 pl-md-5 mt-5 mt-md-0">
        <h3>{{ item.sell }}</h3>
        <table class="mt-3" id="sell-offers">
          <thead id="sell-offers-header">
          </thead>
          <tbody id="sell-offers-body">
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col col-12 mt-5">
        <h3>{{ item.tradeHistory }}</h3>
        <table class="mt-3" id="trade-history">
          <thead id="trade-history-header">
          </thead>
          <tbody id="trade-history-body">
          </tbody>
        </table>
      </div>
    </div>

</div>


<style>

td {
    padding: 0;
}

#container {
  -webkit-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.14);
  -moz-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.14);
  box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.14);
  /*
  background: url(/images/green.svg);
  background-repeat-y: no-repeat;
  background-position: 0% 109.7%;
  background-repeat: repeat-x;
  */
}

rect.highcharts-plot-background {
    fill: #fff;
}

.highcharts-title {
  z-index: 0;
}

.highcharts-tooltip {
  z-index: 9998!important;
}

.highcharts-tooltip div {
  background-color: white;
  border: 1px solid #E2E2E2;
  opacity: 1;
  z-index: 9999!important;
  padding: 5px
}

.highcharts-title .price, .highcharts-title .currency-pair, .highcharts-title .btc-note{
    fill: #25B135;
    color: #25B135;
    font-weight: 300;
    font-size: 40px;
    font-family: 'IBM Plex Sans', sans-serif;
    overflow-x: hidden;
    letter-spacing: 0.03rem;
}

.highcharts-title .currency-pair {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 400;
}

.highcharts-title .btc-note {
  fill: #a5a5a5;
  color: #a5a5a5;
  font-size: 16px;
  display: block;
}

.highcharts-tooltip {
    -moz-box-shadow: 20px 20px 20px #888;
    -webkit-box-shadow: 20px 20px 20px #888;
    box-shadow: 20px 20px 20px #888;
    min-width: 200px;
    z-index: 1000000;
}

.highcharts-column-series rect{
    opacity: .5
}

.xaxis-background {
  position: absolute; bottom: 0; width: 100%; background: red
}

#tables tbody tr {
    border-bottom: #ececec 1px solid;
    margin: 20px 0;
}

#tables thead {
    text-transform: uppercase;
    font-weight: 200;
}

#tables tr:hover {
    background: #ecf9ed;
}

#tables thead tr:hover {
    background: initial;
}

#tables td{
    text-align: left;
    padding: 10px 0;
}

#tables td:last-child, #tables th:last-child {
  text-align:right;
}

#tables th {
    font-weight: 400;
    font-size: 0.8em;
    color: #ccc;
    text-align: left;
}

#tables table {
    border: none;
    box-shadow: none;
    width:100%;
}


</style>