pathfinder/sass/layout/_main.scss

body{
  // prevent marking text
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pf-body{
  overflow: hidden;
}


a{
  color: $teal;
  will-change: color;
  text-decoration: none;
  @include transition( color 0.08s ease-out );

  &:hover{
    color: $teal-lightest;
    text-decoration: none;
  }

  &:focus{
    color: $teal;
  }
}

// emphasized text
em{

  font-style: italic;

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

.pf-font-capitalize{
  text-transform: capitalize;
}

.no-padding{
  padding: 0 !important;
}

// help elements ====================================================
.pf-help{
  cursor: pointer; // fallback
  cursor: help;
  @extend .txt-color;
  @extend .txt-color-gray;
  @include transition( color 0.08s ease-out );

  &:hover{
    @extend .txt-color-blue;
  }
}

// icon buttons =====================================================
.pf-dialog-icon-button{
  cursor: pointer;
  margin-top: 2px;
  @include transition(color 0.15s ease-out);

  &:not(.collapsed), &:hover{
    color: $orange;
  }
}

.pf-module-icon-button{
  cursor: pointer;
  @include transition(color 0.15s ease-out);

  &:hover{
    color: $orange;
  }

}

// alert messages ===================================================
.alert{
  will-change: opacity, transform;
}

// form fields custom styles ========================================
.editable-input{
  optgroup[label]{
    background-color: $gray;
    color: $gray-light;

    option{
      background-color: $gray-dark;
      color: $gray-lighter;
      font-family: $font-family-monospace;
    }
  }
}
select:active, select:hover {
  outline: none
}

/* make it red instead (with with same width and style) */
select:active, select:hover {
  outline-color: red
}

// select2 custom template ==========================================

.select2-results{
  [class*="col-"]{
    line-height: 22px;
  }
}

.select2{
  ::-webkit-search-cancel-button{
    -webkit-appearance: none !important;
  }

  .select2-selection__choice__remove{
    float: left;
  }

  .select2-selection--multiple{
    input{
      box-shadow: none !important;
    }
  }
}

// global datatable styles ==========================================
.dataTable{

  th{
    &.pf-table-image-cell,
    &.pf-table-image-small-cell{
      // no padding for image content
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    &.sorting,
    &.sorting_asc,
    &.sorting_desc{
      // prevent overlapping of text and sort icon (if text-right align)
      padding-right: 18px !important;
    }
  }

  // "special" column styles
  td{
    &.pf-table-action-cell{
      cursor: pointer;
    }

    &.pf-table-image-cell{
      // no padding for image content
      padding: 0 !important;

      img{
        width: 26px; // smaller image (default 32)
        border-left: 1px solid $gray;
        border-right: 1px solid $gray;
      }
    }

    &.pf-table-image-small-cell{
      img{
        width: 24px; // smaller image (default 32)
        // overwrite "default" border for image cells
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
      }
    }

    &.pf-table-counter-cell{
      color: $gray-light;

      .pf-digit-counter-small{
        width: 20px;
        display: inline-block;
        font-size: 10px;
      }

      .pf-digit-counter-large{
        width: 26px;
        display: inline-block;
        font-size: 10px;
      }
    }
  }

}

// table styles =====================================================
table{
  tr{
    &.collapsing{
      @include transition( height .01s ease );
    }

    &.collapse{
      &.in{
        display: table-row !important;
      }
    }
  }
}


// table icon toolbar
.pf-table-tools{
  height: 45px;

  .btn:not(:last-child){
    margin-right: 10px;
  }
}

.pf-table-tools-action{
  will-change: height, opacity, display;
  opacity: 0; // triggered by js
  display: none; // triggered by js
  height: 0;
  visibility: hidden;
}

// laoding indicator overlay =====================================
.pf-loading-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: $gray-darker;
  z-index: 1060;
  @include border-radius(5px);

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

//  navbar li ====================================================
.navbar-nav {
  li{
    &:hover, &.active{

      &:before{
        top: -4px;
        opacity: 1;
      }

    }

    &:before{
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: $green;
      top: 0;
      opacity: 0;
      will-change: opacity, top;
      @include transition( top 0.15s ease-out, opacity 0.15s ease-out );
    }

  }
}


.pf-navbar-version-info{
  cursor: pointer;
}

// page menu =====================================================
.pf-site{
  will-change: transform;
}

.sb-slidebar{
  will-change: transform;
}

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

// custom scrollbars =============================================
.mCSB_container, .mCSB_dragger{
  will-change: top, left;
}

// log types =====================================================
.pf-log-info{
  @extend .txt-color-green;
}

.pf-log-warning{
  @extend .txt-color-warning;
}

.pf-log-error{
  @extend .txt-color-red;
}

// map types =====================================================
.pf-map-type-private{
  color: $indigo;
}

.pf-map-type-corporation{
  color: $green;
}

.pf-map-type-alliance{
  color: $blue;
}

.pf-map-type-global{
  color: $teal-lighter;
}

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

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

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

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

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

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

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

    .pf-map-tab-icon{
      margin-right: 5px;
    }

    .pf-map-tab-shared-icon{
      margin-left: 5px;
    }
  }
}

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

  // all modules within a row
  .pf-module{
    font-family: $font-family-bold;
    background: rgba($gray, 0.3);
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    will-change: height, transform, opacity;
    overflow: hidden;
    @include border-radius(5px);

    &:before{
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      border-style: solid;
      border-width: 0 0 8px 8px;
      border-color: transparent transparent transparent $gray;
      cursor: pointer;
    }

    // all labels in a module
    .label{
      margin-bottom: 10px;
    }

    // dynamic areas as child of a module
    .pf-dynamic-area{
      background: rgba($gray-darker, 0.4);
    }

    h5{
      // icons in headline
      .pf-module-icon-button{
        margin-left: 5px;
      }
    }
  }

}

