@import (reference) "defs.less";

@img-base: '../images/config-forms';

@config-forms-box-bg: #F3F3F3;
@config-forms-box-padding: 1em;
@config-forms-box-border-radius: 6px;

@config-forms-list-bg-color: #FFFFFF;
@config-forms-list-border-color: #AAAAAA;
@config-forms-list-item-border-color: #E9E9E9;
@config-forms-list-item-hover-bg-color: #FAFAFA;
@config-forms-list-item-line-height: 32px;
@config-forms-list-item-padding: 0.3em 0.3em 0.3em 1.5em;

@config-forms-side-nav-width: 17em;
@config-forms-forms-width: 60em;
@config-forms-container-padding: 1em;
@config-forms-gap: 2em;

@config-forms-text-field-border-color: #AAA;
@config-forms-text-field-border-radius: 4px;
@config-forms-text-field-border-size: 1px;
@config-forms-text-field-padding-horiz: 8px;
@config-forms-text-field-padding-vert: 4px;


.ellipsize() {
  /* Ellipsize the text contents. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


#djblets-ns-config-forms() {
  /**
   * Set the widths for the navigation and forms content.
   *
   * Args:
   *     nav-width (number, optional):
   *         The width of the navigation menu.
   *
   *     forms-width (number, optional):
   *         The width of the forms section.
   */
  .set-page-widths(@nav-width: @config-forms-side-nav-width,
                   @forms-width: @config-forms-forms-width) {
    .config-forms-container {
      width: (@nav-width + @forms-width + @config-forms-gap +
              (2 * @config-forms-container-padding));
    }

    .config-forms-page-content {
      width: @forms-width;
    }
  }
}


/****************************************************************************
 * Base styling for config forms
 ****************************************************************************/
.config-forms-container {
  font-size: 9pt;
  padding: @config-forms-container-padding;
  width: (@config-forms-side-nav-width +
          @config-forms-forms-width +
          @config-forms-gap +
          (2 * @config-forms-container-padding));
  margin: 0 auto;

  &.config-forms-has-sidebar {
    .config-forms-page-content {
      float: left;
      margin-left: @config-forms-gap;
    }
  }

  .box {
    background: @config-forms-box-bg;
    margin: 0 0 2em 0;
  }

  .box-container {
    margin: 0;
    width: auto;
  }

  .box-inner {
    background: transparent;
  }

  .box-main {
    padding: @config-forms-box-padding;
  }

  .box-recessed {
    margin: 0 -@config-forms-box-padding;
  }
}

.config-forms-side-nav {
  float: left;
  width: @config-forms-side-nav-width;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    border-bottom: 1px #D9D9D9 solid;

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

    &:last-child {
      &.active, &:hover {
        border-radius: 0 0 @config-forms-box-border-radius
                       @config-forms-box-border-radius;
      }
    }

    &:hover {
      background-color: darken(@config-forms-box-bg, 5%);
    }

    &.active {
      background: #FEFEFE;

      &:hover {
        background: #FEFEFE;
      }

      a {
        cursor: default;
      }
    }

    a {
      color: black;
      display: block;
      font-weight: normal;
      outline: none;
      padding: 0.5em 1em;
      text-decoration: none;
    }
  }

  .box-main {
    padding: 0;
  }
}

