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

// Styles for /admin section

@import "common/foundation/helpers";

$mobile-breakpoint: 700px;

// Common admin styles

.admin-main-nav {
  display: inline-flex;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;

  @include breakpoint(tablet) {
    width: calc(100% + 10px);
    margin-left: -10px;
    padding: 0 0 0 10px;
  }

  .nav-pills {
    display: inline-flex;
    flex-wrap: wrap;
    width: calc(100% - 10px);
    flex: 1 0 auto;
    margin-top: 0;
    @include breakpoint(tablet) {
      white-space: nowrap;
      flex-wrap: nowrap;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      margin: 0 0 0 -10px;
      padding: 0 10px 10px 10px;
    }
    &:before {
      display: none;
    }
    > li {
      margin: 0;
      &:last-of-type {
        > a {
          margin-right: 25px;
        }
      }
    }
  }
  @include breakpoint(tablet) {
    // Fade-out for horizontal scroll nav
    &:before {
      content: "";
      position: absolute;
      width: 10px;
      margin-left: -10px;
      height: 100%;
      background: linear-gradient(
        to right,
        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)
      );
    }
  }
}

.admin-contents {
  position: relative;
  .nav-stacked {
    @media screen and (max-width: 700px) {
      margin: 0 15px 0 -10px;
    }
  }

  .row:before,
  .row:after {
    display: table;
    content: "";
  }
  .row:after {
    clear: both;
  }
}

.admin-contents table {
  width: 100%;
  margin-top: 10px;

  tr {
    text-align: left;
  }
  td,
  th {
    padding: 8px;
  }
  tr:hover {
    background-color: var(--primary-very-low);
  }
  tr.selected {
    background-color: var(--primary-low);
  }
  .filters input {
    margin-bottom: 0;
  }
  .label {
    display: none;
  }

  @media screen and (max-width: 970px) and (min-width: 768px) {
    td,
    th {
      padding: 6px 4px;
    }
    th {
      vertical-align: bottom;
    }
    th.sortable {
      max-width: 100px;
    }
  }
}

.admin-contents table.grid {
  // Table switches to grid for narrow screens
  @media screen and (max-width: 767px) {
    thead {
      display: none;
    }
    .label {
      display: block;
      color: var(--primary-medium);
      font-size: var(--font-down-1);
      margin: 0.5em 0 0.15em 0;
    }
    tr {
      grid-template-columns: repeat(3, 1fr);
      display: grid;
      line-height: var(--line-height-medium);
      padding: 8px 0;
      min-width: 0;
      td {
        padding: 2px;
        align-self: center;
      }
    }

    tr.flagged-topic {
      grid-template-columns: 0.25fr 1fr 1fr;
      td.topic-title {
        grid-column-start: 2;
        grid-column-end: -2;
        min-width: 0;
        align-self: start;
      }
      td.last-flagged {
        grid-row: 1;
        grid-column-end: -1;
        text-align: right;
        align-self: start;
      }
      td.flag-details {
        grid-row: 2;
        grid-column-end: -1;
        text-align: right;
      }
      td.flagged-topic-users {
        grid-row: 1;
        grid-column-start: 1;
        max-width: 60px;
        align-self: start;
        a {
          display: inline-block;
          margin: 0 0.25em 0.25em 0;
        }
      }
      td.flag-counts {
        grid-row: 2;
        grid-column-start: 2;
      }
    }
  }

  @media screen and (min-width: 550px) {
    tr {
      grid-template-columns: repeat(6, 1fr);
    }
  }
}

.site-texts {
  .search-area {
    margin-bottom: 2em;
    p {
      margin-top: 0;
    }
    .site-text-search {
      padding: 0.5em;
      font-size: var(--font-0);
      width: 50%;
    }
    .reseed {
      float: right;
    }
    .locale {
      margin-bottom: 0.5em;
    }
    .locale-search {
      width: 50%;
    }
  }
  .text-highlight {
    font-weight: bold;
  }
  .site-text {
    cursor: pointer;
    border-bottom: 1px solid var(--primary-low);
    margin-bottom: 0.5em;
    &.overridden {
      background-color: var(--highlight-bg);
    }
    h3 {
      font-weight: normal;
      font-size: var(--font-0);
      @include breakpoint(mobile-extra-large) {
        word-wrap: break-word;
      }
    }
    button.edit {
      float: right;
    }

    $maxHeight: 8 * 1.4em;
    $gradientHeight: 2.2em;

    .site-text-value {
      margin: 0.5em 5em 0.5em 0;
      max-height: $maxHeight;
      overflow: hidden;
      position: relative;
      &::after {
        content: " ";
        position: absolute;
        background-color: red;
        left: 0;
        right: 0;
        top: $maxHeight - $gradientHeight;
        height: $gradientHeight;
        background: linear-gradient(
          to top,
          rgba(var(--secondary-rgb), 1),
          rgba(var(--secondary-rgb), 0.15)
        );
      }
      @include breakpoint(mobile-extra-large) {
        word-wrap: break-word;
        max-width: 80vw;
        margin-right: 3em;
      }
      color: var(--primary-medium);
    }
  }
  .edit-site-text {
    textarea {
      width: 100%;
      max-width: 800px;
    }
    .save-button,
    .title {
      margin-bottom: 1em;
    }
    @include breakpoint(mobile-extra-large) {
      .title {
        word-wrap: break-word;
      }
    }
    .go-back {
      margin-top: 1em;
    }
  }
  p.warning {
    color: var(--danger);
  }
}

