chrome-devtools-frontend/front_end/panels/elements/components/adornerSettingsPane.css

Chrome DevTools UI

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

.adorner-settings-pane {
  display: flex;
  height: 2.67em;
  padding: 0 12px;
  color: var(--color-text-primary);
  font-size: 12px;
  align-items: center;
}

.settings-title {
  font-weight: 500;
}

.setting {
  margin-left: 1em;
}

.adorner-status {
  margin: auto 0.4em auto 0;
}

.adorner-status,
.adorner-name {
  vertical-align: middle;
}

.close {
  position: relative;
  margin-left: auto;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  border: none;
  border-radius: 50%;
  background-color: var(--color-background-elevation-1);
}

.close::before,
.close::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1em;
  height: 0.2em;
  background-color: var(--color-text-secondary);
  border-radius: 2px;
}

.close:hover,
.close:focus {
  background-color: var(--color-background-elevation-2);
}

.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}