// Fonts
@import url("https://fonts.googleapis.com/css?family=Arsenal:400");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// Bootstrap
@import "~csspin/csspin";

body {
  color: $brand-darker;
  font-family: 'Arial';
  font-weight: 500;
}

/*
 * Global add-ons
 */

.container-fluid {
  padding-top: 40px;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

/*
 * Tables
 */

.table-header {
  vertical-align: middle;
  margin-bottom: 15px;
  font-weight: 800;
}

.table-header .title {
  font-size: 1.8em;
}

.dim {
  filter: alpha(opacity=40); /* internet explorer */
  -khtml-opacity: 0.4;      /* khtml, old safari */
  -moz-opacity: 0.4;       /* mozilla, netscape */
  opacity: 0.4;           /* fx, safari, opera */
}

.pale {
  filter: alpha(opacity=10); /* internet explorer */
  -khtml-opacity: 0.1;      /* khtml, old safari */
  -moz-opacity: 0.1;       /* mozilla, netscape */
  opacity: 0.1;           /* fx, safari, opera */
}

th {
  font-size: 1.3em;
}

.table > tbody > tr > td {
  vertical-align: middle;
}

/*
 * Links
 */
a.file {
  color: $brand-danger-light;
}

a:hover.file {
  color: $brand-bluish;
}

/*
 * Projects
 */
.project-title {
  color: $brand-clear;
  text-transform: lowercase;
  font-size: 1.8em;
  margin-top: -7px;
  margin-bottom: 7px;
  font-weight: 800;
}

.search-project {
  color: #f8f9fa;
  background-color: #444;
  border: 1px solid #818182;
}

.search-project:focus {
  background-color: #444;
  border-color: #818182;
  color: #f8f9fa;
}

.card-projects {
  margin-bottom: 15px;
  background-color: $brand-darker;
  padding: 10px;
}

/**
 * Project list
 */

.list-group-item {
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item.active {
  background-color: $brand-pill;
  color: $brand-darkest;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background-color: $brand-pill-darker;
}

list-group-item, .list-group-item:hover, .list-group-item:focus {
  background-color: $brand-gray;
}


/*
 * Modals
 */
.modal-lg {
  max-width: 80% !important;
  max-height: 80% !important;
}

.modal-scroll {
  height: 650px;
  overflow-y: auto;
  margin-top: 15px;
  padding: 15px;
}

.terminal {
  background-color: $brand-darkest;
}

/*
 * Buttons
 */
.btn {
  padding: 3px 6px;
  cursor: pointer;
}

.btn-secondary {
  color: $brand-darkest !important;
  background-color: $brand-secondary !important;
  border-color: $brand-secondary-darker !important;
}


/*
 * Navbar
 */
.navbar {
  border-radius: 0px !important;
  margin-bottom: 0px !important;
}

.navbar-inverse {
  background-color: $brand-primary;
  border-color: $brand-primary;
}

.navbar-inverse .navbar-brand {
  color: $brand-clear;
}

/*
 * Toolbar
 */
.toolbar {
  background-color: $brand-gray;
  height: 60px;
  padding: 15px;
  vertical-align: middle;
  border: 1px;
  border-color: $brand-gray-darker;
  border-style: solid;
}

/*
 * Toolbar
 */
.btn-square {
  height: 30px;
  width: auto;
  padding: 5px;
  vertical-align: middle;
  padding-left: 10px;
}

/*
 * Search
 */
.search-group {
  padding: 5px;
  margin-top: -9px;
  width: 100%;
}

/*
 * Placeholder
 */
@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}

@include placeholder {
  color: white;
  opacity: 0.3;
}

/*
 * State
 */

table > tbody > tr > td.state.state-failed {

}

.state {
  color: $brand-clear;
}

.state-failed {
  background-color: $brand-danger-light;
}

.state-running {
  background-color: $brand-info-light;
}

.state-ok {
  background-color: $brand-success-light;
}

.state-disabled {
  background-color: $brand-clear-light;
  color: $brand-darker;
}

.state-idle {
  background-color: $brand-darker-light;
}

.state-queued {
  background-color: $brand-gray-light;
  color: $brand-darker;
}

.badge {
    padding: 0.6em .8em .7em;
}

.project-state {
  font-size: 1.1em;
}

.project-state-passed {
  color: $brand-passed;
}

.project-state-failed {
  color: $brand-failed;
}

.screenshot {
  width: 98%;
}

.table-test-name {
  font-weight: 700 !important;
  color: $brand-darkest;
}

.table-test-path {
  font-size: 0.7rem;
  font-weight: 100 !important;
  color: $brand-gray-darker;
}

.table-link {
  cursor: pointer;
}

.html {
  color: $brand-clear-light;
  background-color: $brand-html;
  font-size: 1.2rem;
  font-weight: 500 !important;
}

.project-checkbox {
  margin-right: 5px;
}

.cursor-pointer {
  cursor: pointer;
}

h1, h2, h3 {
  font-weight: 800;
}

.app {
  margin-top: 40px;
}
