chrome-devtools-frontend
Version:
Chrome DevTools UI
97 lines (81 loc) • 2.02 kB
CSS
/*
* Copyright 2024 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.
*/
:host {
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
}
.insight-sets-wrapper {
display: flex;
flex-flow: column nowrap;
flex-grow: 1; /* so it fills the available vertical height in the sidebar */
details {
flex-grow: 0;
}
details[open] {
flex-grow: 1;
border-bottom: 1px solid var(--sys-color-divider);
}
summary {
background-color: var(--sys-color-surface2);
border-bottom: 1px solid var(--sys-color-divider);
overflow: hidden;
padding: 2px 5px;
text-overflow: ellipsis;
white-space: nowrap;
font: var(--sys-typescale-body4-medium);
display: flex;
align-items: center;
&:focus {
background-color: var(--sys-color-tonal-container);
}
&::marker {
color: var(--sys-color-on-surface-subtle);
font-size: 11px;
line-height: 1;
}
/* make sure the first summary has a top border */
details:first-child & {
border-top: 1px solid var(--sys-color-divider);
}
}
}
.zoom-button {
margin-left: auto;
}
.zoom-icon {
visibility: hidden;
&.active devtools-button {
visibility: visible;
}
}
.dropdown-icon {
&.active devtools-button {
transform: rotate(90deg);
}
}
.feedback-wrapper {
position: relative;
padding: var(--sys-size-6);
.tooltip {
visibility: hidden;
transition-property: visibility;
position: absolute;
bottom: 35px; /* height of button + a little extra padding */
width: 90%;
max-width: 300px;
left: var(--sys-size-6);
z-index: 1;
box-sizing: border-box;
padding: var(--sys-size-5) var(--sys-size-6);
border-radius: var(--sys-shape-corner-small);
background-color: var(--sys-color-cdt-base-container);
box-shadow: var(--drop-shadow-depth-3);
}
devtools-button:hover + .tooltip {
visibility: visible;
}
}