chrome-devtools-frontend/front_end/panels/timeline/components/ignoreListSetting.css

Chrome DevTools UI

/*
 * Copyright 2024 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.
 */
.ignore-list-setting-content {
  max-width: var(--sys-size-30);
}

.ignore-list-setting-description {
  margin-bottom: 5px;
}

.regex-row {
  display: flex;

  /* The tag name of CheckboxLabel element */
  dt-checkbox {
    flex: auto;
  }

  devtools-button {
    height: 24px;
  }

  &:not(:hover) devtools-button {
    display: none;
  }
}

.new-regex-row {
  display: flex;

  .new-regex-text-input {
    flex: auto;
  }

  .harmony-input[type="text"] {
    /* padding: 3px 6px; */
    /* height: 24px; */
    border: 1px solid var(--sys-color-neutral-outline);
    border-radius: 4px;
    outline: none;

    &.error-input,
    &:invalid {
      border-color: var(--sys-color-error);
    }

    &:not(.error-input, :invalid):focus {
      border-color: var(--sys-color-state-focus-ring);
    }

    &:not(.error-input, :invalid):hover:not(:focus) {
      background: var(--sys-color-state-hover-on-subtle);
    }
  }
}

.input-validation {
  /* 24px is the size of the checkbox, add this margin-left so the text can align with the input */
  margin: 5px 0 5px 24px;

  &.input-validation-error {
    color: var(--sys-color-error);
  }
}