discourse/app/assets/stylesheets/common/admin/dashboard_next.scss

.dashboard-next {

  &.admin-contents {
    margin: 0;
  }

  .section-columns {
    display: flex;
    justify-content: space-between;

    .section-column {
      flex: 1;
      flex-grow: 1;
    }
  }

  .section {
    .section-title {
      h2 {
        margin: 0 .5em 0 0;
      }

      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $primary-low-mid;
      margin-bottom: .5em;
      padding-bottom: .5em;
    }

    .section-body {
      padding: 1em 0;
    }
  }

  .dashboard-mini-table {
    margin-bottom: 1em;

    &.is-loading {
      height: 150px;
    }

    .table-title {
      align-items: center;
      display: flex;
      justify-content: space-between;

      h3 {
        margin: .5em 0;
      }
    }

    table {
      border: 1px solid $primary-low-mid;
      table-layout: fixed;

      thead {
        tr {
          background: $primary-low;
          th {
            border: 1px solid $primary-low-mid;
            text-align: center;
          }
        }
      }

      tbody {
        tr {
          td {
            border: 1px solid $primary-low-mid;
            text-align: center;
          }
        }
      }
    }
  }

  .charts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .dashboard-mini-chart {
      flex-grow: 1;
      width: calc(100% * (1/3));
      margin-bottom: 1em;
      margin-right: 1em;

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

      &.is-loading {
        height: 150px;
      }

      .d-icon-question-circle {
        cursor: pointer;
        margin-left: .25em;
      }

      .chart-title {
        align-items: center;
        display: flex;

        h3 {
          margin: .5em 0;
        }
      }

      &.double-up, &.up {
        .chart-trend, .data-point {
          color: rgb(17, 141, 0);
        }
      }

      &.double-down, &.down {
        .chart-trend, .data-point {
          color: $danger;
        }
      }

      &.one-data-point {
        .chart-container {
          min-height: 150px;
          justify-content: center;
          align-items: center;
          display: flex;
        }

        .data-point {
          width: 100%;
          font-size: 6em;
          font-weight: bold;
          border-radius: 3px;
          background: rgba(200,220,240,0.3);
          text-align: center;
          padding: .5em 0;
        }
      }
    }

    .chart-container {
      position: relative;
    }

    .chart-trend {
      font-size: $font-up-5;
      position: absolute;
      right: 1.5em;
      top: .5em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
    }

    .chart-canvas {
      width: 100%;
      height: 100%;
    }
  }

  .misc {
    .durability {
      display: flex;
      justify-content: space-between;

      .durability-title {
        text-transform: capitalize;
      }
    }
  }
}