pathfinder/sass/layout/_map.scss

.pf-map{
  background-color: $gray-darker;
  width: 1200px;
  height: 500px;
  position: relative;
  overflow: hidden;

  @include border-bottom-radius(5px);
  border: {
    width: 1px;
    style: solid;
    color: $gray-lighter;
  }


  .pf-system{
    position: absolute;
    min-width: 50px;
    height: auto;
    background-color: $gray-dark;
    z-index: 100;

    @include border-radius(5px);
    border: {
      width: 2px;
      style: solid;
      color: $gray-light;
    }

    .pf-system-head{
      padding: 0px 3px 2px 3px;
      cursor: pointer;
      color: $gray-lighter;
    }

    // System security =============================================

    .pf-system-sec{
      margin-right: 5px;
      cursor: help;
    }

    .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;
    }

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

    .pf-system-effect{
      margin-left: 5px;
      cursor: default;
    }

    .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;
    }

    // ===============================================================

    .pf-system-body{
      min-height: 10px;
      cursor: move;

      border: {
        top: {
          width: 2px;
          style: dashed;
          color: $gray-light;
        }
      }
    }
  }

  .pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
    @include box-shadow($yellow-lighter 0px 0px 8px 1px);
    @include transition-duration(0.2s);
  }

  // System status ===============================================

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

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

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

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

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

  // Endpoints ====================================================
  .pf-map-endpoint-source, .pf-map-endpoint-target{

    z-index: 50;
    svg {
      width: 10;
      height: 10;

      *{
        stroke: $gray-light;
        stroke-width: 2; // border width
        fill: $gray;
        cursor: pointer;

        &:hover{
          stroke: $gray-lightest; // hover style
        }
      }

    }
  }
  // Connections ==================================================

  // default hover effect for all connections
  svg._jsPlumb_connector{
    cursor: pointer;
    stroke-linecap: round; // line endings

    path:not(first-child){
      stroke: $gray; // inner line
    }

    path:first-child{
      stroke: $gray-light; // outer line
    }

    &:hover{
      path:first-child{
        stroke: $gray-lightest; // hover style
      }
    }
  }


  svg.pf-map-connection-wh  {
    // special wh-connection style (
  }

  svg.pf-map-connection-wh-eol  {

    path:first-child{
      stroke: $pink-dark;
    }

    &:hover{
      path:first-child{
        stroke: $pink;
      }
    }
  }

  svg.pf-map-connection-wh-reduced  {

    path:not(first-child){
      stroke: $orange;
    }
  }

  svg.pf-map-connection-wh-critical  {

    path:not(first-child){
      stroke: $red-darker;
    }
  }

  svg.pf-map-connection-frig  {

    path:not(first-child){
      stroke: $gray;
    }

    path:first-child{
      stroke: $gray-lighter;
    }
  }

  // Connection status ============================================

  svg.pf-map-connection-eol  {

    path:first-child{
      stroke: red;
    }
  }

}

// system dialog =================================================
#pf-system-dialog{
  label{
    min-width: 60px;
  }
}

// context menu ==================================================
.dropdown-menu{
  i{
    width: 20px
  }
}