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

// Styles for admin/api

table.web-hooks.grid {
  td.delivery-status {
    div {
      display: flex;
      align-items: center;
    }
    .d-icon {
      margin-right: 0.25em;
    }
  }
  td.payload-url {
    word-wrap: break-word;
    max-width: 55vw;
  }
  td.controls {
    display: flex;
    button {
      margin-left: 0.25em;
    }
  }
  @media screen and (min-width: 550px) {
    tbody {
      tr {
        grid-template-columns: 0.5fr repeat(2, 1fr) 0.5fr;
      }

      td.controls {
        text-align: right;
      }
    }
  }
  @include breakpoint(mobile-extra-large) {
    tbody {
      tr {
        grid-template-columns: 0.5fr 1fr;
      }
    }
    td.controls {
      grid-row: 2;
    }
  }
}

// Api keys

table.api-keys {
  margin-bottom: 0.25em;

  .key-controls {
    text-align: right;
  }

  tr.revoked {
    color: var(--primary-medium);
  }

  @include breakpoint(tablet) {
    tr {
      grid-template-columns: 0.25fr 1fr 1fr;
    }
    td.key {
      grid-row: 1;
      grid-column-start: 1;
      grid-column-end: 1;
      max-width: 100%;
    }
    td.key-description {
      grid-row: 1;
      grid-column-start: 2;
      grid-column-end: -1;
      max-width: 100%;
    }
    td.key-user {
      grid-row: 2;
      grid-column-start: 1;
    }
    td.key-controls {
      grid-row: 2;
      grid-column-end: -1;
      grid-column-start: 2;
      text-align: right;
      .btn {
        margin-bottom: 0.25em;
      }
    }
  }
}

.admin-api-keys {
  h2 {
    margin-bottom: 10px;
  }
  .api-key-new {
    .form-element,
    .form-element-desc {
      &.input-area {
        width: 100%;

        .value-list,
        .select-kit,
        input[type="text"] {
          width: 100%;
          margin: 0;
        }

        @include breakpoint(mobile-extra-large, min-width) {
          width: 75%;
          .value-list,
          .select-kit,
          input[type="text"] {
            width: 50%;
          }
        }
      }
      &.label-area {
        label {
          margin: 0.5em 1em 0 0;
        }
        @include breakpoint(mobile-extra-large, min-width) {
          width: 25%;
        }
      }
    }
  }
  .api-key-show {
    .form-element,
    .form-element-desc {
      &.input-area {
        width: 75%;

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

        .value-list,
        .select-kit,
        input[type="text"] {
          width: 50%;
          margin: 0;
        }
      }
      &.label-area {
        width: 25%;
        label {
          margin-right: 1em;
        }
      }
    }
  }

  .api-key {
    padding: 10px;
    margin-bottom: 10px;
    .form-element,
    .form-element-desc {
      float: left;
      padding: 0.5em 0;
      &.input-area {
        input[type="checkbox"] {
          margin-top: 0.5em;
        }
        .ac-wrap {
          width: 50% !important;
        }
      }
      &.label-area {
        label {
          text-align: left;
          font-weight: bold;
        }
      }
    }
    .controls {
      float: right;
      text-align: left;
      width: 50%;
    }
    .scopes-title {
      font-size: $font-up-2;
      font-weight: bold;
      text-decoration: underline;
      margin-top: 20px;
    }
  }
  .scopes-table.grid {
    margin: 20px 0;

    tr {
      grid-template-columns: repeat(4, 1fr);
      input {
        margin-bottom: 2px;
      }

      @include breakpoint(mobile-large) {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 0.5em;

        &.scope-resource-name {
          grid-row-gap: 0;
        }
      }
    }

    .scope-resource-name {
      font-size: $font-up-1;
    }

    .scope-tooltip {
      font-size: $font-down-1;
    }

    .scope-name {
      font-weight: bold;
      font-size: $font-0;
      display: inline;
    }
  }
}

// Webhook
.web-hook-container {
  .tip.good:empty {
    display: none;
  }
  input {
    max-width: calc(100% - 10px);
  }
  .select-kit,
  .select-kit.multi-select {
    width: 100%;
    max-width: 360px;
  }

  .event-selector {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5em 0;

    .hook-event {
      margin-bottom: 0.5em;
      @include breakpoint(mobile-extra-large) {
        width: 100%;
      }
    }
  }

  > p {
    padding-bottom: 10px;
    border-bottom: var(--primary-low) 1px solid;
  }
  .filters {
    margin: 5px 0;
    padding-bottom: 5px;
    border-bottom: var(--primary-low) 1px solid;
    .filter {
      margin-bottom: 1em;
    }
    label .d-icon {
      margin-right: 0.25em;
    }
  }
  .instructions {
    margin-top: 5px;
  }
  .subscription-choice {
    margin-bottom: 10px;
  }
}

.web-hook-direction {
  button {
    margin-right: 10px;
  }
}

.web-hook-events {
  li {
    padding: 2px 0;
  }
  .col {
    display: inline-block;
    padding-top: 6px;
    vertical-align: top;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .col.first {
    width: 90px;
  }
  .col.event-id {
    width: 90px;
  }
  .col.timestamp {
    width: 180px;
  }
  .col.completion {
    width: 250px;
  }
  .col.actions {
    width: 455px;
    padding-top: 0;
    a {
      text-decoration: underline;
    }
  }
  .col.heading.actions {
    padding: 4px 0;
  }
  .details {
    display: block;
    margin-top: 10px;
  }
  label {
    font-size: $font-0;
  }
  &.content-list {
    width: 100%;
  }
}

.web-hook-events-listing {
  margin-top: 15px;
  .alert {
    margin: 15px 0 0 0;
  }
}

.hook-event {
  display: inline-block;
  width: 40%;
  margin-left: 20px;
  label {
    display: inline-block;
  }
  p {
    margin: 0 0 5px 25px;
  }
}