| /** |
| * 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; |
| } |