/*
 * display.less
 *
 * CSS for the tags in display/ (except page_chrome.) We
 * also have a misc section at the end for classes that don't quite
 * deserve their own tag (e.g. subtext)
 */

 /*
  * Grid. There are a couple of common cell classes at the end
  */

table.grid {
  border-collapse: collapse;
  display: table;
  width: 100%;
}

.gridRow {
  display: table-row;
  border-top: 1px solid @lightBorder;
}

.noborder .gridRow {
  border-top: none;
}

.gridRow.noborder {
  border-top: none;
}

.gridRow.gridFadedOut {
  opacity: 0.5;
}

.gridRow.gridHighlightable {
  cursor: pointer;
  border: 1px solid #ffffff;
}
.gridRow.gridHighlightable:hover {
  background-color: @selectedBorder;
}

.gridRow.gridHighlighted {
  background-color: @selectedBg;
  border: 1px solid @selectedBorder;
}

.gridRow.gridHighlightable.gridHighlighted:hover {
  background-color: @selectedBorder;
}

.gridRow.gridFirstRow {
  border-top: none;
}

.gridRow.gridRowOneItem {
  border-top: none;
}

.gridCell {
  display: table-cell;
  padding: 7px 15px 7px 4px;
}

.gridCell:first-child {
  padding-left: 0px;
}

.gridCell:last-child {
  padding-right: 2px;
}

tr.gridHeader {
  border-top: none;
  color: @mediumGray;
  font-size: 13px;
  border-bottom: 2px solid @lightBorder;
}

.gridHeader .gridCell {
  padding-bottom: 5px;
}

.gridEven .gridCell {
}

.gridCell.easyClick {
  padding-top: 0;
  padding-bottom: 0;
}

.gridCell.easyClick a {
  padding-top: 7px;
  padding-bottom: 7px;
}

/*
 * Grid: cell classes. You'll usually want to use wide for one of your columns
 */

.nowrap {
  white-space: nowrap;
}

.wide {
  width: 100%;
}

.half {
  width: 50%;
}

.center {
  text-align: center;
}

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

.leftBarrier {
  padding-left: 15px;
  border-left: 1px dashed @lightBorder;
}

