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
/**
* Firefox Suggest contextual opt-in
*/
.urlbarView-row[dynamicType=quickSuggestContextualOptIn] {
background-color: color-mix(in srgb, currentColor 3%, transparent);
> .urlbarView-row-inner {
align-items: center;
> .urlbarView-no-wrap {
align-items: center;
> .urlbarView-favicon {
background-color: color-mix(in srgb, currentColor 3%, transparent);
min-width: 32px;
height: 32px;
padding: 16px;
margin-inline: 0 .7em;
}
}
}
.urlbarView-results[wrap] > &,
.search-one-offs[wrap] > .urlbarView-quickSuggestContextualOptIn-one-off-container > & {
display: block;
text-align: end;
white-space: normal;
> .urlbarView-row-inner {
display: block;
text-align: start;
}
> .urlbarView-button {
margin-bottom: var(--urlbarView-item-block-padding);
}
}
}
.urlbarView-dynamic-quickSuggestContextualOptIn-text-container {
display: flex;
flex-direction: column;
white-space: normal;
}
.urlbarView-dynamic-quickSuggestContextualOptIn-title {
font-weight: var(--font-weight-bold);
}
.urlbarView-dynamic-quickSuggestContextualOptIn-description {
margin-block-start: 2px;
color: var(--urlbarView-secondary-text-color);
font-size: var(--urlbarView-small-font-size);
}
.urlbarView-dynamic-quickSuggestContextualOptIn-learn_more {
white-space: nowrap;
&[selected] {
border-radius: var(--focus-outline-offset);
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
.urlbarView-quickSuggestContextualOptIn-one-off-container {
border-top: 1px solid var(--urlbarView-separator-color);
margin-top: 10px;
padding-top: 5px;
width: 100%;
}
/**
* Tab To Search onboarding
*/
.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
align-items: center;
> .urlbarView-no-wrap {
align-items: center;
> .urlbarView-favicon {
min-width: 32px;
height: 32px;
-moz-context-properties: fill;
}
}
&:not([selected]) > .urlbarView-no-wrap {
> .urlbarView-favicon {
color: var(--link-color);
}
> .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
color: var(--urlbarView-secondary-text-color);
}
}
}
.urlbarView-row[dynamicType=onboardTabToSearch][selected] {
fill-opacity: 1;
}
.urlbarView-dynamic-onboardTabToSearch-text-container {
display: flex;
flex-direction: column;
}
/* First row of text. */
.urlbarView-dynamic-onboardTabToSearch-first-row-container {
display: flex;
align-items: baseline;
}
.urlbarView-dynamic-onboardTabToSearch-description {
margin-block-start: 2px;
}
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container {
> .urlbarView-dynamic-onboardTabToSearch-first-row-container {
flex-wrap: wrap;
> .urlbarView-action {
max-width: 100%;
flex-basis: 100%;
}
> .urlbarView-title-separator {
visibility: collapse;
}
}
> .urlbarView-dynamic-onboardTabToSearch-description {
max-width: 100%;
flex-basis: 100%;
}
}
/**
* Calculator & Unit Conversion
*/
.urlbarView-dynamic-calculator-action,
.urlbarView-dynamic-unitConversion-action {
font-size: var(--urlbarView-small-font-size);
font-weight: normal;
.urlbarView-row:not(:hover, [selected]) & {
visibility: collapse;
}
&::before {
content: "\2014";
margin: 0 .4em;
opacity: 0.6;
}
}
/**
* Quick actions
*/
.urlbarView-dynamic-quickactions-buttons {
display: flex;
flex-grow: 1;
gap: 0.9em 1.8em;
max-width: 100%;
&[data-is-quickactions-searchmode] {
flex-wrap: wrap;
}
}
.urlbarView-quickaction-button {
font-size: var(--urlbarView-small-font-size);
font-weight: var(--font-weight-bold);
box-shadow: 0 0 1px rgba(128, 128, 142, 0.9), 0 0 4px rgba(128, 128, 142, 0.5);
border-radius: 4px;
display: flex;
padding: .5em;
margin-top: 2px;
position: relative;
overflow: hidden;
min-width: 16px;
&[disabled] {
opacity: var(--toolbarbutton-disabled-opacity);
}
&:hover:not([disabled]):not([selected]) {
background-color: var(--urlbarView-hover-background);
}
&[selected] {
background-color: var(--urlbarView-highlight-background);
color: var(--urlbarView-highlight-color);
}
> .urlbarView-label {
overflow: hidden;
text-overflow: ellipsis;
}
> .urlbarView-favicon {
display: flex;
align-items: center;
justify-content: center;
margin-inline: 0 .5em;
> .urlbarView-favicon-img {
width: 16px;
height: 16px;
}
}
}
.urlbarView-row[dynamicType=quickactions][label]::before {
top: -1em;
margin-inline-start: 6px;
}
/**
* Site-specific search
*/
.urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator {
display: block !important /* override .urlbarView-title-separator rules */;
}
.urlbarView-dynamic-contextualSearch-description {
font-size: var(--urlbarView-small-font-size);
.urlbarView-row:not([selected]) & {
color: var(--urlbarView-action-color);
}
}
/**
* Weather
*/
.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner {
align-items: center;
}
.urlbarView-dynamic-weather-currentConditions {
color: var(--urlbar-box-text-color);
background-color: var(--urlbar-box-focus-bgcolor);
padding: 0.61em 0.61em 0.84em;
margin-inline-end: 0.92em;
border-radius: 2px;
text-align: center;
.urlbarView-row[dynamicType=weather]:is([selected], :hover) > .urlbarView-row-inner > & {
color: var(--urlbarView-result-button-selected-color);
background-color: var(--urlbarView-result-button-selected-background-color);
}
}
.urlbarView-dynamic-weather-currently {
font-size: var(--urlbarView-small-font-size);
margin-bottom: 0.53em;
}
.urlbarView-dynamic-weather-temperature {
margin-inline-end: 0.3em;
font-weight: 600;
font-size: 1.385em;
vertical-align: middle;
}
.urlbarView-dynamic-weather-weatherIcon {
width: 22px;
height: 23px;
vertical-align: middle;
@media (prefers-contrast) {
-moz-context-properties: fill, stroke;
fill: currentColor;
stroke: currentColor;
}
&[iconId="1"] {
height: 22px;
}
&[iconId="2"] {
height: 22px;
}
&:is([iconId="3"], [iconId="4"], [iconId="6"]) {
height: 22px;
}
&[iconId="5"] {
height: 22px;
}
&:is([iconId="7"], [iconId="8"]) {
}
&[iconId="11"] {
}
&[iconId="12"] {
}
&:is([iconId="13"], [iconId="14"]) {
height: 22px;
}
&[iconId="15"] {
}
&:is([iconId="16"], [iconId="17"]) {
}
&[iconId="18"] {
}
&:is([iconId="19"], [iconId="20"], [iconId="25"]) {
}
&[iconId="21"] {
}
&:is([iconId="22"], [iconId="23"]) {
}
&:is([iconId="24"], [iconId="31"]) {
}
&:is([iconId="26"], [iconId="29"]) {
}
&[iconId="30"] {
}
&[iconId="32"] {
}
&[iconId="33"] {
}
&:is([iconId="34"], [iconId="35"], [iconId="36"], [iconId="38"]) {
}
&[iconId="37"] {
}
&:is([iconId="39"], [iconId="40"]) {
height: 22px;
}
&:is([iconId="41"], [iconId="42"]) {
}
&:is([iconId="43"], [iconId="44"]) {
}
}
.urlbarView-dynamic-weather-summary {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
.urlbarView-dynamic-weather-top {
display: flex;
align-items: center;
}
.urlbarView-dynamic-weather-topNoWrap {
display: inline-flex;
align-items: center;
}
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner {
flex-wrap: nowrap;
> .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top {
flex-wrap: wrap;
> .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator {
display: none;
}
}
}
.urlbarView-dynamic-weather-middle {
font-size: var(--urlbarView-small-font-size);
display: flex;
align-items: center;
flex-wrap: wrap;
}
.urlbarView-dynamic-weather-middleNoWrap {
display: inline-flex;
align-items: center;
/* When middleNoWrap has overflowed, we want to hide the summaryTextSeparator.
We also want to keep the overflow state stable without it going back to
an underflow state. This is why we are using `visibility: hidden` so the
space is allocated for the summaryTextSeparator and highLow but they are
not visible on the page. Thus, keeping the middleNoWrap in an overflow
state while hiding the summaryTextSeparator.
*/
&[overflow] > :is(.urlbarView-dynamic-weather-summaryTextSeparator, .urlbarView-dynamic-weather-highLow) {
visibility: hidden;
}
/* The highLowWrap remains hidden when middleNoWrap is not overflowed. Once it
has overflowed, we display the highLowWrap element.
*/
&:not([overflow]) + .urlbarView-dynamic-weather-highLowWrap {
display: none;
}
}
.urlbarView-dynamic-weather-summaryTextSeparator::before {
content: '\00B7';
margin: 0.25em;
}
.urlbarView-dynamic-weather-bottom {
font-size: var(--urlbarView-small-font-size);
margin-top: 0.40em;
.urlbarView-row[dynamicType=weather]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & {
opacity: 0.6;
}
}