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

.admin-reports,
.dashboard-next {
  &.admin-contents {
    nav {
      position: relative;
      width: calc(100% + 10px);
      padding-left: 10px;
      margin-left: -10px;
      margin-right: -10px;
    }
  }
}

.dashboard-next {
  .nav {
    display: flex;
    margin: 0 0 2em 0;
    border-bottom: 1px solid var(--primary-low);
    font-size: var(--font-up-1);
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;

    // Fade-out for horizontal scroll nav
    &:before {
      content: "";
      position: absolute;
      width: 10px;
      margin-left: -10px;
      height: 100%;
      background: linear-gradient(
        to left,
        rgba(var(--secondary-rgb), 1),
        rgba(var(--secondary-rgb), 0)
      );
    }
    &:after {
      content: "";
      position: absolute;
      right: 0px;
      width: 30px;
      height: 100%;
      background: linear-gradient(
        to right,
        rgba(var(--secondary-rgb), 0),
        rgba(var(--secondary-rgb), 1)
      );
    }

    .navigation-link {
      .emoji {
        margin-right: 0.5em;
      }
    }
  }

  .sections {
    display: flex;
    flex-direction: column;
  }

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

    @include breakpoint(medium) {
      flex-direction: column;
    }

    .section-column {
      min-width: calc(50% - 0.5em);
      max-width: 100%;

      &:last-child {
        margin-left: 0.5em;
      }

      &:first-child {
        margin-right: 0.5em;
      }

      @include breakpoint(medium) {
        min-width: 100%;

        &:last-child {
          order: 1;
        }

        &:first-child {
          order: 2;
        }
      }
    }

    @include breakpoint(medium) {
      .section-column:last-child,
      .section-column:first-child {
        margin: 0;
      }
    }
  }

  .section {
    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--primary-low);
      padding-bottom: 0.5em;

      @media screen and (max-width: 400px) {
        flex-wrap: wrap;
      }

      h2 {
        margin: 0 0.5em 0 0;

        a {
          color: var(--primary);
        }
      }
    }

    .section-body {
      margin-top: 1em;

      > p {
        margin-top: 0;
      }
    }
  }

  .admin-report .header {
    border: 0;
    padding: 0;
    margin-bottom: 1em;
  }

  .charts {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;

    .admin-report {
      grid-column: span 4;

      &.consolidated-page-views,
      &.site-traffic {
        grid-column: span 12;
      }
    }

    @include breakpoint(medium) {
      .admin-report {
        grid-column: span 12;
      }
    }

    .chart-canvas-container {
      position: relative;
      margin-left: -5px;
    }

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

  .misc {
    display: flex;
    border: 1px solid var(--primary-low);

    .storage-stats,
    .last-dashboard-update {
      flex: 1 1 50%;
      box-sizing: border-box;
      margin: 1em 0;
      padding: 0 1em;
    }

    .storage-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-right: 1px solid var(--primary-low);

      .backups,
      .uploads {
        flex: 1 1 100%;
      }

      .uploads p:last-of-type {
        margin-bottom: 0;
      }
    }

    @media screen and (max-width: 400px) {
      flex-wrap: wrap;
      .storage-stats,
      .last-dashboard-update {
        flex: 1 1 100%;
        text-align: left;
      }
      .last-dashboard-update {
        display: block;
        margin: 0 20px 20px 20px;
        padding: 20px 0 0 0;
        border-top: 1px solid var(--primary-low);
        border-left: none;
      }
    }
    .last-dashboard-update {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      div {
        align-self: center;
        h4 {
          margin-bottom: 0;
        }
      }
    }
  }

  .top-referred-topics {
    margin-bottom: 2em;
  }

  .top-referred-topics,
  .trending-search {
    th:first-of-type {
      text-align: left;
    }
  }

  .period-chooser .period-chooser-header {
    font-size: var(--font-down-2);
  }

  .dashboard-problems {
    margin-bottom: 2em;

    .problem-messages {
      margin-bottom: 1em;

      ul {
        margin: 0 0 0 1.25em;

        li.dashboard-problem {
          padding: 0.5em 0.5em;

          .notice {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .message {
            margin-right: var(--space-4);
          }
        }
      }
    }

    .d-icon-triangle-exclamation {
      color: var(--danger);
    }

    .actions {
      margin: 1em 0 0 0;
      display: flex;
      align-items: center;
      color: var(--primary-medium);
      .btn {
        margin-right: 1em;
      }
    }
  }
}

