@import (reference) "djblets/css/config-forms.less";

@import (reference) "rb/css/defs.less";


#custom_policy_editor {
  margin: 0;
  width: 65em;

  p {
    font-size: 110%;
    margin: 1em;
  }

  .CodeMirror {
    border-left: 0;
    border-right: 0;
  }
}

#page_authentication {
  /**
   * The API tokens configuration.
   *
   * Structure:
   *     <div class="rb-c-config-api-tokens">
   *      <div class="rb-c-config-api-tokens__main">
   *       <div class="rb-c-config-api-tokens__value">
   *        <input readonly="readonly" value="...">
   *       </div>
   *       <span class="fa fa-clipboard js-copy-token" title="Copy to clipboard"></span>
   *      </div>
   *      <div class="rb-c-config-api-tokens__info">
   *       <p class="rb-c-config-api-tokens__deprecation-notice">...</p>
   *       <p class="rb-c-config-api-tokens__token-state">...</p>
   *       <p class="rb-c-config-api-tokens__usage">...</p>
   *      </div>
   *      <div class="rb-c-config-api-tokens__actions"></div>
   *      <span class="rb-c-config-api-tokens__note"></span>
   *     </div>
   */
  .rb-c-config-api-tokens {
    &__actions {
      white-space: nowrap;
    }

    /**
     * Displays a deprecation notice for token.
     *
     * If the token is deprecated, this will display a deprecation notice. If
     * it is not deprecated this will display nothing.
     *
     * Structure:
     *     <p class="rb-c-config-api-tokens__deprecation-notice">...</p>
     */
    &__deprecation-notice {
      &:before {
        content: @fa-var-warning;

        // This must be set in order for the FA icon to display properly.
        font-family: 'FontAwesome';
      }
    }

    &__info {
      line-height: 0;
    }

    &__main {
      align-items: center;
      display: flex;
      white-space: normal;
    }

    &__note {
      color: #888;

      &.empty {
        color: #CCC;
        font-style: italic;
      }
    }

    /**
     * Displays the state of the token.
     *
     * This will display whether the token expires, is expired, or is invalid.
     *
     * Modifiers:
     *     -has-expires:
     *         The token is valid and has a future expiration date. The
     *         expiration date will be shown.
     *
     *     -is-expired:
     *         The token is expired. The date that the token expired on
     *         will be shown.
     *
     *     -is-invalid:
     *         The token is invalid. The date that the token was invalidated
     *         on will be shown.
     *
     * Structure:
     *     <p class="rb-c-config-api-tokens__token-state [modifiers]">...</p>
     */
    &__token-state {
      &.-is-expired,
      &.-is-invalid {
        color: red;
      }

      input.save {
          margin-left: 0.5em;
      }
    }

    /**
     * Displays information on how the token has been used.
     *
     * Modifiers:
     *     -has-last-used:
     *         The token is valid and has been used before. The date that
     *         the token was last used will be shown.
     *
     * Structure:
     *     <p class="rb-c-config-api-tokens__usage [modifiers]">...</p>
     */
    &__usage {}

    &__value {
      font-family: var(--ink-ff-monospace);
      font-size: 120%;
      flex-grow: 1;
      margin-right: 1em;

      input {
        font-family: var(--ink-ff-monospace);
        text-overflow: ellipsis;
        width: 100%;

        &:not(:hover) {
          border-color: transparent;
        }
      }
    }

    .js-copy-token {
      font-size: 120%;
      cursor: pointer;
    }

    .config-forms-list-action-label-policy-custom {
      color: var(--ink-p-link-fg);
      cursor: pointer;
      text-decoration: underline;
    }

    .config-forms-list-action-policy {
      text-align: right;
    }

    .rb-icon {
      vertical-align: middle;
    }
  }
}

#page_groups {
  .config-group-display-name {
    color: #A0A0A0;
    font-size: 90%;
  }

  .config-group-name {
    display: inline-block;
    min-width: 15em;
    padding-right: 2em;
  }

  .config-forms-list-action-join,
  .config-forms-list-action-leave {
    min-width: 3em;
  }
}

#page_oauth2 {
  .app-entry-wrapper {
    overflow: hidden;
  }

  .config-app-name {
    &.disabled a {
      font-style: italic;
    }

    .rb-icon {
      vertical-align: middle;
    }

    a {
      vertical-align: middle;
    }
  }

  .disabled-warning {
    margin-bottom: 1em;
  }

  p {
    line-height: normal;
  }
}

.oauth-add-app {
  margin-top: 1em;
}

.edit-oauth2-app {
  #id_client_secret_container:extend(
    #application_form #id_client_secret_container) {}

  #id_redirect_uris_container li {
    padding: 0.25em 0;
  }

  .box-main {
    padding: 0;
  }

  .list-edit-widget ul {
    list-style: none;
  }

  .regenerate-secret-button {
    margin-top: 1px;
  }
}
