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
:host {
display: flex;
width: 100%;
--content-search-handoff-ui-background-color: Field;
--content-search-handoff-ui-color: FieldText;
--content-search-handoff-ui-fill: FieldText;
--content-search-handoff-ui-caret-color: FieldText;
--content-search-handoff-ui-border-width: 1px;
--content-search-handoff-ui-unfocused-border-color: transparent;
--content-search-handoff-ui-fakefocus-border-color: SelectedItem;
--content-search-handoff-ui-fakefocus-box-shadow-inner: color-mix(in srgb, SelectedItem 25%, transparent);
--content-search-handoff-ui-fakefocus-box-shadow-outer: color-mix(in srgb, SelectedItem 25%, transparent);
}
.fake-editable {
height: 100%;
opacity: 0;
position: absolute;
inset: 0;
}
.fake-editable:focus {
outline: none;
caret-color: transparent;
}
.fake-textbox {
opacity: 0.54;
text-align: start;
-webkit-line-clamp: 1;
overflow: hidden;
margin-inline-start: var(--space-xsmall);
/**
* It's not clear to me why I need to do this, but for some reason I don't
* inherit the font-size through the shadow DOM...
*/
font-size: var(--font-size-root);
}
.search-handoff-button {
position: relative;
background: var(--content-search-handoff-ui-background-color) var(--newtab-search-icon) 16px center no-repeat;
background-size: var(--size-item-medium);
padding-inline-start: calc(2 * var(--space-xlarge));
padding-inline-end: var(--space-small);
padding-block: 0;
width: 100%;
box-shadow: var(--box-shadow-level-3);
border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-unfocused-border-color);
border-radius: var(--border-radius-medium);
color: var(--content-search-handoff-ui-color);
-moz-context-properties: fill;
fill: var(--content-search-handoff-ui-fill);
&:dir(rtl) {
background-position-x: right 16px;
}
}
@keyframes caret-animation {
to {
visibility: hidden;
}
}
.fake-caret {
/* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397):
- Multiply the blink time by 2 to cover both the visible and hidden states.
- Use steps(2, start) to divide the animation into 2 phases:
1. First 567ms (Step 1) → Caret is visible
2. Next 567ms (Step 2) → Caret is hidden
This gives a sharp ON/OFF effect instead of a smooth transition. */
animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite);
background: var(--content-search-handoff-ui-caret-color);
display: none;
inset-inline-start: calc(2 * var(--space-xlarge));
width: 1px;
/**
* We use the negative margin trick here to overlap the same area as the
* fake-textbox.
*/
height: 17px;
margin-top: -17px;
}
:host([fakefocus]:not([disabled])) .search-handoff-button {
border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-fakefocus-border-color);
box-shadow:
0 0 0 2px var(--content-search-handoff-ui-fakefocus-box-shadow-inner),
0 0 0 4px var(--content-search-handoff-ui-fakefocus-box-shadow-outer);
.fake-caret {
display: block;
}
}
:host([disabled]) .search-handoff-button {
opacity: 0.5;
}