All Downloads are FREE. Search and download functionalities are using the official Maven repository.

io.buoyant.admin.css.dashboard.css Maven / Gradle / Ivy

Go to download

admin

There is a newer version: 1.7.5
Show newest version
body {
  font-family: "Source Sans Pro","Helvetica Neue",sans-serif;
  font-weight: 400;
  background-image: radial-gradient(54% 23%, #161963 0%, #090B34 97%);
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFFFFF;
  min-height: 100vh;
}

.metric-header {
  font-size: 13px;
  letter-spacing: 1px;
}

.router-header-large, .metric-large {
  font-size: 21px;
  line-height: 21px;
}

.metric-header {
  font-weight: 300;
}

.metric-small {
  font-size: 12px;
  line-height: 12px;
}

.success-metric-container {
  border-left: 1px solid #4AD8AC;
}

.failure-metric-container {
  border-left: 1px solid #D84A4A;
}

.neutral-metric-container {
  border-left: 1px solid #FFFFFF;
}

.success-metric {
  color: #4AD8AC;
}

.failure-metric {
  color: #D84A4A;
}

/*
* Success rates
*/
.sr-good {
  color: #4AD8AC;
}

.sr-poor {
  color: #F28E1D;
}

.sr-bad {
  color: #D84A4A;
}

.sr-undefined {
  color: #FFFFFF;
}

/*
* Navbar styles
*/

.navbar-brand img {
  height: 26px;
  padding-bottom: 5px;
}

nav.navbar {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 0;
}

.navbar-right .version {
  margin: 20px 15px 0 10px;
  font-size: 12px;
}

.col-md-2.router-summary-stat {
  width: 160px;
  padding: 0 27px 0 0;
}

.col-md-2 {
  width: 198px;
  padding: 0 27px 0 0;
}

.col-md-4 {
  width: 396px;
  padding: 0 27px 0 0;
}

.col-md-6 {
  width: 594px;
  padding: 0 27px 0 0;
}

.row {
  margin: 0;
}

.container-fluid {
  padding: 0;
}

.modal-content {
  border-color: #fff;
  background-color: #999;
}

/* request totals */

.request-totals {
  min-height: 72px;
  padding: 15px 27px;
  background: #163F79; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #163F79, #4076C4);
  background: -o-linear-gradient(bottom right, #163F79, #4076C4);
  background: -moz-linear-gradient(bottom right, #163F79, #4076C4);
  background: linear-gradient(to bottom right, #163F79, #4076C4);
}

.request-total {
  font-size: 24px;
  line-height: 1.2;
}

/* dtab specific css overrides*/

.panel {
  background-color: transparent;
}

.panel-heading, .panel>.list-group:last-child .list-group-item:last-child {
  border-radius: 0;
}

/*
* Router container
*/

.dashboard-container {
  margin: 0 27px 0;
}

.proc-info {
  color: #E1E8ED;
  font-size: 13px;
  line-height: 16px;
  margin: 10px 27px 0;
  border-top: 2px solid grey;
}

.router:not(:last-child) {
  border-bottom: 7px solid #163F79;
}

/*
* Router summary
*/

.router-summary-stat {
  text-align: right;
}

.router .summary {
  margin: 9px 0 20px 0;
}

.router-graph-header {
  color: #878787;
  font-size: 14px;
  line-height: 15px;
  height: 15px;
  margin-top: 18px;
  margin-bottom: 9px;
}

.router-server .router-graph-header {
  margin-top: 0px;
}

/**
* Router stats
*/

.router-stats {
  margin-top: 20px;
  min-height: 100px;
}

.retries-stats .warning {
  font-size: 15px;
  margin-top: 30px;
  border-radius: 3px;
  padding: 8px;
  background-color: #800808;
}

/**
* Router servers
*/

.router-servers {
  padding: 30px 0;
}

.router-server {
  margin-top: 10px;
}

.server-metric-container, .server-success-chart {
  margin-top: 20px; /* to match metric-container */
}

/**
* Router clients
*/

.router-subsection-title {
  color: #F2F2F2;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  line-height: 19px;
}

.client-container {
  margin-bottom: 10px;
}

.client-container .client-id {
  cursor: pointer;
}
.client-id .transformer-prefix, .client-id .client-suffix {
  background-color: #090B34;
}
.client-id .client-suffix.is-first {
  padding-left: 5px;
}
.client-id > div:first-child {
  padding-left: 5px;
}
.client-id > div:last-child {
  padding-right: 5px;
}

.client-content-container {
  float: left;
  width: 100%;
  margin-top: -13px;
  border-radius: 3px;
}
.client-container .header-line {
  width: 100%;
  position: relative;
  top: 18px;
}
.client-container .router-header-large {
  padding: 8px 15px;
  position: relative;
  top: -3px;
}
.client-container .router-header-large > div {
  padding: 0px 5px;
  background-color: #090B34;
}

.client-toggle {
  font-size: 14px;
  cursor: pointer;
}

.router-latencies-container {
  padding-top: 18px;
}

.router-latencies > div {
  font-size: 12px;
  line-height: 32px;
  font-weight: 300;
}

.router-latencies > div:not(:last-child) {
  border-bottom: 1px solid gray;
}

.latency-legend {
  border-radius: 2px;
  height: 12px;
  margin-right: 5px;
}

.metrics-container {
  padding: 0;
}

.metric-container {
  padding-left: 15px;
  margin: 20px 0 30px 0;
}

/*
* BAR CHART
*/

.bar-chart-container {
  margin-top: 20px;
  min-height: 80px;
  padding-left: 15px;
}
.bar-chart-label {
  margin: 12px 0;
  font-size: 15px;
}
.bar-chart-label.warning {
  background-color: #A41818;
  margin-left: 30px;
  padding: 0px 3px;
  border-radius: 2px;
}
.overlay-bars {
  position: absolute;
  height: 20px;
}
.overlay-bars.bar-container {
  opacity: 0.25;
}

.graph-gradient {
  /* https://css-tricks.com/css3-gradients/ */
  background-image: repeating-linear-gradient(90deg, black, black 4px, grey 0px, grey 8px);
}
.graph-gradient.green {
  background-image: repeating-linear-gradient(90deg, black, black 4px, rgb(144, 251, 69) 0px, rgb(144, 251, 69) 8px);
}
.graph-gradient.orange {
  background-image: repeating-linear-gradient(90deg, black, black 4px, rgb(248, 169, 68) 0px, rgb(248, 169, 68) 8px);
}
.graph-gradient.red {
  background-image: repeating-linear-gradient(90deg, black, black 4px, #A41818 0px, #A41818 8px);
}
.graph-gradient.yellow {
  background-image: repeating-linear-gradient(90deg, black, black 4px, rgb(228, 211, 60) 0px, rgb(228, 211, 60) 8px);
}

/*
* For wider screens
*/

@media (min-width: 1400px) {
  .navbar-container {
    width: 100vw;
  }

  .dashboard-container {
    margin: 0 1.5vw 0;
    min-width: 96vw;
  }

  .row.proc-info, .router, .clients .router-graph {
    min-width: 96vw;
  }

  .router > div {
    width: 100%;
  }
}

a.router-list-item:after {
    content: ','
}

a.router-list-item:last-of-type:after {
    content:''
}

/*
* Namerd tab (plugin)
*/
.namerd-metrics-container .metric-container {
  float: left;
  padding-left: 15px;
  border-left: 1px solid #ffffff;
}
.namerd-metrics-container .metric-container:not(:first-child) {
  margin-left: 30px;
}

/*
* Service client view
*/

.service-dashboard-container .router {
  padding: 15px 0;
}

.service-dashboard-container .svc-subsection {
  margin-top: 15px;
}

.service-subsection-header {
  color: #878787;
  font-size: 14px;
}

.service-client-metrics {
  margin: 10px 0 0 30px;
}

.service-client-metrics .metric-large {
  margin-bottom: 10px;
}
.service-client-metrics .client-metrics div {
  padding: 12px 0 2px 0;
}

.service-client-metrics .trail-in {
  text-align: center;
  margin-left: 10px;
  border-left: 1px solid white;
}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy