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
/* Primary CSS file inside the search-bar shadowRoot */
form {
--search-padding: 6px;
--search-buttons-padding: 52px;
position: relative;
min-height: max(1.2em, calc(1.2em + 2 * var(--search-padding)));
height: 100%;
color: var(--search-bar-color);
&:has(#clear-button[hidden]) {
--search-buttons-padding: 30px;
}
}
input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
font-size: 1rem;
color: var(--search-bar-color);
border: 1px solid var(--search-bar-border-color);
border-radius: var(--button-border-radius);
padding-inline: var(--search-padding) var(--search-buttons-padding);
background-color: var(--search-bar-background);
&:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-color: var(--search-focus-outline-color);
outline-offset: var(--search-outline-offset);
background-color: var(--search-bar-focus-background);
}
}
.button {
position: absolute;
inset-inline-end: 0;
inset-block: 0;
color: inherit;
display: flex;
flex-direction: column;
justify-content: space-around;
&.button-flat.icon-button {
padding: 4px;
margin: 0;
&:focus-visible {
outline-offset: -1px;
@media (-moz-windows-accent-color-in-titlebar) {
outline-offset: -4px;
}
}
}
#clear-button& {
height: 22px;
/* Width of the search button. */
inset-inline-end: 26px;
margin-block: auto;
padding: 2px;
}
}
div {
display: none;
position: absolute;
pointer-events: none;
color: var(--search-field-placeholder);
inset-inline-start: 1ch;
inset-inline-end: var(--search-buttons-padding);
flex-direction: column;
justify-content: space-around;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
inset-block: 0;
input:placeholder-shown + & {
display: flex;
}
}