@import "bootstrap/styles";
@import "horizon/styles";

/* Ubuntu styles */
body,
.page-header {
  font-family: Ubuntu, Arial, "libra sans", sans-serif;
  font-weight: 300;
}

p {
  margin: 10px 0;
}

a,
a:link,
a:visited {
  color: $brand-color;
}

.row {
  margin-bottom: 20px;
  margin-top: 20px;
}

table {
  background-color: $table-bg;
  border: 1px solid #ddd;
}

.table_actions {
  margin-bottom: 10px;
}

.topbar,
.topbar .switcher_bar .btn.btn-topnav,
.navbar-default {
  background: $brand-color;
}

.navbar-default .navbar-nav > li > a {
  border-color: $brand-color;
  color: $white !important;

  &:hover,
  &:focus {
    border-color: $topbar-link-hover;
    background: $topbar-link-hover;
    color: $white;
  }
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: $topbar-link-hover;
  color: $white;
}

.navbar-brand {
  background-image: url("/static/themes/ubuntu/img/logo-ubuntu-white.svg");
  background-position: 20px 4px;
  background-repeat: no-repeat;
  background-size: 110px;

  img {
    opacity: 0;
  }
}

.nav_accordion dt li a.active,
.nav_accordion dd li a.active {
  border-left: 4px solid $brand-color;
  color: $brand-color;
}

.nav-tabs {
  margin-bottom: 10px;
}

.navbar .dropdown-menu:before {
  display: none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: $nav-active-color;

  &:hover {
    background-color: $nav-hover-color;
  }
}

.d3_pie_chart_usage .arc.inner {
  fill: $brand-color;
}

.container-fluid {
  padding-bottom: 5px;
  padding-top: 5px;
}

.fa.hz-icon-required {
  color: $brand-color;
}

.context-selection > li > ul > li > a > .fa.fa-check {
  left: 0.5em;
  padding: 0;
}

.form-group label {
  margin-right: 5px;
}

/* Login splash screen */
#splash {
  background: url("/static/themes/ubuntu/img/image-background-pattern.png");
  background: linear-gradient(to right, rgba(100, 100, 100, 0.2), transparent), url("/static/themes/ubuntu/img/image-background-pattern.png");

  .login {
    background-color: $white;
    box-shadow: 0px 1px 3px 1px rgba(51,51,51,0.2);
    -moz-box-shadow: 0px 1px 3px 1px rgba(51,51,51,0.2);
    -webkit-box-shadow: 0px 1px 3px 1px rgba(51,51,51,0.2);
    max-width: 500px;
    padding-bottom: 20px;
    padding-top: 60px;
    position: relative;

    .splash-logo {
      display: none;
    }

    &:after {
      background-image: url("/static/themes/ubuntu/img/logo-ubuntu-orange.svg");
      background-repeat: no-repeat;
      background-size: 110px;
      color: $brand-color;
      content: "OpenStack Dashboard";
      display: block;
      font-size: 21px;
      left: 20px;
      line-height: 1.7em;
      position: absolute;
      text-indent: 115px;
      top: 25px;
      width: 100%;
    }

    .horizontal-center {
      margin: 0;
      width: auto;
    }
  }
}

/* Sidebar panel */
a.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:hover,
button.list-group-item:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  color: #888;
  background-color: $light-grey;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  font-weight: bold;
}

/* Buttons (btn) */
.btn-primary {
  background-color: $brand-color;
  border-color: darken($brand-color, 5%);
  color: $white !important;
  margin-right: 5px;

  &.pull-right {
    margin-right: 0;
  }
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  background-color: lighten($brand-color, 5%);
  border-color: $brand-color;
}

.btn-primary.disabled {
  background-color: #efefef;
  border: 1px solid #efefef;
}

.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus {
  background: $brand-color;
  color: $white;
  cursor: not-allowed;
  opacity: .3;
}

/* btn-danger overrides */
.dropdown-menu > li > .btn.btn-danger {
  color: $brand-danger;
  background-color: $white;
}

.btn-danger, a.btn-danger, a.btn-danger:link, a.btn-danger:visited {
  color: $white;
  background-color: $brand-danger;
  border-color: darken($brand-danger, 5%);
}

a.btn-danger:hover {
  background-color: darken($brand-danger, 5%);
}

/* Loading spinner */
.modal-body p {
  margin: 0 0 9px;
}