/*! Icinga Web 2 | (c) 2017 Icinga Development Team | GPLv2+ */

/* solarized colors: http://simianuprising.com/wp-content/uploads/2012/08/solarized-reference-horizontal.png */

// Solarized base colors
@base01: #586e75;
@base00: #657b83;
@base02: #073645;
@base03: #002b36;
@base0: #839496;
@base1: #93a1a1;
@base2: #eee8d5;

// Gray colors
@gray: @base1;
@gray-light: @base01;
@gray-lighter: #00222b;
@gray-lightest: @base02;

// Icinga colors
@icinga-blue: @base1;
@low-sat-blue: @base00;

@color-ok: #859900;
@color-critical: #dc322f;
@color-critical-handled: #a82523;
@color-warning: #cf9b00;
@color-warning-handled: #b58900;
@color-unknown: #6c71c4;
@color-unknown-handled: #444f83;
@color-unreachable: #2aa198;
@color-unreachable-handled: #1d736c;
@color-pending: #268bd2;
// Notification colors

// Background color for <body>
@body-bg-color: @base03;

// Text colors
@text-color: @base2;
@text-color-light: @base1;
@text-color-on-icinga-blue: @base2;
@text-color-inverted: @base02;

// Text color on <a>
@link-color: @base0;
@tr-active-color: @base01;
@tr-hover-color: @base02;

// Menu colors
@menu-bg-color: @base02;
@menu-active-bg-color: @base03;
@menu-highlight-color: @icinga-blue;
@menu-2ndlvl-color: #c4c4c4;
@menu-flyout-color: @text-color;

// Form colors
@button-primary-color: lighten(@base02, 20);

#sidebar {
  background-color: @base02;
  box-shadow: inset -0.5em 0 1em rgba(0,0,0,0.3);
}
#header-logo-container {
  background-color: transparent;
}
#menu {
  background-color: transparent;
  box-shadow: none;
}

.tabs {
  background-color: @base02;

  > li > a {
    color: @base00;
  }
}

.action-link {
  color: @link-color;
}
.button-link {
  background-color: @base02;

  &:hover {
    background-color: darken(@base03, 5);
  }
}

input, select {
  background-color: @body-bg-color;
}

#login {
  background: @base02;

  .control-label {
    color: @base0;
  }

  input[type=submit] {
    color: @base0;
    background-color: @base02;
  }
}

#login-footer {
  color: @base01;
}

#about > img {
  width: 0;
  height: 0;
  padding: 55.5px 160px;

  background: url(../img/icinga-logo-big.png);
  background-size: contain;
}

textarea {
  background-color: @base01;
}

.control-button, input[type="submit"] {
  color: @base0;
}

.badge.handled {
  background-color: @body-bg-color !important;
  color: @text-color;

  &.state-warning {
    border: 1px solid @color-warning-handled;
    margin-top: -1px;
  }

  &.state-critical {
    border: 1px solid @color-critical-handled;
    margin-top: -1px;
  }

  &.state-down {
    border: 1px solid @color-critical-handled;
    margin-top: -1px;
  }

  &.state-unreachable {
    border: 1px solid @color-unreachable-handled;
    margin-top: -1px;
  }

  &.state-unknown {
    border: 1px solid @color-unknown-handled;
    margin-top: -1px;
  }
}

#menu {
  input.search {
    color: @text-color;
    background-image: url(../img/icons/search_white.png);

    &:focus {
      background-image: url(../img/icons/search_white.png) !important;
    }
  }

  .nav-level-1 > .nav-item {
    color: @text-color;

    &.active, &:hover {
      color: @text-color;
      background-color: darken(@base03, 5);
    }

    &.active:not(.selected) {
      background-color: darken(@base03, 3);

      & > a:focus,
      & > a:hover {
        background-color: darken(@base03, 5);
      }
    }
  }

  .nav-level-2, .nav-level-2:after {
    background-color: darken(@base03, 3) !important;
  }

  .nav-level-2 > .nav-item {
    color: @text-color;

    &.active, &:hover {
      a {
        color: @text-color !important;
      }
      background-color: @base00;
    }

    &.active.selected {
      background-color: @base02;
    }

    &:not(.selected):not(.active) > a:hover,
    &:not(.selected):not(.active) > a:focus {
      color: @text-color;
    }
  }

  ul:not(.nav-level-2) > .selected > a {
    background-color: darken(@base03, 3);
    color: @text-color;

    &:after {
      background-color: darken(@base03, 3);
      box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
    }
  }

  .nav-level-2 > .nav-item:not(.selected):not(.active) {
    & > a:hover,
    & > a:focus {
      background-color: darken(@base03, 5);
    }
  }

  .nav-itemxx{
    &:hover,
    &:hover > a,
    &.active,
    &.active > a {
      color: @text-color !important;
      //background-color: @base01 !important;
    }
  }
}