// User status =================================================
.pf-user-status{
  color: $red-darker;
}

.pf-user-status-corp{
  color: $green;
}

.pf-user-status-ally{
  color: $blue;
}

.pf-user-status-own{
  color: $indigo;
}

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

.pf-system-effect{
  display: none;      // if effect is active it will be overwritten
  cursor: default;
  color: $gray-lighter;
}

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

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

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

.pf-system-effect-wolfrayet{
  color: $wh-color-wolfrayet;
  display: inline-block;
}

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

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

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

.pf-system-sec-unknown{
  color: $indigo;
}

// 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-lighter !important;
  color: $teal-lighter;
}

// system status within label
.pf-system-info-status-label{
  background-color: $gray-light;
  color: $black;
  will-change: background-color;
  @include transition( background-color 0.5s ease-out );

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

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

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

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

  &.pf-system-status-unscanned{
    background-color: $teal-lighter;
  }
}

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

    td{
      text-transform: capitalize;
    }
  }
}

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

  &.pf-map-connection-stargate{
    background-color: $indigo-darkest;
    border-color: $gray-light;
  }

  &.pf-map-connection-jumpbridge{
    background-color: $teal-lightest;
    border-color: $gray;
    background: repeating-linear-gradient(
        to right,
        $teal-lightest,
        $teal-lightest 10px,
        $gray 10px,
        $gray 20px
    );
  }

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

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

  &.pf-map-connection-wh-critical{
    background-color: $red-darker;
  }

  &.pf-map-connection-frig{
    border-style: dashed;
    border-left: none;
    border-right: none;

    &:after{
      content: 'frig';
      background-color: $orange;
      color: $gray-darkest;
      padding: 0px 3px;
      position: absolute;
      left: 25px;
      top: -6px;
      font-family: $font-family-bold;
      @include border-radius(3px);
    }
  }

  &.pf-map-connection-preserve-mass{
    &:after{
      content: 'save mass';
      background-color: $red-darker;
      color: $gray-lightest;
      padding: 0px 3px;
      position: absolute;
      left: 9px;
      top: -6px;
      font-family: $font-family-bold;
      @include border-radius(3px);
    }
  }

}


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


.modal{

  // tooltips within modals
  .tooltip{
    // higher z-index
    z-index: $zindex-modal + 10;

    .tooltip-inner{
      color: $gray-dark;
      background-color: $gray-lighter;
    }
  }


}

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

// global popover settings ======================================
.popover{

  // on top of modals even if they are attached to <body>
  z-index: $zindex-modal + 10;

  // image in popover
  img{
    @include border-radius(5px);
  }

  h4{
    color: $gray-lighter;
  }

  // table in pop popover
  table{
    color: $gray-lighter;
    font-family: $font-family-bold;
    line-height: 16px;
    font-size: 11px;

    td{
      padding: 0 5px;
    }
  }
}

// dynamic area (e.g. for loading animation) ====================
.pf-dynamic-area{
  padding: 10px;
  min-height: 100px;
  position: relative;
  background-color: $gray-dark;
  overflow: hidden;
  @include border-radius(5px);

  .dl-horizontal{
    margin-bottom: 0;

    dd{
      min-width: 100px;
    }
  }
}

// svg logo =====================================================
#pf-logo-wrapper{
  display: block; // remove default height
}

// header =======================================================
#pf-head{
  margin-bottom: 0px;

  a{
    @include transition( color 0.15s ease-out );
    will-change: color;

    &:focus{
      color: $teal;

      img{
        border-color: $gray;
      }
    }

    &:hover{
      text-decoration: none;

      .badge{
        color: $teal-lightest;
      }

      img{
        border-color: $teal-lighter;
      }
    }
  }

  i{
    margin-right: 2px;
  }

  // brand description (smaller text)
  .pf-brand-desc{
    margin: 6px 10px 0 90px;
    width: 180px;
  }

  .pf-head-menu{

    //overwrite some default styles
    padding: 3px 10px;
    line-height: 24px;

    .pf-head-menu-logo{
      width: 24px;
      height: 24px;
      display: inline-block;
      float: left;
    }

  }

  .badge{
    background-color: $gray;
    color: $gray-lighter;
  }


  .pf-head-user-character, .pf-head-user-ship{
    opacity: 0; // triggered by js
    visibility: hidden;
  }

  .pf-head-active-user, .pf-head-current-location{
    display: none; // triggered by js

    .badge{
      @include transition( color 0.3s ease-out );
    }
  }

  .pf-head-user-character-image, .pf-head-user-ship-image{
    display: inline-block;
    margin-top: -6px;
    margin-bottom: -6px;
    width: 27px;
    border: 1px solid $gray;
    margin-right: 3px;
    @include transition( border-color 0.15s ease-out );
    will-change: border-color;
  }

  .pf-head-program-status{
    cursor: pointer;
  }

  .navbar-text{
    min-width: 60px; // fixes a load-delay issue for "toggle" map-tracking
  }

  // tooltips header
  .tooltip{
    .tooltip-inner{
      color: $gray-lighter;
    }
  }

}

.pf-head{
  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
}

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

  a{
    font-family: $font-family-bold;
    color: $teal-dark;

    &:hover{
      color: $teal;
      text-decoration: none;
    }
  }
}

/*
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;
  }
}