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
@import url("chrome://browser/skin/urlbar/dynamic-results.css");
:host,
:root {
--urlbarView-small-font-size: 0.85em;
/* The purpose of the gutter is to create a visible gap between adjacent hovered
and selected rows while keeping the view's entire hover area contiguous. It's
row padding that `background-clip: content-box` keeps out of the background. */
--urlbarView-row-gutter: var(--space-xsmall);
/* The view's own margin, which urlbar.css also derives the joint
background's outsets from. Negative here so the selection rect is flush
with the input container's border edge, compensating the row's gutter. */
--urlbarView-margin-block: calc(-1 * var(--urlbarView-row-gutter));
--urlbarView-margin-inline: calc(-1 * var(--urlbarView-row-gutter));
--urlbarView-row-border-radius: var(--urlbarview-border-radius);
--urlbarView-row-padding-inline: var(--urlbar-icon-padding);
--urlbarView-row-inner-min-height: calc(var(--urlbarview-row-min-height) - var(--urlbarview-row-padding-block) * 2);
--urlbarView-padding: calc(var(--space-large) - var(--urlbarView-row-gutter));
/* The two common row icon types are favicons and rich search suggestion icons,
favicons being smaller. Depending on current product requirements, there
may be other icon types of various sizes. All icons no larger than rich
search suggestion icons should be center-aligned along one vertical axis.
Larger icons should be left-aligned with rich search suggestion icons. */
--urlbarView-rich-search-suggestion-icon-size: 28px;
--urlbarView-rich-search-suggestion-icon-border-radius: var(--border-radius-small);
--urlbarView-top-pick-icon-size: 58px;
--urlbarView-top-pick-icon-border-radius: calc(
var(--urlbarView-row-border-radius) - min(var(--urlbarview-row-padding-block), var(--urlbarView-row-padding-inline))
);
/* Icon margin-end not taking into account the size of the icon */
--urlbarView-icon-margin-end-base: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline));
--urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarview-favicon-size)) / 2);
--urlbarView-favicon-margin-end: calc(var(--urlbarView-icon-margin-end-base) + var(--urlbarView-favicon-margin-start));
--urlbarView-favicon-mask-size: 24px;
--urlbarView-favicon-mask-position: calc((var(--urlbarview-favicon-size) - var(--urlbarView-favicon-mask-size)) / 2);
/* The flex-basis of the URL and no-wrap are set such that the title can take up
most of the space but the URL will remain at least partially visible. */
--urlbarView-url-flex-basis: 30%;
--urlbarView-result-button-size: 24px;
--urlbarView-result-button-background-opacity: 60%;
--urlbarView-result-button-selected-color: var(--toolbar-field-text-color-focus);
--urlbarView-result-button-selected-background-color: color-mix(
in srgb,
var(--toolbar-field-background-color-focus) var(--urlbarView-result-button-background-opacity),
transparent
);
--urlbarView-result-button-hover-color: var(--toolbar-field-background-color-focus);
--urlbarView-result-button-hover-background-color: color-mix(
in srgb,
var(--toolbar-field-text-color-focus) var(--urlbarView-result-button-background-opacity),
transparent
);
--urlbarView-labeled-row-margin-top: calc(1.46em + 4px);
--urlbarView-labeled-row-label-top: calc(-1.27em - 2px);
--urlbarView-labeled-tip-margin-top-extra: 8px;
--urlbarView-tail150-overlay-background: var(--color-violet-90);
--urlbarView-tail150-overlay-color: var(--color-gray-0);
--urlbarView-tail150-canvas-background: var(--color-violet-110);
--urlbarView-separator-char: "•" / "—";
--urlbarView-separator-char-hidden: "" / "—";
--urlbarView-separator-margin-inline: 0.6em;
--urlbarView-action-slide-in-distance: 200px;
&:dir(rtl) {
--urlbarView-action-slide-in-distance: -200px;
}
&[lwtheme] {
--urlbarview-text-color-action: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
--urlbarview-background-color-selected: light-dark(rgb(0, 99, 255), rgb(0, 99, 225));
--urlbarview-text-color-selected: white;
}
@media (prefers-contrast) {
--urlbarView-result-button-background-opacity: 100%;
--urlbarview-text-color-secondary: currentColor;
/* Align the result buttons with the toolbar buttons by borrowing the
generic ghost-button hover colors. */
--urlbarView-result-button-hover-color: var(--button-text-color-ghost-hover);
--urlbarView-result-button-hover-background-color: var(--button-background-color-ghost-hover);
}
}
.urlbarView {
margin: var(--urlbarView-margin-block) var(--urlbarView-margin-inline);
/* Don't handle window drag events in case we are overlapping a toolbar */
-moz-window-dragging: no-drag;
display: none;
text-shadow: none;
overflow: clip;
/* The gap under the input sits outside the scrollport, so a row scrolling
past it doesn't paint over the input's border edge. */
:where(.urlbar:not([noresults])) > & {
padding-block-start: var(--urlbarView-padding);
:where(:root[uidensity="compact"]) & {
padding: var(--urlbarView-padding);
}
}
}
.urlbarView-results {
white-space: nowrap;
container-type: inline-size;
/* Let the view scroll when there's limited space below the input due to
small viewport size or page scroll position. */
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
}
/* Row structure */
.urlbarView-row {
--urlbarView-icon-size: var(--urlbarview-favicon-size);
--urlbarView-icon-border-radius: 0;
--urlbarView-icon-margin-start: max(0px, (var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarView-icon-size)) / 2);
--urlbarView-icon-margin-end: calc(var(--urlbarView-icon-margin-end-base) + var(--urlbarView-icon-margin-start));
/* Block padding that belongs inside the row's background. It goes on the row's
children, since the row's own padding is the gutter, which is outside it. */
--urlbarView-row-extra-padding-block: 0px;
display: flex;
align-items: center;
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
padding: var(--urlbarView-row-gutter);
border-radius: var(--urlbarView-row-border-radius);
background-clip: content-box;
/* The row is the containing block for everything positioned within it,
including the favicon's type badge. The view scrolls, so a containing
block outside the scrollport would leave those boxes behind. */
position: relative;
/* Must hide the overflowing rows while the view is updating */
&[hidden] {
display: none !important;
}
&[menu-trigger],
&[row-selectable]:not([selected]):hover {
background-color: var(--urlbarview-background-color-hover);
}
&[selected] {
background-color: var(--urlbarview-background-color-selected);
color: var(--urlbarview-text-color-selected);
}
&:not([type="tip"], [type="dynamic"]) {
:root:not([uidensity="compact"]) & {
min-height: calc(var(--urlbarview-row-min-height) + 2 * var(--urlbarView-row-extra-padding-block));
}
:root[uidensity="touch"] & {
--urlbarView-row-extra-padding-block: 11px;
}
}
&[type="rich-search"] {
--urlbarView-icon-size: var(--urlbarView-rich-search-suggestion-icon-size);
--urlbarView-icon-border-radius: var(--urlbarView-rich-search-suggestion-icon-border-radius);
:root:not([uidensity="compact"]) & {
min-height: calc(46px + 2 * var(--urlbarView-row-extra-padding-block));
}
:root[uidensity="touch"] & {
--urlbarView-row-extra-padding-block: 4px;
}
}
}
.urlbarView-row-inner {
display: inline-flex;
align-items: center;
justify-content: start;
flex: auto;
overflow: hidden;
padding-inline: var(--urlbarView-row-padding-inline);
padding-block: calc(var(--urlbarview-row-padding-block) + var(--urlbarView-row-extra-padding-block));
:root:not([uidensity="compact"]) & {
min-height: var(--urlbarView-row-inner-min-height);
}
}
.urlbarView-row-body {
flex: auto;
min-width: 0;
}
.urlbarView-row-body-top {
display: flex;
align-items: baseline;
}
.urlbarView-row-body-top-no-wrap {
display: flex;
align-items: baseline;
flex: 1 1 calc(100% - var(--urlbarView-url-flex-basis));
min-width: 0;
max-width: max-content;
}
.urlbarView-row-body-description,
.urlbarView-row-body-bottom {
font-size: var(--urlbarView-small-font-size);
white-space: normal;
.urlbarView-row:not([selected]) > .urlbarView-row-inner > .urlbarView-row-body > & {
color: var(--urlbarview-text-color-secondary);
}
}
.urlbarView-row-body-description {
max-width: 80ch;
&:not(:empty) + .urlbarView-row-body-bottom:not(:empty) {
margin-block-start: 1em;
}
}
/* For rows that show a URL: Row width and wrapping */
@media screen and (min-height: 600px) {
/* Enable wrapping when the window is narrow (the "wrap" attribute, set in JS)
but not too short, since wrapping in that case would cause fewer rows to be
shown. Wrap the URL under the title and other no-wrap elements. */
.urlbarView-results[wrap]
> .urlbarView-row[has-url]:not([type="switchtab"], [type="remotetab"], [sponsored], [restyled-search])
> .urlbarView-row-inner
> .urlbarView-row-body
> .urlbarView-row-body-top {
display: grid;
grid-template-columns: minmax(0, 1fr) 0;
grid-template-areas:
"title title"
"url explanation";
@container (width >= 450px) {
grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
}
> .urlbarView-row-body-top-no-wrap {
grid-area: title;
max-width: 100%;
/* The title has dir="auto", so stretching it across the row would push an
LTR title to the left edge in an RTL locale. */
justify-self: start;
> .urlbarView-title-separator {
display: none;
}
}
> .urlbarView-url {
grid-area: url;
}
> .urlbarView-explanation {
grid-area: explanation;
}
}
}
/* Overflow fade-out effect. Automatically applied to `.urlbarView-url`. Other
elements can opt in by setting `.urlbarView-overflowable`. */
.urlbarView-overflowable,
.urlbarView-url {
overflow: hidden;
}
.urlbarView-overflowable[overflow],
.urlbarView-url[overflow] {
mask-image: linear-gradient(to left, transparent, black 2em);
}
/* Titles that are not URLs carry dir="auto", so anchor on the view, whose
direction is the one the row is laid out in. */
.urlbarView:dir(rtl) .urlbarView-overflowable[overflow]:not(.urlbarView-title[is-url]) {
mask-image: linear-gradient(to right, transparent, black 2em);
}
/* Row icon. The class is called "urlbarView-favicon" but it can be any kind of
image, depending on the row type. */
.urlbarView-favicon {
width: var(--urlbarView-icon-size);
height: var(--urlbarView-icon-size);
flex: 0 0 var(--urlbarView-icon-size);
margin-inline-start: var(--urlbarView-icon-margin-start);
margin-inline-end: var(--urlbarView-icon-margin-end);
border-radius: var(--urlbarView-icon-border-radius);
align-self: center;
background-repeat: no-repeat;
background-size: contain;
object-fit: contain;
mask-mode: luminance;
mask-position: var(--urlbarView-favicon-mask-position);
-moz-context-properties: fill, fill-opacity;
.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > & {
visibility: hidden;
}
.urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > & {
/* We use the URL color for this icon to inherit its accessibility
properties, like adapting to high contrast modes. We also want to ensure
contrast from the result highlight. */
color: var(--link-color);
-moz-context-properties: fill;
}
}
/* Type icon (favicon badge) */
.urlbarView-type-icon {
position: absolute;
width: var(--urlbarView-favicon-mask-size);
height: var(--urlbarView-favicon-mask-size);
align-self: center;
margin-inline-start: calc(var(--urlbarView-icon-margin-start) + var(--urlbarView-favicon-mask-position));
background-repeat: no-repeat;
-moz-context-properties: fill, stroke;
fill: var(--toolbarbutton-icon-fill-attention);
/* The following badges are used for debugging purposes */
@media -moz-pref("browser.urlbar.showDebuggingIcons") {
.urlbarView-row[type] > .urlbarView-row-inner > &::before {
display: flex;
position: absolute;
background-color: var(--button-background-color);
color: var(--button-text-color);
justify-content: center;
align-items: center;
border-radius: var(--border-radius-circle);
width: var(--icon-size-xsmall);
height: var(--icon-size-xsmall);
font-size: 10px;
}
.urlbarView-row[type="adaptive-history"] > .urlbarView-row-inner > &::before {
content: "A";
}
.urlbarView-row[type="semantic-history"] > .urlbarView-row-inner > &::before {
content: "S";
}
}
}
.urlbarView-row:is([type="bookmark"], [type^="bookmark_"]) > .urlbarView-row-inner {
> .urlbarView-favicon {
&:dir(rtl) {
}
}
> .urlbarView-type-icon {
&:dir(rtl) {
}
}
}
.urlbarView-row:is([type="adaptive-history"], [type="history"], [type^="history_"], [type="semantic-history"]) > .urlbarView-row-inner {
> .urlbarView-favicon {
&:dir(rtl) {
}
}
> .urlbarView-type-icon {
&:dir(rtl) {
}
}
}
.urlbarView-row:is([type="remotetab"], [type="switchtab"], [type="tab"], [type^="tab_"]) > .urlbarView-row-inner {
> .urlbarView-favicon {
&:dir(rtl) {
}
}
> .urlbarView-type-icon {
&:dir(rtl) {
}
}
}
.urlbarView-row[pinned] > .urlbarView-row-inner {
> .urlbarView-favicon {
&:dir(rtl) {
}
}
> .urlbarView-type-icon {
&:dir(rtl) {
}
}
}
/* Buttons */
.urlbarView-row-buttons {
display: flex;
align-items: center;
justify-content: end;
flex-wrap: wrap;
padding-block: var(--urlbarView-row-extra-padding-block);
}
.urlbarView-button {
display: inline-block;
min-width: var(--urlbarView-result-button-size);
min-height: var(--urlbarView-result-button-size);
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
margin-inline: 4px;
-moz-context-properties: fill, fill-opacity;
border-radius: var(--border-radius-circle);
&:not([primary]) {
@media (prefers-contrast) {
outline: 1px solid currentColor;
outline-offset: -1px;
}
}
&[selected] {
outline: var(--focus-outline);
/* This color assumes that the row is selected and therefore has the usual
selection background color. */
outline-color: var(--urlbarview-text-color-selected);
outline-offset: 1px;
.urlbarView-row:not([selected]) > .urlbarView-row-buttons > & {
/* If the row is not selected, use the accent color instead. */
outline-color: var(--border-color-selected);
}
}
.urlbarView-row:is([row-selectable]:hover, [selected]) > &:not(:hover, [aria-expanded="true"]) {
color: var(--urlbarView-result-button-selected-color);
background-color: var(--urlbarView-result-button-selected-background-color);
}
&:is(:hover, [aria-expanded="true"]) {
color: var(--urlbarView-result-button-hover-color);
background-color: var(--urlbarView-result-button-hover-background-color);
}
& + & {
margin-inline-start: 0;
}
}
/* Result menu button */
.urlbarView-button-result-menu {
background-image: url("chrome://global/skin/icons/more.svg");
background-color: var(--button-background-color);
color: var(--button-text-color);
.urlbarView-results:not([disable-resultmenu-autohide])
> .urlbarView-row:not(:hover, [selected], [descendant-selected])
> .urlbarView-row-buttons
> &:not([aria-expanded="true"]):first-child:empty {
/* The realtime suggestions' style will be broken if the width will be
changed by hover. Thus we use the visibility instead of display to keep
the element size */
visibility: hidden;
.urlbarView-row:not([dynamicType^="realtime-"]) > .urlbarView-row-buttons > & {
display: none;
}
}
/* Labeled result menu button */
&:not(:empty) {
.urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-buttons > & {
display: inline-flex;
align-items: center;
border-radius: var(--urlbarView-result-button-size);
padding-inline: 8px 26px;
background-position-x: right 4px;
font-size: var(--urlbarView-small-font-size);
&:dir(rtl) {
background-position-x: left 4px;
}
}
.urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-buttons > & {
/* Hide the label in narrow windows. */
font-size: 0;
}
}
}
/* This should be supported within panel-{item,list} rather than modifying it, to be fixed by
.urlbarView-result-menuitem::part(button) {
padding-inline-start: 12px;
}
/* Button with label, e.g. tip button */
.urlbarView-button:where(:not(:empty):not(.urlbarView-button-result-menu)),
.urlbarView-splitbutton-dropmarker {
border-radius: var(--button-border-radius);
padding: 0.5em 1em;
font-size: 0.93em;
font-weight: var(--font-weight-semibold);
background-clip: padding-box;
min-height: 16px;
min-width: 6em;
text-align: center;
flex-basis: initial;
flex-shrink: 0;
&:not(:hover, [aria-expanded="true"]) {
background-color: var(--button-background-color);
color: var(--button-text-color);
}
&:is([selected], [primary]) {
color: var(--button-text-color-primary);
background-color: var(--color-accent-primary);
outline-color: var(--border-color-selected);
outline-offset: var(--focus-outline-offset);
&:hover {
background-color: var(--color-accent-primary-hover);
}
&:hover:active {
background-color: var(--color-accent-primary-active);
}
}
}
/* Split Button component */
.urlbarView-splitbutton {
display: flex;
}
.urlbarView-splitbutton-main {
/* Make the cap to the dropmarker */
margin-inline-end: 1px;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.urlbarView-splitbutton-dropmarker {
background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
border-start-start-radius: 0;
border-end-start-radius: 0;
padding-inline: 0;
min-width: 2em;
border-inline-start: none;
-moz-context-properties: fill;
fill: currentColor;
}
/* Row label (a.k.a. group label) */
.urlbarView-row[label] {
/* `margin-block-start` controls how far the main part of the row is from the
main part of the previous row. */
margin-block-start: var(--urlbarView-labeled-row-margin-top);
&::before {
content: attr(label);
display: block;
/* Remove the label from the document flow so it doesn't affect the row
selection and hover states. */
position: absolute;
/* `top` controls how far the label is from the main part of the row. It is
measured from the row's padding box, hence the gutter. */
top: calc(var(--urlbarView-row-gutter) + var(--urlbarView-labeled-row-label-top));
margin-inline-start: var(--urlbarView-row-padding-inline);
font-size: 0.8em;
/* The color and opacity of labels is the same as the "This time, search with"
text in the search shortcuts. See `.search-panel-header > label` in
searchbar.css. */
color: var(--toolbar-field-text-color-focus);
opacity: 0.6;
pointer-events: none;
}
/* For tips with row labels, the entire row is moved down by an additional
var(--urlbarView-labeled-tip-margin-top-extra) so there's more space
between the tip's top border and the label; see the tip rules. Here we
compensate so that the label remains the same distance from the previous
row as it would have had we not moved the tip row down. +1px compensates
for the tip's top 1px border. */
&[type="tip"]::before {
top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px);
}
:root[lwt-toolbar-field-focus="dark"] &::before {
/* Same as `.search-panel-header > label` in searchbar.css */
opacity: 1;
}
}
/* Feedback acknowledgment */
.urlbarView-row[feedback-acknowledgment] {
padding-bottom: 1.94em;
&::after {
content: attr(feedback-acknowledgment);
display: flex;
align-items: center;
position: absolute;
bottom: 0.72em;
font-size: var(--urlbarView-small-font-size);
margin-inline-start: calc(var(--urlbarView-row-padding-inline) + var(--urlbarView-favicon-margin-start));
padding-inline-start: calc(var(--urlbarview-favicon-size) + var(--urlbarView-favicon-margin-end));
background-image: url("chrome://branding/content/icon32.png");
background-repeat: no-repeat;
background-position: 0 center;
background-size: var(--urlbarview-favicon-size);
min-height: var(--urlbarview-favicon-size);
}
}
/* Title */
.urlbarView-title {
white-space: nowrap;
/* Explicitly set line-height to avoid excessively tall rows if the title triggers use of
fallback fonts with extreme metrics. */
line-height: 1.4;
flex: 1;
}
/* Tail suggestions */
.urlbarView-tail-prefix {
display: none;
justify-content: flex-end;
white-space: pre;
.urlbarView-row[tail-suggestion] & {
display: inline-flex;
}
> .urlbarView-tail-prefix-string {
visibility: hidden;
}
> .urlbarView-tail-prefix-char {
position: absolute;
}
}
/* Title separator */
.urlbarView-title-separator {
&::before {
content: var(--urlbarView-separator-char);
margin: 0 var(--urlbarView-separator-margin-inline);
opacity: 0.6;
}
.urlbarView-row:not([has-url], [has-action], [restyled-search], [show-action-text]) &,
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] &,
.urlbarView-row[type="remotetab"]:not([selected], :hover) &,
.urlbarView-row:is([type="search"], [type="rich-search"], [restyled-search]):not([selected], :hover, [show-action-text]) &,
.urlbarView-row[type="clipboard"] &,
.urlbarView-title:empty + .urlbarView-tags:empty + & {
&::before {
content: var(--urlbarView-separator-char-hidden);
margin: 0;
}
}
}
/* Action labels and switch-to-tab accessories */
.urlbarView-action,
.urlbarView-switchToTab-accessory {
white-space: nowrap;
font-size: var(--urlbarView-small-font-size);
/* Chiclet style */
.urlbarView-row:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) & {
border: 1px solid currentColor;
border-radius: var(--urlbar-border-radius);
padding: 4px var(--space-medium);
margin-block: -5px; /* -1 * (4px padding-block + 1px border-width) */
margin-inline-start: 8px;
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill, fill-opacity;
&.urlbarView-switchToTab {
padding-inline-start: calc(var(--space-medium) + var(--urlbarview-favicon-size) + var(--space-small));
background-image: url("chrome://browser/skin/open-tabs.svg");
background-position-x: var(--space-medium);
background-size: var(--urlbarview-favicon-size);
&:dir(rtl) {
background-position-x: right var(--space-medium);
}
}
&.urlbarView-user-context {
width: 14px;
padding-inline: 4px;
border-color: transparent;
background-color: var(--identity-fill-tint);
background-image: var(--user-context-icon);
background-size: 14px;
fill: var(--identity-fill-color);
/* Chiclet height is determined by its text content. User-context chiclets
don't have text, so use a nbsp. */
&::before {
content: "\00A0";
}
}
&.urlbarView-tab-group-container {
border-color: transparent;
background-color: var(--tab-group-background-color);
color: var(--tab-group-text-color);
.urlbarView-results[wrap] & > .urlbarView-tab-group-label-full,
.urlbarView-results:not([wrap]) & > .urlbarView-tab-group-label-short {
display: none;
}
}
}
}
.urlbarView-action {
.urlbarView-row[sponsored]:not([selected]) & {
color: var(--text-color-deemphasized);
}
.urlbarView-row:not([has-action], [show-action-text], [restyled-search], [show-action-text]) &,
.urlbarView[action-override] .urlbarView-row[type="switchtab"] &,
.urlbarView-row[type="remotetab"]:is([selected], :hover) &,
.urlbarView-row:is([type="search"], [type="rich-search"], [restyled-search]):not([selected], :hover, [show-action-text]) &,
.urlbarView-row[sponsored]:is([selected], :hover) & {
/* Use visibility:collapse instead of display:none since the latter can confuse
the overflow state of these elements when their content changes while
visibility: collapse;
}
/* Slide-in animation */
@media (prefers-reduced-motion: no-preference) {
.urlbarView-title:not(:empty) ~ &[slide-in] {
animation-name: urlbarView-action-slide-in;
animation-duration: 350ms;
animation-timing-function: var(--animation-easing-function);
}
}
}
/* The slide-in effect is delayed ~100ms to reduce motion during result
composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
seen by the user until after the delay. */
@keyframes urlbarView-action-slide-in {
0%,
28.6% {
translate: var(--urlbarView-action-slide-in-distance);
opacity: 0;
}
100% {
translate: 0;
opacity: 1;
}
}
.urlbarView-switchToTab-accessory {
.urlbarView-row:not([type="switchtab"]) &,
.urlbarView[action-override] .urlbarView-row[type="switchtab"] & {
visibility: collapse;
}
}
/* URLs and result explanations */
.urlbarView-url,
.urlbarView-explanation {
font-size: var(--urlbarView-small-font-size);
/* Increase line-height to avoid cutting overhanging glyphs due to masking on
the element */
line-height: 1.4;
.urlbarView-row:not([selected]) & {
color: var(--link-color);
}
}
.urlbarView-url {
/* The large flex-grow ensures the URL grows more quickly than the explanation
so that the explanation doesn't cause the URL to overflow unnecessarily. */
flex: 100 1 var(--urlbarView-url-flex-basis);
min-width: 0;
max-width: max-content;
.urlbarView-row:not([has-url]) &,
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] &,
.urlbarView-row[type="remotetab"]:not([selected], :hover) &,
.urlbarView-row[sponsored]:not([selected], :hover) &,
.urlbarView-row[restyled-search] & {
visibility: collapse;
}
}
.urlbarView-explanation {
display: flex;
align-items: baseline;
margin-inline: calc(var(--urlbarView-row-padding-inline) + var(--urlbarView-icon-margin-start));
flex: 1 0;
justify-content: end;
.urlbarView-row[has-menu-button] & {
margin-inline-end: 0;
}
/* Give both parts of the explanation a leading separator. Make it opaque if
it's next to an overflowed URL or both explanation parts are non-empty.
Otherwise, the first separator will be transparent, which ensures there
will be enough space between the explanation and the prior visible element,
whether that's a non-overflowed URL or action text. */
> .urlbarView-explanation-bookmarked:not(:empty)::before,
> .urlbarView-explanation-last-visited:not(:empty)::before {
content: var(--urlbarView-separator-char);
margin: 0 var(--urlbarView-separator-margin-inline);
opacity: 0;
}
.urlbarView-url[overflow] ~ & > .urlbarView-explanation-bookmarked::before,
.urlbarView-url[overflow] ~ & > .urlbarView-explanation-last-visited::before,
> .urlbarView-explanation-bookmarked:not(:empty) + .urlbarView-explanation-last-visited::before {
opacity: var(--opacity-deemphasized-strong);
}
.urlbarView-row:not([has-explanation]) &,
.urlbarView-row[has-explanation]:not([selected], :hover) &,
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] & {
visibility: collapse;
}
@container (width < 450px) {
& {
visibility: collapse;
}
}
}
/* An [is-url] title carries no dir attribute, and the view sets dir="auto" on
the other titles alone, so both of these take the row's direction. */
.urlbarView-title[is-url]:dir(rtl),
.urlbarView-url:dir(rtl) {
direction: ltr !important;
}
.urlbarView-url:dir(rtl),
.urlbarView-explanation:dir(rtl) {
/* .urlbarView-url can grow due to `flex: auto`, so without `text-align: right`,
the URL text would be left-aligned within .urlbarView-url for RTL due to
the `direction: ltr` rule. .urlbarView-title does not have this problem
since it does not have flex. */
text-align: right;
}
/* Tags */
.urlbarView-tags {
display: flex;
font-size: var(--urlbarView-small-font-size);
/* Increase line-height to avoid cutting overhanging glyphs due to masking on
the element */
line-height: 1.4;
}
.urlbarView-tag {
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
padding: 0 4px;
margin-inline-start: 0.4em;
border-radius: var(--border-radius-small);
}
/* Tips */
.urlbarView-row[type="tip"] {
padding-block: 18px;
border-radius: 0;
/* A tip has no block gutter, so its block padding is part of the background. */
background-clip: padding-box;
&:not(:last-child) {
border-bottom: 1px solid var(--urlbarview-separator-color);
margin-bottom: 4px;
}
&:not(:first-child) {
border-top: 1px solid var(--urlbarview-separator-color);
margin-top: 4px;
}
/* For tips with row labels, move the entire row down by an additional
var(--urlbarView-labeled-tip-margin-top-extra) so there's more space
between the tip's top border and the label. They're too close otherwise.
The row label must also be adjusted; see the row label rules. */
&[label] {
margin-top: calc(var(--urlbarView-labeled-row-margin-top) + var(--urlbarView-labeled-tip-margin-top-extra));
}
> .urlbarView-row-inner {
min-height: var(--urlbarview-row-min-height);
align-items: center;
/* Add space between the tip title (and the rest of row-inner) and its
button. */
margin-inline-end: 1.8em;
> .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
flex-shrink: unset;
> .urlbarView-title {
white-space: normal;
}
> :not(.urlbarView-title) {
display: none;
}
}
> .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url {
display: none;
}
> .urlbarView-row-body > .urlbarView-row-body-description {
&:not(:empty) {
/* Keep padding so the entire selected outline for learn more link */
padding-block: 4px;
}
> a {
white-space: nowrap;
color: currentColor;
}
> a[selected] {
border-radius: var(--border-radius-small);
outline: var(--focus-outline);
outline-offset: var(--link-focus-outline-offset);
}
}
}
> .urlbarView-row-buttons {
/* Move the buttons away from the row edge for better visual balance. */
padding-inline-end: var(--space-large);
> .urlbarView-button,
> .urlbarView-splitbutton {
/* Horizontal space between buttons */
margin-inline: var(--space-small);
/* Vertical space between buttons when the row is narrow and the buttons wrap */
margin-block: var(--space-small);
}
> .urlbarView-splitbutton > .urlbarView-splitbutton-dropmarker {
/* The dropmarker is a `.urlbarView-button` so it gets the usual 4px inline
margin. Remove it so it doesn't add to the splitbutton margin. */
margin-inline-end: 0;
}
}
.urlbarView-results[wrap] > & {
display: block;
text-align: end;
> .urlbarView-row-inner {
display: flex;
text-align: start;
}
&[tip-type="dismissalAcknowledgment"] {
padding-block: 6px;
&:last-child {
padding-block-end: max(0px, 6px - var(--urlbarView-padding));
}
}
}
&[tip-type="dismissalAcknowledgment"] {
--urlbarView-icon-size: var(--urlbarView-rich-search-suggestion-icon-size);
}
}
/* Firefox Suggest rows */
.urlbarView-row[is-top-pick] {
--urlbarView-icon-size: var(--urlbarView-top-pick-icon-size);
--urlbarView-icon-border-radius: var(--urlbarView-top-pick-icon-border-radius);
}
@media not -moz-pref("browser.urlbar.quicksuggest.ampTopPickUseNovaIconSize") {
.urlbarView-row[type$="_adm_sponsored"][is-top-pick] {
--urlbarView-icon-size: var(--urlbarView-rich-search-suggestion-icon-size);
--urlbarView-icon-border-radius: var(--urlbarView-rich-search-suggestion-icon-border-radius);
}
}
.urlbarView-row[type$="_amo"] {
/* Draw the icon at 24px but give it a padding and background color to make it
overall the size of top-pick icons. */
--urlbarView-icon-size: 24px;
--urlbarView-icon-border-radius: 0;
--urlbarView-icon-margin-start: 0;
--urlbarView-icon-margin-end: var(--urlbarView-icon-margin-end-base);
> .urlbarView-row-inner > .urlbarView-favicon {
padding: calc((var(--urlbarView-top-pick-icon-size) - 24px) / 2);
background-color: var(--urlbar-box-background-color-focus);
border-radius: var(--urlbarView-top-pick-icon-border-radius);
}
&:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
background-color: var(--urlbarView-result-button-selected-background-color);
}
}
.urlbarView-row[type$="_important_dates"] {
/* Important dates are top picks, but their icons are smaller. */
--urlbarView-icon-size: 24px;
--urlbarView-icon-border-radius: 0;
}
.urlbarView-row[dynamicType="weather"],
.urlbarView-row[type="weather"] {
/* Use the colors in the icon SVG files except in HCM and when the row is
selected. Note that the SVG uses light or dark colors as appropriate. */
&:not([selected]) > .urlbarView-row-inner > .urlbarView-favicon {
@media not (prefers-contrast) {
-moz-context-properties: unset;
}
}
/* Map AccuWeather icon IDs to our icons. These IDs come straight from the
AccuWeather API response via Merino. These rules apply to both the older
weather UI treatments ("simpler" and "full", which use a dynamic result)
and the new treatment ("simplest", which is a standard rich suggestion). */
/* prettier-ignore */
> .urlbarView-row-inner > .urlbarView-dynamic-weather-currentConditions > .urlbarView-dynamic-weather-currentTemperature > .urlbarView-dynamic-weather-weatherIcon,
> .urlbarView-row-inner > .urlbarView-favicon {
/* icon-variation="1" is "Sunny", which we'll use as the default to ensure an
image is always visible. We don't expect AccuWeather to ever include an
invalid icon ID, but they may add new ones that aren't recognized by this
version of Firefox for example. */
content: url("chrome://browser/skin/weather/sunny.svg");
&[icon-variation="2"] {
content: url("chrome://browser/skin/weather/mostly-sunny.svg");
}
&:is([icon-variation="3"], [icon-variation="4"], [icon-variation="6"]) {
content: url("chrome://browser/skin/weather/partly-sunny.svg");
}
&[icon-variation="5"] {
content: url("chrome://browser/skin/weather/hazy-sunshine.svg");
}
&:is([icon-variation="7"], [icon-variation="8"]) {
content: url("chrome://browser/skin/weather/cloudy.svg");
}
&[icon-variation="11"] {
content: url("chrome://browser/skin/weather/fog.svg");
}
&[icon-variation="12"] {
content: url("chrome://browser/skin/weather/showers.svg");
}
&:is([icon-variation="13"], [icon-variation="14"]) {
content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg");
}
&[icon-variation="15"] {
content: url("chrome://browser/skin/weather/thunderstorms.svg");
}
&:is([icon-variation="16"], [icon-variation="17"]) {
content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg");
}
&[icon-variation="18"] {
content: url("chrome://browser/skin/weather/rain.svg");
}
&:is([icon-variation="19"], [icon-variation="20"], [icon-variation="25"]) {
content: url("chrome://browser/skin/weather/flurries.svg");
}
&[icon-variation="21"] {
content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg");
}
&:is([icon-variation="22"], [icon-variation="23"]) {
content: url("chrome://browser/skin/weather/snow.svg");
}
&:is([icon-variation="24"], [icon-variation="31"]) {
content: url("chrome://browser/skin/weather/ice.svg");
}
&:is([icon-variation="26"], [icon-variation="29"]) {
content: url("chrome://browser/skin/weather/freezing-rain.svg");
}
&[icon-variation="30"] {
content: url("chrome://browser/skin/weather/hot.svg");
}
&[icon-variation="32"] {
content: url("chrome://browser/skin/weather/windy.svg");
}
&[icon-variation="33"] {
content: url("chrome://browser/skin/weather/night-clear.svg");
}
&:is([icon-variation="34"], [icon-variation="35"], [icon-variation="36"], [icon-variation="38"]) {
content: url("chrome://browser/skin/weather/night-mostly-clear.svg");
}
&[icon-variation="37"] {
content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg");
}
&:is([icon-variation="39"], [icon-variation="40"]) {
content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg");
}
&:is([icon-variation="41"], [icon-variation="42"]) {
content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg");
}
&:is([icon-variation="43"], [icon-variation="44"]) {
content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg");
}
}
}
/* Actions */
.urlbarView-results[actionmode] {
white-space: wrap;
> .urlbarView-row {
display: inline-flex;
}
}
/* To align the label and action button */
.urlbarView-row[secondary-action] {
flex-direction: column;
align-items: flex-start;
}
.urlbarView-actions-container {
margin-inline-start: calc(
var(--urlbarView-row-padding-inline) + var(--urlbarView-favicon-margin-start) + var(--urlbarview-favicon-size) + var(--urlbarView-icon-margin-end)
);
margin-block-end: var(--urlbarview-row-padding-block);
}
.urlbarView-action-btn {
font-size: smaller;
font-weight: var(--font-weight-semibold);
border-radius: var(--urlbar-border-radius);
padding: 0.4em 0.6em;
display: inline-flex;
align-items: center;
background-color: var(--urlbarview-action-button-background-color);
margin-inline-end: var(--space-large);
&[aria-disabled="true"] {
color: var(--text-color-disabled);
opacity: var(--button-opacity-disabled);
}
&:not([aria-disabled="true"]) {
&:hover {
background-color: var(--urlbarview-action-button-background-color-hover);
}
&[selected],
&:hover:active {
outline: var(--focus-outline);
}
}
> img {
width: var(--icon-size-small);
height: var(--icon-size-small);
margin-inline-end: var(--space-medium);
-moz-context-properties: fill, fill-opacity;
}
.urlbarView[action-override] &[data-action="tabswitch"] {
display: none;
}
&[data-action^="tabgroup-"] {
color: var(--tab-group-text-color);
background-color: var(--tab-group-background-color);
max-width: 30%;
/* Add offset to the focus / selection indicator as the outline color could
be close to the group color. */
outline-offset: 1px;
margin-inline-start: 1px;
&:hover {
background-color: var(--tab-group-background-color-hover);
}
> .urlbarView-action-btn-label {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
/* Suggest realtime opt-in */
.urlbarView-row[tip-type="realtime_opt_in"] {
/* `margin-block-end` is large to give enough spacing between the opt-in and the
row label in the next row. */
margin-block: var(--urlbarview-row-padding-block) calc(5 * var(--urlbarview-row-padding-block));
padding-block: 0;
border-radius: var(--border-radius-medium);
background-clip: content-box;
@media not (prefers-contrast) {
background-color: color-mix(in srgb, var(--button-background-color) 30%, transparent);
color: var(--button-text-color);
}
> .urlbarView-row-inner {
padding: 0;
> .urlbarView-favicon {
width: 98px;
flex-basis: 98px;
height: auto;
align-self: stretch;
margin-inline: 0;
border-start-start-radius: var(--border-radius-medium);
border-end-start-radius: var(--border-radius-medium);
background-color: light-dark(#ddcfff, #4e2e9d);
fill: none;
@media (prefers-contrast) {
background-color: currentColor;
fill: currentColor;
}
}
> .urlbarView-row-body {
padding: var(--space-xlarge);
> .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title {
font-weight: var(--font-weight-heading);
}
}
}
.urlbarView-results[wrap] > & {
> .urlbarView-row-inner {
padding: var(--space-large);
> .urlbarView-favicon {
border-radius: var(--border-radius-medium);
}
}
> .urlbarView-row-buttons {
/* Should match `padding-inline-end` of `.urlbarView-row-buttons` in tips. */
padding-block-end: var(--space-large);
}
}
}
/* Basic style for Realtime suggestions */
.urlbarView-row[dynamicType^="realtime-"]:not([row-selectable]) {
/* When a realtime row contains multiple items, each item is individually
selectable rather than the row. Space the items apart by twice the gutter so
that the gap and the selection styling apply to them and not to the row. */
> .urlbarView-realtime-root {
gap: calc(2 * var(--urlbarView-row-gutter));
> .urlbarView-realtime-item {
border-radius: var(--urlbarView-row-border-radius);
}
}
}
.urlbarView-realtime-root {
--green-status-color: light-dark(var(--color-green-60), var(--color-green-20));
--red-status-color: light-dark(var(--color-red-70), var(--color-red-40));
--violet-bg-color: light-dark(var(--color-violet-0), var(--color-violet-80));
--violet-fg-color: light-dark(var(--color-violet-60), var(--color-violet-10));
@media (prefers-contrast) {
--violet-bg-color: var(--urlbar-box-background-color-focus);
--violet-fg-color: currentColor;
}
align-items: center;
/* Realtime suggestions can contain many items, which should always wrap. */
flex-wrap: wrap;
/* Remove the usual inner padding. Each item in the row will have its own. */
padding: 0;
> .urlbarView-realtime-item {
display: flex;
align-items: center;
/* Inline spacing between multiple items in a row */
margin-inline-end: var(--space-small);
/* Except in compact mode, the block and inline-start padding should match the
normal inner inline padding we removed above, in order to keep the first
item's image aligned with the text and images in other rows. */
:root:not([uidensity="compact"]) & {
padding: var(--urlbarView-row-padding-inline);
}
padding-inline-end: var(--space-large);
.urlbarView-realtime-root:not([selectable]) > &:not([selected]):hover {
background-color: var(--urlbarview-background-color-hover);
}
&[selected] {
color: var(--urlbarview-text-color-selected);
background-color: var(--urlbarview-background-color-selected);
}
> .urlbarView-realtime-image-container {
display: flex;
align-items: center;
justify-content: center;
width: var(--urlbarView-top-pick-icon-size);
height: var(--urlbarView-top-pick-icon-size);
margin-inline-end: var(--space-medium);
/* Row types that draw a border on the container give up this padding for
it, so the padding takes the snapped width a 1px border resolves to. */
padding: var(--urlbar-snapped-1px-border-width);
border-radius: var(--urlbarView-top-pick-icon-border-radius);
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
-moz-context-properties: fill, fill-opacity;
> .urlbarView-realtime-image {
width: 36px;
height: auto;
max-height: 36px;
}
}
> .urlbarView-realtime-description {
display: flex;
flex-direction: column;
text-align: start;
grid-row-gap: var(--space-xsmall);
> .urlbarView-realtime-description-top,
> .urlbarView-realtime-description-bottom {
display: flex;
align-items: baseline;
}
> .urlbarView-realtime-description-bottom {
font-size: var(--urlbarView-small-font-size);
}
.urlbarView-row:not([selected]) > .urlbarView-realtime-root > .urlbarView-realtime-item:not([selected]) > & > .urlbarView-realtime-description-bottom {
color: var(--urlbarview-text-color-secondary);
}
> .urlbarView-realtime-description-top > .urlbarView-realtime-description-separator-dot,
> .urlbarView-realtime-description-top > .urlbarView-realtime-description-separator-dash,
> .urlbarView-realtime-description-bottom > .urlbarView-realtime-description-separator-dot,
> .urlbarView-realtime-description-bottom > .urlbarView-realtime-description-separator-dash {
/* stylelint-disable-next-line max-nesting-depth */
&::before {
display: inline;
}
/* Small subtree */
/* stylelint-disable-next-line max-nesting-depth, stylelint-plugin-mozilla/no-has-selector */
&:has(+ span:empty) {
display: none;
}
}
> .urlbarView-realtime-description-top > .urlbarView-realtime-description-separator-dot,
> .urlbarView-realtime-description-bottom > .urlbarView-realtime-description-separator-dot {
/* stylelint-disable-next-line max-nesting-depth */
&::before {
content: var(--urlbarView-separator-char);
margin-inline: var(--urlbarView-separator-margin-inline);
}
}
> .urlbarView-realtime-description-top > .urlbarView-realtime-description-separator-dash,
> .urlbarView-realtime-description-bottom > .urlbarView-realtime-description-separator-dash {
/* stylelint-disable-next-line max-nesting-depth */
&::before {
content: "–";
margin-inline: var(--space-xsmall);
}
}
}
}
}
/* Market suggestions specific */
.urlbarView-row[dynamicType="realtime-market"] > .urlbarView-realtime-root > .urlbarView-realtime-item {
--market-image-bg-color: var(--urlbar-box-background-color-focus);
--market-image-down-bg-color: light-dark(var(--color-red-0), var(--color-red-90));
--market-image-up-bg-color: light-dark(var(--color-green-0), var(--color-green-90));
> .urlbarView-realtime-image-container {
background-color: var(--market-image-bg-color);
&[is-arrow] {
padding: 0;
border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
.urlbarView-realtime-item[change="down"] > & {
fill: var(--red-status-color);
border-color: color-mix(in srgb, var(--red-status-color) 10%, transparent);
background-color: var(--market-image-down-bg-color);
}
.urlbarView-realtime-item[change="up"] > & {
fill: var(--green-status-color);
border-color: color-mix(in srgb, var(--green-status-color) 10%, transparent);
background-color: var(--market-image-up-bg-color);
}
> .urlbarView-realtime-image {
width: 20px;
height: 20px;
}
}
}
> .urlbarView-realtime-description {
> .urlbarView-realtime-description-top {
> .urlbarView-market-name {
font-weight: var(--font-weight-semibold);
}
}
> .urlbarView-realtime-description-bottom {
> .urlbarView-market-todays-change-perc {
font-weight: var(--font-weight-semibold);
}
> .urlbarView-market-last-price {
/* This value is a string like "$123.45 USD". The "USD" part should be small
caps and the rest should be normal size. */
text-transform: lowercase;
font-variant-caps: small-caps;
}
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item[change="up"]:not([selected])
> &
> .urlbarView-realtime-description-bottom
> .urlbarView-market-todays-change-perc {
color: var(--green-status-color);
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item[change="down"]:not([selected])
> &
> .urlbarView-realtime-description-bottom
> .urlbarView-market-todays-change-perc {
color: var(--red-status-color);
}
}
}
/* Yelp realtime suggestions specific */
.urlbarView-row[dynamicType="realtime-yelpRealtime"] > .urlbarView-realtime-root > .urlbarView-realtime-item {
--star-size: 12px;
> .urlbarView-realtime-image-container > .urlbarView-realtime-image {
width: var(--urlbarView-top-pick-icon-size);
height: var(--urlbarView-top-pick-icon-size);
flex-basis: var(--urlbarView-top-pick-icon-size);
border-radius: var(--urlbarView-top-pick-icon-border-radius);
}
> .urlbarView-realtime-description {
> .urlbarView-realtime-description-top > .urlbarView-yelpRealtime-title {
font-weight: var(--font-weight-heading);
}
> .urlbarView-realtime-description-bottom {
> .urlbarView-yelpRealtime-description-popularity-star {
display: inline-block;
width: var(--star-size);
height: var(--star-size);
background-image: url("chrome://global/skin/icons/rating-star.svg");
background-position: center;
background-repeat: no-repeat;
background-size: var(--star-size) var(--star-size);
margin-inline-end: 0.3ch;
fill: var(--icon-color);
-moz-context-properties: fill;
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item[state="open"]:not([selected])
> .urlbarView-realtime-description
> &
> .urlbarView-yelpRealtime-description-business-hours
> span {
color: var(--green-status-color);
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item[state="closed"]:not([selected])
> .urlbarView-realtime-description
> &
> .urlbarView-yelpRealtime-description-business-hours
> span {
color: var(--red-status-color);
}
}
}
}
/* Flight status suggestions specific */
.urlbarView-row[dynamicType="realtime-flightStatus"] > .urlbarView-realtime-root > .urlbarView-realtime-item {
> .urlbarView-realtime-image-container {
--airline-fallback-icon-color: #bac2ca;
padding: 0;
border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
background-color: var(--urlbar-box-background-color-focus);
&[backgroundImageId] {
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
-moz-context-properties: fill, stroke;
fill: var(--airline-color, currentColor);
stroke: var(--airline-color, currentColor);
&:dir(rtl) {
/* Flip the background image, an in-progress flight path, and then flip the
inner foreground image, an airline logo, so it's oriented correctly. */
transform: scaleX(-1);
/* stylelint-disable-next-line max-nesting-depth */
> .urlbarView-realtime-image {
transform: scaleX(-1);
}
}
}
&[backgroundImageId="0"] {
background-image: url(chrome://browser/skin/urlbar/flight-inflight-progress-0.svg);
}
&[backgroundImageId="1"] {
background-image: url(chrome://browser/skin/urlbar/flight-inflight-progress-1.svg);
}
&[backgroundImageId="2"] {
background-image: url(chrome://browser/skin/urlbar/flight-inflight-progress-2.svg);
}
&[backgroundImageId="3"] {
background-image: url(chrome://browser/skin/urlbar/flight-inflight-progress-3.svg);
}
&[backgroundImageId="4"] {
background-image: url(chrome://browser/skin/urlbar/flight-inflight-progress-4.svg);
}
&[hasForegroundImage] {
/* The background image is an in-progress flight path that arcs from left to
right. The foreground image is an airline logo. Move the flight path up
so there's room below it for the logo and place the logo in the bottom right. */
background-position-y: bottom 12px;
display: flex;
justify-content: right;
align-items: end;
overflow: hidden;
}
> .urlbarView-realtime-image[fallback] {
width: 26px;
height: 26px;
flex-basis: 26px;
fill: var(--airline-fallback-icon-color);
}
}
> .urlbarView-realtime-description {
> .urlbarView-realtime-description-top > .urlbarView-flightStatus-time {
font-weight: var(--font-weight-semibold);
margin-inline-end: var(--space-small);
}
> .urlbarView-realtime-description-bottom {
> .urlbarView-flightStatus-status {
font-weight: var(--font-weight-semibold);
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item:is([status="ontime"], [status="inflight"], [status="arrived"]):not([selected])
> .urlbarView-realtime-description
> &
> .urlbarView-flightStatus-status {
color: var(--green-status-color);
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item:is([status="cancelled"], [status="delayed"]):not([selected])
> .urlbarView-realtime-description
> &
> .urlbarView-flightStatus-status {
color: var(--red-status-color);
}
}
}
}
/* Realtime sports suggestions */
.urlbarView-row[dynamicType="realtime-sports"] > .urlbarView-realtime-root > .urlbarView-realtime-item {
> .urlbarView-realtime-image-container > .urlbarView-realtime-image {
width: 44px;
max-height: 44px;
}
> .urlbarView-realtime-image-container[hidden] {
display: none;
}
> .urlbarView-realtime-image-container[has-team-icon] {
> .urlbarView-sports-date-chiclet-day,
> .urlbarView-sports-date-chiclet-month {
display: none;
}
}
> .urlbarView-realtime-image-container:not([has-team-icon]) {
flex-direction: column;
background-color: var(--violet-bg-color);
background-position: center;
background-repeat: no-repeat;
padding: 0;
border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
color: var(--violet-fg-color);
fill: var(--violet-fg-color);
-moz-context-properties: fill;
> .urlbarView-sports-date-chiclet-day {
font-size: 1.25em;
}
/* Fallback icons per sport */
.urlbarView-realtime-item[sport-category="baseball"] > &,
.urlbarView-realtime-item[sport-category="basketball"] > &,
.urlbarView-realtime-item[sport-category="cricket"] > &,
.urlbarView-realtime-item[sport-category="football"] > &,
.urlbarView-realtime-item[sport-category="golf"] > &,
.urlbarView-realtime-item[sport-category="hockey"] > &,
.urlbarView-realtime-item[sport-category="racing"] > &,
.urlbarView-realtime-item[sport-category="soccer"] > & {
/* stylelint-disable-next-line max-nesting-depth */
> .urlbarView-sports-date-chiclet-day,
> .urlbarView-sports-date-chiclet-month {
display: none;
}
}
.urlbarView-realtime-item[sport-category="baseball"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-baseball.svg");
}
.urlbarView-realtime-item[sport-category="basketball"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-basketball.svg");
}
.urlbarView-realtime-item[sport-category="cricket"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-cricket.svg");
}
.urlbarView-realtime-item[sport-category="football"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-american-football.svg");
}
.urlbarView-realtime-item[sport-category="golf"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-golf.svg");
}
.urlbarView-realtime-item[sport-category="hockey"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-hockey.svg");
}
.urlbarView-realtime-item[sport-category="racing"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-racing.svg");
}
.urlbarView-realtime-item[sport-category="soccer"] > & {
background-image: url("chrome://browser/skin/urlbar/sports-soccer.svg");
}
}
> .urlbarView-realtime-description {
> .urlbarView-realtime-description-top {
> .urlbarView-sports-team-names,
> .urlbarView-sports-score {
font-weight: var(--font-weight-bold);
}
> .urlbarView-sports-score-home {
margin-inline-start: var(--space-small);
}
> .urlbarView-sports-score-away {
margin-inline-end: var(--space-small);
}
}
> .urlbarView-realtime-description-bottom > .urlbarView-sports-status {
font-weight: var(--font-weight-bold);
}
.urlbarView-row:not([selected])
> .urlbarView-realtime-root
> .urlbarView-realtime-item:not([selected])
> &
> .urlbarView-realtime-description-bottom
> .urlbarView-sports-status {
color: var(--green-status-color);
}
}
}
/* Search one-offs */
#urlbar .search-one-offs:not([hidden]) {
display: flex;
align-items: start;
padding-block: 10px;
flex-wrap: wrap;
}
#urlbar:not([noresults]) > .urlbarView > .search-one-offs:not([hidden]) {
border-top: 1px solid var(--urlbarview-separator-color);
}
:root[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
padding-block: 15px;
}
#urlbar .search-panel-one-offs-container {
/* Make sure horizontally we can fit four buttons, empty space, settings. */
min-width: calc(4 * /* one-off with end margin */ 40px + /* settings with start margin */ 56px);
}
#urlbar .search-panel-header {
padding: 0;
min-height: 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
#urlbar .search-panel-one-offs-header-label {
white-space: nowrap;
margin: 0;
padding-inline: var(--urlbarView-row-padding-inline) 18px;
}
#urlbar .searchbar-engine-one-off-item {
min-width: 28px;
height: 28px;
margin-inline: 0 12px;
border-radius: var(--urlbar-border-radius);
}
#urlbar .searchbar-engine-one-off-item:last-child {
/* This applies to both the last one-off and the compact settings button */
margin-inline-end: 0;
}
#urlbar .search-setting-button {
/* Force empty space before the button */
margin-inline-start: calc(32px - /* settings start padding */ 8px);
}
.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks {
list-style-image: url("chrome://browser/skin/bookmark.svg");
fill: var(--toolbarbutton-icon-fill-attention);
fill-opacity: 1;
-moz-context-properties: fill, fill-opacity;
}
.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
list-style-image: url("chrome://browser/skin/tab.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
}
.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-favicon,
#urlbar-engine-one-off-item-history {
list-style-image: url("chrome://browser/skin/history.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
}
.urlbarView-row[source="actions"] > .urlbarView-row-inner > .urlbarView-favicon,
#urlbar-engine-one-off-item-actions {
list-style-image: url("chrome://browser/skin/lightning-bolt.svg");
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
}
/**
* We remove the blue fill from the bookmark icon when it is selected. We use
* a blue color as the selection background-color in some instances (Linux with
* blue system color; fallback for third-party themes) and we want to ensure
* contrast.
*/
.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks[selected] {
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
}
/* Rows with the URL at the bottom */
.urlbarView-row.with-bottom-url {
.urlbarView-title {
font-weight: var(--font-weight-semibold);
}
.urlbarView-subtitle-separator::before {
content: var(--urlbarView-separator-char);
margin: 0 var(--urlbarView-separator-margin-inline);
color: var(--text-color-deemphasized);
}
.urlbarView-row-body-bottom {
display: flex;
align-items: baseline;
min-width: 0;
}
.urlbarView-bottom-label {
text-wrap: nowrap;
}
.urlbarView-bottom-separator {
&::before {
content: var(--urlbarView-separator-char);
margin: 0 var(--urlbarView-separator-margin-inline);
color: var(--text-color-deemphasized);
}
.urlbarView-row[sponsored] &,
.urlbarView-row:not([selected], :hover) & {
display: none;
}
}
.urlbarView-url {
color: inherit;
font-size: inherit;
line-height: inherit;
text-wrap: nowrap;
.urlbarView-row[sponsored] &,
.urlbarView-row:not([selected], :hover) & {
display: none;
}
}
}
/* search bar popup */
#PopupSearchAutoComplete {
--panel-text-color: var(--toolbar-field-text-color-focus);
--panel-background-color: var(--toolbar-field-background-color-focus);
--panel-border-color: inherit;
> richlistbox > richlistitem {
width: 100%;
&[selected] {
border-radius: var(--border-radius-large);
background-color: var(--urlbarview-background-color-selected);
color: var(--urlbarview-text-color-selected);
}
> autocomplete-row-item {
width: 100%;
}
}
}
#PopupSearchAutoComplete::part(content) {
--panel-padding: var(--panel-subview-body-padding);
* for this (though it doesn't really hurt) */
display: block;
}
@media not (prefers-contrast) {
#PopupSearchAutoComplete::part(content) {
/* Remove the top border since the panel is flush with the input. */
border-top-width: 0;
}
}
#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
background: var(--urlbarview-background-color-selected);
color: var(--urlbarview-text-color-selected);
}
.urlbarView-tail150-overlay {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
background: var(--urlbarView-tail150-overlay-background);
color: var(--urlbarView-tail150-overlay-color);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
padding-block: var(--urlbar-padding-block);
border-radius: var(--toolbarbutton-border-radius);
.close-button {
position: absolute;
inset-block-start: var(--urlbar-padding-block);
inset-inline-end: var(--urlbar-padding-block);
width: var(--urlbarView-result-button-size);
height: var(--urlbarView-result-button-size);
cursor: pointer;
background: url(chrome://global/skin/icons/close.svg) no-repeat center;
background-size: round(62.5%, 2px);
-moz-context-properties: fill;
fill: currentColor;
opacity: 0.6;
&:hover {
opacity: 1;
}
&:active {
opacity: 0.8;
}
}
}
.urlbarView-tail150-canvas {
width: 400px;
height: 400px;
border: 2px solid var(--urlbarView-tail150-overlay-color);
border-radius: var(--toolbarbutton-border-radius);
margin-block-start: var(--urlbar-padding-block);
background: var(--urlbarView-tail150-canvas-background);
}