426 lines
12 KiB
CSS
426 lines
12 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/. */
|
|
|
|
: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-border-radius: var(--border-radius-circle);
|
|
--content-search-handoff-ui-engine-icon: var(--newtab-search-icon);
|
|
--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);
|
|
}
|
|
|
|
/**
|
|
* @nova-cleanup(remove-conditional): Remove this override once Nova ships for newtab.
|
|
*/
|
|
@media not -moz-pref("browser.newtabpage.activity-stream.nova.enabled") {
|
|
:host {
|
|
--content-search-handoff-ui-border-radius: var(--border-radius-medium);
|
|
}
|
|
}
|
|
|
|
.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(--content-search-handoff-ui-engine-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(--content-search-handoff-ui-border-radius);
|
|
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/firefox-main/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;
|
|
}
|
|
|
|
:host([nonhandoff]) {
|
|
.non-handoff-container {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
#newtab-search-text {
|
|
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: calc(48px + var(--space-medium));
|
|
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(--content-search-handoff-ui-border-radius);
|
|
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;
|
|
}
|
|
|
|
&::-moz-search-clear-button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.contentSearchSuggestionTable {
|
|
background-color: hsla(0, 0%, 100%, 0.99);
|
|
color: black;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
border-top: none;
|
|
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.1);
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
z-index: 1001;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.contentSearchSuggestionsList {
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.contentSearchSuggestionTable,
|
|
.contentSearchSuggestionsList {
|
|
border-spacing: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: start;
|
|
}
|
|
|
|
.contentSearchHeaderRow,
|
|
.contentSearchSuggestionRow {
|
|
margin: 0;
|
|
max-width: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
.contentSearchHeaderRow > td > img,
|
|
.contentSearchSuggestionRow > td > .historyIcon {
|
|
margin-inline-end: 8px;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.contentSearchSuggestionTable .historyIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
background-image: url("chrome://browser/skin/history.svg");
|
|
-moz-context-properties: fill;
|
|
fill: graytext;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.selected > td > .historyIcon {
|
|
fill: HighlightText;
|
|
}
|
|
|
|
.contentSearchHeader > img {
|
|
height: 16px;
|
|
width: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.remote > td > .historyIcon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.contentSearchSuggestionRow.selected {
|
|
background-color: SelectedItem;
|
|
color: SelectedItemText;
|
|
}
|
|
|
|
.contentSearchHeader,
|
|
.contentSearchSuggestionEntry {
|
|
margin: 0;
|
|
max-width: inherit;
|
|
overflow: hidden;
|
|
padding: 4px 10px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 75%;
|
|
}
|
|
|
|
.contentSearchHeader {
|
|
background-color: hsl(0, 0%, 97%);
|
|
color: #666;
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
}
|
|
|
|
.contentSearchSuggestionsContainer {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSearchWithHeaderSearchText {
|
|
white-space: pre;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.contentSearchOneOffItem {
|
|
appearance: none;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=");
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
}
|
|
|
|
.contentSearchOneOffItem:dir(rtl) {
|
|
background-position-x: left;
|
|
}
|
|
|
|
.contentSearchOneOffItem > img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-bottom: -2px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.contentSearchOneOffItem:not(.last-row) {
|
|
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
}
|
|
|
|
.contentSearchOneOffItem.end-of-row {
|
|
background-image: none;
|
|
}
|
|
|
|
.contentSearchOneOffItem.selected {
|
|
background-color: SelectedItem;
|
|
background-image: none;
|
|
}
|
|
|
|
.contentSearchOneOffsTable {
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSettingsButton {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
border: none;
|
|
border-top: 1px solid hsla(0, 0%, 0%, 0.08);
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.contentSearchSettingsButton.selected {
|
|
background-color: hsl(0, 0%, 90%);
|
|
}
|
|
|
|
.contentSearchSettingsButton:active {
|
|
background-color: hsl(0, 0%, 85%);
|
|
}
|
|
|
|
/**
|
|
* These rules are a copy of newtab's customizations to the non-handoff
|
|
* table, but with the activity-stream variables replaced / inlined. This
|
|
* allows us to get the non-handoff mode to look correct in newtab without
|
|
* having to modify the newtab code itself. Notably, non-handoff mode is
|
|
* only expected to work on newtab.
|
|
*/
|
|
.contentSearchSuggestionTable {
|
|
--newtab-background-color: light-dark(#f9f9fb, #2b2a33);
|
|
--newtab-background-color-secondary: light-dark(var(--color-white), #42414d);
|
|
--newtab-text-secondary-color: light-dark(color-mix(in srgb, var(--text-color) 70%, transparent), var(--text-color));
|
|
--newtab-border-color: light-dark(
|
|
color-mix(in srgb, var(--newtab-background-color) 75%, #000),
|
|
color-mix(in srgb, var(--newtab-background-color) 75%, #fff)
|
|
);
|
|
--newtab-element-hover-color: light-dark(
|
|
color-mix(in srgb, var(--newtab-background-color) 90%, #000),
|
|
color-mix(in srgb, var(--newtab-background-color) 80%, #fff)
|
|
);
|
|
|
|
border: 0;
|
|
box-shadow:
|
|
0 5px 10px rgba(0, 0, 0, 0.3),
|
|
0 0 0 1px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(4px);
|
|
background-color: var(--newtab-background-color);
|
|
|
|
.contentSearchHeader {
|
|
color: var(--newtab-text-secondary-color);
|
|
background-color: var(--newtab-background-color-secondary);
|
|
}
|
|
|
|
.contentSearchHeader,
|
|
.contentSearchSettingsButton {
|
|
border-color: var(--newtab-border-color);
|
|
}
|
|
|
|
.contentSearchSuggestionsList {
|
|
color: var(--text-color);
|
|
border: 0;
|
|
}
|
|
|
|
.contentSearchOneOffsTable {
|
|
border-block-start: solid 1px var(--newtab-border-color);
|
|
background-color: var(--newtab-background-color);
|
|
}
|
|
|
|
.contentSearchSearchWithHeaderSearchText {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.contentSearchSuggestionRow.selected {
|
|
background: var(--newtab-element-hover-color);
|
|
color: var(--text-color);
|
|
|
|
&:active {
|
|
background: var(--newtab-element-active-color);
|
|
}
|
|
|
|
.historyIcon {
|
|
fill: var(--newtab-text-secondary-color);
|
|
}
|
|
}
|
|
|
|
& .contentSearchOneOffItem {
|
|
background-image: none;
|
|
|
|
/**
|
|
* We use a border-offset of 18% to make the border slightly shorter
|
|
*/
|
|
border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1;
|
|
border-inline-end: 1px solid;
|
|
position: relative;
|
|
|
|
&.selected {
|
|
background: var(--newtab-element-hover-color);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--newtab-element-active-color);
|
|
}
|
|
}
|
|
|
|
.contentSearchSettingsButton:hover {
|
|
background: var(--newtab-element-hover-color);
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
|
|
.contentSearchHeaderRow > td > img,
|
|
.contentSearchSuggestionRow > td > .historyIcon {
|
|
margin-inline-start: var(--space-small);
|
|
margin-inline-end: var(--space-large);
|
|
}
|
|
|
|
.search-button {
|
|
background: url("chrome://browser/skin/forward.svg") no-repeat center center;
|
|
background-size: 16px 16px;
|
|
border: 0;
|
|
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
|
|
-moz-context-properties: fill;
|
|
fill: var(--newtab-text-secondary-color);
|
|
height: 100%;
|
|
inset-inline-end: 0;
|
|
position: absolute;
|
|
width: var(--size-item-xlarge);
|
|
}
|
|
.search-button:focus,
|
|
.search-button:hover {
|
|
background-color: var(--newtab-element-hover-color);
|
|
cursor: pointer;
|
|
}
|
|
.search-button:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
|
|
border: 1px solid var(--newtab-primary-action-background);
|
|
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
|
|
}
|
|
.search-button:active {
|
|
background-color: var(--newtab-element-hover-color);
|
|
}
|
|
}
|