| /* 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.metric-item { |
| width: var(--metric-item-width); |
| color: var(--dark-green-grey); |
| cursor: pointer; |
| margin-right: 4px; |
| position: relative; |
| } |
| |
| .darkTheme div.metric-item { |
| color: var(--light-green-grey); |
| } |
| |
| div.metric-item.unhealthy { |
| background: var(--red-stripes-background-dimmed); |
| } |
| |
| div.metric-item:nth-child(1):before { |
| width: 0px !important; |
| } |
| |
| div.metric-item:hover .metric-item-title { |
| background-color: var(--light-grey); |
| } |
| |
| .darkTheme div.metric-item:hover .metric-item-title { |
| background-color: var(--dark-highlight); |
| } |
| |
| div.metric-item div.metric-item-title { |
| padding-top: 4px; |
| padding-bottom: 2px; |
| font-size: 12px; |
| line-height: var(--metric-item-title-height); |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| |
| div.metric-item div.metric-item-graph-container { |
| display: flex; |
| justify-content: space-between; |
| padding-left: 4px; |
| padding-right: 2px; |
| } |
| |
| div.metric-item div.metric-item-value { |
| font-size: 16px; |
| font-weight: var(--font-weight-medium); |
| color: var(--cyan-800); |
| height: var(--metric-item-value-height); |
| line-height: var(--metric-item-value-height); |
| margin-bottom: 4px; |
| } |
| |
| .darkTheme div.metric-item div.metric-item-value { |
| color: var(--light-green); |
| } |
| |
| div.metric-item div.metric-item-value.unhealthy { |
| color: var(--dark-red); |
| } |
| |
| .darkTheme div.metric-item div.metric-item-value.unhealthy { |
| color: var(--light-red); |
| } |
| |
| div.metric-item div.metric-item-graph { |
| } |
| |
| div.metric-item-filler { |
| flex-grow: 1; |
| height: var(--metric-item-height); |
| width: var(--metric-item-width); |
| } |
| |
| div.metric-item div.sparkline { |
| position: relative; |
| cursor: pointer; |
| height: var(--sparkline-height); |
| } |
| |
| div.metric-item div.sparkline svg { |
| width: 100%; |
| height: 100%; |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| } |
| |
| div.metric-item div.sparkline svg.content polyline { |
| vector-effect: non-scaling-stroke; |
| fill: none; |
| stroke: var(--dark-green-grey); |
| stroke-width: 2; |
| } |
| |
| .darkTheme div.metric-item div.sparkline svg.content polyline { |
| stroke: var(--light-green-grey); |
| } |
| |
| div.metric-item div.sparkline svg.content polygon { |
| fill: WhiteSmoke; |
| stroke: none; |
| } |
| |
| .darkTheme div.metric-item div.sparkline svg.content polygon { |
| fill: #333; |
| } |
| |
| div.metric-item svg.mouse-line { |
| shape-rendering: crispedges; |
| } |
| |
| div.metric-item div.sparkline svg.mouse-line polyline { |
| vector-effect: non-scaling-stroke; |
| fill: none; |
| stroke: #BBB; |
| stroke-width: 1; |
| } |
| |
| div.metric-item div.sparkline svg.mouse-line polygon { |
| vector-effect: non-scaling-stroke; |
| fill: var(--dark-red); |
| stroke: none; |
| } |
| |
| div.metric-item svg.threshold-line { |
| shape-rendering: crispedges; |
| } |
| |
| div.metric-item div.sparkline svg.threshold-line path { |
| vector-effect: non-scaling-stroke; |
| fill: none; |
| stroke: var(--dark-red); |
| stroke-width: 1; |
| } |