pathfinder/sass/layout/_main.scss

$endpointBubbleWidth: 18px;

:fullscreen{
  overflow-y: scroll; // overwrites browser default
}

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;
  cursor: default;
}

// links ==========================================================================================
a, .pf-link{
  color: $teal;
  will-change: color;
  text-decoration: none;
  cursor: pointer;
  @include transition( color 0.08s ease-out, background-color 0.08s ease-out );

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

  &:focus{
    color: $teal;
  }

  &.disabled{
    color: $navbar-default-link-color;
    pointer-events: none;
    cursor: default;
  }
}

em,
.pf-font-italic{
  font-style: italic;

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

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

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

.pf-font-line-through{
  text-decoration: line-through;
}

.fa-char{
  &:before{
    font-family: Arial, sans-serif;
    font-weight: bold;
    content: attr(data-char-content);
  }
}

.fa-tree-child{
  @extend .fa-fw;
  @extend .fa-lg;
  @extend .fa-level-up-alt;
  @extend .fa-rotate-90;
  color: $gray-light;
  padding-right: 5px;
}

.no-scroll{
  overflow: hidden;
}

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

.no-margin{
  margin: 0;
}

// show/hide by [data-attr] value =================================================================
.pf-hidden-by-attr{
  &[data-attr='']{
    display: none;
  }

  &:not([data-attr='']){
    display: initial;
  }

  &:before{
    content: attr(data-attr) ' ' attr(data-attr-label);
  }
}

.pf-shown-by-attr{
  &[data-attr='']{
    display: initial;
  }

  &:not([data-attr='']){
    display: none;
  }

  &:before{
    content: attr(data-attr) ' ' attr(data-attr-label);
  }
}

// scroll bar (webkit only) =======================================================================
::-webkit-scrollbar {
  display: none;  // hides the scrollbar but is still scrollable
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-color: $gray-darker;
  border-left: 1px solid $gray-dark;
  border-radius: 2px;
  @include transition( background-color .5s );
}

::-webkit-scrollbar-thumb {
  height: 6px;
  border: 5px solid transparent;
  background-clip: padding-box;
  -webkit-border-radius: 8px;
  background-color: lighten($gray, 30%);

  &:hover{
    background-color: lighten($gray, 40%);
  }
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

// text selection =================================================================================
::selection{
  background: $gray-lighter; /* WebKit/Blink Browsers */
  color: $gray-darkest;
}
::-moz-selection{
  background: $gray-lighter; /* Gecko Browsers */
  color: $gray-darkest;
}

.row{
  // swap render order
  &--reverse{
    display: flex;
    flex-direction: column-reverse;
  }
}

// Flex layout ====================================================================================
.pf-container-flex-end{
  display: flex;
  justify-content: flex-end;
}

// .well variants =================================================================================
.well{
  &.well-text-number{
    // .well with improved contrast
    font-family: Oxygen, Arial, sans-serif;
    font-weight: bold;
    letter-spacing: .02em;
    line-height: 16px;
    text-rendering: geometricPrecision;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

// .collapse ======================================================================================
.collapse{
  will-change: height;
}

// help elements ==================================================================================
.pf-help-light{
  @extend .txt-color;
  @extend .txt-color-grayLight;
  @extend .pf-help-default;
}

.pf-help{
  @extend .txt-color;
  @extend .txt-color-gray;
  @extend .pf-help-default;
}

.pf-help-default{
  cursor: help;
  pointer-events: auto;   // enable mouse events even if a parent was set to 'none' (e.g. disabled xEditable cells in sig-reader dialog table)
  @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;
  color: $gray-light; // overwrite xEditable button style
  @include transition(color 0.15s ease-out);

  &:hover, &.active{
    color: $orange !important;
  }

  &.editable{
    border-bottom: none !important; // overwrite xEditable button style
  }
}

.pf-module-icon-button-copy{
  cursor: copy;
  -moz-user-select: text;
  user-select: text;
}

%pf-bg-image-wrapper{
  background-size: contain;
  background-origin: content-box;
  background-repeat: no-repeat;
  background-image: var(--bg-image);
  background-position: bottom 0 right 0;
  image-rendering: -webkit-optimize-contrast;
}

.pf-bg-icon-inline{
  @extend %pf-bg-image-wrapper;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -5px 5px;
  outline: 1px solid;
  outline-color: transparent;
  outline-offset: 2px;
  @include transition(outline-color 0.15s ease-out);

  &:hover{
    outline-color: $teal;
  }
}
// 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;
    }
  }

  .editable-checklist{
    & > div > label {
      @extend .checkbox;
      display: block !important;
      padding-left: 20px !important; // overwrite inline-form styles
      color: $gray-lighter;

      & > span {
        @extend label;

        &:after{
          top: -2px;
        }
      }
    }

    .pf-editable-unknown[value='0'] + span {
      color: $red;
    }

    .pf-editable-warn + span {
      color: $orange;
    }
  }
}
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{
  // <optgroup> options
  .select2-results__options--nested{
    .select2-results__option{
      padding-left: 10px;  // more padding for nested options
    }
  }

  [class*="col-"]{
    // smaller and less padding
    padding-left: 3px;
    padding-right: 3px;

    &:first-child{
      padding-left: 0;
    }

    &:last-child{
      padding-right: 0;
    }
  }

  .clearfix.pf-result-image [class*="col-"]{
    line-height: 22px;  // options with images need more height
  }
}

.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 ========================================================================
.dataTables_wrapper{

  .dataTables_length select{
    margin: 0 3px;  // <select> for page size
    padding: 1px;
  }

  .pf-table-toolbar-status{
    text-align: center;
    line-height: 22px;
    color: $gray-light;
  }

  .dt-buttons,
  .dt-stats{
    display: inline-block;

    .dt-button{
      padding: 0 5px;     // overwrite default
      line-height: 22px;  // overwrite default
      margin-bottom: 0;   // overwrite default

      &:not(:last-child){
        margin-right: 5px;
      }
    }

    .dt-button,
    .dt-stat{
      .fas{
        margin-right: 5px;
      }

      &.disabled{
        color: darken($gray-light, 8%)
      }
    }
  }
}

// condensed dataTable toolbar
.pf-dataTable-condensed-toolbar{
  padding-top: 3px;

  .dataTables_info{
    padding-top: 0;
    text-align: left;
  }

  & > div{
    padding-left: 5px;
    padding-right: 5px;
  }

  .dataTables_paginate{
    padding-top: 0;
    margin-top: 0;

    .paginate_button{
      padding: 0;
      height: 13px;
      border: 0 !important;

      &:before, &:after{
        top: 0;
      }
      &:hover{
        background: transparent !important;
        color: $orange !important;
      }
    }
  }

  .dt-buttons{
    text-align: right;
    margin-bottom: 0;

    .dt-button{
      line-height: 18px;

      .fa{
        margin-right: 0;
      }
    }
  }
}

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

  tr {
    &.group{
      background-color: rgba($gray-darker, 0.4);
    }
  }

  // "special" column styles
  td{

    &.editable-disabled:focus{
      // disabled xEditable td´s should not get focus style
      // -> "pointer-events = none" would be nicer but does not work because "mousedown" should work -> select row function
      outline: none;
      background-color: transparent;
    }

    &.editable-click:not(.editable-disabled){
      cursor: pointer;
    }

    &:focus, &.editable-open{
      // set td as :focus even is td content is focused
      outline: 1px solid $orange-dark;
      outline-offset: -1px;
      background-color: rgba($orange-dark, .08);
    }

    > .fa-circle{
      font-size: 9px !important; // should not be "so big" (10px default)
    }

    > .label{
      font-size: 80%;
    }

    &.pf-table-link-cell{
      cursor: pointer;
      @extend .txt-color;
      @extend .txt-color-teal;
      @include transition( color 0.08s ease-out );

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

    &.pf-table-action-cell{
      cursor: pointer;

      // icon within <td> cell content that should be highlighted on hover
      > .pf-table-action-icon-cell{
        @extend .txt-color;
        @extend .txt-color-gray;
        @include transition( color 0.08s ease-out );
      }

      &:hover{
        > .pf-table-action-icon-cell{
          @extend .txt-color-orange;
        }
      }
    }

    &.pf-table-type-cell{
      > span {
        &:first-child{
          display: inline-block;
          width: 28px;
        }
        &:nth-child(2){
          display: inline-block;
          width: 22px;

          kbd{
            &:empty{
              display: none;
            }
          }
        }
      }
    }

    &.pf-table-image-cell{
      padding: 0 !important;
      image-rendering: -webkit-optimize-contrast;

      img{
        width: 26px; // smaller image (default 32)
        box-sizing: content-box;
        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-image-smaller-cell{
      padding: 0 !important;
      border-right: 1px solid transparent;
      img{
        width: 23px; // smaller image (default 32)
        // overwrite "default" border for image cells
        //border-left: 1px solid transparent;
        //border-right: 1px solid transparent;
      }
    }

    &.pf-table-button-sm-cell{
      padding: 0 5px;
    }

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

    .pf-table-unknown-cell{
      color: $red;
      font-style: italic;
    }

    .pf-table-cell-ellipsis{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pf-table-cell-80{
      width: 90px;
    }

    .pf-table-cell-90{
      width: 100px;
    }

    .pf-table-cell-100{
      width: 110px;
    }

    .pf-endpoint-bubble{
      width: 15px;
      height: 15px;

      &:after{
        width: 15px;
        height: 15px;
      }
    }
  }

  // column separator
  td, th{
    &.separator-right{
      border-right: 1px solid $gray;
    }

    svg.peity{
      // center vertical in column
      display: block;
    }
  }

  // column highlight cell class
  thead{
    th.colHighlight{
      border-bottom: 1px solid $orange-dark;
    }
  }

  tbody{
    td.colHighlight{
      border-left: 1px solid $orange-dark;
      border-right: 1px solid $orange-dark;
      background-color: rgba($orange-dark, .08);
    }

    tr:first-child td.colHighlight{
      border-top: 1px solid $orange-dark;
    }

    tr:last-child td.colHighlight{
      border-bottom: 1px solid $orange-dark;
    }
  }

}

// table styles ===================================================================================
table{
  // required for native .ellipses to work in some columns
  &.pf-table-fixed{
    width: 100%;
    table-layout: fixed;
  }


  &.collapsing{
    @include transition( height .01s ease );

  }

  &.collapse.in{
    display: table;
  }

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

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

  td, th{
    &.separator-right{
      border-right: 1px solid $gray-dark;
    }

    &.pf-table-cell-10{
      width: 10px;
    }

    &.pf-table-cell-20{
      width: 20px;
    }

    &.pf-table-cell-50{
      width: 50px;
    }

    &.pf-table-cell-100{
      max-width: 100px;
    }

    &.pf-table-cell-ellipses-auto{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.pf-table-cell-bg-image{
      padding: 0 0 0 5px !important;
      vertical-align: middle !important;
      border-top-color: transparent !important;

      .pf-table-cell-bg-image-wrapper{
        @extend %pf-bg-image-wrapper;
        display: block;
        width: auto;
        height: 40px;
        padding: 2px 0;

        &.smaller{
          height: 30px;
        }
      }
    }

    &.pf-table-cell-chart{
      position: relative;

      svg.peity{
        display: block;
        position: absolute;
        margin-top: -2px; // ugly fix
      }
    }

    &.pf-table-cell-progress{
      position: relative;

      &:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; // default if no --width var set
        width: calc(var(--width) * 1%);
        height: 1px;
        border-top: 1px solid $blue;
      }

      &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        border-width: 0 2px;
        border-style: solid;
        border-color: $gray-lighter;
      }
    }
  }
}


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

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

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

// landing 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-header-block{
  width: 100%;

  .navbar-nav{
    width: 100%;
  }
}

.modal .navbar-nav {
  li {
    @include pf-navigation-indicator(top);
  }
}

.navbar-fixed-top .navbar-nav {
  li {
    @include pf-navigation-indicator(bottom);
  }
}

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

// page menu ======================================================================================
.pf-site{
  //background:url("#{$base-url}/#{$body-background-image}") $body-background-color;
  background-color:  $body-background-color;
  background-repeat: no-repeat;
}

.pf-menu{
  color: $gray-light;
  background-color: $gray-dark;
  width: 150px;
  transition-duration: 180ms;
  will-change: transform;
}

.pf-menu-left{
  .list-group-item{
    cursor: pointer;
    @include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}

.pf-menu-right{
  .list-group-item{
    cursor: pointer;
    @include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}

.list-group-item{
  &.disabled{
    &:after{
      content: '\f023';
      font-family: 'Font Awesome 5 Free';
      font-weight: bold;
      color: $gray-darker;
      position: absolute;
      right: 8px;
    }
  }
  &.loading{
    pointer-events: none;
    color: $navbar-default-link-color;

    &:after{
      content: '\f021';
      font-family: 'Font Awesome 5 Free';
      font-weight: bold;
      position: absolute;
      right: 8px;
      animation: fa-spin 2s infinite linear;
    }
  }
}

// custom scrollbars ==============================================================================
.mCSB_container, .mCSB_dragger{
  will-change: top, left, height, width;
  transition: height .18s linear, width .18s linear; // smoother animation on window resize
}

.mCSB_container{
  overflow-x: visible !important; // for map zoom
  overflow-y: visible !important; // for map zoom
}

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

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

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

// timestamp counter ==============================================================================
.pf-timestamp-counter{
  visibility: hidden; // show by JS
}
// 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: 15px 10px 0 10px;

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

    a[role="tab"]:hover{
      .pf-map-tab-handler:before{
        color: $orange
      }
    }

    .pf-map-tab-handler{
      &:before{
        content: '\22EE\22EE\00A0';
        display: inline-block;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        cursor: grab !important;
        color: $gray-light;
        width: 12px;
        transition: color 0.15s ease-out, background-color 0.15s ease-out;
        pointer-events: all;
      }
    }

    .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: 3px;
    }

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

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

  >.pf-map-content-col:first-child{
    @media (min-width: $screen-md-min) {
      padding-right: 0; // overwrite default
    }
  }

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

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

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

    .pf-module-head{
      margin-bottom: 10px;

      .pf-module-handler-drag{
        display: inline-block;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        cursor: grab !important;
        transition: color 0.15s ease-out;

        &:before{
          content: '\22EE\22EE\00A0';
        }

        &:hover{
          color: $orange-light;
        }
      }

      h5{
        display: inline-block;
        line-height: 16px;
        margin-bottom: 0;

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

    // system info table
    .pf-module-table{
      font-size: 11px;
      white-space: nowrap;
    }
  }

  // "Fake" spacer module -> preserves height during hide -> show animation for a module
  .pf-module-spacer{
    margin-bottom: 10px;  // same as .pf-module -> no UI jump
  }

  .pf-module-control-area{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    min-height: inherit;

    &:hover{
      .fa-sync{
        @include transform(rotateZ(720deg));
      }
    }

    .fa-sync{
      @include transition(transform 1.6s ease-out);
    }
  }
}

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

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

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

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

// Connection Endpoint types ======================================================================
.pf-endpoint-bubble{
  display: inline-block;
  position: relative;
  width: $endpointBubbleWidth;
  height: $endpointBubbleWidth;

  &:after{
    content: url("#{$base-url}/bubble.svg");
    display: inline-block;
    pointer-events: none;
    width: $endpointBubbleWidth;
    height: $endpointBubbleWidth;
    vertical-align: top;
  }
}

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

.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-rally{
  text-shadow: 1px 1px 2px $gray-darkest; // improve text contrast
  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 2.5s linear infinite;
  -moz-animation: move 2.5s linear infinite;
  -ms-animation: move 2.5s linear infinite;
  animation: move 2.5s linear infinite;
}

.pf-system-info-rally{
  .pf-system-head{
    @extend .pf-rally;
  }
}

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

.pf-system-sec-abyssal{
  color: $pink;
}

.pf-system-sec-special{
  color: $yellow-dark;
}

.pf-system-sec-drifter{
  color: $aqua;
}

// 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.3s 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;
  }
}

// Filter =========================================================================================
.pf-system-hidden{
  opacity: 0.15 !important;
  pointer-events: none;
}

// system effect info dialog ======================================================================
.pf-system-effect-dialog{
  .clearfix + .col-md-6{
    margin-top: 10px;
    + .col-md-6{
      margin-top: 10px;
    }
  }
}

// planet types ===================================================================================
.pf-planet-barren{
  color: $planet-color-barren;
}

.pf-planet-gas{
  color: $planet-color-gas;
}

.pf-planet-ice{
  color: $planet-color-ice;
}

.pf-planet-lava{
  color: $planet-color-lava;
}

.pf-planet-oceanic{
  color: $planet-color-oceanic;
}

.pf-planet-plasma{
  color: $planet-color-plasma;
}

.pf-planet-shattered{
  color: $planet-color-shattered;
}

.pf-planet-storm{
  color: $planet-color-storm;
}

.pf-planet-temperate{
  color: $planet-color-temperate;
}

// connection size by jump mass ===================================================================
.pf-jump-mass-xl{
  //color: $indigo;
}

.pf-jump-mass-l{
  //color: $blue;
}

.pf-jump-mass-m{
  //color: $yellow-dark;
}

.pf-jump-mass-s{
  //color: $orange;
}

// "fake connection" classes for the map manual
.pf-fake-connection{
  box-sizing: content-box;
  display: inline-block;
  width: 70px;
  height: 4px;
  max-width: 100%;
  border-top: 2px solid $gray-light;
  border-bottom: 2px solid $gray-light;
  background-color: $gray;
  position: relative;
  font-size: 10px;
  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-abyssal{
    background-color: darken($pink-darker, 8%);
    border-color: $gray;
    background: repeating-linear-gradient(
                    to right,
                    darken($pink-darker, 8%),
                    darken($pink-darker, 8%) 5px,
                    $gray 5px,
                    $gray 10px
    );
  }

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

  &.pf-map-connection-wh-size-s,
  &.pf-map-connection-wh-size-m,
  &.pf-map-connection-wh-size-l,
  &.pf-map-connection-wh-size-xl,
  &.pf-map-connection-preserve-mass{
    &:after{
      content: '?';
      background-color: $gray;
      color: $gray-lighter;
      padding: 1px 2px;
      position: absolute;
      left: calc(50% - 7px);
      top: -5px;
      font-family: Arial, sans-serif;
      font-size: 11px;
      line-height: 12px;
      min-width: 14px;
      text-align: center;
      @include border-radius(3px);
      @include box-shadow(0 3px 6px rgba(0,0,0,.3));
    }
  }

  &.pf-map-connection-wh-size-s{
    border-style: dotted;

    &:after{
      content: 'S';
    }
  }

  &.pf-map-connection-wh-size-m{
    border-style: dashed;

    &:after{
      content: 'M';
    }
  }

  &.pf-map-connection-wh-size-l{

    &:after{
      content: 'L';
    }
  }

  &.pf-map-connection-wh-size-xl{

    &:after{
      content: 'XL';
    }
  }

  &.pf-map-connection-preserve-mass{

    &:after{
      content: 'save mass';
      background-color: $red-dark;
      color: $gray-lightest;
      left: calc(50% - 28px);
    }
  }
}

// "fake connection" classes for inline text
.pf-fake-connection-text{
  padding: 0 2px;
  border-style: solid;
  border-color: darken($gray-light, 5%);
  border-width: 2px;
  border-left: none;
  border-right: none;

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

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

  &.pf-wh-critical{
    background-color: $red-dark;
    color: $black;
  }

  &.pf-wh-frig{
    border-top-style: dotted;
    border-bottom-style: dotted;
  }
}

// structure status ===============================================================================
.pf-structure-status-unknown{
  color: $teal-lighter;
}

.pf-structure-status-online{
  color: $green;
}

.pf-structure-status-offline{
  color: $red-dark;
}

// global tooltip settings ========================================================================
.tooltip-inner{
  color: $gray-lighter;
  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;
}

// elements that are popover "triggers" (root elements) (e.g. open on right click)-----------------
td.pf-popover-trigger{
  &:hover{
    color: $teal;
  }
}

.pf-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

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

      &.txt-color{
        font-weight: bold;
      }
    }
  }

  // last alert box in dynamic-area
  > [class~='alert']:last-of-type{
    margin-bottom: 0;
  }

  &[data-resizebar]{
    padding-bottom: 15px;

    &:hover{
      .pf-resizearea{
        @include transition-delay(.15s);
        height: 40px;
        opacity: 1;
      }

      .pf-resizebar-bar{
        border-top: 1px solid $orange !important;
      }
    }
  }

  &:not([data-resizebar]){
    .pf-dynamic-area-resizebar{
      display: none;
    }
  }

  .pf-resizearea{
    height: 0;
    opacity: 0;
    @include transition(height .12s ease-out, opacity .12s ease-out);
    will-change: height, opacity;
  }

  .pf-dynamic-area-statusbar{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: $gray-dark;
    padding: 1px 0;

    .pf-dynamic-area-resizebar{
      width: 100%;
      height: 9px;
      padding-top: 1px;
      cursor: ns-resize;

      &:hover{
        .pf-resizebar-bar{
          border-top: 1px solid $orange;
        }
      }

      .pf-resizebar-bar{
        border-top: 1px solid $gray-light;
        transition: border-top 0.15s ease-out;
        width: 20px;
        margin: 1px auto;
      }
    }
  }
}

