| // Copyright (C) 2019 The Android Open Source Project |
| // |
| // Licensed under the Apache License, Version 2.0 (the "License"); |
| // you may not use this file except in compliance with the License. |
| // You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, software |
| // distributed under the License is distributed on an "AS IS" BASIS, |
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| // See the License for the specific language governing permissions and |
| // limitations under the License. |
| |
| .details-content { |
| display: grid; |
| grid-template-rows: auto 1fr; |
| |
| .handle { |
| background-color: hsl(215, 1%, 95%); |
| border: 1px solid rgba(0,0,0,0.1); |
| border-bottom: none; |
| cursor: row-resize; |
| height: 28px; |
| min-height: 28px; |
| display: grid; |
| grid-auto-columns: 1fr 60px; |
| grid-template-areas: "tabs buttons"; |
| |
| .tabs { |
| display: flex; |
| grid-area: tabs; |
| overflow: hidden; |
| |
| .tab { |
| font-family: 'Roboto Condensed', sans-serif; |
| color: #3c4b5d; |
| padding: 3px 10px 0 10px; |
| margin-top: 3px; |
| font-size: 13px; |
| border-radius: 5px 5px 0 0; |
| background-color: hsla(0, 0%, 75%, 1); |
| border-top: solid 1px hsla(0, 0%, 75%, 1); |
| border-left: solid 1px hsla(0, 0%, 75%, 1); |
| border-right: solid 1px hsla(0, 0%, 75%, 1); |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| |
| &[active] { |
| background-color: white; |
| &:hover { |
| cursor: default; |
| background-color: white; |
| } |
| } |
| |
| &:hover { |
| cursor: pointer; |
| background-color: hsla(0, 0%, 85%, 1); |
| } |
| } |
| } |
| |
| i.material-icons { |
| font-size: 24px; |
| margin-right: 5px; |
| margin-top: 1px; |
| &:hover{ |
| cursor: pointer; |
| } |
| &[disabled] { |
| color: rgb(219, 219, 219); |
| &:hover{ |
| cursor: default; |
| } |
| } |
| } |
| |
| .buttons { |
| grid-area: buttons; |
| text-align: right; |
| } |
| |
| .handle-title { |
| font-family: 'Roboto Condensed', sans-serif; |
| font-weight: 300; |
| color: #3c4b5d; |
| margin-left: 5px; |
| padding: 5px; |
| font-size: 13px; |
| } |
| } |
| |
| } |
| |
| .details-panel { |
| font-family: 'Roboto Condensed', sans-serif; |
| font-weight: 300; |
| color: #3c4b5d; |
| |
| .material-icons { |
| @include transition(0.3s); |
| font-size: 16px; |
| margin-left: 5px; |
| &:hover { |
| cursor: pointer; |
| } |
| &.grey { |
| border-radius: 3px; |
| border: 1px solid transparent; |
| background-color: #e8e8e8; |
| &:hover { |
| border: #475566 solid 1px; |
| } |
| } |
| } |
| |
| .details-panel-heading { |
| padding: 10px 0 5px 0; |
| position: sticky; |
| top: 0; |
| display: flex; |
| background: white; |
| &.aggregation { |
| padding-top: 5px; |
| display: grid; |
| grid-template-areas: "description range" |
| "heading heading"; |
| grid-template-columns: 1fr auto; |
| .states { |
| font-size: 11px; |
| margin: 0 10px 2px 10px; |
| display: flex; |
| overflow: hidden; |
| .state { |
| height: 20px; |
| line-height: 20px; |
| padding-left: 3px; |
| padding-right: 3px; |
| border-left: white 1px solid; |
| &:hover { |
| min-width: fit-content; |
| } |
| } |
| |
| } |
| .time-range { |
| text-align: right; |
| font-size: 11px; |
| font-weight: 400; |
| margin-right: 5px; |
| } |
| table { |
| grid-area: heading; |
| } |
| th { |
| cursor: pointer; |
| .material-icons { |
| margin-left: 2px; |
| font-size: 18px; |
| } |
| } |
| } |
| h2 { |
| font-size: 16px; |
| font-weight: 400; |
| padding: 0 10px; |
| &.split { |
| width: 50%; |
| } |
| } |
| &.flamegraph-profile { |
| display: flex; |
| justify-content: space-between; |
| align-content: center; |
| height: 30px; |
| padding: 0; |
| font-size: 12px; |
| * { |
| align-self: center; |
| } |
| .options { |
| display: inline-flex; |
| justify-content: space-around; |
| } |
| .details { |
| display: inline-flex; |
| justify-content: flex-end; |
| } |
| button { |
| width: fit-content; |
| height: 20px; |
| padding: 3px; |
| padding-top: 0; |
| margin: 2px; |
| font-size: 12px; |
| opacity: 0.5; |
| &.download { |
| opacity: 1; |
| padding-top: 3px; |
| height: 21px; |
| } |
| &.chosen { |
| opacity: 1; |
| } |
| .material-icons { |
| font-size: 15px; |
| margin-right: 3px; |
| } |
| } |
| .title { |
| justify-self: start; |
| margin-left: 5px; |
| font-size: 14px; |
| margin-right: 10px; |
| } |
| .time { |
| justify-self: end; |
| margin-right: 10px; |
| } |
| .selected { |
| justify-self: end; |
| margin-right: 10px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| width: 200px; |
| } |
| } |
| } |
| |
| table { |
| @include transition(0.1s); |
| font-size: 14px; |
| line-height: 18px; |
| width: 100%; |
| // Aggregation panel uses multiple table elements that need to be aligned, |
| // which is done by using fixed table layout. |
| table-layout: fixed; |
| word-wrap: break-word; |
| padding: 0 10px; |
| tr:hover { |
| background-color: hsl(214, 22%, 90%); |
| } |
| th { |
| text-align: left; |
| width: 30%; |
| font-weight: normal; |
| } |
| .array-index { |
| text-align: right; |
| } |
| } |
| |
| .auto-layout { |
| table-layout: auto; |
| } |
| |
| button { |
| background-color: #262f3c; |
| color: #fff; |
| font-size: 0.875rem; |
| padding-left: 1rem; |
| padding-right: 1rem; |
| padding-top: .5rem; |
| padding-bottom: .5rem; |
| border-radius: .25rem; |
| margin-top: 12px; |
| margin-left: 10px; |
| } |
| } |
| |
| .flow-link:hover { |
| cursor: pointer; |
| text-decoration: underline; |
| } |
| |
| .flow-info i.material-icons { |
| color: rgb(60, 86, 136); |
| } |
| |
| .warning { |
| position: relative; |
| font-size: 13px; |
| color: hsl(45, 100%, 48%); |
| } |
| |
| .warning i.material-icons { |
| font-size: 13px; |
| } |
| |
| .warning .tooltip { |
| visibility: hidden; |
| |
| background-color: white; |
| color: #3f4040; |
| box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3); |
| |
| padding: 4px; |
| border-radius: 4px; |
| |
| text-align: center; |
| white-space: nowrap; |
| |
| position: absolute; |
| z-index: 1; |
| top: -5px; |
| left: 105%; |
| } |
| |
| .warning:hover .tooltip { |
| visibility: visible; |
| } |
| |
| .flow-button { |
| color: rgb(60, 86, 136); |
| } |
| |
| table.half-width { |
| max-width: 50%; |
| } |
| |
| .notes-editor-panel { |
| padding: 10px; |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| font-family: 'Roboto Condensed', sans-serif; |
| font-weight: 300; |
| color: #3c4b5d; |
| |
| .notes-editor-panel-heading-bar { |
| display: flex; |
| padding-bottom: 8px; |
| font-size: 14px; |
| .notes-editor-panel-heading { |
| padding-top: 3px; |
| } |
| input { |
| vertical-align: middle; |
| } |
| } |
| |
| button { |
| background: #262f3c; |
| color: white; |
| border-radius: 10px; |
| font-size: 10px; |
| height: 22px; |
| line-height: 18px; |
| min-width: 7em; |
| margin: auto 0 auto 1rem; |
| } |
| |
| input[type=text] { |
| flex-grow: 1; |
| border-radius: 4px; |
| border:1px solid #dcdcdc; |
| padding: 3px; |
| margin: 0 10px; |
| &:focus { |
| outline: none; |
| box-shadow: 1px 1px 1px rgba(23, 32, 44, 0.3); |
| } |
| } |
| } |
| |
| .sum { |
| font-weight: bolder; |
| font-size: 12px; |
| .sum-data { |
| border-bottom: 1px solid rgba(60, 76, 92, 0.4); |
| } |
| } |
| |
| .log-panel { |
| width: 100%; |
| height: 100%; |
| display: grid; |
| grid-template-rows: auto 1fr; |
| font-family: 'Roboto Condensed', sans-serif; |
| |
| header { |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| background-color: white; |
| color: #3c4b5d; |
| padding: 5px; |
| } |
| |
| header.stale { |
| color: grey; |
| } |
| |
| .rows { |
| position: relative; |
| direction: ltr; |
| width: 100%; |
| |
| .row { |
| @include transition(); |
| position: absolute; |
| width: 100%; |
| height: 20px; |
| line-height: 20px; |
| background-color: hsl(214, 22%, 100%); |
| |
| &.D { color: hsl(122, 20%, 40%); } |
| &.V { color: hsl(122, 20%, 30%); } |
| &.I { color: hsl(0, 0%, 20%); } |
| &.W { color: hsl(45, 60%, 45%); } |
| &.E { color: hsl(4, 90%, 58%); } |
| &.F { color: hsl(291, 64%, 42%); } |
| &.stale { color: #aaa; } |
| &:nth-child(even) { |
| background-color: hsl(214, 22%, 95%); |
| } |
| &:hover { |
| background-color: hsl(214, 22%, 90%); |
| } |
| .cell { |
| font-size: 11px; |
| font-family: var(--monospace-font); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| padding-left: 10px; |
| padding-right: 10px; |
| display: inline-block; |
| &:first-child { |
| padding-left: 5px; |
| } |
| &:last-child { |
| padding-right: 5px; |
| } |
| &:nth-child(1) { |
| width: 110px; |
| text-overflow: clip; |
| text-align: right; |
| } |
| &:nth-child(2) { |
| width: 20px; |
| } |
| &:nth-child(3) { |
| width: 15%; |
| } |
| &:nth-child(4) { |
| width: calc(100% - 110px - 20px - 15%); |
| } |
| &:only-child { |
| width: 100%; |
| } |
| } |
| } |
| } |
| } |