.content-list {
  width: 27%;
  float: left;
  li a span.count {
    font-size: var(--font-down-1);
    float: right;
    margin-right: 10px;
    background-color: var(--primary-low);
    padding: 2px 5px;
    border-radius: 5px;
    color: var(--primary);
  }
}

.content-body {
  float: left;
  width: 60%;
}

.admin-content {
  margin-bottom: 50px;
  .admin-contents {
    padding: 0 0 8px 0;
    @include clearfix();
  }
  .view-options {
    float: right;
  }
  table.report {
    margin-top: 20px;
    tr {
      th:nth-of-type(1) {
        width: 20%;
      }
    }

    tr.total-for-period,
    tr.total {
      td {
        font-weight: 700;
      }
    }

    &.web_crawlers {
      tr {
        th:nth-of-type(1) {
          width: 60%;
        }
      }
      td.x-value {
        max-width: 0;
        @include ellipsis;
      }
    }
    .bar-container {
      float: left;
      width: 300px;
      margin-right: 15px;
      margin-bottom: 5px;

      .bar {
        margin-top: 5px;
        background-color: var(--tertiary);
        display: inline-block;
        text-align: right;
        padding-right: 8px;
        color: var(--secondary);
      }
    }
  }
}

.full-reason {
  white-space: pre-wrap;
}

.admin-users .users-list {
  .username .d-icon {
    color: var(--primary-medium);
  }
}

.ip-lookup {
  position: relative;
  display: inline-block;
  .location-box {
    position: absolute;
    width: 460px;
    right: 0;
    z-index: z("dropdown");
    box-shadow: shadow("card");
    margin-top: -2px;
    background-color: var(--secondary);
    padding: 12px 12px 5px;
    .powered-by {
      font-size: var(--font-down-1);
      position: absolute;
      bottom: -10px;
      left: 10px;
    }
    .other-accounts {
      margin: 5px 0 0;
      max-height: 200px;
      overflow: auto;
      width: 455px;
      ul {
        margin: 0;
      }
      li {
        list-style: none;
      }
      tr td:first-of-type {
        width: 130px;
      }
    }
  }
}

.admin-container {
  margin-top: 10px;

  .username {
    input {
      min-width: 15em;
      @media screen and (max-width: 500px) {
        box-sizing: border-box;
        width: 100%;
      }
    }
  }
  .select-kit {
    width: 350px;
  }
  .select-kit.multi-select {
    width: 500px;
  }
  .select-kit.dropdown-select-box {
    width: auto;
  }
  .search-logs-filter {
    margin-left: auto;
    @media screen and (max-width: 700px) {
      flex: 1 1 100%;
      margin-left: 0;
    }
  }

  .header-search-results {
    clear: both;
    padding: 4px;
  }

  .controls {
    @include clearfix;
  }
  .users-list-container {
    overflow-x: auto;
  }
}

.admin-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  .show-emails,
  .hide-emails {
    margin-left: auto;
  }
}

