assets/Twig/css/style.less
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
@import "callout.less";

@color-failed: #F56956;
@color-passed: #00a65a;
@color-pending: #e38d13;

body {
  background-color: #f9f9f9;
  font-family: 'Source Sans Pro', sans-serif;
}

.card {
  position: relative;
  background: #ffffff;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

  &:hover {
    cursor: pointer;
  }

  &.passed {
    .header {
      background-color: @color-passed;
    }
  }

  &.failed {
    .header {
      background-color: @color-failed;
    }
  }

  .header {
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0px solid #f4f4f4;

    &:before, &:after {
      display: table;
      content: " ";
    }
    h2 {
      display: inline-block;
      padding: 10px 10px 10px 10px;
      margin: 0;
      font-size: 20px;
      font-weight: 400;
      cursor: default;
    }
  }

  .info {
    padding: 10px;
    height: 130px;
    overflow: auto;
  }

  .footer {
    border-top: 1px solid #f4f4f4;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
    background-color: #ffffff;

    .progress {
      margin-bottom: 0px;
    }
  }

}

.progress {
  height: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

  .progress-bar-green {
    background-color: @color-passed !important;
    background-image: none !important;
  }

  .progress-bar-red {
    background-color: #f56954 !important;
    background-image: none !important;
  }
}

#feature-overview {
}

#scenario-overview {
  display: none;

  .feature {
    display: none;
    &.selected {
      display: block;
    }

    .details {
      .panel {
        &.passed {
          > .panel-heading {
            color: white;
            background-color: @color-passed;
            background-image: none;
          }
        }
        &.pending {
          > .panel-heading {
            color: white;
            background-color: @color-pending;
            background-image: none;
          }
        }
        &.failed {
          > .panel-heading {
            color: white;
            background-color: @color-failed;
            background-image: none;
          }
        }
      }
    }
  }
}
