Source code
Revision control
Copy as Markdown
Other Tools
$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;
.search-wrapper {
padding: 34px 0 38px;
.only-search & {
padding: 0 0 38px;
}
.logo-and-wordmark {
$logo-size: 82px;
$wordmark-size: 134px;
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 48px;
.logo {
display: inline-block;
height: $logo-size;
width: $logo-size;
background: image-set(url('chrome://branding/content/about-logo.png'), url('chrome://branding/content/about-logo@2x.png') 2x) no-repeat center;
background-size: $logo-size;
}
.wordmark {
background-size: $wordmark-size;
-moz-context-properties: fill;
display: inline-block;
fill: var(--newtab-wordmark-color);
height: $logo-size;
margin-inline-start: 16px;
width: $wordmark-size;
}
@media (max-width: $break-point-medium - 1) {
$logo-size-small: 64px;
$wordmark-small-size: 100px;
.logo {
background-size: $logo-size-small;
height: $logo-size-small;
width: $logo-size-small;
}
.wordmark {
background-size: $wordmark-small-size;
height: $logo-size-small;
width: $wordmark-small-size;
margin-inline-start: 12px;
}
}
}
.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;
}
}
.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: 8px;
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 $border-radius $border-radius 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 $border-radius-new $border-radius-new 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);
}
}
}
}
@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: 3px;
box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
cursor: text;
font-size: 15px;
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;
}
.fake-caret {
animation: caret-animation 1.3s steps(5, start) 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 {
main {
padding-top: 124px;
}
&.visible-logo {
main {
padding-top: 254px;
}
}
.search-wrapper {
$search-height: 45px;
$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: 9;
.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;
}
}