chrome-devtools-frontend/front_end/ui/components/diff_view/diffView.css

Chrome DevTools UI

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

.diff-listing {
  display: grid;
  grid-template-columns: max-content max-content max-content auto;
  font-family: var(--source-code-font-family);
  font-size: var(--source-code-font-size);
  white-space: pre;
  line-height: 1.2em;
  user-select: text;
}

.diff-line-number {
  color: var(--sys-color-token-subtle);
  padding: 0 3px 0 9px;
  text-align: right;
  user-select: none;
}

.diff-line-marker {
  user-select: none;
  border-right: 1px solid var(--sys-color-divider);
  width: 20px;
  text-align: center;
}

.diff-line-content {
  padding: 0 4px;
}

.diff-line-marker-addition,
.diff-line-addition {
  background-color: var(--sys-color-surface-green);
}

.diff-line-marker-deletion,
.diff-line-deletion {
  background-color: var(--sys-color-surface-error);
}

.diff-line-addition .inner-diff {
  background-color: color-mix(
    in srgb,
    var(--ref-palette-green70) 40%,
    transparent
  );
}

.diff-line-deletion .inner-diff {
  background-color: color-mix(
    in srgb,
    var(--ref-palette-error60) 40%,
    transparent
  );
}

.diff-hidden-text {
  display: inline-block;
  width: 0;
  overflow: hidden;
}

.diff-line-equal {
  opacity: 50%;
}

.diff-line-spacer {
  text-align: center;
  background-color: var(--sys-color-surface5);
}

.diff-listing-no-diff {
  user-select: auto;
  font-family: var(--source-code-font-family);
  font-size: var(--source-code-font-size);
  margin: 0;
  padding: var(--sys-size-5) 9px;
}