kibana-with-account/src/plugins/statusPage/public/statusPage.less

kibana-with-account is develop based kibana project

@import "~font-awesome/less/font-awesome";

@status-bg: #eff0f2;
@status-metric-bg: #fff;
@status-metric-border: #aaa;
@status-metric-title-color: #666;

@status-plugins-bg: #fff;
@status-plugins-border: #bbb;
@status-plugins-headings-color: #666;

@status-default: #7c7c7c;
@status-green: #94c63d;
@status-yellow: #edb800;
@status-red: #da1e04;

@icon-default: @fa-var-clock-o;
@icon-green: @fa-var-check;
@icon-yellow: @fa-var-exclamation-circle;
@icon-red: @fa-var-exclamation-triangle;

// background of main page
.content {
  background-color: @status-bg;
}

.section {
  margin-bottom:15px;
}

// metrics section
.metrics_wrapper {
  margin-top: 25px;
  .status_metric_wrapper {
    padding: 10px;
    border: 0;

    .content {
      text-align: right;
      padding: 15px;
      padding-right: 20px;
      background-color: @status-metric-bg;
      border-top: 2px solid;
      border-top-color: @status-metric-border;

      .title {
        color: @status-metric-title-color;
        margin: 0 0 5px 0;
      }

      .average {
        font-size: 42px;
        line-height:45px;
        font-weight: normal;
        margin:0;
      }
    }
  }
}

// plugin status table section
.plugin_status_wrapper {
  margin-top: 25px;
  margin-left: -5px;
  margin-right: -5px;
  border-top:2px solid;
  background-color: @status-plugins-bg;
  padding: 10px;

  h3 {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .missing_statuses,
  .loading_statuses {
    padding: 20px;
    text-align: center;
  }

  .plugin_status_breakdown {
    margin-left: 0;
    margin-right: 0;

    .status_row {
      height:30px;
      line-height:30px;
      border-bottom:1px solid;
      border-bottom-color: @status-plugins-border;
    }

    th {
      color:@status-plugins-headings-color;
      font-weight: normal;
      height:25px;
      line-height:25px;
      border-bottom:1px solid;
      border-bottom-color: @status-plugins-border;
    }

    .status_name {
      padding:0px 5px;
      border-left: 2px solid;
    }

    .status_message {
      padding:0;
      padding-left:15px;
      border-right: 2px solid;
    }
  }
}

//plugin state
.plugin_state(@color, @icon) {
  .plugin_state_color {
    color: @color;
  }

  .plugin_state_icon:before {
    content: @icon;
  }

  .status_name {
    border-left-color: @color !important;
  }

  .status_message {
    border-right-color: @color !important;
  }
}

.plugin_state_default {
  .plugin_state(@status-default, @icon-default);
}

.plugin_state_green {
  .plugin_state(@status-green, @icon-green);
}

.plugin_state_yellow {
  .plugin_state(@status-yellow, @icon-yellow);
}

.plugin_state_red {
  .plugin_state(@status-red, @icon-red);
}

//server state
.state(@color, @icon) {
  .state_color {
    color: @color;
  }

  .state_icon:before {
    content: @icon;
  }

  .plugin_status_wrapper {
    border-top-color: @color;
  }
}

.state_default {
  .state(@status-default, @icon-default);
}

.state_green {
  .state(@status-green, @icon-green);
}

.state_yellow {
  .state(@status-yellow, @icon-yellow);
}

.state_red {
  .state(@status-red, @icon-red);
}