| /* 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. */ |
| |
| body { |
| margin: 0; |
| min-height: 100vh; |
| display: grid; |
| grid-template-columns: auto 0; |
| grid-template-rows: 64px 1fr; |
| grid-template-areas: "appbar options" "symbols options"; |
| color: #3c4043; |
| font-family: "Roboto", sans-serif; |
| } |
| |
| .appbar { |
| grid-area: appbar; |
| } |
| .appbar-inner { |
| height: 100%; |
| padding: 0 48px; |
| display: flex; |
| align-items: center; |
| } |
| .appbar-progress { |
| display: block; |
| width: 100%; |
| height: 4px; |
| -webkit-appearance: none; |
| appearance: none; |
| contain: strict; |
| background: #4285f499; |
| transition: opacity 0.5s ease; |
| } |
| .appbar-progress::-webkit-progress-bar { |
| background: transparent; |
| } |
| .appbar-progress::-webkit-progress-value { |
| background: #1a73e8; |
| transition: width 1s ease-in; |
| } |
| .appbar-progress[value="0"]::-webkit-progress-value { |
| transition: none; |
| } |
| .appbar-progress[value="1"] { |
| opacity: 0; |
| } |
| .appbar-progress[value="1"]::-webkit-progress-value { |
| transition-duration: 0.2s; |
| } |
| .error .appbar-progress { |
| background: #ea433599; |
| } |
| .error .appbar-progress::-webkit-progress-value { |
| background: #d93025; |
| } |
| |
| .options { |
| visibility: hidden; |
| grid-area: options; |
| } |
| |
| .symbols { |
| grid-area: symbols; |
| padding: 0 48px; |
| } |
| .tree-container { |
| margin: 0 auto; |
| max-width: 1200px; |
| } |
| |
| .headline { |
| margin: 0; |
| font-family: "Google Sans", Arial, sans-serif; |
| font-weight: normal; |
| color: #202124; |
| font-size: 22px; |
| flex: 1; |
| } |
| .subtitle { |
| font-weight: 500; |
| color: #5f6368; |
| font-size: 13px; |
| } |
| .subhead, |
| .subhead-2 { |
| margin-bottom: 0.5em; |
| font-family: "Google Sans", Arial, sans-serif; |
| font-weight: 500; |
| font-size: 16px; |
| color: #3c4043; |
| } |
| .subhead-2 { |
| font-size: 14px; |
| } |
| .body-2 { |
| font-weight: 400; |
| font-size: 14px; |
| } |
| .caption { |
| font-size: 12px; |
| color: #5f6368; |
| } |
| |
| ul { |
| list-style-type: none; |
| padding-left: 0; |
| } |
| |
| .tree { |
| font-size: 13px; |
| } |
| |
| .tree-header { |
| display: flex; |
| justify-content: space-between; |
| padding: 8px 0; |
| margin-left: 48px; |
| line-height: 24px; |
| border-bottom: 1px solid #dadce0; |
| } |
| |
| [role="group"] { |
| padding-left: 13px; |
| border-left: 1px solid #dadce0; |
| margin-left: 10px; |
| } |
| |
| .icon { |
| display: block; |
| margin-right: 6px; |
| flex: none; |
| } |
| |
| /** Tree nodes */ |
| .node { |
| display: flex; |
| padding-right: 8px; |
| margin-right: -8px; |
| align-items: center; |
| text-decoration: none; |
| color: inherit; |
| border-radius: 4px; |
| } |
| .node:hover { |
| background: #f1f3f4; |
| } |
| .node::before { |
| content: ""; |
| display: inline-block; |
| margin: 10px; |
| width: 0; |
| height: 0; |
| } |
| |
| [aria-expanded]>.node::before { |
| /** Draw a 5x10 triangle */ |
| margin: 5px 7px 5px 8px; |
| border-style: solid; |
| border-width: 5px 0 5px 5px; |
| border-color: transparent transparent transparent currentColor; |
| transition: transform .1s ease-out; |
| } |
| [aria-expanded="true"]>.node::before { |
| transform: rotate(90deg); |
| } |
| |
| /** Tree node sub items */ |
| .symbol-name { |
| font-weight: 500; |
| word-break: break-word; |
| } |
| |
| .count, |
| .size, |
| .percent { |
| margin-left: auto; |
| padding-left: 16px; |
| text-align: right; |
| color: #5f6368; |
| white-space: nowrap; |
| } |
| .shrunk { |
| color: #34a853; |
| } |
| .grew { |
| color: #ea4335; |
| } |
| .removed { |
| text-decoration: line-through; |
| } |
| .highlight { |
| background: #feefc3; |
| } |
| |
| .diff .size-header::after { |
| content: " diff"; |
| } |