// out: main.css, compress: true

@server-ok: #4b6086;
@switch-ok: #4b8660;
@host-ok: @server-ok;
@host-fail: #bd3737;
@host-warn: #bf990f;
@black: black;
@white: white;
@darkgrey: #6b6b6b;
@lightgrey: lightgrey;
@grey: grey;
@service-ok: #10d44d;
@service-fail: lighten(@host-fail, 10%);

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: @lightgrey;
  font-family: sans-serif;
  position: absolute;
  height: 100%;
  width: 100%;
}

#monitors {
  padding-bottom: 3em;
}

.monitor {
  display: inline-block;
  padding: .25em;
  width: 100px;
  margin: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px black;
  color: @lightgrey;
  text-align: center;

  &[data-status='OK'] {
    background: @host-ok;
    &:hover {
      background: lighten(@host-ok, 10%);
    }

    &[data-file='servers'] {
      background: @server-ok;
      &:hover {
        background: lighten(@server-ok, 10%);
      }
    }
    &[data-file='switches'] {
      background: @switch-ok;
      &:hover {
        background: lighten(@switch-ok, 10%);
      }
    }

  }
  &[data-status='Fail'] {
    background: @host-fail;
    color: @white;
    &:hover {
      background: lighten(@host-fail, 10%);
    }
  }
  &[data-status='Warn'] {
    background: @host-warn;
    color: @white;
    &:hover {
      background: lighten(@host-warn, 10%);
    }
  }

  .name {
    font-size: .8em;
    font-style: italic;
  }
  .status {
    font-weight: bold;
    text-transform: uppercase;
  }

  .service {
    font-size: .8em;
    .name::before { font-style: normal; font-size: 1.5em; line-height: 1em;}
    &[data-status='OK'] .name::before { color: @service-ok; content: "\25CF "; }
    &[data-status='Fail'] .name::before { color: @service-fail; content: "\25A0 "; }

    .status {
      display: none;
    }
  }
}

header {

}

footer {
  position: fixed;
  bottom: 0;
  height: auto;
  //min-height: 2.5em;
  left: 0;
  right: 0;
  background-color: darken(@grey, 20%);
  color: @lightgrey;
  padding: 0.5em;
  text-align: center;
  vertical-align: bottom;

  #controls {
    float: left;
  }

  #status {
    .file-status {
      display: inline-block;
      padding: 0.5em;
      margin: 0 1em;
      border-radius: 5px;

      &[data-file=servers]{
        background-color: @server-ok;
      }
      &[data-file=switches]{
        background-color: @switch-ok;
      }
      &[data-freshness=stale]{
          background-color: mix(@darkgrey, @host-warn, 20%)
      }
    }
  }

  &:after {
    clear: both;
  }
}

body[data-servers-freshness=stale] {
  background-color: @darkgrey;
  .monitor[data-file=servers] {
    opacity: 0.25;
    background-color: mix(@darkgrey, @host-warn, 20%) !important;
  }
}
body[data-switches-freshness=stale] {
  background-color: @darkgrey;
  .monitor[data-file=switches] {
    opacity: 0.25;
    background-color: mix(@darkgrey, @host-warn, 20%) !important;
  }
}

button {
  margin: 2px;
  padding: 5px 5px 3px 5px;
  background-color: @grey;
  &[data-file=servers]{
    background-color: darken(@server-ok, 20%);
  }
  &[data-file=switches]{
    background-color: darken(@switch-ok, 20%);
  }
  color: @darkgrey;
  border: solid 1px @black;
  border-radius: 5px;
  font-size: inherit;

  &.selected, &:hover {
    margin: 1px;
    border-width: 2px;
    background-color: @grey;
    color: @white;

    &[data-file=servers]{
      background-color: @server-ok;
    }
    &[data-file=switches]{
      background-color: @switch-ok;
    }
  }

}