chrome-devtools-frontend/front_end/panels/elements/stylesSidebarPane.css

Chrome DevTools UI

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

.styles-section {
  min-height: 18px;
  white-space: nowrap;
  user-select: text;
  border-bottom: 1px solid var(--color-details-hairline);
  position: relative;
  overflow: hidden;
}

.styles-section > div {
  padding: 2px 2px 4px 4px;
}

.styles-section:last-child {
  border-bottom: none;
}

.styles-section.read-only {
  background-color: var(--color-background-opacity-50);
  font-style: italic;
}

.styles-section.has-open-popover {
  z-index: 1;
}

.styles-section:focus-visible {
  background-color: var(--color-background-elevation-2);
}

.styles-section.read-only:focus-visible {
  background-color: var(--color-background-elevation-2);
}

.styles-section .simple-selector.filter-match {
  background-color: var(--color-match-highlight);
  color: var(--color-text-primary);
}

.sidebar-pane-closing-brace {
  clear: both;
}

.styles-section-title {
  background-origin: padding;
  background-clip: padding;
  word-wrap: break-word;
  white-space: normal;
}

.styles-section-title .query-list {
  color: var(--color-text-disabled);
}

.styles-section-subtitle {
  color: var(--color-text-secondary);
  float: right;
  padding-left: 15px;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 15px;
  margin-bottom: -1px;
}

.sidebar-pane-open-brace,
.sidebar-pane-closing-brace {
  color: var(--color-text-primary);
}

.styles-section .devtools-link {
  user-select: none;
}

.styles-section .styles-section-subtitle devtools-icon {
  margin-bottom: -4px;
}

.styles-section .styles-section-subtitle .devtools-link {
  color: var(--color-text-primary);
  text-decoration-color: hsl(0deg 0% 60%);
  outline-offset: 0;
}

.styles-section .selector {
  color: var(--color-text-disabled);
}

.styles-section .simple-selector.selector-matches,
.styles-section.keyframe-key {
  color: var(--color-text-primary);
}

.styles-section .try-rule-selector-element {
  color: var(--color-text-disabled);
}

.styles-section .style-properties {
  margin: 0;
  padding: 2px 4px 0 0;
  list-style: none;
  clear: both;
  display: flex;
}

.styles-section.matched-styles .style-properties {
  padding-left: 0;
}

.nesting-symbol.implicit {
  color: var(--color-text-disabled);
}

.nesting-symbol:hover {
  color: var(--color-text-primary);
}

@keyframes styles-element-state-pane-slidein {
  from {
    margin-top: -60px;
  }

  to {
    margin-top: 0;
  }
}

@keyframes styles-element-state-pane-slideout {
  from {
    margin-top: 0;
  }

  to {
    margin-top: -60px;
  }
}

.styles-sidebar-toolbar-pane {
  position: relative;
  animation-duration: 0.1s;
  animation-direction: normal;
}

.styles-sidebar-toolbar-pane-container {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.styles-selector {
  cursor: text;
}

.styles-sidebar-pane-toolbar-container {
  --override-toolbar-background-color: var(--color-background-elevation-1);

  flex-shrink: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  background-color: var(--override-toolbar-background-color);
  z-index: 2;
}

.styles-sidebar-pane-toolbar {
  border-bottom: 1px solid var(--color-details-hairline);
  flex-shrink: 0;
}

.font-toolbar-hidden {
  visibility: hidden;
}

.styles-sidebar-pane-filter-box {
  flex: auto;
  display: flex;
}

.styles-sidebar-pane-filter-box > input {
  outline: none !important; /* stylelint-disable-line declaration-no-important */
  border: none;
  width: 100%;
  background: var(--color-background);
  padding-left: 4px;
  margin: 3px;
}

.styles-sidebar-pane-filter-box > input:hover {
  box-shadow: var(--legacy-focus-ring-inactive-shadow);
}

.styles-sidebar-pane-filter-box > input:focus,
.styles-sidebar-pane-filter-box > input:not(:placeholder-shown) {
  box-shadow: var(--legacy-focus-ring-active-shadow);
}

.styles-sidebar-pane-filter-box > input::placeholder {
  color: var(--color-text-secondary);
}

.styles-section.styles-panel-hovered:not(.read-only),
.styles-section.styles-panel-hovered:not(.read-only) devtools-css-query {
  --override-styles-section-text-hover-text-decoration: underline;
  --override-styles-section-text-hover-cursor: default;
}

.styles-section span.simple-selector:hover {
  text-decoration: var(--override-styles-section-text-hover-text-decoration);
  cursor: var(--override-styles-section-text-hover-cursor);
}

.sidebar-separator {
  background-color: var(--color-background-elevation-1);
  padding: 0 5px;
  border-bottom: 1px solid var(--color-details-hairline);
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 22px;
}

.sidebar-separator > span.monospace {
  max-width: 180px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-left: 2px;
}

.sidebar-separator.layer-separator {
  display: flex;
}

.sidebar-pane-section-toolbar {
  position: absolute;
  right: 0;
  bottom: -1px;
  z-index: 0;
}

.sidebar-pane-section-toolbar.new-rule-toolbar {
  visibility: hidden;
  margin-bottom: 5px;

  --toolbar-height: 16px;
}

.styles-pane:not(.is-editing-style) .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-section-toolbar.new-rule-toolbar {
  visibility: visible;
}

.sidebar-pane-section-toolbar.shifted-toolbar {
  padding-right: 32px;
}

.styles-show-all {
  margin-left: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: -webkit-fill-available;
}

@media (forced-colors: active) {
  .styles-sidebar-pane-filter-box > input {
    border: 1px solid ButtonText;
    background: ButtonFace;
  }

  .styles-section:focus-visible,
  .styles-section.read-only:focus-visible {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .styles-section .styles-section-subtitle .devtools-link {
    color: linktext;
    text-decoration-color: linktext;
  }

  .styles-section .styles-section-subtitle .devtools-link:focus-visible {
    color: HighlightText;
  }

  .styles-section:focus-visible *,
  .styles-section.read-only:focus-visible *,
  .styles-section:focus-visible .styles-section-subtitle .devtools-link {
    color: HighlightText;
    text-decoration-color: HighlightText;
  }

  .sidebar-pane-section-toolbar {
    forced-color-adjust: none;
    border-color: 1px solid ButtonText;
    background-color: ButtonFace;
  }

  .styles-section:focus-visible .sidebar-pane-section-toolbar {
    background-color: ButtonFace;
  }

  .styles-section:focus-visible {
    --webkit-css-property-color: HighlightText;
  }
}

.spinner::before {
  --dimension: 24px;

  margin-top: 2em;
  left: calc(50% - var(--dimension) / 2);
}