1 files changed, 191 insertions, 0 deletions
diff --git a/toolkit/themes/shared/findbar.css b/toolkit/themes/shared/findbar.css
new file mode 100644
index 0000000000..714324929e
--- /dev/null
+++ b/toolkit/themes/shared/findbar.css
@@ -0,0 +1,191 @@
+/* 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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+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;
+}
+
+findbar[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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  findbar,
+  findbar[hidden] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+findbar[noanim],
+findbar[noanim] > .findbar-container,
+findbar[noanim] > .findbar-closebutton {
+  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;
+}
+
+findbar[hidden] > .findbar-container {
+  opacity: 0;
+}
+
+/* Remove start margin when close button is on the left side (on macOS) */
+.findbar-closebutton + .findbar-container {
+  margin-inline-start: 0;
+}
+
+/* Search field */
+
+html|input.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, var(--toolbar-field-border-color));
+  border-radius: 4px;
+  outline: none;
+  margin: 0;
+  padding: 2px 5px;
+  padding-inline-start: 8px;
+  width: 18em;
+  box-sizing: border-box;
+}
+
+html|input.findbar-textbox::placeholder {
+  opacity: 0.69;
+}
+
+html|input.findbar-textbox: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);
+}
+
+html|input.findbar-textbox:-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, Highlight);
+  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled);
+}
+
+html|input.findbar-textbox[status="notfound"] {
+  background-color: rgba(226,40,80,.3);
+  color: inherit;
+}
+
+html|input.findbar-textbox[flash="true"] {
+  background-color: rgba(255,233,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);
+  }
+}
+
+.findbar-find-previous:not([disabled]):hover,
+.findbar-find-next:not([disabled]):hover {
+  background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+}
+
+.findbar-find-previous:not([disabled]):hover:active,
+.findbar-find-next:not([disabled]):hover:active {
+  background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+}
+
+.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;
+}
+
+.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
+.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
+  opacity: var(--toolbarbutton-disabled-opacity);
+}
+
+/* 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;
+}
+
+findbar[hidden] > .findbar-closebutton {
+  opacity: 0;
+}
+
+.close-icon.findbar-closebutton:hover {
+  background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
+  outline: none;
+}
+
+.close-icon.findbar-closebutton:hover:active {
+  background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
+}