chrome-devtools-frontend/front_end/panels/event_listeners/eventListenersView.css

Chrome DevTools UI

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

.tree-outline-disclosure li {
  padding: 2px 0 0 5px;
  overflow: hidden;
  display: flex;
  min-height: 17px;
  align-items: baseline;
}

.tree-outline-disclosure > li {
  border-top: 1px solid var(--color-background-elevation-0);
}

.tree-outline-disclosure > li:first-of-type {
  border-top: none;
}

.tree-outline-disclosure {
  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  padding-right: 3px;
}

.tree-outline-disclosure li.parent::before {
  top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.tree-outline-disclosure .name {
  color: var(--color-syntax-2);
}

.tree-outline-disclosure .object-value-node,
.tree-outline-disclosure .object-value-object {
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-listener-details {
  display: flex;
}

.event-listener-tree-subtitle {
  float: right;
  margin-left: 5px;
  flex-shrink: 0;
}

.event-listener-button {
  padding: 0 3px;
  background-color: var(--color-background-elevation-1);
  border-radius: 3px;
  border: 1px solid var(--color-details-hairline);
  margin-left: 5px;
  display: block;
  opacity: 80%;
  flex-shrink: 0;
}

.event-listener-button:hover {
  background-color: var(--color-background-elevation-2);
  opacity: 100%;
}

.tree-outline-disclosure li:hover .event-listener-button {
  display: inline;
}

@media (forced-colors: active) {
  .event-listener-details .event-listener-button {
    forced-color-adjust: none;
    opacity: 100%;
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }

  .event-listener-button:hover {
    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
    color: HighlightText;
    border-color: ButtonText;
  }

  .tree-outline.hide-selection-when-blurred .selected:focus-visible .event-listener-button,
  .tree-outline-disclosure li:focus-visible .gray-info-message {
    background-color: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
}