uc-findbar.css

/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* controls the basic appearance of the findbar. uc-fullscreen further adjusts it */

@keyframes findbar-down {
  0% {
    opacity: 0;
    transform: translateY(calc(0px - var(--findbar-height) - 16px));
  }
  66.6% {
    opacity: 0.666;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}

.browserContainer {
  position: relative;
}

.browserContainer > findbar {
  order: 0;
  position: absolute !important;
  display: flex !important;
  visibility: visible !important;
  flex-flow: row nowrap;
  align-items: center;
  top: 0 !important;
  left: 1.5em;
  min-height: unset !important;
  padding-block: 8px !important;
  width: calc(40% - 100px) !important;
  min-width: var(--findbar-min-width, 225px) !important;
  max-width: var(--findbar-max-width, 400px) !important;
  background-color: var(--ui-tertiary-bg) !important;
  border: 0px solid transparent !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-top: none !important;
  box-shadow: 0px 0px 7px -2px hsla(240, 4%, 0%, 0.6), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2) !important;
  background-image: none !important;
  transition-property: transform, opacity, width, left, right !important;
  transition-duration: 0.2s, 0.3s, 0.2s, 0.2s, 0.2s !important;
  transition-delay: 0s, 0s, 0s, 0s, 0s !important;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out !important;
  z-index: 1 !important;
  animation: 0.3s ease-in-out findbar-down;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
}

.findbar-container {
  flex-flow: row nowrap !important;
  height: var(--findbar-height, 22px) !important;
  min-width: revert !important;
  width: 100% !important;
  overflow: revert !important;
}

findbar[hidden] {
  transform: translateY(calc(0px - var(--findbar-height) - 16px));
  pointer-events: none;
  opacity: 0 !important;
  transition-duration: 0.3s, 0.2s, 0.2s, 0.2s, 0.2s !important;
}

#sidebar-box[hidden="true"] ~ #appcontent findbar,
#sidebar-box:not([positionend="true"]) ~ #appcontent findbar {
  left: auto !important;
  right: 1.5em !important;
}

@media screen and not (min-width: 500px) {
  .browserContainer > findbar {
    width: 100% !important;
    right: 0 !important;
    max-width: unset !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }

  #sidebar-box[hidden="true"] ~ #appcontent findbar,
  #sidebar-box:not([positionend="true"]) ~ #appcontent findbar {
    right: 0 !important;
  }
}

.findbar-closebutton {
  padding: 0 !important;
  margin-inline: 7px 0 !important;
  margin-block: 0 !important;
  height: var(--findbar-height, 22px) !important;
  width: var(--findbar-height, 22px) !important;
  border-radius: var(--toolbarbutton-border-radius) !important;
  order: 2 !important;
  /* I use findbarMods.uc.js to actually move the icon to the right side, so the
    tab index will be correct. But order is a decent, (purely
    visual) alternative if you don't use scripts. */
}

.findbar-closebutton .toolbarbutton-icon {
  fill-opacity: 0 !important;
  width: 12px !important;
  height: 12px !important;
  /* list-style-image: url(chrome://userchrome/content/textbox-clear.svg) !important; */
  list-style-image: url(chrome://userchrome/content/window-controls/close.svg) !important;
  stroke: white !important;
  -moz-context-properties: fill, fill-opacity, stroke !important;
}

.findbar-closebutton:is(:hover, :focus-visible):not([disabled]) {
  background-color: var(--toolbarbutton-hover-background) !important;
}

.findbar-closebutton:is(:hover, :focus-visible):not([disabled]):active {
  background-color: var(--toolbarbutton-active-background) !important;
}

[anonid="findbar-textbox-wrapper"] {
  border-radius: var(--toolbarbutton-border-radius) !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.findbar-textbox {
  border: none !important;
  transition: var(--findbar-textbox-bg-transition-duration, 200ms) background-color !important;
  width: revert !important;
  border-radius: 0 !important;
  outline: none !important;
  height: var(--findbar-height, 22px) !important;
  box-sizing: border-box !important;
  padding-inline: 6px !important;
  flex: 1 !important;
}

.findbar-textbox input > .anonymous-div {
  color: white !important;
  opacity: 1 !important;
}

.findbar-textbox {
  background-color: var(--search-box-color) !important;
  color: var(--toolbar-field-color) !important;
}

.findbar-textbox::placeholder {
  color: var(--panel-description-color) !important;
}

.findbar-textbox:focus {
  background-color: var(--search-box-focus) !important;
  color: var(--toolbar-field-color) !important;
}

.findbar-textbox[status="notfound"] {
  background-color: var(--search-box-null) !important;
  color: var(--panel-description-color) !important;
  transition-duration: var(--findbar-textbox-bg-notfound-transition-duration, 300ms) !important;
  transition-timing-function: ease-out !important;
}

.findbar-textbox[status="notfound"]:focus {
  color: var(--ui-text-80) !important;
}

[anonid="findbar-textbox-wrapper"]:focus-within .findbar-textbox:not([status="notfound"]) {
  background-color: var(--search-box-focus) !important;
  color: var(--toolbar-field-color) !important;
}

findbar .matches-indicator {
  background-color: var(--search-box-color);
  transition: var(--findbar-textbox-bg-transition-duration, 200ms) background-color;
  mask-image: linear-gradient(to right, transparent 0px, black 20px);
  line-height: var(--findbar-height, 22px) !important;
  height: var(--findbar-height, 22px) !important;
}

.findbar-textbox:focus ~ .matches-indicator {
  background-color: var(--search-box-focus);
}

.findbar-textbox[status="notfound"] ~ .matches-indicator {
  background-color: var(--search-box-null);
  transition-duration: var(--findbar-textbox-bg-notfound-transition-duration, 300ms);
  transition-timing-function: ease-out;
}

[anonid="findbar-textbox-wrapper"]:focus-within .findbar-textbox:not([status="notfound"]) ~ .matches-indicator {
  background-color: var(--search-box-focus);
}

.findbar-find-previous,
.findbar-find-next {
  border: none !important;
  padding: 0 !important;
  background: var(--search-box-color) !important;
  fill: rgba(255, 255, 255, 1) !important;
  transition: var(--findbar-textbox-bg-transition-duration, 200ms) background-color !important;
}

.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
  background: none !important;
  padding: 0 !important;
  width: 12px !important;
  margin-inline: 2px !important;
  opacity: 0.5 !important;
}

[anonid="findbar-textbox-wrapper"] > :last-child > .toolbarbutton-icon {
  margin-inline-end: calc((var(--findbar-height) - 16px) / 3) !important;
}

.findbar-find-previous {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  list-style-image: url(chrome://userchrome/content/menu-arrow-left-tiny.svg) !important;
}

.findbar-find-next {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  list-style-image: url(chrome://userchrome/content/menu-arrow-tiny.svg) !important;
}

:is(.findbar-find-previous, .findbar-find-next):not([disabled], [hidden]):hover > .toolbarbutton-icon {
  background: none !important;
  opacity: 1 !important;
}

:is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive):not([disabled], [hidden]):focus-visible :is(.toolbarbutton-icon, .checkbox-icon) {
  fill: var(--pink-action) !important;
  opacity: 1 !important;
}

:is(.findbar-entire-word, .findbar-case-sensitive):not([disabled], [hidden]):is(:hover, [checked]) :is(.toolbarbutton-icon, .checkbox-icon) {
  background: none !important;
  opacity: 0.8 !important;
}

:is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive):not([disabled], [hidden]):hover:active {
  box-shadow: none !important;
}

:is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive):not([disabled], [hidden]):where([checked]:hover, [checked]:focus-visible, :hover:active, :focus-visible:hover) :is(.toolbarbutton-icon, .checkbox-icon) {
  background: none !important;
  opacity: 1 !important;
}

.findbar-textbox[status="notfound"] ~ :is(.findbar-find-previous, .findbar-find-next) > .toolbarbutton-icon,
.findbar-textbox[status="notfound"] ~ :is(.findbar-find-previous, .findbar-find-next) > .toolbarbutton-icon,
:is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive):is([disabled="true"], [hidden]) :is(.toolbarbutton-icon, .checkbox-icon) {
  fill: rgba(255, 255, 255, 1) !important;
  opacity: 0.25 !important;
}

