chrome-devtools-frontend/front_end/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(--divider-color);
  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: #fafafa; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  font-style: italic;
}

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

.styles-section:focus-visible {
  background-color: hsl(214deg 48% 95%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section.read-only:focus-visible {
  background-color: hsl(215deg 25% 87%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section .simple-selector.filter-match {
  background-color: rgb(255 255 0 / 50%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

:host-context(.-theme-with-dark-background) .styles-section .simple-selector.filter-match {
  background-color: hsl(133deg 100% 30% / 50%);
}

.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 .media-list {
  color: hsl(0deg 0% 46%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section-title .media-list.media-matches .media.editable-media {
  color: #222; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section-title .media .subtitle {
  float: right;
  color: hsl(0deg 0% 34%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section-title .media:not(.editing-media),
.styles-section-title .media:not(.editing-media) .subtitle {
  overflow: hidden;
}

.styles-section-subtitle {
  color: hsl(0deg 0% 44%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  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: hsl(0deg 0% 46%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

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

.styles-section .styles-section-subtitle .devtools-link {
  color: hsl(0deg 0% 44%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  text-decoration-color: hsl(0deg 0% 60%);
}

.styles-section .selector {
  color: hsl(0deg 0% 46%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section .simple-selector.selector-matches,
.styles-section.keyframe-key {
  color: #222; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.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;
}

@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 {
  flex-shrink: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  background-color: var(--toolbar-bg-color);
  z-index: 2;
}

.styles-sidebar-pane-toolbar {
  border-bottom: 1px solid #eee; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  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;
  border: none;
  width: 100%;
  background: var(--color-background);
  padding-left: 4px;
  margin: 3px;
}

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

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

.styles-sidebar-pane-filter-box > input::placeholder {
  color: rgb(0 0 0 / 54%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover,
.styles-section.styles-panel-hovered:not(.read-only) .media-text :hover {
  text-decoration: underline;
  cursor: default;
}

.sidebar-separator {
  background-color: var(--toolbar-bg-color);
  padding: 0 5px;
  border-bottom: 1px solid var(--divider-color);
  color: hsl(0deg 0% 32% / 100%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  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-pane-section-toolbar {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgb(255 255 255 / 90%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  z-index: 0;
}

.sidebar-pane-section-toolbar.new-rule-toolbar {
  visibility: hidden;
}

.styles-section:focus-visible .sidebar-pane-section-toolbar {
  background-color: hsl(214deg 67% 95% / 90%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.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: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;
  }
}

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

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