chrome-devtools-frontend
Version:
Chrome DevTools UI
55 lines (48 loc) • 1.59 kB
CSS
/*
* Copyright 2025 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
:host {
--tooltip-viewport-distance: var(--sys-size-5);
/* Reset the browser's default styles for [popover] elements. */
margin: 0;
background: none;
border: none;
padding: 0;
overflow: visible;
position: absolute;
max-width: var(--devtools-window-width);
max-height: var(--devtools-window-height);
visibility: hidden;
& .container {
width: max-content;
max-width: calc(var(--devtools-window-width) - 2 * (
/* host margin */ var(--tooltip-viewport-distance) +
/* container horizontal padding */ var(--sys-size-8) +
/* container margin */ var(--sys-size-3)));
margin: var(--sys-size-2);
font: var(--sys-typescale-body4-regular);
color: var(--sys-color-inverse-on-surface);
background-color: var(--sys-color-inverse-surface);
box-shadow: var(--sys-elevation-level2);
border-radius: var(--sys-shape-corner-extra-small);
padding: var(--sys-size-4) var(--sys-size-5);
}
}
:host([variant='rich']) {
justify-self: unset;
margin: 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0;
position: absolute;
& .container {
margin-inline: 0;
margin-block: var(--sys-size-3);
color: var(--sys-color-on-surface);
background-color: var(--sys-color-base-container-elevated);
border-radius: var(--sys-shape-corner-small);
overflow: auto;
&.large-padding {
padding: var(--sys-size-6) var(--sys-size-8);
}
}
}