.findbar-textbox:focus ~ :is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive) {
  background-color: var(--search-box-focus) !important;
}

.findbar-textbox[status="notfound"] ~ :is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive) {
  background-color: var(--search-box-null) !important;
  transition: var(--findbar-textbox-bg-notfound-transition-duration, 300ms) !important;
  transition-timing-function: ease-out !important;
}

.findbar-textbox[status="notfound"] ~ :is(.findbar-find-previous, .findbar-find-next) {
  -moz-user-focus: ignore !important;
}

.findbar-find-previous,
.findbar-find-next,
.findbar-entire-word,
.findbar-case-sensitive {
  transition: var(--findbar-textbox-bg-transition-duration, 200ms) background-color !important;
}

.findbar-entire-word,
.findbar-case-sensitive {
  -moz-context-properties: fill, fill-opacity;
  padding-inline: 2px !important;
  appearance: none !important;
  border: none !important;
  margin: 0 !important;
  background: var(--search-box-color) !important;
  fill: hsl(0, 0%, 100%) !important;
  border-radius: 0 !important;
  display: flex !important;
}

[anonid="findbar-textbox-wrapper"] checkbox {
  opacity: 1 !important;
}

[anonid="findbar-textbox-wrapper"] checkbox[hidden]:not([disabled]) {
  pointer-events: none !important;
  -moz-user-focus: none !important;
}

.findbar-entire-word {
  list-style-image: url(chrome://userchrome/content/material/entire-word.svg);
}

.findbar-case-sensitive {
  list-style-image: url(chrome://userchrome/content/material/case-sensitive.svg);
}

:is(.findbar-entire-word, .findbar-case-sensitive) :is(.toolbarbutton-icon, .checkbox-icon) {
  margin: 0 !important;
  background: none !important;
  width: 16px !important;
  opacity: 0.4 !important;
  appearance: none !important;
  display: -moz-inline-box !important;
}

.findbar-textbox.minimal ~ :is(.findbar-case-sensitive, .findbar-entire-word, .findbar-find-previous, .findbar-find-next) {
  display: none !important;
}

.findbar-textbox.minimal ~ .matches-indicator {
  margin-inline-end: 6px !important;
}

:is(.findbar-entire-word, .findbar-case-sensitive) :is(.checkbox-check, .checkbox-label) {
  display: none !important;
}

:is(.findbar-entire-word, .findbar-case-sensitive) .checkbox-icon {
  display: revert !important;
}

[anonid="findbar-textbox-wrapper"]:focus-within .findbar-textbox:not([status="notfound"]) ~ :is(.findbar-find-previous, .findbar-find-next, .findbar-entire-word, .findbar-case-sensitive) {
  background-color: var(--search-box-focus) !important;
  transition: var(--findbar-textbox-bg-transition-duration, 200ms) background-color !important;
}

[anonid="findbar-textbox-wrapper"] {
  outline: 0 solid transparent !important;
  transition: var(--textbox-outline-transition-duration, 100ms) outline ease-in !important;
}

[anonid="findbar-textbox-wrapper"]:focus-within {
  outline-width: 2px !important;
  outline-color: var(--search-box-focus-outline-color, -moz-accent-color) !important;
  transition-duration: calc(var(--textbox-outline-transition-duration, 100ms) * 0.6) !important;
  transition-timing-function: ease-out !important;
}

#findbar-close-container {
  display: none !important;
}

.findbar-find-status,
.found-matches,
.find-status-icon,
.findbar-label,
.findbar-highlight,
.findbar-match-diacritics {
  display: none !important;
}

@media (-moz-bool-pref: "userChrome.findbar.hide-on-unfocus") {
  findbar:not(:focus-within) {
    transform: translateY(calc(0px - var(--findbar-height) - 16px));
    pointer-events: none;
    opacity: 0;
    transition-duration: 0.3s, 0.2s, 0.2s, 0.2s, 0.2s !important;
  }
}

@media (-moz-bool-pref: "userChrome.css.mac-ui-fonts") {
  findbar .matches-indicator {
    font-weight: var(--uc-font-weight-thin, 300) !important;
  }
}