/* Copyright (C) 2017 Icinga Development Team <info@icinga.com> */

// See Icinga Web 2: public/css/icinga/base.less
// All handled are color black to ensure readability, expect for warning
@tlv-color-critical-bg: @color-critical;
@tlv-color-critical-fg: white;
@tlv-color-critical-handled-bg: @color-critical-handled;
@tlv-color-critical-handled-fg: black;

@tlv-color-warning-bg: @color-warning;
@tlv-color-warning-fg: black;
@tlv-color-warning-handled-bg: @color-warning-handled;
@tlv-color-warning-handled-fg: black;

@tlv-color-unknown-bg: @color-unknown;
@tlv-color-unknown-fg: white;
@tlv-color-unknown-handled-bg: @color-unknown-handled;
@tlv-color-unknown-handled-fg: black;

@tlv-color-ok-bg: @color-ok;
@tlv-color-ok-fg: @text-color-inverted;

@tlv-color-downtime-bg: fade(@color-ok, 75%);
@tlv-color-downtime-fg: black;
@tlv-color-downtime-handled-bg: @color-ok;
@tlv-color-downtime-handled-fg: @color-warning-handled;

@tlv-color-pending-bg: @color-pending;
@tlv-color-pending-fg: white;

@tlv-color-missing-bg: @gray-light;
@tlv-color-missing-fg: @text-color;

.tlv-overview-tiles .tlv-overview-tile {
  display: block;
  float: left;
  padding: 1em;
  margin: 0.5em;
  position: relative;
  width: 20em;
  height: 10em;
  border: 1px solid @gray-light;
  text-decoration: none;

  &:hover {
    background-color: @tr-hover-color;
  }

  .tlv-title {
    font-weight: bold;
    font-size: 1.25em;
    .text-ellipsis();
  }

  .tlv-name {
    color: @gray;
    .text-ellipsis();
  }
}

.tlv-status-tile {
  &.critical, &.down {
    background-color: @tlv-color-critical-bg;
    color: @tlv-color-critical-fg;
  }
  &.critical.handled, &.down.handled {
    background-color: fade(@tlv-color-critical-handled-bg, 50%);
    color: @tlv-color-critical-handled-fg;
  }
  &.unknown, &.unreachable {
    background-color: @tlv-color-unknown-bg;
    color: @tlv-color-unknown-fg;
  }
  &.unknown.handled, &.unreachable.handled {
    background-color: fade(@tlv-color-unknown-handled-bg, 50%);
    color: @tlv-color-unknown-handled-fg;
  }
  &.warning {
    background-color: @tlv-color-warning-bg;
    color: @tlv-color-warning-fg;
  }
  &.warning.handled {
    background-color: fade(@tlv-color-warning-handled-bg, 50%);
    color: @tlv-color-warning-handled-fg;
  }
  &.ok, &.up {
    background-color: @tlv-color-ok-bg;
    color: @tlv-color-ok-fg;
  }
  &.downtime.active {
    background-color: @tlv-color-downtime-bg;
    color: @tlv-color-downtime-fg;
  }
  &.downtime.handled {
    background-color: @tlv-color-downtime-handled-bg;
    color: @tlv-color-downtime-handled-fg;
  }
  &.pending {
    background-color: @tlv-color-pending-bg;
    color: @tlv-color-pending-fg;
  }
  &.missing {
    background-color: @tlv-color-missing-bg;
    color: @tlv-color-missing-fg;
  }
  &.total {
    background-color: @icinga-blue;
    color: @text-color-on-icinga-blue;
  }
}