.admin-controls {
  display: flex;
  background-color: var(--primary-low);
  align-items: center;

  .admin-actions {
    margin-left: auto;
  }
  nav {
    background-color: var(--primary-low);
    width: 100%;
  }
  nav {
    display: inline-flex;
    position: relative;
    flex: 1 0 0px;
    height: auto;
    overflow: hidden;
    padding: 0;
    height: 100%;
    @include breakpoint(tablet) {
      width: calc(100% + 10px);
      padding-left: 10px;
      margin-left: -10px;
      margin-right: -10px;
    }

    &:before {
      // Fade out sides of horizontal nav
      content: "";
      position: absolute;
      width: 10px;
      left: 0;
      height: calc(100% - 5px);
      background: linear-gradient(
        to right,
        rgba(var(--primary-low-rgb), 1),
        rgba(var(--primary-low-rgb), 0)
      );
    }

    &:after {
      content: "";
      position: absolute;
      right: 0px;
      width: 15px;
      height: calc(100% - 5px);
      background: linear-gradient(
        to right,
        rgba(var(--primary-low-rgb), 0),
        rgba(var(--primary-low-rgb), 1)
      );
    }
  }

  .nav-pills {
    width: calc(100% - 10px);
    display: inline-flex;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
    overflow-x: auto;
    @include breakpoint(tablet) {
      margin-left: -10px;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
    }

    &:before {
      display: none;
    }
    > li {
      margin: 0;
      a.active {
        background: var(--primary-medium);
      }
    }
  }
  h1 {
    font-size: var(--font-up-3);
    line-height: var(--line-height-medium);
    color: var(--primary);
  }
  .controls {
    background: var(--primary-low);
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    .inline-form {
      // Hacky, but fixes email preview summary
      margin-bottom: -0.5em;
      > div {
        margin-right: 0.5em;
      }
    }

    @include breakpoint(mobile-extra-large) {
      margin: 0 -10px;
    }
    input {
      @include breakpoint(tablet) {
        max-width: 150px;
      }
    }
    &.search {
      width: auto;
      white-space: nowrap;
      label {
        flex: 1 1 250px;
        display: flex;
        align-items: center;
        input {
          margin-right: 0.5em;
        }
      }
    }
  }
  .menu-toggle {
    border-color: var(--primary-medium);
    border-radius: 3px;
    background: transparent;
    color: var(--primary);
    &:hover {
      background-color: var(--primary-low-mid);
    }

    .not-mobile-device & {
      display: none;
    }
  }

  .result-message {
    display: inline-block;
    padding-left: 10px;
  }

  .search {
    label {
      margin-bottom: 0px;
    }

    // Hide the search checkbox for very small screens
    // Todo: find somewhere to display it - probably requires switching its order in the html
    @media (max-width: 550px) {
      display: none;
    }
  }

  .toggle {
    span {
      font-weight: bold;
    }
  }
  label {
    display: inline-block;
    margin-right: 5px;
  }

  .horizontal-overflow-nav__scroll-right,
  .horizontal-overflow-nav__scroll-left {
    --fade-color: var(--primary-low-rgb);
    background: var(--primary-low);
  }
}

.badges,
.web-hook-container {
  input[type="text"],
  textarea {
    min-width: 350px;
  }
}

.text-successful {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.text-muted {
  color: var(--primary-medium);
}

.admin-nav {
  width: 18%;
  box-sizing: border-box;
  position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
  @media (max-width: $mobile-breakpoint) {
    position: absolute;
    z-index: z("base") - 1;
    width: 250px;
  }
  @media (max-width: 500px) {
    width: 50%;
  }
}

.admin-detail {
  background-color: var(--secondary);
  margin-left: 0;
  border-left: solid 1px var(--primary-low);
  padding: 30px 0 30px 30px;
  width: 82%;
  box-sizing: border-box;
  @media (max-width: $mobile-breakpoint) {
    width: 95%;
    border: none;
  }
}

.admin-detail.mobile-open {
  @media (max-width: $mobile-breakpoint) {
    transition: transform 0.3s ease;
    @include transform(translateX(250px));
  }
  @media (max-width: 500px) {
    transition: transform 0.3s ease;
    @include transform(translateX(50%));
  }
}

.admin-detail.mobile-closed {
  @media (max-width: $mobile-breakpoint) {
    transition: transform 0.3s ease;
    @include transform(translateX(0));
    margin-left: -10px;
  }
}

section.details {
  h1 {
    font-size: var(--font-up-3);
    color: var(--primary);
    padding: 5px 10px;
    margin: 30px 0 5px 0;
    border-bottom: 5px solid var(--primary-low);
  }
}

.user-controls {
  padding: 5px;
  clear: both;
  text-align: right;
  .btn {
    line-height: var(--line-height-medium);
  }
  @media (max-width: $mobile-breakpoint) {
    .btn {
      margin: 2px;
    }
  }
}

.row.groups {
  input[type="text"] {
    width: 500px;
  }
  input#group-users {
    width: 600px;
  }
}

// Ember.ListView
.ember-list-view {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.ember-list-item-view {
  position: absolute;
}

.tl3-requirements {
  .d-icon-check {
    color: var(--success);
  }
  .d-icon-times {
    color: var(--danger);
  }
}

@media all and (min-width: 320px) and (max-width: 500px) {
  .full-width {
    margin: 0;
  }
  .site-settings-nav {
    width: 100%;
  }
  .site-settings-detail {
    width: 100%;
    padding: 0;
    border: none;
    .settings .setting {
      .setting-label {
        float: left;
        width: 100%;
        h3 {
          margin-bottom: 5px;
          font-weight: bold;
          margin-top: 25px;
        }
      }
      .setting-value {
        width: 100%;
      }
    }
  }
  .content-editor {
    width: 100%;
  }
  div.ac-wrap {
    width: 100% !important;
    box-sizing: border-box;
  }

  .dashboard-left,
  .dashboard-right {
    width: 100%;
  }
  .dashboard-stats {
    margin: 0;
  }
  .badges {
    .current-badge {
      margin: 70px 0 0 0;
    }
    .current-badge-actions {
      padding: 0;
    }
  }
  .customize .content-list,
  .customize .current-style {
    width: 100%;
  }
}

.directory-table {
  .not-activated {
    .directory-table__cell {
      &,
      a,
      a:visited {
        color: #bbb;
      }
    }
  }
}

.preview {
  margin-top: 5px;
}

table#user-badges {
  .reason {
    max-width: 200px;
  }
}