.boxview a:focus {
  color: @text-color;
  text-decoration: underline;
}

table.avp tbody th {
  background-color: transparent;
}

.icinga-module.module-monitoring {
  @timeline-notification-color: #1650CF;
  @timeline-hard-state-color: #A24600;
  @timeline-comment-color: #346964;
  @timeline-ack-color: #855D18;
  @timeline-downtime-start-color: #515151;
  @timeline-downtime-end-color: #5e5e2f;

  // Unfortunately it does not suffice to only override the timeline colors here, because our less compiler seems to
  // have the related style block in module.less already evaluated

  .timeline-notification {
    background-color: @timeline-notification-color;

    &.extrapolated {
      background-color: lighten(@timeline-notification-color, 20%);
    }
  }

  .timeline-hard-state {
    background-color: @timeline-hard-state-color;

    &.extrapolated {
      background-color: lighten(@timeline-hard-state-color, 20%);
    }
  }

  .timeline-comment {
    background-color: @timeline-comment-color;

    &.extrapolated {
      background-color: lighten(@timeline-comment-color, 20%);
    }
  }

  .timeline-ack {
    background-color: @timeline-ack-color;

    &.extrapolated {
      background-color: lighten(@timeline-ack-color, 20%);
    }
  }

  .timeline-downtime-start {
    background-color: @timeline-downtime-start-color;

    &.extrapolated {
      background-color: lighten(@timeline-downtime-start-color, 20%);
    }
  }

  .timeline-downtime-end {
    background-color: @timeline-downtime-end-color;

    &.extrapolated {
      background-color: lighten(@timeline-downtime-end-color, 20%);
    }
  }
}

.icinga-module.module-monitoring {
  .tactical {
    .box {
      border-color: @body-bg-color !important;
    }

    div.box.contents {
      background: @body-bg-color;
    }
  }
}

.icinga-module.module-director {
  form {
    input[type=text], input[type=password], textarea, select, .director-suggestions li {
      background-color: @body-bg-color;
      border-bottom: 1px solid @gray-light;
    }

    .director-suggestions li:hover {
      background-color: @icinga-blue;
    }

    ul.extensible-set input[type=text] {
      background-color: @icinga-blue;
      color: @base2;
    }

    p.description {
      background-color: @base02;
    }

    option {
      background-color: @body-bg-color;
    }
  }

  dd.active ul.extensible-set input[type=text], ul.extensible-set.sortable input[type=text] {
    background: @body-bg-color;
    border: 1px solid @gray-light;
  }

  ul.main-actions li a {
    color: @icinga-blue;
  }
}

/* Form styles */

@input-background: lighten(@base02, 5);

.icinga-controls {
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    background-color: @input-background;
  }

  & .toggle-switch .toggle-slider {
    background: @input-background;
    border: 2px solid @input-background;
  }

  & .toggle-switch .toggle-slider:before {
    background: @body-bg-color;
    border: 1px solid @body-bg-color;
  }

  & input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
    background-color: @button-primary-color;
    border: 1px solid @button-primary-color;
  }

  & input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
    box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@button-primary-color, 40);
  }

  & input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
    border: 1px solid @button-primary-color;
  }
}

.button {
  background-color: @input-background;
  border: 2px solid @input-background;
  color: @text-color;

  &:focus,
  &:hover,
  &.btn-primary {
    background-color: lighten(@base02, 15);
    border-color: lighten(@base02, 15);
    color: @text-color;
  }

  &.btn-primary:focus,
  &.btn-primary:hover {
    background-color: @button-primary-color;
    border-color: @button-primary-color;
    color: @text-color;
  }
}
