245 lines
6.5 KiB
CSS
245 lines
6.5 KiB
CSS
/* 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 {
|
|
min-width: 1px;
|
|
transition-property: margin-bottom, visibility;
|
|
transition-duration: 150ms, 0s;
|
|
transition-timing-function: ease-in-out, linear;
|
|
padding-block: 6px;
|
|
border-top: 1px solid var(--chrome-content-separator-color);
|
|
background-color: var(--toolbar-background-color);
|
|
color: -moz-dialogtext;
|
|
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
border-top: 1px solid ThreeDShadow;
|
|
background-color: -moz-dialog;
|
|
}
|
|
|
|
&:where([hidden]) {
|
|
/* Override display:none to make the transition work. `!important` beats the
|
|
global `[hidden] { display: none !important }` rule. */
|
|
display: flex !important;
|
|
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;
|
|
overflow-inline: hidden; /* Ensures the close button stays visible. */
|
|
transition: opacity 150ms ease-in-out;
|
|
height: 32px;
|
|
padding-inline-start: var(--space-xsmall);
|
|
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
/* 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(--background-color-box);
|
|
color: var(--input-text-color);
|
|
min-height: 28px;
|
|
|
|
:root[lwtheme] & {
|
|
background-color: var(--toolbar-field-background-color);
|
|
color: var(--toolbar-field-text-color);
|
|
}
|
|
|
|
border: var(--border-width) solid var(--border-color-interactive);
|
|
border-radius: var(--border-radius-xlarge);
|
|
outline: none;
|
|
margin: 0;
|
|
padding-inline-start: var(--space-medium);
|
|
width: 18em;
|
|
box-sizing: border-box;
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
border-radius: var(--border-radius-small);
|
|
border: 1px solid var(--input-border-color);
|
|
background-color: var(--input-text-background-color);
|
|
min-height: auto;
|
|
padding: 2px 5px;
|
|
|
|
&:focus {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
|
|
outline-color: var(--toolbar-field-border-color-focus);
|
|
}
|
|
}
|
|
|
|
&::placeholder {
|
|
opacity: 0.69;
|
|
}
|
|
|
|
&:focus {
|
|
background-color: var(--toolbar-field-background-color-focus);
|
|
color: var(--toolbar-field-text-color-focus);
|
|
border-color: transparent;
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-inset);
|
|
}
|
|
|
|
: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;
|
|
-moz-context-properties: fill;
|
|
fill: var(--toolbarbutton-icon-fill);
|
|
color: inherit;
|
|
border-radius: var(--border-radius-circle);
|
|
padding: var(--space-xsmall) var(--space-small);
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
border-radius: var(--border-radius-small);
|
|
padding: 4px 7px;
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
border: var(--border-width) solid var(--toolbarbutton-outline-color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-inset);
|
|
}
|
|
|
|
&:not([disabled]):hover {
|
|
background-color: var(--toolbarbutton-background-color-hover, rgba(190, 190, 190, 0.2));
|
|
}
|
|
|
|
&:not([disabled]):hover:active {
|
|
background-color: var(--toolbarbutton-background-color-active, rgba(190, 190, 190, 0.4));
|
|
}
|
|
|
|
&[disabled] > .toolbarbutton-icon {
|
|
opacity: var(--toolbarbutton-opacity-disabled);
|
|
}
|
|
}
|
|
|
|
.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-container > checkbox {
|
|
accent-color: var(--color-accent-primary);
|
|
}
|
|
|
|
.findbar-find-status,
|
|
.found-matches {
|
|
margin-inline-start: 12px;
|
|
}
|
|
|
|
.findbar-find-status[status="notfound"] {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.find-status-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Since the find bar is not fully responsive, and most checkboxes cannot fit
|
|
* within the width of a single split-view panel, we hide them. */
|
|
.split-view-panel .findbar-container > checkbox {
|
|
display: none;
|
|
}
|
|
|
|
/* Close button */
|
|
|
|
/* Increase specificity to override close-icon.css */
|
|
.close-icon.findbar-closebutton {
|
|
margin: 2px 8px;
|
|
fill: var(--toolbarbutton-icon-fill);
|
|
transition: opacity 150ms ease-in-out;
|
|
border-radius: var(--border-radius-circle);
|
|
border: var(--border-width) solid var(--toolbarbutton-outline-color);
|
|
padding: var(--space-xsmall) var(--space-small);
|
|
width: auto;
|
|
|
|
&:hover {
|
|
background-color: var(--toolbarbutton-background-color-hover, rgba(190, 190, 190, 0.2));
|
|
outline: none;
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: var(--toolbarbutton-background-color-active, rgba(190, 190, 190, 0.4));
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
border-radius: var(--border-radius-small);
|
|
width: 24px;
|
|
}
|
|
}
|