pathfinder/sass/layout/_system-info.scss

// system info module ======================================================
.pf-system-info-module{

  // breadcrumb
  h5{
    text-transform: capitalize;
  }

  // dynamic area specific for the description field
  .pf-system-info-description-area{
    min-height: 124px;

    // textarea system description
    .editable-container{
      width: 100%;
      .editableform{
        width: 100%;
        .form-group{
          width: 100%;
          .editable-input{
            width: calc(100% - 75px);
            textarea{
              width: 100%;
              max-height: 200px;
              resize: vertical;
            }
          }
        }
      }
    }
  }
}

// system signature module ==================================================
.pf-system-signature-module{

  .progress-label-right{
    margin-right: 20px;
    vertical-align: middle;
    font-size: 11px;
  }

  // progress bar
  .pf-system-progress-scanned{
    display: inline-block;
    margin-left: 20px;
    width: calc(100% - 225px);

    .progress{
      margin-bottom: 3px; // overwrite default
    }
  }

  // delete signature button
  .pf-sig-table-clear-button{
    will-change: opacity, transform;
    display: none;
    color: $red-darker;
  }

  .pf-sig-table{
    font-size: 10px;

    .pf-sig-table-edit-name-input{
      text-transform: uppercase;
    }

    // textarea field
    // overwrite some styles in order to make <textarea> 100% width
    .editable-container.editable-inline {
      display: inline;
      .control-group{
        display: inline;
        .editable-input{
          display: inline;
        }
      }
    }

    .pf-editable-description{
      width: 100%;
      background-color: $gray-darker;
      max-height: 50px;
      font-size: 11px;
      line-height: 14px;
      padding: 3px 6px;
    }

    .fa-plus{
      @extend .pf-dialog-icon-button;
    }
  }

  .pf-sig-table-secondary{
    // columns should be "inline" with primary table
    // -> therefore "sortable" must be true even if columns should not be sortable -> now "disable" sortable by CSS
    th{
      pointer-events: none;

      &:after{
        display: none !important;
      }

      &.pf-table-counter-cell{
        color: transparent; // hide label for counter columns -> no data here
      }
    }
  }
}

// system graph module =====================================================
.pf-system-graph-module{

  .pf-system-graph{
    position: relative;
    width: 100%;
    height: 100px;
  }
}

// route module ============================================================
.pf-system-route-module{

  .pf-system-route-table{
    width: 100%;
    font-size: 10px;

    td{
      text-transform: capitalize;
      
      & > .fas,  & > .far{
        font-size: 10px;
      }

      .fa-sync, .fa-search{
        @extend .pf-dialog-icon-button;
      }

      .pf-fake-connection{
        display: none; // toggled by js see .pf-table-jump-cell
        width: 12px;
        height: 3px;
        cursor: pointer;

        &[data-disabled]{
          cursor: initial;
        }

        &.pf-map-connection-frig{
          width: 32px;

          &:after{
            left: 4px;
          }
        }
        &.pf-map-connection-preserve-mass{
          width: 26px;

          &:after{
            content: "\f071";
            font-family: "Font Awesome 5 Free";
            font-style: normal;
            font-weight: bold;
            left: 4px;
          }
        }
      }

      &.pf-table-jump-cell{
        .pf-fake-connection{
          display: inline-block;
        }
      }
    }
  }
}

// intel module ============================================================
.pf-system-intel-module{

  .pf-system-structure-table{
    font-size: 10px;
  }
}

// killboard module ========================================================
.pf-system-killboard-module{

  .pf-system-killboard-graph-kills{
    width: 100%;
    height: 100px;
    position: relative;
    margin-bottom: 30px;
  }

  .pf-system-killboard-list{
    padding-bottom: 10px;
    border-bottom: 1px solid $gray-darker;

    & > li{
      margin-left: 0;
      overflow: visible;
      min-height: 50px;
      will-change: transform, opacity, margin-left;
      @include transition( margin-left 0.12s cubic-bezier(0.30, 0.80, 0.80, 1.70));

      // character headline
      h5{
        white-space: nowrap;
      }

      // ISK headline
      h3{
        width: 120px;
        display: inline-block;
      }

      .pf-system-killboard-img-char{
        display: inline;
        width: 32px;
        margin-top: 9px;
        margin-right: 10px;
        border: 1px solid $gray-darker;
        will-change: border-color;
        @include border-radius(50%);
        @include transition( border-color 0.12s ease-out);

        &:hover{
          border-color: $teal-lighter;
        }
      }

      .pf-system-killboard-img-corp,
      .pf-system-killboard-img-ally{
        display: inline;
        width: 20px;
        margin-right: 10px;
        border: 1px solid $gray-darker;
        will-change: border-color;
        @include border-radius(50%);
        @include transition( border-color 0.12s ease-out);

        &:hover{
          border-color: $teal-lighter;
        }
      }

      .pf-system-killboard-img-ship{
        width: 50px;
        margin-right: 10px;
        border: 1px solid $gray-darker;
        will-change: border-color;
        @include border-radius(50%);
        @include transition( border-color 0.12s ease-out);

        &:hover{
          border-color: $teal-lighter;
        }
      }

      &:before{
        content: "\f054";
        font-family: "Font Awesome 5 Free";
        font-weight: bold;
        position: absolute;
        z-index: 10;
        left: -18px;
        top: 15px;
        color: $teal;
        opacity: 0;
        will-change: opacity, left;
        @include transition(all 0.12s ease-out);
      }

      &:hover{
        margin-left: 10px;

        &:before{
          opacity: 1;
          left: -15px;
        }
      }
    }
  }
}

// connection info module ==================================================
.pf-connection-info-module{
  .row{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }

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

  .pf-connection-info-table{
    width: 100%;
    font-size: 10px;

    td{
      & > .fas, & > .far{
        font-size: 10px;
      }
    }
  }
}