Source code
Revision control
Copy as Markdown
Other Tools
/* 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
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 {
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, 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;
&::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,.3);
color: inherit;
}
&[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);
}
&:not([disabled]):hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
}
&:not([disabled]):hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
}
&[disabled="true"] > .toolbarbutton-icon {
opacity: var(--toolbarbutton-disabled-opacity);
}
}
.findbar-find-previous {
margin-inline: 8px 0;
}
.findbar-find-next {
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,.2));
outline: none;
}
&:hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
}
}