@import "bootstrap-sprockets";
@import 'bootstrap';
@import "animate";

/* Mixins, Variables, Etc. */
$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* debug prompt */

.debug_dump {
  margin-top: 45px;
  @include box_sizing
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  //width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

.trigger-job-form {
  width: 50%;
  margin-left: 0px;
}

/* footer */

footer {
  margin-top: 45px;
  margin-right: 20px;
  margin-left: 20px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

/* Front Page */

.jumbotron {
  margin-left: 80px;
  margin-right: 80px;
}

/* Dashboard */

.build-list {
  padding-left: 20px;
  padding-top: 5px;
}

.dashboard-section-header {
  h2 {
    float: left;
  }
}

// Test Case Results Index Page

#backtrace-data {
  border: 0.5px solid #ccc;
  background-color: #f5f5f5;
}

.test-case-listings {
  padding-left: 10px;
  ui {
    list-style-type: none;
  }
}

.results-dropdown {
  padding-left: 7px;
}

#test_cases #failed .section-header .title {
  // Add a red color to the failed section
  color: #B00100;
}

.test-case-detail {
  @include box_sizing;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 9.5px;
}

// Test Case Results Show Page
#backtrace-data {
  padding: 3px;
}

.screenshot-data {
  .screenshot-image {
    border: 1px solid #d2d2d2;
  }
}

.screenshot-modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

  .screenshot-modal-content {
    margin: auto;
    display: block;
    width: 80%;
  }

  .close {
    color: white;
    opacity: 1; // Override bootstrap color
    position: relative; // Offset to display to the right of the image
    left: 20px; // Offsets to display to the right of the image
    font-size: 25px; // Make the button larger
  }
}
