front_end/panels/elements/components/computedStyleProperty.css

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

:host {
  position: relative;
  overflow: hidden;
  flex: auto;
  text-overflow: ellipsis;
}

.computed-style-property {
  --goto-size: 16px;

  min-height: 16px;
  box-sizing: border-box;
  padding-top: 2px;
  white-space: nowrap;
}

.computed-style-property.inherited {
  opacity: 50%;
}

slot[name="property-name"],
slot[name="property-value"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

slot[name="property-name"] {
  width: 16em;
  max-width: 52%;
  margin-right: calc(var(--goto-size) / 2);
  display: inline-block;
  vertical-align: text-top;
}

slot[name="property-value"] {
  margin-left: 2em;
}

.goto {
  display: none;
  cursor: pointer;
  position: absolute;
  width: var(--goto-size);
  height: var(--goto-size);
  margin: -1px 0 0 calc(-1 * var(--goto-size));
  -webkit-mask-image: var(--image-file-mediumIcons);
  -webkit-mask-position: -32px 48px;
  background-color: var(--legacy-active-control-bg-color);
}

.computed-style-property:hover .goto {
  display: inline-block;
}

.hidden {
  display: none;
}
/* narrowed styles */
:host-context(.computed-narrow) .computed-style-property {
  white-space: normal;
}

:host-context(.computed-narrow) slot[name="property-name"],
:host-context(.computed-narrow) slot[name="property-value"] {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  white-space: nowrap;
}

:host-context(.computed-narrow) .goto {
  display: none;
}
/* high-contrast styles */
@media (forced-colors: active) {
  .computed-style-property.inherited {
    opacity: 100%;
  }

  :host-context(.monospace.computed-properties) .computed-style-property:hover {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  :host-context(.monospace.computed-properties) .computed-style-property:hover * {
    color: HighlightText;
  }

  :host-context(.monospace.computed-properties) .goto {
    background-color: HighlightText;
  }
}