decred.org/dcrdex@v1.0.3/client/webserver/site/src/css/market.scss

@import "mixins";

div[data-handler=markets] {
  .ordertable-wrap {
    width: 100%;

    &:first-child {
      @include border-bottom;
    }

    &:last-child {
      @include border-top;
    }

    tbody#sellRows {
      @include border-top;
    }
  }

  .orderbook {
    min-width: 225px;

    & > div:first-child { // buy orders
      order: 3;
    }

    & > div:nth-child(2) { // header
      order: 1;
    }

    & > div:last-child { // sell orders
      order: 2;
    }
  }

  .order-panel {
    min-width: 375px;

    #orderForm {
      input[type=number] {
        height: 30px;
        border-radius: 0;
        font-size: 14px;
      }

      input:focus {
        outline: none;
      }

      span.unitbox {
        position: absolute;
        font-size: 14px;
        font-weight: bold;
        right: 5px;
        top: 48%; // Looks better than 50 for some reason.
        transform: translateY(-50%);
        white-space: nowrap;
      }

      button {
        padding: 5px 25px;
        border: 1px solid #78787877;
        border-radius: 3px;
        background-color: var(--section-bg);
        color: var(--market-btn-color);

        &:disabled {
          opacity: 0.4;
        }
      }

      button:hover,
      button.selected {
        color: var(--market-btn-selected-color);
      }

      button.submit {
        color: var(--market-btn-selected-color);
      }

      button.selected,
      button.submit {
        &.buygreen-bg {
          background-color: var(--market-buygreen-bg);
        }

        &.sellred-bg {
          background-color: var(--market-sellred-bg);
        }
      }

      #orderPreview,
      .h21 {
        height: 21px;
      }
    }

    .ico-unlocked {
      color: $success;
    }

    .ico-disconnected {
      color: var(--text-warning);
    }
  }

  .market-chart {
    @extend .flex-center;

    flex-grow: 1;
    position: relative;
    min-width: 100px; // Letting it go to zero can be problematic, causing some major cpu during chart calcs
    min-height: 250px;

    canvas {
      position: absolute;
      left: 0;
      top: 0;
      user-select: none;
    }
  }

  #unreadyOrdersMsg {
    color: $danger;
  }

  .unready-user-order {
    background-color: #6e0909;
  }

  .user-order {
    &:not(:last-child) {
      border-bottom-style: none !important;
    }

    &:last-child .order-details {
      border-bottom-style: none !important;
      padding-bottom: 0;
    }

    .user-order-header {
      @extend .flex-center;

      padding: 5px 10px 5px 20px;
      font-size: 14px;
      position: relative;
      // border: 1px solid grey;

      .side-indicator {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;

        &.buy {
          background-color: var(--buy-color);
        }

        &.sell {
          background-color: var(--market-sell-color);
        }

        &.inactive {
          opacity: 0.5;
        }
      }

      .active-indicator {
        height: 8px;
        border-radius: 4px;

        &.active {
          margin: 0 5px;
          width: 8px;
          background-color: var(--buy-color);
        }
      }
    }

    .order-details {
      margin-bottom: 25px;
      padding: 0 10px 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      row-gap: 10px;
      column-gap: 5px;
      line-height: 1;

      .user-order-datum {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & > span:first-child {
          font-size: 12px;
          font-family: $demi-sans;
          color: grey;
          margin-bottom: 2px;
        }

        & > span:nth-child(2) {
          font-size: 14px;
        }

        &.full-span {
          grid-column: 1 / -1;
        }
      }
    }
  }

  .markettab {
    height: 30px;
    border-style: none;
    background-color: var(--section-bg);

    &.selected {
      background-color: var(--market-markettab-selected-bg);
    }
  }

  .numorders {
    background-color: var(--market-numorders-bg);
    padding: 1px 2px;
  }

  #leftMarketDock {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 2;
    min-height: -webkit-fill-available; // for webkit browsers
    background-color: var(--section-bg);

    &.default,
    &.stashed {
      display: none;
    }

    #searchBoxV1 {
      height: 55px;
    }

    &.stashed {
      display: none;
    }

    #marketSearchV1:focus {
      border: none;
      outline: none;
    }

    #marketSearchV1 {
      @extend .fill-abs;

      width: 100%; // firefox needs, for some reason
      z-index: 2;
      background-color: transparent;
      font-size: 25px;
      text-align: center;
      font-family: $demi-sans;
      font-variant: small-caps;
      border: none;

      & + .ico-search {
        z-index: 1;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        opacity: 0.25;
      }

      &:hover + .ico-search {
        opacity: 0.5;
      }

      &:not(:placeholder-shown) + .ico-search,
      &:focus + .ico-search {
        display: none;
      }
    }

    #marketListV1 {
      height: 100%;
      min-width: 275px;

      & > div {
        .dexname {
          max-width: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.selected {
          background-color: #7773;
        }
      }
    }
  }

  #mainContent {
    display: flex;
    flex-direction: column;
    align-items: center;

    & > div,
    & > section {
      min-height: 500px;
      display: flex;

      &:first-child { // order book
        max-height: 1000px;
        order: 3;
      }

      &:nth-child(2) { // charts
        order: 1;
      }

      &:last-child { // order form, wallets, user orders
        order: 2;
      }
    }
  }

  #epochLine,
  #durBttnBox {
    position: absolute;
    left: 65px;
    top: 5px;
    background-color: var(--section-bg);
    z-index: 1;
  }

  #durBttnBox {
    .candle-dur-bttn {
      background-color: var(--section-bg);
      padding: 2px 4px;
      font-size: 14px;
      line-height: 1;
      margin: 0 2px;

      &:hover {
        background-color: #7777;
      }

      &:hover,
      &.selected {
        border-color: var(--text-warning);
        color: var(--text-warning);
      }
    }
  }

  #epochLine {
    @extend .flex-center;

    .epoch-line {
      display: inline-block;
      border-top: 3px dotted #626262;
      width: 25px;
      height: 0;
      margin-right: 5px;
      position: relative;
      top: 1px;
    }
  }

  #loaderMsg {
    color: #777;
  }

  #bondCreationPending {
    .title {
      font-weight: bold;
      margin-bottom: 5px;
      color: #9b8c09;
    }
  }

  #registrationStatus {
    .title {
      font-weight: bold;
      margin-bottom: 5px;
    }

    &.waiting {
      .title {
        color: #9b8c09;
      }
    }

    &.completed {
      .title {
        color: $success;
      }

      #regStatusMessage {
        display: none;
      }
    }

    &.error {
      .title {
        color: $danger;
      }
    }
  }

  #approveTokenForm {
    width: 450px;
  }

  #verifyForm {
    .echo-data span {
      margin: 0 5px;
    }

    .disclaimer {
      text-align: justify;
    }

    header {
      &.buygreen-bg {
        background-color: var(--market-buygreen-bg);
      }

      &.sellred-bg {
        background-color: var(--market-sellred-bg);
      }
    }

    button {
      &.buygreen-bg {
        background-color: var(--market-buygreen-bg);
      }

      &.sellred-bg {
        background-color: var(--market-sellred-bg);
      }
    }

    .loader {
      height: 40px;
    }

    .order-opt {
      opacity: 0.7;

      &:not(.selected) {
        cursor: pointer;
      }

      &.selected {
        opacity: 1;
        background-color: var(--form-opt-selected-bg);

        div.opt-check {
          background-color: $success;
        }
      }
    }
  }

  #vDetailPane {
    max-width: 425px;

    .indent {
      border-left: 2px solid var(--border-color);
    }

    table.fee-breakout {
      td {
        text-align: center;
        padding: 2px 5px;
      }
    }
  }


  #marketReopener {
    display: none;
    padding: 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--section-bg);
    z-index: 10;
  }

  #leftHider,
  #marketReopener {
    .ico-arrowleft,
    .ico-arrowright {
      transform: scaleX(0.5);
      opacity: 0.5;
    }

    &:hover .ico-arrowleft,
    &:hover .ico-arrowright {
      opacity: 1;
    }
  }
}

