pathfinder/sass/layout/_main.scss

@import "compass/css3/border-radius";

body{
  font-family: 'Oxygen Bold';
  color: $gray-light;
}

a{
  color: $teal-dark;

  &:hover{
    color: $teal;
  }
}

// emphasized text
em{
  &.pf-brand{
    text-transform: uppercase;
  }
}

// ajax laoding indicator overlay

.pf-loading-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: $gray-darker;
  @include transition(opacity, 0.15s linear);
  @include border-radius(5px);


  .pf-loading-overlay-wrapper{
    width: 20px;
    height: 20px;
    margin: auto;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.pf-loading-overlay-visible{
  opacity: 0.5;
}

// page menu ================================================
.sb-left{
  .list-group-item{
    @include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}

.sb-right{
  .list-group-item{
    @include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}


// maps module ===================================================
#pf-map-module{
  margin: 0 10px;

  // Tabs (colored)
  #pf-map-tabs {

    .pf-map-type-default{
      border-top: 2px solid transparent;
    }

    .pf-map-type-global{
      border-top: 2px solid $green;
    }

    .pf-map-type-alliance{
      border-top: 2px solid $blue;
    }

    .pf-map-type-private{
      border-top: 2px solid $teal;
    }
  }

}

// Tab Content Body Grid ========================================
.pf-map-content-row{
  margin: 10px 0 0 0;
  padding-bottom: 40px; // space for footer

  // alle Module innerhalb einer row
  .pf-module{
    @include border-radius(5px);
    background: rgba($gray, 0.3);
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

}

// WH effects ==================================================

.pf-system-effect{
  cursor: default;
  color: $gray-lighter;
}

.pf-system-effect-magnetar{
  color: $wh-color-magnetar;
}

.pf-system-effect-redgiant{
  color: $wh-color-redgiant;
}

.pf-system-effect-pulsar{
  color: $wh-color-pulsar;
}

.pf-system-effect-wolfryet{
  color: $wh-color-wolfryet;
}

.pf-system-effect-cataclysmic{
  color: $wh-color-cataclysmic;
}

.pf-system-effect-blackhole{
  color: $wh-color-blackhole;
}

// system info status ================================================
.pf-system-info-rally{
  .pf-system-head{
    background-color: $pink-darker;

    @include background-image(linear-gradient(-45deg,
      $purple-dark 25%,
      transparent 25%,
      transparent 50%,
      $purple-dark 50%,
      $purple-dark 75%,
      transparent 75%,
      transparent));
    background-size:25px 25px;
    -webkit-animation:move 3s linear infinite;
    -moz-animation:move 3s linear infinite;
    -ms-animation:move 3s linear infinite;
    animation:move 3s linear infinite;
  }
}


// system security status ============================================

.pf-system-security-0-0{
  color: $system-color-sec-0-0;
}

.pf-system-security-0-1{
  color: $system-color-sec-0-1;
}

.pf-system-security-0-2{
  color: $system-color-sec-0-2;
}

.pf-system-security-0-3{
  color: $system-color-sec-0-3;
}

.pf-system-security-0-4{
  color: $system-color-sec-0-4;
}

.pf-system-security-0-5{
  color: $system-color-sec-0-5;
}

.pf-system-security-0-6{
  color: $system-color-sec-0-6;
}

.pf-system-security-0-7{
  color: $system-color-sec-0-7;
}

.pf-system-security-0-8{
  color: $system-color-sec-0-8;
}

.pf-system-security-0-9{
  color: $system-color-sec-0-9;
}

.pf-system-security-1-0{
  color: $system-color-sec-1-0;
}

// system security level =============================================

.pf-system-sec{
  margin-right: 5px;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.pf-system-sec-highSec{
  color: $green;
}

.pf-system-sec-lowSec{
  color: $orange;
}

.pf-system-sec-nullSec{
  color: $red;
}

.pf-system-sec-high{
  color: $red;
}

.pf-system-sec-mid{
  color: $orange;
}

.pf-system-sec-low{
  color: $blue;
}

// system status ======================================================

.pf-system-status-friendly{
  border-color: $blue !important;
  color: $blue;
}

.pf-system-status-occupied{
  border-color: $orange !important;
  color: $orange;
}

.pf-system-status-hostile{
  border-color: $red !important;
  color: $red;
}

.pf-system-status-empty{
  border-color: $green !important;
  color: $green;
}

.pf-system-status-unscanned{
  border-color: $teal !important;
  color: $teal;
}

// system effect info dialog
.pf-system-effect-dialog-wrapper, .pf-jump-info-dialog{
  .table{
    margin: 15px 0;
    font-size: 10px;

    td{
      text-transform: capitalize;
    }
  }
}

// "fake connection" classes for the map legend
.pf-connection{
  box-sizing: content-box;
  display: inline-block;
  width: 30px;
  height: 4px;
  margin-right: 5px;
  border-top: 2px solid $gray-light;
  border-bottom: 2px solid $gray-light;
  background-color: #3c3f41;

  &.pf-connection-eol{
    border-color: $pink-dark;
  }

  &.pf-connection-reduced{
    background-color: $orange;
  }

  &.pf-connection-critical{
    background-color: $red-darker;
  }
  &.pf-connection-frig{
    border-style: dashed;
    border-left: none;
    border-right: none;
  }

}


// global tooltip settings ======================================
.tooltip-inner{
  color: $green;
  background-color: $gray;
  font-family: 'Oxygen Bold';
  padding: 5px 5px;
  @include border-radius(3px);
  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
}

.tooltip.top .tooltip-arrow,{
  border-top-color: $gray-light;
}

.tooltip.right .tooltip-arrow,{
  border-right-color: $gray-light;
}

.tooltip.bottom .tooltip-arrow{
  border-bottom-color: $gray-light;
}

.tooltip.left .tooltip-arrow{
  border-left-color: $gray-light;
}

// footer =======================================================
#pf-footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background: rgba($gray, 0.3);
}

/*
Animate the stripes
*/
@-webkit-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@-ms-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}



// TODO move in seperate file!!! ====================================

#pf-legend-scrollspy{
  position: relative;
  height: 500px;
  overflow: auto;
}