index.less

/*******************************************************************************
 *  common
 ******************************************************************************/

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

label {
  margin-left: 4px;
  margin-right: 4px;
}

.palette-1 { background-color: #6666FF !important; }
.palette-2 { background-color: #33FFFF !important; }
.palette-3 { background-color: #66FF66 !important; }
.palette-4 { background-color: #FFFF33 !important; }
.palette-5 { background-color: #FF9933 !important; }
.palette-6 { background-color: #FF6666 !important; }
.palette-7 { background-color: #FF3366 !important; }
.palette-8 { background-color: #FF33FF !important; }

.fill-cell {
  padding: 3px 6px 3px 3px;
  margin-left: -3px;
}

#tabs {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;

  .ui-tabs-nav {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  .ui-tabs-panel {
    border: none;
    padding: 8px !important;
    padding-bottom: 6px !important;
  }

  a.ui-tabs-anchor:focus, .ui-button:focus, #dialog-help a:focus {
    outline: none;
  }

  .header {
    height: 29px;
    line-height: 29px;
    padding-right: 6px;
    padding-left: 6px;
  }
  .menu-button {
    float: right;
    height: 26px;
    width: 26px;
    margin: 1px 2px 1px 2px;
  }
  #mqttIndicator {
    margin-top: 6px;
    margin-bottom: -6px;
  }


}




#tabsPublish, #tabsSubscribe {
  font-size: 12px;
  padding: 0;
  .ui-tabs-nav {
    margin: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

  }
}


table.ui-pg-table {
  height: auto !important;
}

div.ui-jqgrid-titlebar {
  display: none;
}

.ui-pg-table {
  font-size: 11px;
}

.ui-jqgrid-htable {
  font-size: 13px;
}


.ui-jqgrid .s-ico {
  top: 3px;
  left: 3px;
}

.inline-icon {
  display: inline-block;
  vertical-align: -3px;
  padding-right: 1px;
}



/*******************************************************************************
 *  tab Status
 ******************************************************************************/

#topic {
  width: 100%;
  margin-bottom: 12px;
  padding: 2px;
}


#gridStatus {
  font-size: 12px;
}



/*******************************************************************************
 *  tab Publish
 ******************************************************************************/

div#publish {
  label {
    width: 60px;
    display: inline-block;
  }
  input#publishTopic {
    width: calc(~"100% - 69px");
    padding: 2px;
  }
  textarea#publishPayload {
    resize: vertical;
    width: calc(~"100% - 69px");
    height: 1.6em;
    vertical-align: -5px;
    margin-left: -4px;

  }
}

#gridHistory {
  font-size: 12px;
}

#publishQos + span {
  top: 11px;
  height: 27px;
}



/*******************************************************************************
 *  tab Subscribe
 ******************************************************************************/



.subscribe-input {
  width: ~"calc(100% - 52px)";
  padding: 2px;
  font-size: 14px !important;
}

.subscribe-color + span {
  top: 6px;
  height: 22px;
  margin-right: 12px;
}

#tabsSubscribe {
  li .ui-icon-close {
    float: left;
    margin: 0.4em 0.4em 0 0;
    cursor: pointer;
  }
  .ui-tabs-panel {
    height: ~"calc(100% - 101px)";
  }
}

ul.subscriptions {

  padding: 0;
  list-style: none;

  li {
    float: left;
    padding: 2px 4px;
    padding-right: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-right: 6px;

    .ui-icon-close {
      margin: 0 !important;
    }


  }


}


.subscribe-grid {
  font-size: 12px;
}

.subscribe-header {
  padding-bottom: 12px;
  min-height: 86px;
}


.subscribe-clear {
  left: 12px;
  height: 28px;
  width: 31px;
}



/*******************************************************************************
 *  Dialogs
 ******************************************************************************/


#dialogSettings {
  font-size: 14px;

  input {
    padding: 2px;
  }

  label, .span-label {
    display: inline-block;
    width: 90px !important;
    padding-bottom: 10px;
  }

  label.large, .span-label.large {
    width: 420px !important;
  }
  code {
    color: #555;
  }
  .checkbox-label {
    width: 200px !important;
    padding-top: 8px;
    padding-left: 92px;
  }

  .left-50 {
    width: 50%;
    float: left;
  }

  .right-50 {
    width: 50%;
    float: left;
    padding-top: 8px;
  }
  #mqttStatus {
    font-weight: bold;
  }

  #server + span, #protocol + span {
    font-size: 11px;
    top: 6px;
  }

  #protocol + span {
    left: -4px;
  }




}


#influxSettings, #mqttshSettings, #brokerSettings {
  height: 252px;
}

#influxQuery {
  width: 100%;
}