com.phloxui/styles/lib/component/ConnectionStatusPane.less

PhloxUI Ng2+ Framework

.connection-status-pane {
  display: flex;
  height: 100%;

  .status-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  .status-left:before {
    font-family: "PhloxGlyphicons";
    font-size: 15pt;
  }

  .status-left.signal-full:before {
    content: "y";
    color: extract(@CLR_K,5);
  }

  .status-left.signal-half:before {
    content: "6";
    color: extract(@CLR_G,5);
  }

  .status-left.signal-lost:before {
    content: "6";
    color: extract(@CLR_C,5);
  }

  .status-right {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 10pt;

    > .status-message {
      color: extract(@CLR_0,1);
    }

    > .status-message.signal-lost {
      color: extract(@CLR_C,5);
    }

    > .status-troubleshoot {
      color: extract(@CLR_P,5);
      cursor: pointer;
    }
  }
}