blob: 5453f9d624fe95a5341c89f7247ba22f5b3cc5ec [file] [log] [blame]
/**
* Copyright 2017 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
.metrics {
padding: 8px;
font-size: 10px;
text-align: center;
white-space: nowrap;
min-height: var(--metrics-height);
display: flex;
flex-direction: column;
-webkit-align-items: center;
-webkit-justify-content: center;
}
:host {
--metrics-height: 190px;
height: var(--metrics-height);
contain: strict;
}
:host-context(.-theme-with-dark-background) .metrics {
color: #222;
}
:host-context(.-theme-with-dark-background) .metrics > div:hover {
color: #ccc;
}
.metrics .label {
position: absolute;
font-size: 10px;
margin-left: 3px;
padding-left: 2px;
padding-right: 2px;
}
.metrics .position {
border: 1px rgb(66%, 66%, 66%) dotted;
background-color: white;
display: inline-block;
text-align: center;
padding: 3px;
margin: 3px;
}
.metrics .margin {
border: 1px dashed;
background-color: white;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 3px 6px;
margin: 3px;
}
.metrics .border {
border: 1px black solid;
background-color: white;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 3px 6px;
margin: 3px;
}
.metrics .padding {
border: 1px grey dashed;
background-color: white;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 3px 6px;
margin: 3px;
}
.metrics .content {
position: static;
border: 1px gray solid;
background-color: white;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 3px;
margin: 3px;
min-width: 80px;
overflow: visible;
}
.metrics .content span {
display: inline-block;
}
.metrics .editing {
position: relative;
z-index: 100;
cursor: text;
}
.metrics .left {
display: inline-block;
vertical-align: middle;
}
.metrics .right {
display: inline-block;
vertical-align: middle;
}
.metrics .top {
display: inline-block;
}
.metrics .bottom {
display: inline-block;
}