514 lines
12 KiB
SCSS
514 lines
12 KiB
SCSS
$search-height: 48px;
|
|
$search-height-new: 52px;
|
|
$search-icon-size: 24px;
|
|
$search-icon-padding: 16px;
|
|
$search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px;
|
|
$search-button-width: 48px;
|
|
$glyph-forward: url('chrome://browser/skin/forward.svg');
|
|
|
|
.search-wrapper {
|
|
padding: 34px 0 38px;
|
|
|
|
// Bug 1914055 - Layout experiment: search spacing
|
|
.layout-variant-a &,
|
|
.layout-variant-b & {
|
|
padding-top: 0;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
// Edge case for users who have pocket stories turned off
|
|
.layout-variant-a.no-recommended-stories &,
|
|
.layout-variant-b.no-recommended-stories & {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
// Edge case for users who have only search enabled
|
|
.layout-variant-a .only-search &,
|
|
.layout-variant-b .only-search & {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.only-search & {
|
|
padding: 0 0 38px;
|
|
}
|
|
|
|
.search-inner-wrapper {
|
|
cursor: default;
|
|
display: flex;
|
|
min-height: $search-height-new;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: $searchbar-width-small;
|
|
|
|
@media (min-width: $break-point-medium) {
|
|
width: $searchbar-width-medium;
|
|
}
|
|
|
|
@media (min-width: $break-point-large) {
|
|
width: $searchbar-width-large;
|
|
}
|
|
|
|
@media (min-width: $break-point-widest) {
|
|
width: $searchbar-width-largest;
|
|
}
|
|
|
|
// Bug 1914053 - Layout experiment: search bar width
|
|
.layout-variant-a &,
|
|
.layout-variant-b & {
|
|
width: 304px;
|
|
|
|
@media (min-width: $break-point-large) {
|
|
width: 510px;
|
|
}
|
|
|
|
@media (min-width: $break-point-widest) {
|
|
width: 720px;
|
|
}
|
|
}
|
|
|
|
// Bug 1966715: Offset padding of the submit button so the reset button is visible
|
|
&.no-handoff {
|
|
input {
|
|
padding-inline-end: calc($search-button-width + var(--space-medium));
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.search-handoff-button,
|
|
input {
|
|
background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat;
|
|
background-size: $search-icon-size;
|
|
padding-inline-start: $search-icon-width;
|
|
padding-inline-end: 10px;
|
|
padding-block: 0;
|
|
width: 100%;
|
|
box-shadow: $shadow-card;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--border-radius-medium);
|
|
color: var(--newtab-text-primary-color);
|
|
-moz-context-properties: fill;
|
|
fill: var(--newtab-text-secondary-color);
|
|
|
|
&:dir(rtl) {
|
|
background-position-x: right $search-icon-padding;
|
|
}
|
|
}
|
|
|
|
.search-inner-wrapper:active input,
|
|
input:focus {
|
|
border: 1px solid var(--newtab-primary-action-background);
|
|
outline: 0;
|
|
box-shadow: $shadow-focus;
|
|
}
|
|
|
|
.search-button {
|
|
background: $glyph-forward 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: $search-button-width;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background-color: var(--newtab-element-hover-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: $shadow-focus;
|
|
border: 1px solid var(--newtab-primary-action-background);
|
|
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--newtab-element-hover-color);
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
&.fake-focus:not(.search.disabled) {
|
|
.search-handoff-button {
|
|
border: 1px solid var(--newtab-primary-action-background);
|
|
box-shadow: $shadow-focus;
|
|
}
|
|
}
|
|
|
|
.search-handoff-button {
|
|
padding-inline-end: 15px;
|
|
color: var(--newtab-text-primary-color);
|
|
fill: var(--newtab-text-secondary-color);
|
|
-moz-context-properties: fill;
|
|
|
|
.fake-caret {
|
|
top: 18px;
|
|
inset-inline-start: $search-icon-width;
|
|
|
|
&:dir(rtl) {
|
|
background-position-x: right $search-icon-padding;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.visible-logo {
|
|
.logo-and-wordmark {
|
|
.wordmark {
|
|
fill: var(--newtab-wordmark-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shortcuts-refresh.has-recommended-stories {
|
|
.outer-wrapper:not(.fixed-search) .search-wrapper {
|
|
margin-block-end: 28px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.layout-variant-b.has-recommended-stories {
|
|
.outer-wrapper:not(.fixed-search) .search-wrapper {
|
|
margin-block-start: 16px;
|
|
}
|
|
|
|
.logo-and-wordmark {
|
|
position: absolute;
|
|
inset-inline-start: 40px;
|
|
inset-block-start: 40px;
|
|
|
|
@media (min-width: $break-point-layout-variant) {
|
|
inset-inline-start: 20px;
|
|
}
|
|
|
|
@media (min-width: $break-point-large) {
|
|
inset-inline-start: 40px;
|
|
}
|
|
}
|
|
|
|
&.no-search {
|
|
.body-wrapper {
|
|
margin-block-start: 0;
|
|
|
|
@media (min-width: $break-point-large) {
|
|
// This is to handle the gap left by search being removed.
|
|
margin-block-start: 108px;
|
|
}
|
|
|
|
@media (min-width: $break-point-ultra-wide) {
|
|
margin-block-start: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bug 1961633 - Keep shortcuts/feed below the logo/weather widget (var b layout)
|
|
&.no-search.has-sections-grid {
|
|
.body-wrapper {
|
|
// 96px is the margin necessary to maintain the same spacing with/without the search bar
|
|
margin-block-start: 96px;
|
|
}
|
|
|
|
.logo-and-wordmark {
|
|
inset-inline-start: 20px;
|
|
|
|
@media (min-width: $break-point-small) {
|
|
inset-inline-start: 40px;
|
|
}
|
|
|
|
@media (min-width: $break-point-layout-variant) {
|
|
inset-inline-start: 20px;
|
|
}
|
|
|
|
@media (min-width: $break-point-large) {
|
|
inset-inline-start: 40px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.search-inner-wrapper {
|
|
width: 200px;
|
|
|
|
@media (min-width: $break-point-small) {
|
|
width: 300px;
|
|
}
|
|
|
|
@media (min-width: $break-point-medium) {
|
|
width: 350px;
|
|
}
|
|
|
|
@media (min-width: $break-point-large) {
|
|
width: 410px;
|
|
}
|
|
|
|
@media (min-width: $break-point-widest) {
|
|
width: 584px;
|
|
}
|
|
|
|
@media (min-width: $break-point-weather) {
|
|
width: 720px;
|
|
}
|
|
}
|
|
|
|
// Bug 1960519 - Custom override for mobile icon next to weather
|
|
&.has-mobile-download-promo {
|
|
.search-inner-wrapper {
|
|
@media (min-width: $break-point-widest) {
|
|
// Set to smaller breakpoint to fit weather
|
|
width: 497px;
|
|
}
|
|
|
|
@media (min-width: $break-point-weather) {
|
|
// Reset back to default length
|
|
width: 720px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
width: 52px;
|
|
height: 52px;
|
|
background-size: 52px;
|
|
}
|
|
|
|
.wordmark {
|
|
display: none;
|
|
height: 52px;
|
|
|
|
@media (min-width: $break-point-large) {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (height <= 700px) {
|
|
.search-wrapper {
|
|
padding: 0 0 30px;
|
|
}
|
|
}
|
|
|
|
.search-handoff-button {
|
|
background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat;
|
|
background-size: $search-icon-size;
|
|
border: solid 1px transparent;
|
|
border-radius: var(--border-radius-small);
|
|
box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
|
|
cursor: text;
|
|
font-size: inherit;
|
|
padding: 0;
|
|
padding-inline-end: 48px;
|
|
padding-inline-start: 46px;
|
|
opacity: 1;
|
|
width: 100%;
|
|
|
|
&:dir(rtl) {
|
|
background-position-x: right $search-icon-padding;
|
|
}
|
|
|
|
.fake-focus:not(.search-disabled) & {
|
|
border: $input-border-active;
|
|
box-shadow: var(--newtab-textbox-focus-boxshadow);
|
|
|
|
.fake-caret {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.search-disabled & {
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.fake-editable:focus {
|
|
outline: none;
|
|
caret-color: transparent;
|
|
}
|
|
|
|
.fake-editable {
|
|
color: transparent;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.fake-textbox {
|
|
opacity: 0.54;
|
|
text-align: start;
|
|
|
|
// Bug 1914055 - Layout experiment: search spacing
|
|
.layout-variant-a &,
|
|
.layout-variant-b & {
|
|
-webkit-line-clamp: 1;
|
|
overflow: 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(--newtab-text-primary-color);
|
|
display: none;
|
|
inset-inline-start: 47px;
|
|
height: 17px;
|
|
position: absolute;
|
|
top: 16px;
|
|
width: 1px;
|
|
|
|
@keyframes caret-animation {
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (height > 700px) {
|
|
body:not(.inline-onboarding) .fixed-search {
|
|
.search-wrapper {
|
|
$search-height: $search-height-new;
|
|
$search-icon-size: 24px;
|
|
$search-icon-padding: 16px;
|
|
$search-header-bar-height: 95px;
|
|
|
|
border-bottom: solid 1px var(--newtab-border-color);
|
|
padding: 27px 0;
|
|
background-color: var(--newtab-overlay-color);
|
|
min-height: $search-header-bar-height;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
|
|
.search-inner-wrapper {
|
|
min-height: $search-height;
|
|
}
|
|
|
|
input {
|
|
background-position-x: $search-icon-padding;
|
|
background-size: $search-icon-size;
|
|
|
|
&:dir(rtl) {
|
|
background-position-x: right $search-icon-padding;
|
|
}
|
|
}
|
|
|
|
.search-handoff-button .fake-caret {
|
|
top: 14px;
|
|
}
|
|
|
|
.logo-and-wordmark {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.search-handoff-button {
|
|
background-position-x: $search-icon-padding;
|
|
background-size: $search-icon-size;
|
|
|
|
&:dir(rtl) {
|
|
background-position-x: right $search-icon-padding;
|
|
}
|
|
|
|
.fake-caret {
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@at-root {
|
|
|
|
// Adjust the style of the contentSearchUI-generated table
|
|
.contentSearchSuggestionTable {
|
|
border: 0;
|
|
box-shadow: $context-menu-shadow;
|
|
transform: translateY($textbox-shadow-size);
|
|
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(--newtab-text-primary-color);
|
|
border: 0;
|
|
}
|
|
|
|
.contentSearchOneOffsTable {
|
|
border-top: solid 1px var(--newtab-border-color);
|
|
background-color: var(--newtab-background-color);
|
|
}
|
|
|
|
.contentSearchSearchWithHeaderSearchText {
|
|
color: var(--newtab-text-primary-color);
|
|
}
|
|
|
|
.contentSearchSuggestionRow {
|
|
&.selected {
|
|
background: var(--newtab-element-hover-color);
|
|
color: var(--newtab-text-primary-color);
|
|
|
|
&:active {
|
|
background: var(--newtab-element-active-color);
|
|
}
|
|
|
|
.historyIcon {
|
|
fill: var(--newtab-text-secondary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentSearchOneOffItem {
|
|
// Make the border slightly shorter by offsetting from the top and bottom
|
|
$border-offset: 18%;
|
|
|
|
background-image: none;
|
|
border-image: linear-gradient(transparent $border-offset, var(--newtab-border-color) $border-offset, var(--newtab-border-color) 100% - $border-offset, transparent 100% - $border-offset) 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(--newtab-text-primary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentSearchHeaderRow > td > img,
|
|
.contentSearchSuggestionRow > td > .historyIcon {
|
|
margin-inline-start: 7px;
|
|
margin-inline-end: 15px;
|
|
}
|
|
}
|