.tlv-status-badge {
  .badges {
    .badge {
      border: 0.1em solid @white;
      margin-left: 0.2em;
    }
  }

  &.critical, &.down {
    background-color: @tlv-color-critical-bg;
    color: @tlv-color-critical-fg;
  }
  &.critical.handled, &.down.handled {
    background-color: @tlv-color-critical-handled-bg;
    color: @tlv-color-critical-handled-fg;
  }
  &.unknown, &.unreachable {
    background-color: @tlv-color-unknown-bg;
    color: @tlv-color-unknown-fg;
  }
  &.unknown.handled, &.unreachable.handled {
    background-color: @tlv-color-unknown-handled-bg;
    color: @tlv-color-unknown-handled-fg;
  }
  &.warning {
    background-color: @tlv-color-warning-bg;
    color: @tlv-color-warning-fg;
  }
  &.warning.handled {
    background-color: @tlv-color-warning-handled-bg;
    color: @tlv-color-warning-handled-fg;
  }
  &.ok, &.up {
    background-color: @tlv-color-ok-bg;
    color: @tlv-color-ok-fg;
  }
  &.downtime.active {
    background-color: @tlv-color-downtime-bg;
    color: @tlv-color-downtime-fg;
  }
  &.downtime.handled {
    background-color: @tlv-color-downtime-handled-bg;
    color: @tlv-color-downtime-handled-fg;
  }
  &.pending {
    background-color: @tlv-color-pending-bg;
    color: @tlv-color-pending-fg;
  }
  &.missing {
    background-color: @tlv-color-missing-bg;
    color: @tlv-color-missing-fg;
  }
  &.total {
    background-color: @icinga-blue;
    color: @text-color-on-icinga-blue;
  }
}

.tlv-status-section {
  &.critical, &.down {
    border-color: @tlv-color-critical-bg;
  }
  &.critical.handled, &.down.handled {
    border-color: @tlv-color-critical-handled-bg;
  }
  &.unknown, &.unreachable {
    border-color: @tlv-color-unknown-bg;
  }
  &.unknown.handled, &.unreachable.handled {
    border-color: @tlv-color-unknown-handled-bg;
  }
  &.warning {
    border-color: @tlv-color-warning-bg;
  }
  &.warning.handled {
    border-color: @tlv-color-warning-handled-bg;
  }
  &.ok, &.up {
    border-color: @tlv-color-ok-bg;
  }
  &.pending {
    border-color: @tlv-color-pending-bg;
  }
  &.missing {
    border-color: @tlv-color-missing-bg;
  }
}

.tlv-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 0 !important;
  padding-left: 0 !important;

  .tlv-header {
    margin: 0.5em;
  }
}

/** BEGIN of header **/
.tlv-header {
  display: inline-block;

  h1 {
    display: inline-block;
    border: none;
    margin: 0 0.5em 0 0;
  }

  .last-refresh {
    display: inline-block;
  }

  .action-links {
    display: inline-block;
    margin: 0 0.5em;
  }

  .badges {
    .badge {
      margin-left: 0.2em;
    }
  }
}
/** END of header **/