// code highlighting ==============================================================================
.pf-code-ObjectBrace {
  color: $pink-darker;
  font-weight: bold;
}

.pf-code-ArrayBrace {
  color: $purple-dark;
  font-weight: bold;
}

.pf-code-PropertyName {
  color: $gray-darkest;
  font-weight: bold;
}

.pf-code-String {
  color: $orange;
}

.pf-code-Number {
  color: $green-dark;
}

.pf-code-Boolean {
  color: $indigo-darkest;
  font-weight: bold;
}

.pf-code-Function {
  color: $pink-darker;
}

.pf-code-Null {
  color: $gray-darker;
  font-weight: bold;
}

.pf-code-Comma {
  color: $gray-darkest;
  font-weight: bold;
}

code {
  .fas, .far, .fab {
    color: $gray;
    cursor: pointer;
  }
}

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

  }

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

  .pf-head-active-users{
    cursor: pointer;
  }

  .pf-head-active-users{
    display: none; // triggered by js

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

  .pf-head-image{
    display: inline-block;
    margin-top: -6px;
    margin-bottom: -6px;
    width: 27px;
    border: 1px solid $gray;
    image-rendering: -webkit-optimize-contrast;
    @include transition( border-color 0.15s ease-out );
    will-change: border-color;

    &.--left{
      margin-right: 3px;
    }

    &.--right{
      margin-left: 8px;
    }
  }

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

  .pf-head-map-tracking{
    margin-bottom: 4px;
    margin-top: 4px;
  }

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

}

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

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

    &:empty{
      display: none;
    }
  }

  small{
    font-family: $font-family-bold;
  }
}

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

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

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

  .pf-footer-left{
    display: flex;
    flex: none;          // shorthand for: flex-grow: 0, flex-shrink: 0, flex-basis: auto
    justify-content: flex-start;
  }

  .pf-footer-center{
    display: flex;
    flex: 1;          // shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0
    padding: 0 20px;
  }

  .pf-footer-right{
    display: flex;
    flex: none;          // shorthand for: flex-grow: 0, flex-shrink: 0, flex-basis: auto
    justify-content: flex-end;
  }
}

// footer (navigation) ============================================================================
.navbar-fixed-bottom{
  padding: 2px 0;

  .container-fluid{
    padding-left: 0;    // overwrite default
    padding-right: 0;   // verwrite default
  }
}

// global info panel ==============================================================================
#pf-global-info{
  width: 100%;
  margin-bottom: 0;     // overwrite default "alert" style
  border: none;
  padding: 9px 10px;

  .ui-pnotify-title{
    margin-bottom: 0;   // overwrite default "alert" style
  }
}

// reverse order (reverse render order)
.panel-reverse-order{
  display: table;
  width: 100%;

  .reverse-order-header{
    display: table-header-group;
  }

  .reverse-order-footer{
    display: table-footer-group;
  }
}

// drag&drop (Sortable) ===========================================================================
.pf-sortable-ghost{
  will-change: opacity;
  transition: opacity 0.2s ease-out;
  opacity: 0.7 !important;

  .pf-module-handler-drag{
    color: $orange-light;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
}

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