.counters-list {
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;

  .counters-header {
    display: grid;
    flex: 1 0 auto;
    grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
    border: 1px solid var(--primary-low);
    border-bottom: 0;
    font-weight: 700;
    text-align: right;
    align-items: center;
    padding: 0.65em 0.25em;
  }

  .admin-report .main {
    border: 1px solid var(--primary-low);

    &:hover {
      background-color: var(--primary-very-low);
    }
  }

  .admin-report:not(:last-child) {
    .main {
      border-bottom: 0;
    }

    .conditional-loading-section.is-loading {
      border-bottom: 0;
    }
  }

  .admin-report .conditional-loading-section.is-loading {
    display: flex;
    flex-direction: row;
    padding: 0.5em 0.25em;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid var(--primary-low);

    .title {
      font-size: var(--font-0);
    }

    .spinner {
      margin: 0;
      width: 8px;
      height: 8px;
      margin-left: 0.5em;
    }
  }

  .admin-report .main .report-alert {
    display: flex;
    flex-direction: row;
    padding: 0.5em 0.25em;
    align-items: center;
    text-align: left;
    border: 0;

    &:hover {
      background-color: var(--primary-very-low);
    }

    .d-icon {
      font-size: var(--font-up-1);
      margin: 0 0.25em 0 0;
      color: var(--primary-low-mid);
    }
  }
}

.activity-metrics {
  margin-bottom: 2em;
}

.user-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;

  .dashboard-inline-table {
    flex: 1 0 auto;
    max-width: 95%;
  }

  .table-cell {
    display: flex;
    flex: 0 1 auto;
    margin: 0 10px 5px 0;
    padding: 1px;
    border-radius: 10px;

    .label {
      display: flex;
      align-items: center;
      color: var(--primary);
      justify-content: center;
      border-radius: 9px 0 0 9px;
      padding: 0 5px 0 8px;

      .d-icon {
        margin-right: 5px;
        font-size: var(--font-down-1);
      }
    }

    .value {
      background: var(--secondary);
      border-radius: 0 9px 9px 0;
      padding: 0 8px 0 5px;
    }

    &.user-newuser {
      .label {
        color: var(--primary-high);
      }
    }
    &.user-basic,
    &.user-member {
      background: var(--bronze);
      .label {
        color: var(--secondary);
      }
    }
    &.user-regular {
      background: var(--silver);
      .label {
        color: var(--secondary);
      }
    }
    &.user-leader {
      background: var(--gold);
      .label {
        color: var(--secondary);
      }
    }
  }
}

.rtl .dashboard-next {
  .section-column {
    &:last-child {
      margin-right: 1em;
      margin-left: 0;
    }

    &:first-child {
      margin-left: 1em;
      margin-right: 0;
    }
  }

  .user-metrics .table-cell {
    margin: 0 0 5px 10px;
  }

  .table-cell {
    .label {
      border-radius: 0 9px 9px 0;

      .d-icon {
        margin-right: 0;
        margin-left: 5px;
      }
    }

    .value {
      border-radius: 9px 0 0 9px;
      padding: 0 5px 0 8px;
    }
  }
}

.users-by-trust-level,
.users-by-type {
  margin-bottom: 2em;
}

.community-health.section {
  margin-bottom: 2em;
}

.dashboard-moderation,
.dashboard-security {
  .section-body {
    margin-bottom: 2em;
  }

  .main-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;

    > * {
      grid-column: span 12;
    }

    .admin-dashboard-security-bottom-outlet,
    .admin-dashboard-moderation-bottom-outlet {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: 1em;
      grid-row-gap: 1em;
    }
  }

  .admin-report {
    grid-column: span 12;
  }
}

