// Copyright (c) 2020-2021 Drew Lemmy
// This file is part of KristWeb 2 under GPL-3.0.
// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
@import (reference) "../../App.less";

.dashboard-page {
  .dashboard-main-row {
    align-items: stretch;

    & > .ant-col {
      margin-bottom: @margin-md;
    }

    & > .ant-col > .ant-card {
      display: flex;
      flex-direction: column;

      height: 100%;

      border: none;
      border-radius: @kw-big-card-border-radius;

      .ant-card-head {
        border-bottom: 0;
        margin-bottom: 0;

        border-radius: @kw-big-card-border-radius @kw-big-card-border-radius 0 0;

        .ant-card-head-title {
          padding-bottom: 0;
        }
      }

      .ant-card-body {
        padding-top: @padding-sm;
      }

      &.empty .ant-card-body {
        height: 100%;
        padding-top: 0 !important;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        &::before, &::after {
          content: none;
        }

        .ant-empty-normal {
          margin: 0;
        }

        .ant-result {
          padding: @padding-sm;

          .ant-result-icon {
            margin-bottom: @margin-xs;

            .anticon { font-size: 48px; }
          }
        }
      }
    }
  }

  .dashboard-statistic {
    &-title {
      color: @kw-text-secondary;
      display: block;
    }

    &-value {
      font-size: @heading-3-size;
    }
  }

  .dashboard-card-wallets {
    .dashboard-wallets-top-row {
      margin-bottom: @margin-sm;
    }

    .dashboard-wallet-item {
      .wallet-left {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        .wallet-label {
          font-weight: bold;
        }
      }

      .wallet-right {
        flex: 0;
        font-size: @font-size-lg;

        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .dashboard-card-transactions {
    .dashboard-transaction-item {
      flex-flow: nowrap;

      .transaction-left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .transaction-type {
          a {
            font-weight: bold;
            color: @text-color-secondary;
          }

          &-transferred a, &-name_transferred a { color: @kw-primary; }
          &-sent a, &-name_sent a, &-name_purchased a { color: @kw-orange; }
          &-received a, &-mined a, &-name_received a { color: @kw-green; }
          &-name_a_record a { color: @kw-purple; }

          @media (max-width: @screen-xl) {
            font-size: 90%;
          }
        }

        .transaction-time {
          color: @text-color-secondary;
          font-size: 90%;

          @media (max-width: @screen-xl) {
            font-size: 85%;
          }
        }
      }

      .transaction-middle {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        overflow: hidden;

        .transaction-field {
          font-weight: bold;
          white-space: nowrap;
          color: @text-color-secondary;
        }

        .transaction-a-record-value {
          font-family: monospace;
          font-size: 90%;
          color: @text-color-secondary;
        }

        .transaction-a-record-removed {
          font-style: italic;
          font-size: 90%;
          color: @text-color-secondary;

          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .transaction-right {
        flex: 0;
        font-size: @font-size-lg;

        display: flex;
        justify-content: center;
        align-items: center;

        .transaction-name {
          font-weight: bold;
        }
      }
    }
  }

  .dashboard-card-block-value {
    .dashboard-block-value-main.krist-value {
      font-size: @heading-4-size;
    }

    .dashboard-block-value-next-decrease {
      margin: @margin-sm 0;
    }

    .dashboard-block-value-progress-text {
      color: @text-color-secondary;
      font-size: @font-size-sm;

      .dashboard-block-value-progress-middot {
        margin: 0 @margin-xs;
      }
    }

    .dashboard-block-value-empty-description {
      color: @text-color-secondary;
      font-size: 90%;
      margin-top: @margin-sm;
    }
  }

  .dashboard-card-block-difficulty {
    .ant-card-body {
      height: 100%;
    }

    .left-col {
      display: flex;
      flex-direction: column;

      padding-right: @margin-sm;

      .difficulty-hash-rate {
        flex: 0;

        color: @text-color-secondary;
        font-size: 90%;

        &-rate {
          color: @text-color;
          font-size: 105%;
          font-weight: bold;
        }
      }

      .spacer {
        flex: 1;
      }

      .chart-mode-dropdown {
        flex: 0;

        width: 100%;
        margin-top: @margin-sm;
      }
    }
  }

  .dashboard-list-item {
    padding: (@padding-sm / 2) @padding-md;
    margin-bottom: @margin-xs;

    background: @kw-dark;
    border-radius: @kw-big-card-border-radius;

    box-sizing: border-box;
    min-height: 60px;
    justify-content: center;

    line-height: 1.5;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .dashboard-more a {
    display: block;
    width: 100%;

    margin-bottom: -@padding-sm;

    color: @text-color-secondary;
    font-size: 90%;
    text-align: center;

    &:hover {
      color: lighten(@text-color-secondary, 10%);
    }
  }
}