| /* Copyright 2018 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. */ |
| |
| .infocards { |
| visibility: hidden; |
| position: fixed; |
| bottom: 8px; |
| left: 8px; |
| right: 8px; |
| margin: 0 auto; |
| max-width: 512px; |
| max-height: 50vh; |
| overflow-y: auto; |
| background: white; |
| border-radius: 8px; |
| box-shadow: 0 1px 2px #3c40434d, 0 1px 3px 1px #3c404326; |
| transform: translateY(16px); |
| opacity: 0; |
| transition: 0.3s ease transform, 0.3s ease opacity, 0.3s ease visibility; |
| } |
| .tree-container:hover ~ .infocards, |
| .tree-container.focused ~ .infocards { |
| visibility: visible; |
| opacity: 1; |
| transform: none; |
| } |
| |
| .infocard { |
| display: grid; |
| padding: 16px; |
| } |
| .infocard-container { |
| grid-template-areas: 'header icon' 'type type'; |
| grid-template-columns: auto 80px; |
| grid-column-gap: 16px; |
| grid-row-gap: 8px; |
| } |
| .infocard-symbol { |
| grid-template-areas: 'icon header' 'type type'; |
| grid-template-columns: 40px auto; |
| grid-column-gap: 16px; |
| } |
| |
| .infocard[hidden] { |
| display: none; |
| } |
| @media (min-width: 700px) { |
| .show-options .infocards { |
| right: 256px; |
| } |
| } |
| |
| .icon-info { |
| grid-area: icon; |
| align-self: center; |
| padding: 8px 2px 8px 8px; |
| border-radius: 50%; |
| } |
| .container-icon-info { |
| position: relative; |
| padding: 0; |
| height: 80px; |
| } |
| .header-info { |
| grid-area: header; |
| color: #202124; |
| } |
| .size-info { |
| margin: 0 0 2px; |
| } |
| .path-info { |
| margin: 0 0 8px; |
| word-break: break-word; |
| color: #3c4043; |
| } |
| .symbol-name-info { |
| font-weight: 500; |
| } |
| .type-info { |
| grid-area: type; |
| margin-bottom: 0; |
| } |
| |
| .type-pie-info { |
| height: 80px; |
| width: 80px; |
| border-radius: 50%; |
| } |
| .type-breakdown-info { |
| grid-area: type; |
| border-top: 1px solid #dadce0; |
| padding-top: 8px; |
| clear: right; |
| height: 0; /* Fixes bug with table height in Firefox */ |
| } |
| .canvas-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| margin: auto; |
| } |
| |
| th { |
| text-align: left; |
| } |
| th[scope='row'], |
| td { |
| font-weight: normal; |
| font-size: 14px; |
| } |