@mixin value-btn {
  width: 29px;
  border: 1px solid var(--primary-low);
  outline: none;
  padding: 0;

  &:focus {
    border-color: var(--tertiary);
  }
}

.value-list {
  .value {
    padding: 0.125em 0;
    @include ellipsis;
    display: flex;

    &:last-child {
      border-bottom: none;
    }

    .value-input {
      box-sizing: border-box;
      flex: 1 0 0px;
      border-color: var(--primary-low);
      cursor: pointer;
      margin: 0;

      &:focus {
        border-color: var(--tertiary);
        box-shadow: none;
      }
    }

    .remove-value-btn {
      @include value-btn;
      margin-right: 0.25em;
    }

    .shift-up-value-btn,
    .shift-down-value-btn {
      display: none;
      margin-inline: 0.25em;
    }

    &:hover {
      .shift-up-value-btn,
      .shift-down-value-btn {
        display: block;
      }
    }
  }
  .values {
    margin-bottom: 0.5em;
  }
}

.emoji-value-list {
  margin-left: 0;

  .emoji-details {
    @include form-item-sizing;
    display: flex;
    align-items: center;
    min-height: 30px;
    color: var(--primary);
    border-color: var(--primary-low);
    padding-left: 10px;
    padding-right: 10px;

    .emoji-name {
      margin-left: 0.5em;
    }

    &:not(.can-edit) {
      pointer-events: none;
      background-color: var(--primary-very-low);
    }
  }

  .value-input {
    flex-direction: row;
  }
}

.value .add-emoji-button {
  display: block;
  background-color: var(--primary-low);
  border: none;
}

.value .add-value-btn,
.shift-up-value-btn,
.shift-down-value-btn {
  @include value-btn;
  margin-right: 0 !important;
  margin-left: 0.25em;
}

.secret-value-list {
  .value {
    flex-flow: row wrap;
    margin-left: -0.25em;
    margin-top: -0.125em;
    .new-value-input {
      flex: 1 0 0px;
    }
    .value-input,
    .new-value-input {
      margin-top: 0.125em;
      &:last-of-type {
        margin-left: 0.25em;
      }
    }
    .remove-value-btn {
      margin-left: 0.25em;
      margin-top: 0.125em;
    }
    .add-value-btn {
      @include value-btn;
      margin-left: 0.25em;
      margin-top: 0.125em;
    }
    .new-value-input {
      margin-left: 0.25em;
    }
  }
}

.mobile-view .secret-value-list {
  .add-value-btn {
    margin-bottom: 9px;
  }
  .value {
    .value-input:last-of-type {
      margin-left: 2.35em;
    }
    .new-value-input:first-of-type {
      margin-right: 2.15em;
      margin-left: 0.25em;
    }
  }
}

.simple-list-input {
  display: flex;

  .add-value-input {
    margin: 0;
    box-sizing: border-box;
    flex: 1 0 0px;
  }

  .add-value-btn {
    margin-left: 0.25em;
  }
}

.mobile-view .full-width {
  margin: 0;
}

// Mobile specific style for Admin IP Lookup box
.mobile-view .admin-contents .ip-lookup .location-box {
  width: 300px;
  left: -100%;
}

.inline-edit label {
  display: inline-block;
  margin-right: 20px;
}

a.inline-editable-field {
  color: var(--primary);
  cursor: pointer;
}

// Styles for subtabs in admin
@import "common/admin/dashboard";
@import "common/admin/settings";
@import "common/admin/users";
@import "common/admin/penalty";
@import "common/admin/badges";
@import "common/admin/emails";
@import "common/admin/json_schema_editor";
@import "common/admin/staff_logs";
@import "common/admin/customize";
@import "common/admin/customize-install-theme";
@import "common/admin/api";
@import "common/admin/backups";
@import "common/admin/plugins";
@import "common/admin/admin_reports";
@import "common/admin/admin_report";
@import "common/admin/admin_report_counters";
@import "common/admin/admin_report_chart";
@import "common/admin/admin_report_stacked_chart";
@import "common/admin/admin_report_table";
@import "common/admin/admin_report_inline_table";
@import "common/admin/admin_intro";
@import "common/admin/admin_emojis";
@import "common/admin/mini_profiler";