oncall/client/stylesheets/components/full-graph.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

div.full-graph-container {
}

div.full-graph-container div.full-graph-title {
  inherits: div.group-title;
}

div.full-graph-container div.metric-summary-container {
  display: flex;
}

div.full-graph-container div.metric-summary-item {
  flex-grow: 1;
  padding-top: 4px;
  position: relative;
  width: 100%;
  cursor: pointer;
  margin-right: 2px;
}

div.full-graph-container div.metric-summary-item.hidden {
  opacity: 0.15;
}

div.full-graph-container div.metric-summary-item.unhealthy {
  background: var(--red-stripes-background-dimmed);
}

div.full-graph-container div.metric-summary-item:last-child {
  margin-right: 0px !important;
}

div.full-graph-container div.metric-summary-title {
  font-size: 12px;
  color: var(--dark-green-grey);
  line-height: 14px;
  padding-top: 4px;
}

.darkTheme div.full-graph-container div.metric-summary-title {
  color: var(--light-green-grey);
}

div.full-graph-container div.metric-summary-value {
  font-size: 16px;
  color: var(--cyan-800);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  margin-bottom: 4px;
}

.darkTheme div.full-graph-container div.metric-summary-value {
  color: var(--light-green);
}

div.full-graph-container div.metric-summary-value.unhealthy {
  color: var(--dark-red);
}

.darkTheme div.full-graph-container div.metric-summary-value.unhealthy {
  color: var(--light-red);
}

div.full-graph-container div.metric-summary-color {
  height: 2px;
}

div.full-graph-container div.full-graph {
  width: 100%;
  height: var(--full-graph-height);
  position: relative;
}

div.full-graph-container div.full-graph div.graph-y-axis {
  width: var(--graph-number-div-width);
}

div.full-graph-container div.full-graph svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

div.full-graph-container div.full-graph svg polyline {
  vector-effect: non-scaling-stroke;
  fill: none;
}

div.full-graph-container div.full-graph svg.content polyline {
  stroke: var(--light-grey);
  stroke-width: 2;
}

div.full-graph-container svg.threshold-line {
  shape-rendering: crispedges;
}

div.full-graph-container svg.threshold-line path {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: var(--dark-red);
  stroke-width: 1;
}

div.full-graph-container div.full-graph div.threshold {
  border-bottom: 2px dotted var(--dark-red);
}

div.full-graph-container div.full-graph svg.overlay polyline {
  stroke: #CCC;
  stroke-width: 1;
}

.darkTheme div.full-graph-container div.full-graph svg.overlay polyline {
  stroke: #666;
}

div.full-graph-container svg.overlay {
  shape-rendering: crispedges;
}

div.full-graph-container div.full-graph div.number {
 /* background-color: var(--light-grey);*/
  width: var(--graph-number-div-width);
  height: var(--full-graph-height);
}

div.full-graph-container div.time {
  height: var(--graph-time-div-height);
  border-top: 1px solid var(--light-grey);
  justify-content: space-between;
  display: flex;
}

.darkTheme div.full-graph-container div.time {
  border-top: 1px solid #333;
}

div.full-graph-container div.time-label {
  font-size: 10px;
  color: var(--medium-grey);
  padding: 0px 2px;
}