.cellOverflow {
  overflow: hidden;
  max-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.cellOverflow.cellOverflowPointer {
  cursor: pointer;
}

.cellOverflow.cellOverflowExpanded {
  /* undo everything except width: 100% */
  overflow: visible;
  max-width: none;
  text-overflow: clip;
  white-space: normal;
}

/*
 * For when we want to render coverage percent, but it is NaN.
 * This pads to align the '-' with normal percentage numbers.
 */
.noCoverPercent:before {
  content: "-";
  padding-right: 1em;
}

.topRightLink {
  float: right;
}

.inactiveWarning {
   color: #c00;
   padding: 1em;
}

/*
 * Error Box
 */

.error {
  /* may want to change these to be consistent with other colors */
  background-color: #a00;
  border: 1px solid #666;
  color: #FFF;
  display: block;
  padding: 5px;
}

.programmingError {
  background-color: #c09;
  border: 1px solid #666;
  color: #FFF;
  display: block;
  padding: 5px;
}

/*
 * Flash Messages
 */

.flash {
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-block;
  padding: 0px 6px 0px 6px;
  position: fixed;
  top: 2%;
  white-space: nowrap;
  z-index: 100;
}

.flash.failure {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.flash.info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.flash.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.flash.warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}


.flashWrapper {
  text-align: center;
  width: 100%;
}

/*
 * Inline Loading
 */

.inlineLoading {
  padding: 12px;
  vertical-align: middle;
  text-align: center;
}

/*
 * Section Header
 */

.sectionHeader {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: 600;
}

/*
 * Menus
 */

.menuItem {
  display: inline-block;
  padding: 0px 5px;
  margin: 5px 0;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.firstMenuItem {
  margin-left: 0px;
  padding-left: 0px;
}

.selectedMenuItem {
  color: #333;
  font-weight: 600;

  &:hover {
    text-decoration: none;
  }
}

/* tabs */
.tabs {
  margin-bottom: 15px;
}

.tabsItem {
  display: table-cell;
  cursor: pointer;
  color: @darkGray;

  &:hover {
    color: #333;
  }

  .tabsItemText {
    margin: 0px 15px 5px;
    padding-bottom: 10px;
  }
}

.selectedTabsItem {
  font-weight: 600;
  color: #333;

  .tabsItemText {
    border-bottom: 3px solid @blue;
  }
}

.leftmostTab {
  .tabsItemText {
    margin-left: 0;
    padding-left: 0;
  }
}

/*
 * Builds/Status Dot
 */

.conditionDotIcon {
  display: inline-block;
  margin-right: 4px;
  opacity: 1;
}

.conditionDot {
  color: white;
  display: inline-block;
  margin-right: 4px;
  opacity: 1;
  text-align: center;

  .dotText {
    position: relative;
  }
}

.conditionDot.small {
  width: 16px;
  height: 16px;
  border-radius: 12px;

  .dotText {
    font-size: 8px;
    top: -4px;
  }

  &.singleDigit .dotText {
    font-size: 11px;
    top: -3px;
  }
}

.conditionDot.smaller {
  width: 12px;
  height: 12px;
  border-radius: 10px;
}

.conditionDot.medium {
  width: 26px;
  height: 26px;
  border-radius: 18px;

  .dotText {
    top: 2px;
    font-size: smaller;
  }
}

.conditionDot.large {
  width: 45px;
  height: 45px;
  border-radius: 30px;

  .dotText {
    top: 12px;
    font-size: larger;
  }
}

.buildWidget {
  color: #333;
  display: block;
  position: relative;
  text-decoration: none;
}

.buildWidgetText {
  display: inline-block;
  font-size: x-small;
  margin-top: 2px;
  vertical-align: top;
}

.buildWidgetText:hover {
  text-decoration: none;
}

a.buildStatus {
  display: block;
  padding: 8px 7px 6px;
}

a.buildStatus:hover {
  background-color: @selectedBg;
}

.gridCell.buildWidgetCell {
  padding: 0;
  padding-right: 7px;
  white-space: nowrap;
  text-align: center;
}

.gridCell.buildWidgetCell .buildWidget {
  padding: 7px;
}

.buildWidget:hover {
  background-color: @selectedBg;
}

.pusherProjectHeader > div.projectName,
.pusherProjectHeader > div.branchName {
  text-align: center;
}

.buildMessage, .targetMessage {
  white-space: pre;
}

/* invisible table lets you put things in tables without any markup/lines */

.invisibleTable {
  border-spacing: 0
}

.invisibleTable td {
  padding: 2px 8px 0 0;
}

/* time text */

.timeTextExpandable {
  cursor: help;
}

/* InfoList (property list with keys/values) */

.infoList > tbody > tr {
  vertical-align: top;
}

.infoList .infoLabel {
  color: @mediumGray;
  padding-right: 20px;
  padding-top: 3px;
}

.infoList .missingValue {
  color: #c00;
  font-style: italic;
}

/* buttons: blue, white, paging, red */

a.button {
  border-radius: 3px;
  display: inline-block;
  padding: 7px 15px;
  outline: 0;
}

a.button:hover {
  text-decoration: none;
}

a.button.disabled {
  cursor: default;
}

a.button.blueButton {
  background: @buttonBg;
  border: 1px solid @buttonBorder;
  color: #fff;
  transition: all 150ms ease;
}

a.button.blueButton:hover {
  background: @buttonHoverBg;
  border-color: @buttonHoverBorder;
  color: #fff;
}

a.button.blueButton:active {
  background: @buttonActiveBg;
  border-color: @buttonActiveBorder;
  color: #fff;
}

a.button.blueButton.disabled {
  background-color: @buttonDisabledBg;
  border-color: @buttonDisabledBorder;
}

a.button.flashButton {
  background-color: inherit;
  border: none;
  color: inherit;
  font-weight: bold;
  margin-left: 10px;
  padding: 6px;
}

a.button.flashButton:hover {
  text-decoration: underline;
}

a.button.whiteButton {
  background-color: white;
  border: 1px solid @whiteButtonBorder;
  color: @whiteButtonColor;
}

a.button.whiteButton:hover {
  border-color: @whiteButtonHoverBorder;
  background-color: @whiteButtonHoverBg;
  color: @whiteButtonHoverColor;
}

a.button.whiteButton:active {
  border-color: @whiteButtonActiveBorder;
  background-color: @whiteButtonActiveBg;
  color: @whiteButtonActiveColor;
}

a.button.whiteButton.disabled {
  border-color: @whiteButtonDisabled;
  background-color: white;
  color: @whiteButtonDisabled;
}

a.button.redButton {
  background-color: white;
  border: 1px solid @redButtonBorder;
  color: @redButtonColor;
}

a.button.redButton:hover {
  border-color: @redButtonHoverBorder;
  background-color: @redButtonHoverBg;
  color: @redButtonHoverColor;
}

a.button.sizedButton{
  min-width: 115px;
}

a.button.sizedButton.wider{
  min-width: 175px;
}

a.button.iconButton {
  padding: 4px 6px;
}


/* paging button was written before the other buttons, so it has a lot of
 * custom (and probably unneeded) css
 */

.pagingButton {
  background: #fff;
  border: 1px solid @blue;
  color: @blue;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: visible;
  text-decoration: none;

  padding: 5px 16px;
  border-radius: 3px;

  &:hover {
    background-color: @blue;
    color: #fff;
    text-decoration: none;
  }
}

.pagingButton.disabled {
  opacity: 0.4;
  cursor: default;
}

.pagingButton.disabled:hover {
  background: #fff;
  color: @blue;
  cursor: default;
}

.chartPagingButton {
  vertical-align: text-bottom;
  padding: 5px 16px;
  border-radius: 3px;
  margin-bottom: 5px;

  &:hover {
    background-color: @blue;
    color: #fff;
    text-decoration: none;
  }
}

/*
 * Charts
 */

.emptyChartBar {
  background-color: @mediumGray;
  display: inline-block;
  height: 2px;
  width: 10px;
}

a.chartBarColumn, div.chartBarColumn {
  display: inline-block;
  width: 10px;
  margin-right: 2px;
}

a.chartBarColumn:hover {
  background-color: @chartGray;
}

a.chartBarColumn:hover .chartBar {
  opacity: 0.7;
}

div.chartBar {
  display: inline-block;
  width: 10px;
  height: 40px;  /* We'll override this later */
}

div.chartBar.redBg {
  background-color: red;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, white 3px, white 6px);
}

div.chartBar.blackBg {
  background-color:#001;
  background-image: radial-gradient(@mediumGray 25%, transparent 26%),
  radial-gradient(@mediumGray 25%, transparent 26%);
  background-size:10px 10px;
  background-position: 0 0, 5px 5px;
}

/*
 * Misc: classes that didn't quite deserve their own tag
 */

.messageBox {
  background-color: @messageBg;
  border: 1px solid @messageBorder;
  padding: 5px;
}

.subText {
  font-size: x-small;
  color: @mediumGray;
}

/*
 * The div+float-based layout for the Builds List can get some wonky
 * indenting if the left subtext is empty. Ensure that there's always at least
 * an &emsp; present to force things into the correct positions.
 */
.subtextStatus:empty::before {
  content: "\2003";  /* 2003 == &emsp; */
}

.lb {
  font-weight: 600;
}

.bb {
  font-weight: 900;
}

/* For text that should be preformatted, but otherwise rendered normally. */
.preText {
   white-space: pre;
}

.defaultPre {
  background-color: @preBg;
  border: 1px solid @preBorder;
  line-height: normal;
  margin-top: 5px;
  padding: 5px;
  white-space: pre-wrap;
}

@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  animation: blink 1.2s step-start 0s infinite;
  -webkit-animation: blink 1.2s step-start 0s infinite;
}
