/* compass imports */
@import "compass/css3";
@import "compass/utilities/general/clearfix";

$c-lines: #eee;
$c-headline: #777;

$c-event-red: rgba(218, 88, 84, .75);
$c-event-yellow: rgba(240, 175, 83, .75);
$c-event-green: rgba(97, 186, 97, .75);
$c-event-blue: rgba(57, 126, 185, .75);
$c-event-sky: rgba(96, 194, 223, .75);
$c-event-grey: rgba(216, 216, 216, 0.75);

body {
  margin-top: 33px !important;
  position: relative;
}

#skel-layers-wrapper {
  -webkit-perspective: none !important;
}

#prophiler {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 12px;
  line-height: 1.42857143;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background-color: #fff;
  opacity: 0.97;
  @include box-shadow(0 3px 10px rgba(0, 0, 0, .125));

  * {
    background: none;
    color: $c-headline;
  }

  a {
    text-decoration: none;
    color: inherit;

    &:hover {
      text-decoration: underline;
    }
  }

  *,
  :before, :after {
    @include box-sizing(border-box);
    outline: none;
  }

  .color-0 {
    background-color: $c-event-red;
    color: #fff;
    * {
      color: inherit;
    }
    .badge {
      color: $c-event-red;
    }
  }
  .color-1 {
    background-color: $c-event-yellow;
    color: #fff;
    * {
      color: inherit;
    }
    .badge {
      color: $c-event-yellow;
    }
  }
  .color-2 {
    background-color: $c-event-green;
    color: #fff;
    * {
      color: inherit;
    }
    .badge {
      color: $c-event-green;
    }
  }
  .color-3 {
    background-color: $c-event-blue;
    color: #fff;
    * {
      color: inherit;
    }
    .badge {
      color: $c-event-blue;
    }
  }
  .color-4 {
    background-color: $c-event-sky;
    color: #fff;
    * {
      color: inherit;
    }
    .badge {
      color: $c-event-sky;
    }
  }
  .color-5 {
    background-color: $c-event-grey;
    color: darken($c-event-grey, 65%) !important;
    * {
      color: inherit;
    }
    .badge {
      color: darken(#fff, 10%) !important;
      background-color: darken($c-event-grey, 65%) !important;
    }
  }

  .label {
    display: inline-block;
    font-size: 1em;
    padding: .3em .6em .3em;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    @include text-shadow(none);

    a {
      color: #fff;
    }

    .badge {
      margin-left: 0.75em;
      background-color: #fff;
      display: inline-block;
      @include border-radius(10px);
      font-size: 0.75em;
      padding: 0.25em 0.5em;
      line-height: 1em;
    }
  }

  .toolbar {
    display: block;
    position: relative;
    @include clearfix();
    white-space: nowrap;

    min-height: 31px;
    border: 1px solid transparent;
    background-color: #f8f8f8;
    border-color: #e7e7e7;

    h1 {
      color: $c-headline;
      float: left;
      padding: 5px 15px;
      font-size: 18px;
      line-height: 20px;
      margin: 0;
    }

    nav {
      float: left;
      left: 150px;

      color: #fff;

      a {
        text-decoration: none;
        border: none;
      }

      a:hover {
        text-decoration: none;
      }

      ul {
        margin: 0;
        li {
          padding: 7px;
          float: left;
          list-style: none;
        }
      }
    }
  }

  .table {
    color: lighten(#000, 30%);
    padding: 10px 0;
    position: relative;

    .section {
      &:nth-child(even) {
        background-color: rgba(200, 200, 200, .15);
      }
    }

    .row {
      margin: 0;
      position: relative;
      height: 24px;
      @include clearfix();
      cursor: pointer;

      .column {
        float: left;
        padding: .4em .6em .4em;
        border-left: 1px solid $c-lines;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .column-name {
        width: 25%;
      }

      .column-aggregation {
        width: 62.5%;
      }

      .column-message {
        width: 75%;
      }

      .column-severity {
        text-align: right;
        width: 10%;
        padding-top: 3px;
      }

      .column-component {
        width: 10%;
      }

      .column-duration,
      .column-memory {
        text-align: right;
        width: 7.5%;
      }

      .column-timeline {
        width: 49%;
        padding: 0;
        border-left: none;
      }

      &:hover {
        background-color: rgba(200, 200, 200, .2);
      }

      &.header {
        height: 19px;

        &:hover {
          background: none;
        }

        .column {
          height: 19px;
          font-weight: 500;
          font-size: .8em;
          line-height: 1;
          color: #aaa;
          text-align: left;
          padding-top: 0;
        }
      }
      .timeline {

        position: relative;
        height: 23px;

        &:before,
        &:after {
          display: none;
        }

        .benchmark {
          position: absolute;
          display: inline;
          padding: 3px;
          margin-top: 10px;
          @include border-radius(2px);
        }
      }
    }

    .details {
      position: relative;
      @include box-shadow(inset 0 0 5px rgba(0, 0, 0, .25));
      padding: 10px;
      display: none;
    }

    .aggregation-details {
      position: relative;
      @include box-shadow(inset 0 0 5px rgba(0, 0, 0, .25));
      display: none;
      background-color: rgba(200, 200, 200, .1);

      .table {
        padding-top: 15px;
        padding-bottom: 15px;

        .timeline-scale {
          top: 10px;
        }
      }
    }

    .timeline-scale {
      position: absolute;
      top: 5px;
      right: 0;
      bottom: 0;
      left: 50%;

      .marker {
        position: absolute;
        top: 0px;
        bottom: 0px;

        .line {
          position: absolute;
          top: 0px;
          bottom: 5px;
          background-color: $c-lines;
          width: 1px;
        }

        .label {
          font-weight: 500;
          font-size: .8em;
          color: #aaa;
        }
      }
    }
  }

  .benchmarks {
    position: relative;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
  }

  .logs {
    position: relative;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
  }

  .datacollector {
    display: none;
    padding: 20px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;

    h2 {
      font-size: 1.4em;
      margin: 0;
      color: $c-headline;
    }
  }

  .aggregator {
    display: none;
    padding: 20px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;

    h2 {
      font-size: 1.4em;
      margin: 0;
      color: $c-headline;
    }
  }

  dl {
    @include clearfix();
    margin-top: 0;
    margin-bottom: 0;

    dt {
      float: left;
      width: 160px;
      overflow: hidden;
      clear: left;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    dd {
      margin-left: 180px;
    }
  }

  pre {
    font-size: 1em;
    margin-top: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;

    * {
      color: inherit;
    }
  }

  .severity-debug {
    @extend .color-5;
  }

  .severity-info {
    @extend .color-2;
  }

  .severity-notice {
    @extend .color-3;
  }

  .severity-warning {
    @extend .color-1;
  }

  .severity-error,
  .severity-critical,
  .severity-alert,
  .severity-emergency {
    @extend .color-0;
  }
}

@media (max-width: 736px) {
  .toolbar {
    .logo {
      display: none;
    }

    .fa {
      display: none;
    }
  }
}
