1999 lines
63 KiB
CSS
1999 lines
63 KiB
CSS
/* 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
|
||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||
|
||
@import url("chrome://browser/skin/urlbar/dynamic-results.css");
|
||
|
||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||
|
||
:host,
|
||
:root {
|
||
--urlbarView-action-slide-in-distance: 200px;
|
||
|
||
--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. */
|
||
--urlbarView-row-gutter: var(--space-xsmall);
|
||
--urlbarView-row-border: var(--urlbarView-row-gutter) solid transparent;
|
||
--urlbarView-row-border-radius: var(--urlbarview-border-radius);
|
||
--urlbarView-row-background-clip: padding-box;
|
||
|
||
--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);
|
||
|
||
--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-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-text-color-secondary: currentColor;
|
||
}
|
||
}
|
||
|
||
.urlbarView {
|
||
/* Compensate for the row's transparent border (gutter), so the selection rect
|
||
is flush with the input container's border edge. */
|
||
margin: calc(-1 * var(--urlbarView-row-gutter));
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.urlbarView-results {
|
||
white-space: nowrap;
|
||
container-type: inline-size;
|
||
|
||
.urlbar:not([noresults]) > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner > & {
|
||
padding-block-start: var(--urlbarView-padding);
|
||
|
||
:root[uidensity="compact"] & {
|
||
padding: var(--urlbarView-padding);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 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));
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
fill: currentColor;
|
||
fill-opacity: var(--urlbar-icon-fill-opacity);
|
||
border: var(--urlbarView-row-border);
|
||
border-radius: var(--urlbarView-row-border-radius);
|
||
background-clip: var(--urlbarView-row-background-clip);
|
||
|
||
/* Must hide the overflowing rows while the view is updating */
|
||
&[hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
&[context-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: var(--urlbarview-row-min-height);
|
||
}
|
||
:root[uidensity="touch"] & {
|
||
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: 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-row-padding-inline);
|
||
padding-block: var(--urlbarview-row-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;
|
||
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-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 */
|
||
|
||
.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.
|
||
|
||
Switch-to-tab rows are excluded because their URL is collapsed, which would
|
||
leave an empty second row and misplace the chiclet. The exception is when
|
||
`action-override` is active: then the chiclet is hidden and the URL is
|
||
shown, so it should wrap under the title like other rows. */
|
||
.urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type="switchtab"]) > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top,
|
||
.urlbarView[action-override]
|
||
.urlbarView-results[wrap]
|
||
> .urlbarView-row[has-url][type="switchtab"]
|
||
> .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";
|
||
row-gap: 2px;
|
||
|
||
> .urlbarView-row-body-top-no-wrap {
|
||
grid-area: title;
|
||
max-width: 100%;
|
||
|
||
> .urlbarView-title-separator {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
> .urlbarView-url {
|
||
grid-area: url;
|
||
}
|
||
|
||
> .urlbarView-explanation {
|
||
grid-area: explanation;
|
||
}
|
||
}
|
||
}
|
||
|
||
@container (width >= 450px) {
|
||
.urlbarView-row[has-explanation]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-explanation {
|
||
visibility: visible;
|
||
}
|
||
|
||
.urlbarView-results[wrap]
|
||
> .urlbarView-row[has-explanation]:is([selected], :hover)
|
||
> .urlbarView-row-inner
|
||
> .urlbarView-row-body
|
||
> .urlbarView-row-body-top {
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
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);
|
||
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;
|
||
}
|
||
|
||
/* Can't nest due to https://github.com/w3c/csswg-drafts/issues/7433 */
|
||
.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 {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-bookmark.svg#ltr-mask);
|
||
&:-moz-locale-dir(rtl) {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-bookmark.svg#rtl-mask);
|
||
}
|
||
}
|
||
> .urlbarView-type-icon {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-bookmark.svg#ltr-icon);
|
||
&:-moz-locale-dir(rtl) {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-bookmark.svg#rtl-icon);
|
||
}
|
||
}
|
||
}
|
||
|
||
.urlbarView-row:is([type="adaptive-history"], [type="history"], [type^="history_"], [type="semantic-history"]) > .urlbarView-row-inner {
|
||
> .urlbarView-favicon {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-history.svg#ltr-mask);
|
||
&:-moz-locale-dir(rtl) {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-history.svg#rtl-mask);
|
||
}
|
||
}
|
||
> .urlbarView-type-icon {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-history.svg#ltr-icon);
|
||
&:-moz-locale-dir(rtl) {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-history.svg#rtl-icon);
|
||
}
|
||
}
|
||
}
|
||
|
||
.urlbarView-row:is([type="remotetab"], [type="switchtab"], [type="tab"], [type^="tab_"]) > .urlbarView-row-inner {
|
||
> .urlbarView-favicon {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-tab.svg#ltr-mask);
|
||
&:-moz-locale-dir(rtl) {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-tab.svg#rtl-mask);
|
||
}
|
||
}
|
||
> .urlbarView-type-icon {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-tab.svg#ltr-icon);
|
||
&:-moz-locale-dir(rtl) {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-tab.svg#rtl-icon);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* `pinned` is currently only set on top sites, which have `type="top_site"`, so
|
||
this rule is mutually exclusive with the other badge rules. */
|
||
.urlbarView-row[pinned] > .urlbarView-row-inner {
|
||
> .urlbarView-favicon {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-pin.svg#ltr-mask);
|
||
&:-moz-locale-dir(rtl) {
|
||
mask-image: url(chrome://browser/skin/urlbar/badge-pin.svg#rtl-mask);
|
||
}
|
||
}
|
||
> .urlbarView-type-icon {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-pin.svg#ltr-icon);
|
||
&:-moz-locale-dir(rtl) {
|
||
background-image: url(chrome://browser/skin/urlbar/badge-pin.svg#rtl-icon);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* This should be supported within panel-{item,list} rather than modifying it, to be fixed by
|
||
https://bugzilla.mozilla.org/show_bug.cgi?id=1826841 */
|
||
.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, [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-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] {
|
||
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-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;
|
||
}
|
||
|
||
/* user context box */
|
||
.urlbarView-userContext {
|
||
border-top: 4px solid var(--identity-stroke-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 var(--space-medium);
|
||
margin-block: -2px;
|
||
margin-inline-start: 8px;
|
||
|
||
:root[uidensity="compact"] & {
|
||
padding-block: 3px;
|
||
|
||
&.urlbarView-userContext {
|
||
border-block-start-width: 3px;
|
||
}
|
||
}
|
||
|
||
&.urlbarView-tabGroup {
|
||
color: var(--tab-group-text-color);
|
||
background-color: var(--tab-group-background-color);
|
||
}
|
||
|
||
-moz-context-properties: fill, fill-opacity;
|
||
|
||
border-inline: 1px solid currentColor;
|
||
border-block-end: 1px solid currentColor;
|
||
|
||
&.urlbarView-switchToTab {
|
||
padding-inline-start: calc(var(--space-medium) + var(--urlbarview-favicon-size) + var(--space-small));
|
||
background-image: url("chrome://browser/content/firefoxview/view-opentabs.svg");
|
||
background-repeat: no-repeat;
|
||
background-position: var(--space-medium) center;
|
||
background-size: var(--urlbarview-favicon-size);
|
||
|
||
&:-moz-locale-dir(rtl) {
|
||
background-position-x: right var(--space-medium);
|
||
}
|
||
}
|
||
|
||
&:not(.urlbarView-userContext) {
|
||
border-block-start: 1px solid currentColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
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"] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > & {
|
||
/* Use visibility:collapse instead of display:none since the latter can
|
||
confuse the overflow state of these elements when their content
|
||
changes while they're hidden (bug 1549787). */
|
||
visibility: collapse;
|
||
}
|
||
}
|
||
|
||
.urlbarView-url {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.urlbarView-explanation {
|
||
visibility: collapse;
|
||
margin-inline: calc(var(--urlbarView-row-padding-inline) + var(--urlbarView-icon-margin-start));
|
||
flex: 0 0 auto;
|
||
|
||
.urlbarView-row[has-menu-button] & {
|
||
margin-inline-end: 0;
|
||
}
|
||
}
|
||
|
||
.urlbarView-url[overflow] ~ .urlbarView-explanation::before,
|
||
.urlbarView-explanation-bookmarked:not(:empty) + .urlbarView-explanation-last-visited:not(:empty)::before {
|
||
content: var(--urlbarView-separator-char);
|
||
margin: 0 var(--urlbarView-separator-margin-inline);
|
||
opacity: var(--opacity-deemphasized-strong);
|
||
}
|
||
|
||
.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: 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);
|
||
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: var(--space-medium);
|
||
-moz-context-properties: fill, fill-opacity;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: var(--urlbarview-action-button-background-color-hover);
|
||
}
|
||
|
||
&[selected],
|
||
&:hover:active {
|
||
outline: var(--focus-outline);
|
||
}
|
||
|
||
&.urlbarView-userContext {
|
||
border-top-color: var(--identity-stroke-color);
|
||
}
|
||
|
||
.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-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-row[dynamicType^="realtime-"]:not([row-selectable]) {
|
||
/* When a realtime row contains multiple items, each item is individually
|
||
selectable rather than the row. Set borders on the items so that the gutter
|
||
and selection styling applies to them and not the row. */
|
||
border: none;
|
||
> .urlbarView-realtime-root > .urlbarView-realtime-item {
|
||
border: var(--urlbarView-row-border);
|
||
border-radius: var(--urlbarView-row-border-radius);
|
||
background-clip: var(--urlbarView-row-background-clip);
|
||
}
|
||
}
|
||
|
||
.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);
|
||
|
||
/* 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-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);
|
||
border: 1px solid transparent;
|
||
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;
|
||
}
|
||
|
||
/* 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: 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;
|
||
|
||
border-color: 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);
|
||
|
||
&:-moz-locale-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;
|
||
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-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;
|
||
width: unset;
|
||
margin-inline: calc(var(--urlbarView-padding) + var(--urlbarView-favicon-margin-start));
|
||
}
|
||
|
||
#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/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-text-color: var(--toolbar-field-text-color-focus);
|
||
--panel-background-color: var(--toolbar-field-background-color-focus);
|
||
--panel-border-color: inherit;
|
||
}
|
||
|
||
#PopupSearchAutoComplete::part(content) {
|
||
--panel-padding: var(--panel-subview-body-padding);
|
||
/* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout
|
||
* 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);
|
||
}
|