/***************************************************************************
 * Administration Dashboard
 ***************************************************************************/

@import (reference) "rb/css/defs.less";
@import (reference) "rb/css/ui/colors.less";
@import (reference) "rb/css/ui/tabs.less";
@import (reference) "rb/css/ui/admin/widgets.less";


@widget-border-color: @box-border-color;
@admin-light-border-color: #f5f5f5;
@admin-small-font-size: 11px;
@admin-large-font-size: 14px;
@table-border-color: @admin-light-border-color;
@table-header-color: #4b4b4b;
@widget-large-size: 460px;
@widget-small-size: 200px;
@widget-large-image-size: 225px;
@widget-small-image-size: 135px;

@admin-actions-width: @admin-sidebar-width + @page-container-padding;
@admin-actions-bg: #F0F0F2;
@admin-actions-border-color: @box-border-color;
@admin-actions-header-bg: @box-title-bg;


#rb-ns-ui.tabs.set-color-scheme(#rb-ns-ui.color-schemes.admin-dashboard());


#admin-actions {
  @admin-actions-width: @admin-sidebar-width + @page-container-padding;

  background: @admin-actions-bg;
  border-right: 1px @admin-actions-border-color solid;
  border-bottom: 1px @admin-actions-border-color solid;
  float: left;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: @admin-actions-width;
  box-sizing: border-box;
  z-index: @z-index-page-overlay;

  .admin-version {
    font-weight: bold;
    margin-top: 1em;
  }
}

#all-primary-widgets, #all-secondary-widgets {
  display: none;
}

#navbar {
  margin-left: -1px;
  padding-left: @admin-actions-width;

  .rb-c-tabs__tab {
    padding-top: 8px;

    &.-is-active {
      border-bottom: 1px transparent solid;
    }
  }
}

.clear {
  clear: both;
}


/**************************************************************************
 * Built-in widget styles
 **************************************************************************/

/**
 * The Review Board News widget.
 *
 * This displays the latest headlines from the Review Board news feed.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-news-widget">
 *      <div class="rb-c-admin-widget__content">
 *       <a class="rb-c-admin-news-widget__item">
 *        ...
 *       </a>
 *       ...
 *      </div>
 *     </div>
 */
.rb-c-admin-news-widget {
  /**
   * An item from the news feed.
   *
   * Each item is styled as its own row in the widget.
   *
   * Structure:
   *     <a class="rb-c-admin-news-widget__item">
   *      <span class="rb-c-admin-news-widget__item-date">...</span>
   *      <span class="rb-c-admin-news-widget__item-title">...</span>
   *     </a>
   */
  &__item {
    display: table-row;
  }

  &__item-date,
  &__item-title {
    display: table-cell;
    padding: 0.5em;
  }

  /**
   * The date of a news post.
   *
   * This is positioned to the left of the news item's title.
   *
   * Structure:
   *      <span class="rb-c-admin-news-widget__item-date">...</span>
   */
  &__item-date {
    text-align: right;
    white-space: nowrap;
  }

  /**
   * The title of a news post.
   *
   * This is positioned to the right of the news item's date.
   *
   * Structure:
   *      <span class="rb-c-admin-news-widget__item-title">...</span>
   */
  &__item-title {
    color: var(--ink-p-fg);
  }
}


/* Server Cache widget */
#admin-widget-server-cache-widget {
  td, th {
    font-size: 10px;
    text-align: left;
  }
}


/**
 * The repositories widget.
 *
 * This displays links to the most recently-added repositories, and provides
 * actions for viewing all repositories or adding a new one.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-repositories-widget">
 *      <div class="rb-c-admin-widget__content">
 *       <div class="rb-c-admin-repositories-widget__repos">
 *        ...
 *       </div>
 *      </div>
 *     </div>
 */
.rb-c-admin-repositories-widget {
  /**
   * Instructions for configuring repositories.
   */
  &__instructions {
  }

  /**
   * A list of repositories.
   *
   * Structure:
   *     <ul class="rb-c-admin-repositories-widget__items">
   *      <li class="rb-c-admin-repositories-widget__item">...</li>
   *      ...
   *     </ul>
   */
  &__items {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    margin: 0;
    padding: 0;
  }

  /**
   * A repository item.
   *
   * Structure:
   *     <li class="rb-c-admin-repositories-widget__item">
   *      <a class="rb-c-admin-repositories-widget__repo" href="...">...</a>
   *     </li>
   */
  &__item {
    list-style: none;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
  }

  /**
   * A repository in the list.
   *
   * Structure:
   *     <a class="rb-c-admin-repositories-widget__repo" href="...">
   *      <span class="rb-c-admin-repositories-widget__repo-name">...</span>
   *      <span class="rb-c-admin-repositories-widget__repo-service">...</span>
   *     </a>
   */
  &__repo {
    &:hover {
      text-decoration: none;

      .rb-c-admin-repositories-widget__repo-name {
        text-decoration: underline;
      }
    }
  }

  /**
   * The name of the repository.
   *
   * Structure:
   *     <span class="rb-c-admin-repositories-widget__repo-name">...</span>
   */
  &__repo-name {
    display: block;
  }

  /**
   * The service backing a repository.
   *
   * Structure:
   *     <span class="rb-c-admin-repositories-widget__repo-service">...</span>
   */
  &__repo-service {
    color: var(--ink-p-fg-weak);
  }
}


/**
 * The User Activity widget.
 *
 * This displays a graph showing the number of active users for different
 * ranges of times.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-user-activity-widget">
 *      <div class="rb-c-admin-widget__content">
 *       <div class="rb-c-admin-user-activity-widget__chart">...</div>
 *       <div class="rb-c-admin-user-activity-widget__user-total">...</div>
 *      </div>
 *     </div>
 */
.rb-c-admin-user-activity-widget {
  /**
   * The container for the chart to render into.
   *
   * Structure:
   *     <div class="rb-c-admin-user-activity-widget__chart">
   *      ...
   *     </div>
   */
  &__chart {
    width: 100%;
    height: 160px;

    .legendLabel {
      color: var(--ink-p-fg-weak);
    }
  }

  /**
   * A label for a slice in the pie.
   *
   *     <div class="rb-c-admin-user-activity-widget__slice">
   *      ...
   *     </div>
   */
  &__slice-label {
    padding: 2px 4px;
  }

  /**
   * A label listing the total number of users on the server.
   *
   * Structure:
   *     <div class="rb-c-admin-user-activity-widget__user-total">
   *      ...
   *     </div>
   */
  &__user-total {
    bottom: 10px;
    color: var(--ink-p-fg-weak);
    position: absolute;
    text-align: left;
    right: 1em;
  }
}


/**
 * The server activity widget.
 *
 * This displays a graph showing counts for various types of items across a
 * time range.
 *
 * Structure:
 *     <div class="rb-c-admin-widget rb-c-admin-server-activity-widget">
 *      <div class="rb-c-admin-widget__content">
 *       <div class="rb-c-admin-user-activity-widget__chart">...</div>
 *      </div>
 *     </div>
 */
.rb-c-admin-server-activity-widget {
  /**
   * The container for the chart to render into.
   *
   * Structure:
   *     <div class="rb-c-admin-server-activity-widget__chart">
   *      ...
   *     </div>
   */
  &__chart {
    width: 100%;
    height: 250px;

    .legendLabel {
      color: var(--ink-p-fg-weak);
    }
  }
}

.rb-c-admin-server-activity-widget-tooltip {
  position: absolute;
  display: none;
  border: 1px solid #fdd;
  padding: 2px;
  background-color: #fee;
  opacity: 0.80;
}
