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-secondary-text-color: color-mix(in srgb, currentColor 73%, transparent);
--urlbarView-action-slide-in-distance: 200px;
--urlbarView-small-font-size: 0.85em;
--urlbarView-results-padding: 7px;
--urlbarView-row-gutter: var(--space-xxsmall);
--urlbarView-item-inline-padding: var(--urlbar-icon-padding);
--urlbarView-item-block-padding: 6px;
/* 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. */
--urlbarView-favicon-size: 16px;
--urlbarView-rich-search-suggestion-icon-size: 28px;
/* Inline margins required for center-aligning favicons along the icon axis.
Icons larger than rich search suggestion icons also use these margins so
that they are left-aligned with favicons. */
--urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarView-favicon-size)) / 2);
--urlbarView-favicon-margin-end: calc(
var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarView-favicon-size)) / 2)
);
--urlbarView-top-pick-large-icon-box-size: 52px;
--urlbarView-result-button-size: 24px;
--urlbarView-result-button-background-opacity: 60%;
--urlbarView-result-button-selected-color: var(--toolbar-field-focus-color);
--urlbarView-result-button-selected-background-color: color-mix(
in srgb,
var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity),
transparent
);
--urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color);
--urlbarView-result-button-hover-background-color: color-mix(
in srgb,
var(--toolbar-field-focus-color) 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-action-button-background-color: color-mix(in srgb, var(--urlbarview-background-color-hover) 50%, transparent);
--urlbarView-action-button-hover-background-color: var(--urlbarview-background-color-hover);
--urlbarView-tail150-overlay-background: var(--color-violet-90);
--urlbarView-tail150-overlay-color: var(--color-gray-05);
--urlbarView-tail150-canvas-background: var(--color-violet-110);
--urlbarView-separator-char: "•" / "—";
--urlbarView-separator-margin-inline: 0.6em;
&:-moz-locale-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-secondary-text-color: currentColor;
}
}
.urlbarView {
/* Don't handle window drag events in case we are overlapping a toolbar */
-moz-window-dragging: no-drag;
display: block;
text-shadow: none;
overflow: clip;
margin-inline: var(--urlbarView-results-padding);
width: calc(100% - 2 * var(--urlbarView-results-padding));
}
.urlbarView-body-inner {
width: calc(100% + 2 * var(--urlbarView-row-gutter));
margin-inline: calc(-1 * var(--urlbarView-row-gutter));
#urlbar[open] > .urlbarView > .urlbarView-body-outer > & {
border-top: 1px solid var(--urlbarview-separator-color);
}
}
.urlbarView-results {
padding-block: calc(var(--urlbarView-results-padding) - var(--urlbarView-row-gutter));
white-space: nowrap;
/* Vertically center the one-offs when no results are present. */
.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > & {
padding-block: 0;
}
}
/* Row structure */
.urlbarView-row {
--urlbarView-icon-size: var(--urlbarView-favicon-size);
--urlbarView-icon-margin-start: var(--urlbarView-favicon-margin-start);
--urlbarView-icon-margin-end: var(--urlbarView-favicon-margin-end);
--urlbarView-icon-border-radius: 0;
&[icon-size="24"] {
--urlbarView-icon-size: 24px;
}
&[icon-size="28"] {
--urlbarView-icon-size: 28px;
}
&[icon-size="32"] {
--urlbarView-icon-size: 32px;
}
&[icon-size="52"] {
--urlbarView-icon-size: 52px;
}
/* Inline margins required for center-aligning icons no larger than rich search
suggestion icons. Larger icons are left-aligned with favicons. */
&[icon-size="24"],
&[icon-size="28"] {
--urlbarView-icon-margin-start: calc((var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarView-icon-size)) / 2);
--urlbarView-icon-margin-end: calc(
var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-search-suggestion-icon-size) - var(--urlbarView-icon-size)) / 2)
);
}
display: flex;
align-items: center;
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
/* Use a transparent border rather than margin such that the view's entire
hover area is contiguous and a row is always hovered as the user moves the
mouse across rows, even though each row's highlighted area is smaller. */
border: var(--urlbarView-row-gutter) solid transparent;
border-radius: calc(var(--urlbarView-row-gutter) + var(--urlbar-inner-border-radius));
background-clip: padding-box;
/* Must hide the overflowing rows while the view is updating */
&[hidden] {
display: none !important;
}
&[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: 32px;
}
:root[uidensity="touch"] & {
padding-block: 11px;
}
}
&[type="rich-search"] {
:root:not([uidensity="compact"]) & {
min-height: 46px;
}
:root[uidensity="touch"] & {
padding-block: 4px;
}
}
}
.urlbarView-row-inner {
display: inline-flex;
align-items: center;
justify-content: start;
flex: auto;
overflow: hidden;
padding-inline: var(--urlbarView-item-inline-padding);
padding-block: var(--urlbarView-item-block-padding);
:root:not([uidensity="compact"]) & {
min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
}
}
.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: 0 0 auto;
min-width: 0;
max-width: 100%;
}
.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-secondary-text-color);
}
}
.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 */
.urlbarView-row-body-top-no-wrap {
/* When wrapping is not enabled, show the URL next to the title and give the
title and other elements in the no-wrap a max width to ensure the URL is at
least partially visible. */
.urlbarView[action-override] .urlbarView-row[has-url] &,
.urlbarView-row[has-url]:not([type$="tab"]) &,
.urlbarView-row[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]) & {
max-width: 70%;
}
}
@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] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
flex-wrap: wrap;
> .urlbarView-row-body-top-no-wrap {
flex-basis: 100%;
max-width: 100%;
> .urlbarView-title-separator {
display: none;
}
}
> .urlbarView-url,
> .urlbarView-explanation {
margin-top: 2px;
}
}
}
/* 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);
}
.urlbarView-overflowable[overflow]:not(.urlbarView-title[is-url]):-moz-locale-dir(rtl) {
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;
-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;
}
.urlbarView-row[type="rich-search"] > .urlbarView-row-inner > & {
border-radius: var(--border-radius-circle);
}
}
/* Type icon (favicon badge) */
.urlbarView-type-icon {
position: absolute;
width: var(--icon-size-xsmall);
height: var(--icon-size-xsmall);
align-self: center;
margin-top: var(--urlbarView-favicon-size);
margin-inline-start: calc(var(--urlbarView-icon-margin-start) + var(--urlbarView-favicon-size) - 6px);
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill, stroke;
stroke: var(--toolbar-field-focus-background-color);
/* Favicon badges have this priority: pinned > bookmark. */
.urlbarView-row[type="bookmark"] > .urlbarView-row-inner > & {
background-image: url(chrome://browser/skin/bookmark-12.svg);
fill: var(--toolbarbutton-icon-fill-attention);
}
.urlbarView-row[pinned] > .urlbarView-row-inner > & {
background-image: url(chrome://browser/skin/pin-12.svg);
fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
}
/* The following badges are used for debugging purposes */
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("browser.urlbar.showDebuggingIcons") {
.urlbarView-row[type] > .urlbarView-row-inner > &::before {
display: flex;
position: absolute;
background-color: var(--button-background-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";
}
}
}
/* Buttons */
.urlbarView-row-buttons {
display: flex;
align-items: center;
justify-content: end;
flex-wrap: wrap;
}
.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(:hover, [selected], [primary], [open]) {
@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, [open]) {
color: var(--urlbarView-result-button-selected-color);
background-color: var(--urlbarView-result-button-selected-background-color);
}
&:is(:hover, [open]) {
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);
.urlbarView-results:not([disable-resultmenu-autohide])
> .urlbarView-row:not(:hover, [selected], [descendant-selected])
> .urlbarView-row-buttons
> &:not([open]):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);
&:-moz-locale-dir(rtl) {
background-position-x: left 4px;
}
}
.urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-buttons > & {
/* Hide the label in narrow windows. */
font-size: 0;
}
}
}
/* Button with label, e.g. tip button */
.urlbarView-button:where(:not(:empty):not(.urlbarView-button-result-menu)),
.urlbarView-splitbutton-dropmarker {
border-radius: var(--urlbar-inner-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, [open]) {
background-color: var(--button-background-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] {
position: relative;
/* `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. */
top: var(--urlbarView-labeled-row-label-top);
margin-inline-start: var(--urlbarView-item-inline-padding);
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-focus-color);
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] {
position: relative;
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-item-inline-padding) + 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;
}
/* user context box */
.urlbarView-userContext {
border-top: 4px solid var(--identity-tab-color);
}
.urlbarView-userContext-icon {
height: 14px;
width: 14px;
-moz-context-properties: fill;
vertical-align: top;
}
.urlbarView-userContext-textMode > span {
font-variant: small-caps;
}
/* Display userContext icon instead of text when window is too narrow. */
.urlbarView-results[wrap] .urlbarView-userContext-textMode,
.urlbarView-results:not([wrap]) .urlbarView-userContext-iconMode {
display: none;
}
/* Display a shortened version of the tab label when window is too narrow. */
.urlbarView-results[wrap] .urlbarView-tabGroup-fullWidthMode,
.urlbarView-results:not([wrap]) .urlbarView-tabGroup-narrowWidthMode {
display: none;
}
/* Force the tab group result chiclet to appear at full height, even if it has
* no text in it. This is the case if the group has no name and the chiclet is
* in narrow mode. */
.urlbarView-results[wrap] .urlbarView-tabGroup-narrowWidthMode {
display: inline-block;
}
/* 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-title:empty + .urlbarView-tags:empty + &,
.urlbarView-row:is([type="search"], [type="rich-search"], [restyled-search]):not([selected], [show-action-text], :hover) &,
.urlbarView-row:not([has-action], [has-url], [restyled-search]) & {
display: none;
}
#searchbar-new & {
display: none;
}
}
/* Action labels */
.urlbarView-action {
white-space: nowrap;
.urlbarView-title:not(:empty) ~ & {
font-size: var(--urlbarView-small-font-size);
&[slide-in] {
@media (prefers-reduced-motion: no-preference) {
animation-name: urlbarView-action-slide-in;
animation-duration: 350ms;
animation-timing-function: var(--animation-easing-function);
}
}
}
.urlbarView-row[sponsored]:not([selected]) & {
color: var(--text-color-deemphasized);
}
.urlbarView-row:not([has-action], [has-url], [restyled-search]) & {
display: none;
}
/* If action visibility can be toggled the height should always stay the same. */
.urlbarView-row[has-url]:is([type="remotetab"], [sponsored]):is([selected], :hover) &,
.urlbarView-row:is([type="search"], [type="rich-search"], [restyled-search]):not([selected], [show-action-text], :hover) &,
.urlbarView[action-override] .urlbarView-row[type="switchtab"] & {
visibility: hidden;
width: 0;
margin-inline: 0;
/* The !important is for the switch-to-tab chiclet when action-override is set.
Farther down below we add extra padding on .urlbarView-switchToTab to
account for the tab icon. Without !important here, that padding is
visible even when the chiclet is hidden due to action-override. */
padding-inline: 0 !important;
border-inline: 0;
}
#searchbar-new & {
display: none;
}
}
/* 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;
}
}
/* Switch-to-tab and Clipboard action text is styled as a chiclet. */
.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
.urlbarView-action {
border-radius: var(--urlbar-border-radius);
padding: 4px 8px;
margin-block: -2px;
margin-inline-start: 8px;
:root[uidensity="compact"] & {
padding-block: 3px;
&.urlbarView-userContext {
border-block-start-width: 3px;
}
}
&.urlbarView-tabGroup {
color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark));
background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
}
-moz-context-properties: fill, fill-opacity;
border-inline: 1px solid var(--border-color-deemphasized);
border-block-end: 1px solid var(--border-color-deemphasized);
&.urlbarView-switchToTab {
padding-inline-start: calc(var(--urlbarView-favicon-size) + 8px);
background-image: url("chrome://browser/content/firefoxview/view-opentabs.svg");
background-repeat: no-repeat;
background-position: 4px center;
background-size: var(--urlbarView-favicon-size);
}
&:not(.urlbarView-userContext) {
border-block-start: 1px solid var(--border-color-deemphasized);
}
&:-moz-locale-dir(rtl) {
background-position-x: right 4px;
}
}
}
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"],
.urlbarView-row[type="remotetab"]:not([selected], :hover),
.urlbarView-row[type="clipboard"] {
.urlbarView-title-separator::before {
/* We make the title separator transparent so it stays in the accessibility
tree. We want screen readers to pause between the result title and the
switch-to-tab action text. */
opacity: 0;
/* -0.46em for the width of the "•" character. -.4em to offset the
margin-inline-start already set on this element. */
margin-inline-end: -0.86em;
}
}
/* URLs and result explanations */
.urlbarView-url,
.urlbarView-explanation {
flex: auto;
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-row:is([type="remotetab"], [sponsored]):not([selected], :hover) &,
.urlbarView-row:is([show-action-text], [restyled-search]) &,
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] & {
/* Use visibility:collapse instead of display:none since the latter can
confuse the overflow state of these elements when their content
visibility: collapse;
}
}
.urlbarView-explanation {
visibility: collapse;
}
.urlbarView-row[has-explanation]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
> .urlbarView-explanation {
visibility: visible;
}
> .urlbarView-url {
visibility: collapse;
}
}
.urlbarView-title[is-url]:-moz-locale-dir(rtl),
.urlbarView-url:-moz-locale-dir(rtl) {
direction: ltr !important;
}
.urlbarView-url:-moz-locale-dir(rtl),
.urlbarView-explanation:-moz-locale-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-block: 0;
border-radius: 0;
&: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: 32px;
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-results-padding));
}
}
}
}
/* Firefox Suggest rows */
.urlbarView-row[type$="_amo"][icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon {
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 24px) / 2);
background-color: var(--urlbar-box-background-color-focus);
border-radius: var(--border-radius-xsmall);
}
.urlbarView-row[type$="_amo"][icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
background-color: var(--urlbarView-result-button-selected-background-color);
}
.urlbarView-row[type$="_vpn"][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon {
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 32px) / 2);
}
.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-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-size) + var(--urlbarView-icon-margin-end)
);
margin-block-end: var(--urlbarView-item-block-padding);
}
.urlbarView-action-btn {
font-size: smaller;
font-weight: var(--font-weight-semibold);
border-radius: var(--urlbar-border-radius);
border: 1px solid transparent;
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);
> img {
width: 16px;
height: 16px;
margin-inline-end: 0.4em;
-moz-context-properties: fill, fill-opacity;
}
&:hover {
background-color: var(--urlbarView-action-button-hover-background-color);
}
&[selected],
&:hover:active {
outline: var(--focus-outline);
}
&.urlbarView-userContext {
border-top-color: var(--identity-tab-color);
}
.urlbarView[action-override] &[data-action="tabswitch"] {
display: none;
}
&[data-action^="tabgroup-"] {
color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark));
background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
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 {
opacity: 0.8;
}
> .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-item-block-padding) calc(5 * var(--urlbarView-item-block-padding));
padding-block: 0;
border-block: none;
border-radius: var(--border-radius-medium);
@media not (prefers-contrast) {
background-color: color-mix(in srgb, var(--button-background-color) 30%, transparent);
}
> .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-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;
/* This should match the radius on `.urlbarView-row`. Only visible when there
are multiple items in a row. */
border-radius: calc(var(--urlbarView-row-gutter) + var(--urlbar-border-radius));
/* Inline spacing between multiple items in a row */
margin-inline-end: var(--space-small);
/* 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. */
padding: var(--urlbarView-item-inline-padding);
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-large-icon-box-size);
height: var(--urlbarView-top-pick-large-icon-box-size);
margin-inline-end: var(--space-medium);
border: 1px solid transparent;
border-radius: var(--border-radius-small);
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-bottom {
display: flex;
align-items: center;
font-size: var(--urlbarView-small-font-size);
color: var(--urlbarView-secondary-text-color);
}
> .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;
}
/* stylelint-disable-next-line max-nesting-depth */
&: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] {
border-color: 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: 52px;
height: 52px;
flex-basis: 52px;
}
> .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;
border-color: color-mix(in srgb, currentColor 10%, transparent);
background-color: var(--urlbar-box-background-color-focus);
&[backgroundImageId] {
background-position: center;
-moz-context-properties: fill, stroke;
fill: var(--airline-color, currentColor);
stroke: var(--airline-color, currentColor);
}
&[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] {
/* Move up the progress image if exists */
background-position-y: bottom 12px;
/* Move the foreground image to the end corner */
display: flex;
justify-content: end;
align-items: end;
}
> .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[is-fallback] {
flex-direction: column;
background-color: var(--violet-bg-color);
background-position: center;
background-repeat: no-repeat;
border-color: color-mix(in srgb, currentColor 10%, transparent);
color: var(--violet-fg-color);
fill: var(--violet-fg-color);
-moz-context-properties: fill;
> .urlbarView-sports-scheduled-date-chiclet-day {
font-size: 1.25em;
}
/* Fallback icons per sport but only for games not in the future */
.urlbarView-realtime-item:not([status="scheduled"]) > & {
.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-scheduled-date-chiclet-day,
> .urlbarView-sports-scheduled-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 {
font-weight: var(--font-weight-bold);
}
> .urlbarView-sports-score {
font-weight: var(--font-weight-bold);
margin-inline-start: var(--space-xsmall);
}
}
> .urlbarView-realtime-description-bottom {
> .urlbarView-sports-status {
color: var(--green-status-color);
font-weight: var(--font-weight-bold);
}
}
}
}
/* Search one-offs */
#urlbar .search-one-offs:not([hidden]) {
display: flex;
align-items: start;
padding-block: 10px;
flex-wrap: wrap;
}
.urlbarView:not([noresults]) > .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-item-inline-padding) 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/quickactions.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-color: var(--toolbar-field-focus-color);
--panel-background: var(--toolbar-field-focus-background-color);
--panel-border-color: inherit;
}
#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);
}