.dashboard-moderation {
  .admin-dashboard-moderation-top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }
}

.version-checks {
  display: flex;
  flex-wrap: wrap;

  .section-title {
    flex: 1 1 100%;
    border-bottom: 1px solid var(--primary-low);
    padding-bottom: 0.5em;
  }

  h2 {
    margin: 0;
  }
}

.version-check {
  display: flex;
  flex: 1 1 50%;
  flex-wrap: wrap;
  align-items: flex-start;
  align-self: flex-start;
  justify-content: space-between;
  padding-top: 1em;

  .update-header {
    flex: 1 1 100%;

    @media screen and (max-width: 650px) {
      margin: 0;
    }

    tr {
      border: none;
    }

    th {
      background: transparent;
      padding: 0;
    }
  }

  h2 {
    flex: 1 1 100%;
  }

  .version-number {
    font-size: var(--font-up-2);
    line-height: var(--line-height-small);
    box-sizing: border-box;
    font-weight: bold;
    margin-bottom: 2em;
    margin-right: 1em;
    flex: 1 1 27%;

    h3 {
      flex: 1 0 auto;
      margin: 0;
      white-space: nowrap;
    }

    h4 {
      font-size: var(--font-down-2);
      margin-bottom: 0.5em;
    }

    .sha-link {
      display: inline-flex;
      font-size: var(--font-down-2);
      font-weight: normal;
    }
  }

  .version-status {
    display: flex;
    align-items: center;
    margin: 0 0 1em 0;
    flex: 1 1 24%;
    box-sizing: border-box;
    padding-right: 20px;
    min-width: 250px;
    @include breakpoint(medium) {
      max-width: unset;
    }
    .face {
      margin: 0 0.75em 0 0;
      font-size: var(--font-up-3);
    }
  }
  &.critical .version-notes .normal-note {
    display: none;
  }
  &.normal .version-notes .critical-note {
    display: none;
  }
  .fa {
    font-size: var(--font-up-4);
  }
  .up-to-date {
    color: var(--success);
  }
  .updates-available {
    color: var(--danger);
  }
  .critical-updates-available {
    color: var(--danger);
  }
}

.update-nag {
  .d-icon {
    font-size: var(--font-up-3);
  }
}

.dashboard-next.general {
  display: flex;
  flex-direction: column;
}

.dashboard-new-features {
  &.ordered-first {
    order: -1;
  }

  &:not(.ordered-first) {
    .new-features-dismiss {
      display: none;
    }
  }

  .section-footer {
    margin: 1.5em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      margin-left: 1em;
    }
  }
}

.whats-new,
.dashboard {
  .admin-config-area-card__title {
    font-size: var(--font-up-1);
    margin-bottom: 1em;
  }
  .admin-new-feature-item__learn-more {
    display: inline-block;
  }
}

.admin-new-feature-item__header-experimental {
  color: var(--tertiary);
  background-color: var(--tertiary-very-low);
  padding: 0.5em;
  font-size: var(--font-down-3);
  margin-left: 0.5rem;
  font-weight: 400;
  border-radius: var(--d-border-radius);
  display: inline-block;
}

.admin-new-feature-item__body {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
  .d-toggle-switch {
    margin-left: 1em;
    align-items: flex-start;
  }
  p {
    margin-top: 0;
  }
}

.admin-new-feature-item__screenshot {
  margin-bottom: 1em;
}
.admin-new-feature-item__tooltip-header {
  font-weight: bold;
}
.admin-new-feature-item__tooltip-content {
  margin-top: 0.5em;
}

.admin-new-feature-item {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--primary-low);
  &:not(:first-child) {
    margin-top: var(--space-4);
  }
  &:last-child {
    border-bottom: none;
  }

  &__new-feature-emoji {
    font-size: 1.2em;
    padding-left: 0;
    padding-right: 0.5em;
  }

  &__content {
    width: 100%;
  }
  &__header {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  &__screenshot {
    width: 100%;
  }
  &__new-feature-version {
    margin-left: auto;
    color: var(--primary-low-mid);
  }
}