chrome-devtools-frontend/front_end/panels/css_overview/cssOverviewSidebarPanel.css

Chrome DevTools UI

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

.overview-sidebar-panel {
  display: flex;
  background: var(--sys-color-cdt-base-container);
  min-width: fit-content;
  flex-direction: column;
}

.overview-sidebar-panel-item {
  height: 30px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  color: var(--sys-color-on-surface);
  white-space: nowrap;

  &:hover {
    background: var(--sys-color-state-hover-on-subtle);
  }

  &:focus {
    background: var(--sys-color-state-focus-highlight);
  }

  &.selected {
    background: var(--sys-color-tonal-container);
    color: var(--sys-color-on-tonal-container);
  }
}

.overview-toolbar {
  border-bottom: 1px solid var(--sys-color-divider);
  flex: 0 0 auto;
}

.overview-sidebar-panel-item:focus-visible {
  outline-width: unset;
}

@media (forced-colors: active) {
  .overview-sidebar-panel-item.selected {
    forced-color-adjust: none; /* crbug.com/1166705 workaround */
    background: Highlight;
    color: HighlightText;
  }

  .overview-sidebar-panel-item:hover {
    forced-color-adjust: none; /* crbug.com/1166705 workaround */
    background: Highlight;
    color: HighlightText;
  }
}