chrome-devtools-frontend/front_end/ui/legacy/floaty.css

Chrome DevTools UI

/*
 * 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.
 */

dialog {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 400px;
  min-width: 200px;
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  box-shadow: var(--drop-shadow);
  background: var(--sys-color-tonal-container);
  border-radius: var(--sys-shape-corner-medium-small);
  border: none;
  flex-direction: column;

  header {
    padding: var(--sys-size-6);

    span {
      font: var(--sys-typescale-headline5);
    }

    display: flex;
    align-items: flex-start;

    .close-button {
      margin-left: auto;
    }
  }

  section.body {
    border-radius: var(--sys-shape-corner-medium-small);
    background: var(--sys-color-surface);
    height: 100%;
    padding: var(--sys-size-6);
  }

  .floaty-contexts {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;

    li {
      overflow: hidden;
      text-overflow: ellipsis;
      padding: var(--sys-size-2) var(--sys-size-3);
      border-radius: var(--sys-shape-corner-extra-small);
      border: 1px solid var(--sys-color-tonal-outline);
      font: var(--sys-typescale-monospace-regular);
      display: flex;
      align-items: center;
      justify-content: flex-start;

      devtools-button {
        margin-left: auto;
      }
    }
  }

  section.actions {
    margin-top: var(--sys-size-7);
  }
}

dialog[open] {
  display: flex;
}