chrome-devtools-frontend/front_end/ui/legacy/searchableView.css

Chrome DevTools UI

/*
 * Copyright (c) 2014 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.
 */

.search-bar {
  flex: 0 0 33px;
  border-top: 1px solid var(--sys-color-divider);

  devtools-icon[name="search"] {
    width: var(--sys-size-8);
    height: var(--sys-size-8);
    color: var(--sys-color-on-surface-subtle);
    margin-right: var(--sys-size-3);
  }

  &.replaceable {
    & devtools-icon[name="search"] {
      display: none;
    }
  }

  &:not(.replaceable) .replace-element {
    display: none;
  }

  .search-replace {
    appearance: none;
    color: var(--sys-color-on-surface);
    background-color: transparent;
    border: 0;
    z-index: 1;
    flex: 1;

    &::placeholder {
      color: var(--sys-color-on-surface-subtle);
    }

    &:placeholder-shown + .clear-button {
      display: none;
    }

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .search-input-background {
    grid-row: 1/2;
  }

  .icon-and-input {
    margin-left: var(--sys-size-5);
    grid-row: 1/2;
    grid-column: 1/2;
    display: inline-flex;

    &:hover ~ .search-input-background {
      background-color: var(--sys-color-state-hover-on-subtle);
    }

    &:has(.search-replace:placeholder-shown) ~ .search-config-buttons > .clear-button {
      display: none;
    }
  }

  .toolbar-search {
    display: flex;
    margin: var(--sys-size-2);
  }

  .second-row-buttons {
    height: var(--sys-size-12);
    display: inline-flex;

    & > devtools-button {
      margin-right: var(--sys-size-3);
    }
  }

  .input-line {
    grid-column: 1/3;
    display: inline-flex;
    padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
    border-radius: 100px;
    height: var(--sys-size-10);
    position: relative;

    &:not(:has(devtools-button:hover)):hover {
      background-color: var(--sys-color-state-hover-on-subtle);
    }

    &::before {
      content: "";
      box-sizing: inherit;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      background: var(--sys-color-cdt-base);
      z-index: -10;
      border-radius: 100px;
      padding: var(--sys-size-2);
    }

    & > devtools-button {
      width: var(--sys-size-11);
      justify-content: center;
      margin-right: var(--sys-size-4);
    }
  }

  .search-inputs {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-auto-rows: var(--sys-size-12);
    flex-grow: 1;
    align-items: center;
    min-width: 150px;
  }

  .first-row-buttons {
    display: flex;
    justify-content: space-between;
  }

  devtools-toolbar {
    padding: 0;
    height: var(--sys-size-12);
    display: flex;
    align-items: center;
  }

  .search-config-buttons {
    margin: 0 var(--sys-size-3) 0 auto;
    z-index: 1;
    display: inline-flex;
    grid-row: 1/2;
    grid-column: 2/3;

    & > devtools-button:last-child {
      margin-right: var(--sys-size-4);
    }
  }

  .toolbar-search-buttons {
    margin-left: var(--sys-size-3);
  }

  .replace-element:has(input:focus) {
    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
  }

  .search-inputs:has(input[type="search"]:focus) .search-input-background {
    box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
  }
}

:host-context(#sources-panel-sources-view) .search-bar {
  flex-basis: auto;
}

:host-context(#sources-panel-sources-view) .toolbar-search {
  flex-wrap: wrap;
}