.config-forms-page-content {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: @config-forms-forms-width;

  fieldset {
    border: 0;
    margin-bottom: 2rem;
    padding: 0;

    h2 {
      font-size: 120%;
      margin-top: 0;
    }
  }

  form {
    margin: 0 auto;
  }

  input[type=email],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=text],
  input[type=url] {
    border: @config-forms-text-field-border-size
            @config-forms-text-field-border-color solid;
    border-radius: @config-forms-text-field-border-radius;
    box-sizing: border-box;
    width: 30em;
    max-width: 30em;
    font-size: inherit;
    padding: @config-forms-text-field-padding-vert
             @config-forms-text-field-padding-horiz;
  }

  label {
    display: block;
    margin: 0.25em 0;
  }

  p {
    font-size: inherit;
    line-height: 1.5;
    margin: 1em 0;
  }

  select {
    font-size: inherit;
  }

  #messages {
    @msg-bg-color: #FFC;
    @msg-border-color: darken(@msg-bg-color, 50%);

    margin: 0 0 1em 0;
    padding: 0;

    li {
      background: @msg-bg-color url('@{img-base}/icon_success.gif')
                  5px .3em no-repeat;
      border: 1px solid @msg-border-color;
      color: #666;
      display: block;
      font-size: 12px;
      margin: 0 0 3px 0;
      padding: 4px 5px 4px 25px;

      &.error {
        background-image: url('@{img-base}/icon_error.gif');
      }

      &.warning {
        background-image: url('@{img-base}/icon_alert.gif');
      }
    }
  }

  .box-main {
    p {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .description {
      margin: 0 0 1em 0;
    }
  }

  .btn {
    padding: 5px 14px 6px;
  }

  .buttons {
    input[type=reset],
    input[type=submit] {
      text-align: center;
      margin: 0 auto;
    }
  }

  .checkbox-row {
    .field {
      width: 100%;

      input, label {
        display: inline;
        width: auto;
      }

      label {
        text-align: left;
        margin-left: 0;
        vertical-align: middle;
      }

      ul {
        list-style: none;
        margin: 0 0 0 1em;
        overflow: hidden;
      }

      .help {
        margin-left: 2em;
      }
    }
  }

  .errorlist {
    clear: both;
    display: block;
    padding: 0;
    margin: 0.5em;
    list-style: none;

    li {
      display: list-item;
      color: darkred;
    }
  }

  .fields-row {
    margin: 0 0 1em 0;
    position: relative;

    &:after {
      clear: both;
      display: table;
      content: "";
      line-height: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .field {
    display: block;
    float: left;
    margin-right: 1em;

    &:last-child {
      margin-right: 0;
    }

    input {
      width: 21em;

      &[type=checkbox],
      &[type=radio] {
        width: auto;
      }
    }

    li {
      margin: 0.5em 0;

      &:last-child {
        label {
          margin-bottom: 0;
        }
      }

      label {
        color: inherit;
      }
    }

    ul {
      list-style: none;
      margin: 1em 0;
      padding: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }

    p.help {
      color: #666666;
      font-size: 90%;
      margin: 1em 0;
    }

    .hint {
      display: block;
      margin: 0.5em 0 0 0.5em;
      font-size: 90%;
    }
  }

  .page {
    display: none;

    &.active {
      display: block;
    }
  }

  .search {
    padding: 0;
    margin: 0 0 @config-forms-box-padding 0;

    input {
      margin-left: 0.5em;
      width: @config-forms-forms-width - 7em;
      max-width: 100%;
    }
  }
}

/* Set the default widths for the page. */
#djblets-ns-config-forms.set-page-widths();


/****************************************************************************
 * Lists and tables of actionable items
 ****************************************************************************/
.config-forms-list {
  background: @config-forms-list-bg-color;
  border-bottom: 1px @config-forms-list-border-color solid;
  border-top: 1px @config-forms-list-border-color solid;
  margin-bottom: 0;
  padding: 0;

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

  &:empty {
    border: none;

    ~ .config-forms-list-empty {
      display: block;
    }
  }
}

.config-forms-list-empty {
  background: @config-forms-list-bg-color;
  border-bottom: 1px solid @config-forms-list-border-color;
  border-top: 1px solid @config-forms-list-border-color;
  display: none;
  line-height: @config-forms-list-item-line-height;
  padding: @config-forms-list-item-padding;
}

table.config-forms-list {
  border-collapse: collapse;
  border-top: 0;
  width: 100%;

  thead th {
    background: #F0F0F3;
    border-bottom: 1px @config-forms-list-border-color solid;
    border-right: 1px #CCCCCC solid;
    text-align: left;
    padding: @config-forms-list-item-padding;

    &:last-child {
      border-right: 0;
    }
  }
}

.config-forms-list-item,
table.config-forms-list td {
  border-bottom: 1px @config-forms-list-item-border-color solid;
  padding: @config-forms-list-item-padding;
  list-style: none;
  line-height: @config-forms-list-item-line-height;
  vertical-align: middle;
  .ellipsize();
}

.config-forms-list-item {
  &:hover {
    background: @config-forms-list-item-hover-bg-color;
  }

  a {
    color: blue;
    font-weight: normal;
    text-decoration: none;
  }

  .rb-icon {
    vertical-align: top;
    margin-right: 0.5em;
  }

  .btn {
    color: black;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    margin: 1px 1px 1px 5px;
    padding: 0 1em;
    text-align: center;

    .rb-icon {
      vertical-align: middle;
      margin-right: 0;
    }
  }

  ul {
    background: #FFFFF0;
    border: 1px #BBBBB0 solid;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;

    label {
      display: inline;
      margin-left: 0.2em;
      vertical-align: middle;
    }

    li {
      padding: 0 0.5em;
    }
  }

  &.disabled label {
    color: #C0C0C0;
  }
}

.config-forms-list-item-actions {
  float: right;
}

.config-forms-list-item-spinner {
  width: 16px;
  height: 16px;
  font-size: 16px;
  display: inline-block;
  margin: 1px;
  vertical-align: middle;
  visibility: hidden;
}

.config-forms-list-action-edit.btn {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.config-forms-list-add {
  border: 0;
  vertical-align: bottom;
}

.config-forms-list-actions {
  margin: 1em 0 0 0em;

  input {
    margin-right: 0.5em;
    width: 230px;
  }
}

.config-forms-list-header-actions {
  margin: 0 0 1em 0;
}

.config-forms-list-full {
  margin-top: 1em;

  p {
    margin: 0;
  }
}

.config-forms-subsection {
  margin: 2em 0;

  h3 {
    border-bottom: 1px #D0D0D0 solid;
    font-size: 100%;
    padding: 0 0 0 0.4em;
    margin-bottom: 1em;
  }
}


/*
 * My Account page
 */

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

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

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