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

@use "lib/viewport";

// For /admin/api/webhooks
.d-table.admin-web_hooks__items {
  .d-table__cell {
    &.key-url {
      word-break: break-all;
      white-space: normal;
    }

    &.key-description {
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
}

// For /admin/api/keys
.d-table.admin-api_keys__items {
  .d-table__cell.key {
    display: flex;
  }
}

// Api keys
.admin-api-keys {
  .form-kit__container-optional {
    display: none;
  }

  .scopes-table__object {
    display: contents;
  }

  .form-kit__collection {
    display: contents;
  }

  .api-key-show {
    .form-element,
    .form-element-desc {
      &.input-area {
        width: 75%;

        @include viewport.until(sm) {
          width: 100%;
        }

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

      &.label-area {
        width: 25%;

        label {
          margin-right: 1em;
        }
      }
    }
  }

  .generated-api-key-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .generated-api-key-container .alert {
    margin-bottom: 0;
  }

  .generated-api-key {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-family: var(--d-font-family--monospace);
    font-size: var(--font-down-1);
    background: var(--primary-very-low);
    border: 1px solid var(--primary-low);
    border-radius: var(--d-border-radius);
    user-select: all;
    word-break: break-all;

    &__details {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      background: var(--primary-very-low);
      border-radius: var(--d-border-radius);
    }

    &__detail-row {
      display: flex;
      gap: var(--space-2);
    }

    &__label {
      font-weight: bold;
      min-width: 8em;
    }

    &__scope-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-1);
    }

    &__scope-badge {
      display: inline-block;
      padding: 0.15em 0.5em;
      font-family: var(--d-font-family--monospace);
      font-size: var(--font-down-1);
      background: var(--primary-very-low);
      border: 1px solid var(--primary-low);
      border-radius: var(--d-border-radius);
    }

    &__scope-param {
      color: var(--primary-medium);
    }

    &__key-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
  }

  .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 {
      margin-top: 20px;
    }
  }

  .scopes-table.grid {
    margin: 20px 0;

    tr {
      grid-template-columns: repeat(4, 1fr);

      input {
        margin-bottom: 2px;
      }

      @include viewport.until(sm) {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0.5em;

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

    .scope-resource-name {
      font-size: var(--font-up-1);
    }

    .scope-tooltip {
      font-size: var(--font-down-1);
    }

    .scope-name {
      font-weight: bold;
      font-size: var(--font-0);
      display: inline;
    }
  }
}

// Webhook
.web-hook-container {
  .tip.good:empty {
    display: none;
  }

  .event-selector {
    display: grid;
    grid-template-columns: auto auto;
    margin: 0.5em 0;
    margin-left: 1.5em;

    .event-group {
      display: inline-block;
      margin-bottom: 1em;
    }

    .hook-event {
      margin-bottom: 0.5em;

      @include viewport.until(sm) {
        width: 100%;
      }
    }
  }

  > p {
    padding-bottom: 10px;
    border-bottom: var(--primary-low) 1px solid;
  }

  .filters {
    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;

    label {
      display: inline-block;
    }
  }
}

.admin-webhooks__summary {
  margin-bottom: 1rem;
}

.admin-webhooks__edit-button,
.admin-webhooks__delete-button {
  font-size: var(--font-0-rem);
}

.web-hook-events {
  .heading-container {
    width: 100%;
    background-color: var(--primary-low);
  }

  li {
    padding: 2px 0;
  }

  .col {
    display: inline-block;
    padding-top: 6px;
    vertical-align: top;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .col.heading {
    font-weight: bold;
    padding: 4px 0;
  }

  .col.heading.actions {
    padding: 4px 0;
  }

  .col.first {
    width: 90px;
  }

  .col.event-id {
    width: 90px;
  }

  .col.timestamp {
    width: 180px;
  }

  .col.completion {
    width: 250px;
  }

  .col.actions {
    padding-top: 0;

    a {
      text-decoration: underline;
    }
  }

  .details {
    display: block;
    margin-top: 1rem;
  }

  label {
    font-size: var(--font-0);
  }

  &.content-list {
    width: 100%;
  }
}

.web-hook-events-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

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

.hook-event {
  display: inline-block;
  width: 100%;

  label {
    display: inline-block;
  }

  p {
    margin: 0 0 5px 25px;
  }
}