.market-stats {
  display: flex;
  margin: 0 5px;
  gap: 15px;

  .statgrid {
    display: grid;
    grid-template-columns: auto auto auto;
  }

  &.listopen .ico-arrowdown {
    display: none;
  }

  &:not(.listopen) .ico-arrowup {
    display: none;
  }
}

#headerSpace .market-stats {
  display: none;
}


#recentMatchesBox {
  @extend .stylish-overflow;

  max-height: 350px;
}

#recentMatchesTable {
  th {
    align-items: center;

    &:hover {
      opacity: 0.7;
    }

    .ico-arrowdown {
      display: inline-block;
      visibility: hidden;
      vertical-align: middle;
      font-size: 10px;
      margin-left: 5px;
    }

    &.sorted-dsc {
      .ico-arrowdown {
        visibility: visible;
      }
    }

    &.sorted-asc {
      .ico-arrowdown {
        visibility: visible;
        transform: rotate(180deg);
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  #main .market-stats {
    display: none;
    border-top: none;
  }

  #headerSpace .market-stats {
    display: flex;
    border-bottom: none !important;
  }

  div[data-handler=markets] #leftMarketDock {
    position: relative;

    &.default {
      display: flex;
    }
  }
}

@include media-breakpoint-up(lg) {
  div[data-handler=markets] {
    #mainContent {
      @include fill-abs;

      overflow: hidden;
      flex-direction: row;
      align-items: stretch;

      & > section,
      & > div {
        min-height: none;
        display: flex;

        &:nth-child(n) { // need nth-child for specificity
          min-height: auto;
        }

        &:first-child { // order book
          order: 1;
        }

        &:nth-child(2) { // charts
          order: 2;
        }

        &:last-child { // order form, wallets, user orders
          order: 3;
        }
      }
    }

    .ordertable-wrap {
      height: calc(50% - 15px);
      display: flex;

      &.reversible {
        flex-direction: column-reverse;
      }

      tbody {
        display: flex;
        align-items: stretch;
      }

      tbody#sellRows {
        flex-direction: column-reverse;
        border-top: none;
      }

      tbody#buyRows {
        flex-direction: column;
      }
    }

    .orderbook {
      width: auto;

      & > div:first-child { // sell orders
        order: 1;
      }

      & > div:nth-child(2) { // header
        order: 2;
      }

      & > div:last-child { // buy orders
        order: 3;
      }
    }

    .order-panel {
      & > div {
        @include fill-abs;
        @include stylish-overflow;

        height: 100%;
        overflow-x: hidden;
      }
    }

    #leftMarketDock.stashed + #marketReopener {
      display: block;
    }
  }

  #recentMatchesBox {
    overflow: visible;
    max-height: none;
    border-bottom: none;
  }

  #candlesLegend,
  #depthLegend {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--section-bg);
  }
}

.user-order-floaty-menu {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 5;
  border-style: none solid solid;
  border-width: 0 2px 2px 1px;
  border-color: var(--border-color);
  background-color: var(--section-bg);
  cursor: pointer;
  overflow: hidden;

  & > span,
  & > a {
    margin: 0 5px;
    padding-right: 10px;
    padding-left: 10px;

    &:hover {
      background-color: #7775;
    }
  }
}

.bot-problems-section {
  background-color: #f00a;
  margin-top: 2px;
  margin-bottom: 2px;
  padding-left: 2px;
  border-radius: 5px;
}