/** BEGIN of tiles **/
.tlv-view-tiles {
  display: flex;
  flex-wrap: wrap;
  height: 100%;

  .tlv-tiles {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    margin-top: -2.3em; // - padding title - margin tile
    padding-top: 2.3em; // + padding title + margin tile
  }

  .tlv-tile {
    margin: 0.1em;
    flex-grow: 1;
    overflow: hidden;

    .badges {
      display: inline-block;
      font-weight: normal;
      margin-left: 0.2em;

      .badge {
        font-size: 0.7em;
        border: 0.1em solid @white;
        margin-left: 0.2em;
      }
    }
  }

  .tlv-tile-title {
    display: inline-block;
    width: 100%;
    padding: 0.1em;
  }

  > .tlv-tile { // first level
    min-width: 40%;
    border-style: solid;
    border-width: 1px 1px 1px 4px;
    padding: 0.1em;
    margin: 0.2em 0.5em;

    > .tlv-tile-title {
      font-weight: bold;

      > .badges {
        float: right;
      }
    }

    > .tlv-tiles > .tlv-tile { // second level
      min-width: 10%;

      > .tlv-tile-title {
        height: 100%;
        text-align: center;

        &:before {
          content: "";
          display: inline-block;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
  }
}
/** END of tiles **/

#layout.wide-layout .tlv-view-tiles .tlv-tile-title {
  font-size: 1.3em;
}

#layout.wide-layout.twocols .tlv-view-tiles .tlv-tile-title {
  font-size: 1.1em;
}

/** BEGIN of tree **/
.tlv-view-tree {
  .tlv-tree-node {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    width: 100%;

    &.tlv-collapsed {
      width: auto;
    }

    background: none;
    border-style: solid;
    border-width: 2px 0 0 5px;
    padding: 0.2em 0 0 1em;

    &.tlv-collapsed {
      > .tlv-tree-node, > .tlv-node-icinga {
        display: none;
      }
    }

    .badges {
      display: inline-block;
      font-size: 0.9em;

     .badge {
        border: 0.1em solid @white;
        margin-left: 0.2em;
      }
    }
  }

  > .tlv-tree-node {
    border-right-width: 2px;

    &:last-of-type {
      border-bottom-width: 2px;
    }
  }

  .tlv-tree-title {
    display: block;
    width: 100%;
    white-space: nowrap;
    margin: -0.2em 0 0 -1em;
    padding: 0.3em 0.3em 0.3em 0.3em;

    .badges {
      float: right;
    }
  }

  .tlv-node-icinga {
    flex-grow: 1;
    margin: 0.2em;
    padding: 0.2em 1em;
    white-space: nowrap;
    border-radius: 0.5em;
    font-size: 0.9em;
  }
}
/** END of tree **/

.tlv-collapsible {
  .icon.tlv-collapse-handle::before {
    font-size: 1.3em;
    content: '\e81d';
  }
}

.tlv-collapsed {
  .icon.tlv-collapse-handle::before {
    content: '\e820';
  }
}

/** BEGIN of breadcrumb **/
.breadcrumb {
  list-style: none;
  overflow: hidden;
  padding: 0;
  // breadcrumb badges
  .badges {
    display: inline-block;
    padding: 0 0 0 0.5em;
    .badge {
      line-height: 1.25em;
      font-size: 0.8em;
      border: 1px solid @white;
      margin: -0.25em 1px 0 0;
    }
  }
}

.breadcrumb:after {
  content: '';
  display: block;
  clear: both;
}

.breadcrumb li {
  float: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.breadcrumb li a {
  color: @text-color;
  margin: 0;
  font-size: 1.2em;
  text-decoration: none;
  padding-left: 2em;
  line-height: 2em;
  background: @gray-light;
  position: relative;
  display: block;
  float: left;
  &:focus {
    outline: none;
  }
}

.breadcrumb li a:before, .breadcrumb li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 1.3em solid transparent;
  border-bottom: 1.2em solid transparent;
  position: absolute;
  margin-top: -1.2em;
  top: 50%;
  left: 100%;
}

.breadcrumb li a:before {
  border-left: 1.2em solid @gray-lightest;
  margin-left: 1px;
  z-index: 1;
}

.breadcrumb li a:after {
  border-left: 1.2em solid @gray-light;
  z-index: 2;
}

.breadcrumb li:first-child a {
  padding-left: 1em;
  padding-right: 0.5em;
}

.breadcrumb li:not(:last-child) a:hover {
  background-color: @gray-lighter;
}

.breadcrumb li:not(:last-child) a:hover:after {
  border-left-color: @gray-lighter;
}

.breadcrumb li a:focus {
  text-decoration: underline;
}

#layout.twocols, #layout.layout-minimal, div.compact {
  .breadcrumb {
    font-size: 0.833em;
  }
}

/** END of breadcrumb **/

.action-links {
  .action-link {
    margin-right: 1em;
  }
}

.warning-note {
  padding: 0.5em;
  border-radius: 0.5em;
  background: fade(@tlv-color-warning-bg, 40%);
  color: @text-color;
}

.CodeMirror {
  min-height: 60em;
  width: 100%;
  margin-bottom: 1em;
  border: 1px solid @gray-light;
  font-family: inherit;

  pre {
    font-family: @font-family-fixed;
    font-size: 1.2em;
  }
}

div[href].action.active {
  border-left-color: @icinga-blue;
}

div[href].action:hover {
  cursor: pointer;

  a[href]:first-of-type {
    text-decoration: underline;
  }
}
