0b5dd65a41
By updating --fxview-border to use --border-color-transparent, we ensure there are no extraneous borders in Firefox View unless the user is in prefers-contrast or forced-colors mode. However, this has a side effect of making the border around the searchbox disappear. To address the transparent border around the searchbox, I created the --fxview-border-interactive variable which points to the --border-color-interactive token. Differential Revision: https://phabricator.services.mozilla.com/D248364
77 lines
1.5 KiB
CSS
77 lines
1.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/. */
|
|
|
|
.search-container {
|
|
color: var(--fxview-text-primary-color);
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&:focus-within {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.search-icon {
|
|
background-image: url(chrome://global/skin/icons/search-textbox.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
padding: 2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.search-icon:dir(ltr) {
|
|
left: 8px;
|
|
}
|
|
|
|
.search-icon:dir(rtl) {
|
|
right: 8px;
|
|
}
|
|
|
|
input {
|
|
border: 1px solid var(--fxview-border-interactive);
|
|
border-radius: var(--border-radius-small);
|
|
padding: 8px 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
.clear-icon {
|
|
background-image: url(resource://content-accessible/close-12.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
fill: currentColor;
|
|
-moz-context-properties: fill;
|
|
cursor: pointer;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto 0;
|
|
padding: 2px;
|
|
}
|
|
|
|
.clear-icon:hover {
|
|
background-color: var(--fxview-element-background-hover);
|
|
color: var(--fxview-text-color-hover);
|
|
}
|
|
|
|
.clear-icon:dir(ltr) {
|
|
right: 8px;
|
|
}
|
|
|
|
.clear-icon:dir(rtl) {
|
|
left: 8px;
|
|
}
|