toolkit/themes/shared/findbar.css

Propagation: 10.26%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

xul|findbar {
  border-top: 1px solid ThreeDShadow;
  min-width: 1px;
  transition-property: margin-bottom, visibility;
  transition-duration: 150ms, 0s;
  transition-timing-function: ease-in-out, linear;
  padding-block: 6px;
  background-color: -moz-dialog;
  color: -moz-dialogtext;

  &:where([hidden]) {
    /* Override display:none to make the transition work. */
    display: flex;
    margin-bottom: calc(-1 * (28px + 12px + 1px)); /* findbar-container's height + padding-block + top border */
    visibility: collapse;
    transition-delay: 0s, 150ms;

    > .findbar-container,
    > .findbar-closebutton {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion) {
    transition-duration: 0s;
    transition-delay: 0s;
  }

  &[noanim],
  &[noanim] > .findbar-container,
  &[noanim] > .findbar-closebutton,
  /* When letterboxing is in use, we do not transition to avoid layout jank.
   * This has an additional benefit that the find bar cannot be used to
   * fingerprint prefers-reduced-motion. */
  #tabbrowser-tabpanels.letterboxing > .browserSidebarContainer > .browserContainer > & {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

.findbar-container {
  margin-inline-start: 8px;
  height: 28px;
  overflow-inline: hidden; /* Ensures the close button stays visible. */
  transition: opacity 150ms ease-in-out;
}

/* Remove start margin when close button is on the left side (on macOS) */
.findbar-closebutton + .findbar-container {
  margin-inline-start: 0;
}

/* Search field */

.findbar-textbox {
  appearance: none;
  background-color: var(--input-bgcolor, var(--toolbar-field-background-color));
  color: var(--input-color, var(--toolbar-field-color));
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  outline: none;
  margin: 0;
  padding: 2px 5px;
  padding-inline-start: 8px;
  width: 18em;
  box-sizing: border-box;

  &::placeholder {
    opacity: 0.69;
  }

  &:focus {
    background-color: var(--toolbar-field-focus-background-color);
    color: var(--toolbar-field-focus-color);
    border-color: transparent;
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
    outline-color: var(--toolbar-field-focus-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
  }

  :root[lwtheme] &::selection {
    background-color: var(--lwt-toolbar-field-highlight, Highlight);
    color: var(--lwt-toolbar-field-highlight-text, HighlightText);
  }

  :root[lwtheme] &:not(:focus)::selection {
    background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled);
  }

  &[status="notfound"] {
    background-color: rgba(226, 40, 80, 0.3);
    color: inherit;
  }

  &[flash="true"] {
    background-color: rgba(255, 233, 0, 0.3);
    color: inherit;
  }
}

/* Previous/next buttons */

.findbar-find-previous,
.findbar-find-next {
  appearance: none;
  padding: 4px 7px;
  -moz-context-properties: fill;
  fill: var(--toolbarbutton-icon-fill);
  color: inherit;
  border-radius: 4px;

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }

  &:not([disabled]):hover {
    background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
  }

  &:not([disabled]):hover:active {
    background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
  }

  &[disabled="true"] > .toolbarbutton-icon {
    opacity: var(--toolbarbutton-disabled-opacity);
  }
}

.findbar-find-previous {
  list-style-image: url(chrome://global/skin/icons/arrow-up.svg);
  margin-inline: 8px 0;
}

.findbar-find-next {
  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
  margin-inline: 0 8px;
}

/* Checkboxes & Labels */

.findbar-container > checkbox,
.findbar-label {
  margin: 0 8px;
  flex-shrink: 0;
}

.findbar-find-status,
.found-matches {
  margin-inline-start: 12px;
}

.findbar-find-status[status="notfound"] {
  font-weight: bold;
}

.find-status-icon {
  display: none;
}

/* Close button */

/* Increase specificity to override close-icon.css */
.close-icon.findbar-closebutton {
  margin: 2px 8px;
  width: 24px;
  fill: var(--toolbarbutton-icon-fill);
  transition: opacity 150ms ease-in-out;

  &:hover {
    background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
    outline: none;
  }

  &:hover:active {
    background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
  }
}

Back to Home