summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/urlbarView.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--browser/themes/shared/urlbarView.css943
1 files changed, 943 insertions, 0 deletions
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
new file mode 100644
index 0000000000..a97c20444e
--- /dev/null
+++ b/browser/themes/shared/urlbarView.css
@@ -0,0 +1,943 @@
+/* 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");
+
+:root {
+ --autocomplete-popup-highlight-background: SelectedItem;
+ --autocomplete-popup-highlight-color: SelectedItemText;
+
+ --urlbar-popup-action-color: hsl(178, 100%, 28%);
+
+ --urlbarView-action-slide-in-distance: 200px;
+
+ --urlbarView-row-gutter: 2px;
+
+ --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
+ --urlbarView-favicon-width: 16px;
+ --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline));
+
+ --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);
+}
+
+:root:-moz-lwtheme {
+ --urlbar-popup-action-color: rgb(91,91,102);
+ --urlbar-popup-url-color: rgb(0,97,224);
+ /* Fallback colours for when theme authors don't define lwtheme variables. */
+ --autocomplete-popup-highlight-background: rgb(0, 99, 255);
+ --autocomplete-popup-highlight-color: white;
+}
+
+:root[lwt-toolbar-field-focus-brighttext] {
+ --urlbar-popup-url-color: var(--lwt-brighttext-url-color);
+ --urlbar-popup-action-color: #30e60b;
+}
+
+:root[lwt-toolbar-field-brighttext] {
+ --autocomplete-popup-highlight-background: rgb(0, 99, 225);
+}
+
+:root[lwt-toolbar-field-focus-brighttext] {
+ --urlbar-popup-action-color: rgb(191,191,201);
+}
+
+@media (prefers-contrast) {
+ :root {
+ --urlbarView-result-button-background-opacity: 100%;
+ }
+}
+
+:root:-moz-locale-dir(rtl) {
+ --urlbarView-action-slide-in-distance: -200px;
+}
+
+.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: calc(5px + var(--urlbar-container-padding));
+ width: calc(100% - 2 * (5px + var(--urlbar-container-padding)));
+ /* Match urlbar-background's border. */
+ border-inline: 1px solid transparent;
+}
+
+.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 > .urlbarView-body-inner {
+ border-top: 1px solid var(--autocomplete-popup-separator-color);
+}
+
+.urlbarView-results {
+ padding-block: 4px;
+ white-space: nowrap;
+}
+
+/* Vertically center the one-offs when no results are present. */
+.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > .urlbarView-results {
+ padding-block: 0;
+}
+
+.urlbarView-row {
+ 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(--toolbarbutton-border-radius));
+ background-clip: padding-box;
+}
+
+.urlbarView-row[row-selectable]:not([selected]):hover {
+ background-color: var(--autocomplete-popup-hover-background);
+}
+
+.urlbarView-row[selected] {
+ background-color: var(--autocomplete-popup-highlight-background);
+ color: var(--autocomplete-popup-highlight-color);
+}
+
+:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
+ min-height: 32px;
+}
+
+:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) {
+ padding-block: 11px;
+}
+
+.urlbarView-row-inner {
+ display: inline-flex;
+ flex: 1 1;
+ flex-wrap: nowrap;
+ overflow: hidden;
+ padding-inline: var(--urlbarView-item-inline-padding);
+ padding-block: 6px;
+}
+
+:root:not([uidensity=compact]) .urlbarView-row-inner {
+ min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
+}
+
+.urlbarView-row-inner,
+.urlbarView-no-wrap {
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: start;
+}
+
+.urlbarView-no-wrap {
+ display: inline-flex;
+ max-width: 100%;
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+
+.urlbarView-url {
+ flex-grow: 1;
+ flex-shrink: 1;
+}
+
+.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap,
+.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap,
+.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap {
+ /* We prioritize icons + title + action over the url, so they can grow freely,
+ but the url should never disappear when it's visible */
+ flex-shrink: 0;
+ max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
+}
+
+/* Wrap the url to a second line when the window is narrow. Do not wrap when the
+ window is also short, because fewer results will be shown. */
+@media screen and (min-height: 600px) {
+ .urlbarView-results[wrap] > .urlbarView-row:where(:not([rich-suggestion=with-icon])) > .urlbarView-row-inner {
+ flex-wrap: wrap;
+ }
+ .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
+ max-width: 100% !important;
+ flex-basis: 100%;
+ }
+ .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url,
+ .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url {
+ margin-top: 2px;
+ }
+ /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */
+ .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
+ padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+ }
+ .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
+ padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+ }
+ /* When rich suggestions are enabled the space for the icon increases to allow for larger icons */
+ .urlbarView-results[wrap]>.urlbarView-row[rich-suggestion=no-icon][has-url]>.urlbarView-row-inner>.urlbarView-url {
+ margin-inline-start: var(--urlbarView-icon-margin-end);
+ }
+ /* Note: switchtab entries show the url only in override mode,
+ remotetab and sponsored ones only when selected or :hover. */
+ .urlbarView[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+ .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab], [sponsored]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+ .urlbarView-results[wrap] > .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+ .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title-separator,
+ .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator {
+ display: none;
+ }
+ .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
+ flex-wrap: wrap;
+ }
+ .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ flex-basis: 100%;
+ margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
+ }
+
+ .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
+ flex-wrap: wrap;
+ }
+ .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+ flex-basis: 100%;
+ }
+}
+
+.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[isurl]):-moz-locale-dir(rtl) {
+ mask-image: linear-gradient(to right, transparent, black 2em);
+}
+
+.urlbarView-title[isurl]:-moz-locale-dir(rtl),
+.urlbarView-url:-moz-locale-dir(rtl) {
+ direction: ltr !important;
+}
+
+.urlbarView-url:-moz-locale-dir(rtl) {
+ /* .urlbarView-url can grow due to `flex-grow: 1`, 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;
+}
+
+/* Rich Suggestions */
+
+.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner > .urlbarView-favicon {
+ width: 28px;
+ height: 28px;
+ margin-inline-end: 8px;
+}
+
+.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner {
+ padding-block: 4px;
+ flex-wrap: nowrap;
+}
+
+.urlbarView-row[rich-suggestion=no-icon]:not([firefox-suggest-sponsored]) .urlbarView-favicon {
+ margin-inline: 4px 16px;
+}
+
+.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner > .urlbarView-no-wrap {
+ display: grid;
+ grid-template-columns: repeat(3, min-content);
+ align-items: center;
+ flex-shrink: 1;
+}
+
+.urlbarView-row[rich-suggestion=with-icon]:not(:hover) .urlbarView-action {
+ visibility: collapse;
+}
+
+.urlbarView-description {
+ /* We want the description to be last visually but to be after the title
+ in the screenreader */
+ order: 2;
+ grid-area: 2 / 1 / 3 / 4;
+}
+
+/* Favicon */
+
+.urlbarView-favicon {
+ width: var(--urlbarView-favicon-width);
+ height: var(--urlbarView-favicon-width);
+ margin-inline-end: var(--urlbarView-icon-margin-end);
+ background-repeat: no-repeat;
+ background-size: contain;
+ object-fit: contain;
+ flex-shrink: 0;
+ -moz-context-properties: fill, fill-opacity;
+}
+
+.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+ visibility: hidden;
+}
+
+.urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+ /* 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(--urlbar-popup-url-color);
+ -moz-context-properties: fill;
+}
+
+/* Type icon */
+
+.urlbarView-type-icon {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ margin-top: var(--urlbarView-favicon-width);
+ margin-inline-start: 8px;
+ 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 > .urlbarView-no-wrap > .urlbarView-type-icon {
+ background-image: url(chrome://browser/skin/bookmark-12.svg);
+ fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
+ background-image: url(chrome://browser/skin/pin-12.svg);
+ fill: rgb(91,91,102);
+}
+
+:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
+ fill: rgb(251,251,254);
+}
+
+/* Buttons */
+
+.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: 100%;
+}
+
+.urlbarView-button[selected] {
+ outline: var(--focus-outline);
+ outline-color: var(--autocomplete-popup-highlight-color);
+ outline-offset: 1px;
+}
+
+.urlbarView-row:is([row-selectable]:hover, [selected]) > .urlbarView-button:not(:hover, [open]) {
+ color: var(--urlbarView-result-button-selected-color);
+ background-color: var(--urlbarView-result-button-selected-background-color);
+}
+
+.urlbarView-button:is(:hover, [open]) {
+ color: var(--urlbarView-result-button-hover-color);
+ background-color: var(--urlbarView-result-button-hover-background-color);
+}
+
+.urlbarView-button + .urlbarView-button {
+ margin-inline-start: 0;
+}
+
+.urlbarView-button-block {
+ background-image: url("chrome://browser/skin/thumb-down.svg");
+}
+
+.urlbarView-button-help {
+ background-image: url("chrome://global/skin/icons/help.svg");
+}
+
+/* Result menu button */
+
+.urlbarView-button-menu {
+ background-image: url("chrome://global/skin/icons/more.svg");
+ background-color: var(--button-bgcolor);
+}
+
+.urlbarView-results:not([disable-resultmenu-autohide]) > .urlbarView-row:not(:hover, [selected]) > .urlbarView-row-inner + .urlbarView-button-menu:not([open]):empty {
+ display: none;
+}
+
+/* Labeled result menu button */
+
+.urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-button-menu:not(:empty) {
+ display: inline-flex;
+ align-items: center;
+ border-radius: var(--urlbarView-result-button-size);
+ padding-inline: 8px 26px;
+ background-position-x: right 4px;
+ font-size: 0.85em;
+}
+
+.urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-button-menu:not(:empty):-moz-locale-dir(rtl) {
+ background-position-x: left 4px;
+}
+
+.urlbarView-results[wrap] > .urlbarView-row > .urlbarView-button-menu:not(:empty) {
+ /* Hide the label in narrow windows. */
+ font-size: 0;
+}
+
+/* Button with label, e.g. tip button */
+
+.urlbarView-button:not(:empty, .urlbarView-button-menu) {
+ border-radius: var(--toolbarbutton-border-radius);
+ padding: 7px;
+ font-size: 0.93em;
+ font-weight: 600;
+ background-clip: padding-box;
+ min-height: 16px;
+ min-width: 8.75em;
+ text-align: center;
+ flex-basis: initial;
+ flex-shrink: 0;
+}
+
+.urlbarView-button:not(:empty, :hover, .urlbarView-button-menu) {
+ background-color: var(--button-bgcolor);
+}
+
+.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected] {
+ color: var(--button-primary-color);
+ background-color: var(--button-primary-bgcolor);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected]:hover {
+ background-color: var(--button-primary-hover-bgcolor);
+}
+
+.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected]:hover:active {
+ background-color: var(--button-primary-active-bgcolor);
+}
+
+.urlbarView-button:not(:empty) + .urlbarView-button:empty {
+ /* Add space between a labeled button followed by an unlabeled button. */
+ margin-inline-start: 1.8em;
+}
+
+.urlbarView-button:not(:empty, .urlbarView-button-menu):last-child {
+ /* Add space between a labeled button and the trailing edge of the panel. */
+ margin-inline-end: 1.8em;
+}
+
+/* Tip rows */
+
+.urlbarView-row[type=tip] {
+ padding-block: 18px;
+ border-radius: 0;
+}
+
+.urlbarView-row[type=tip]:not(:last-child) {
+ border-bottom: 1px solid var(--autocomplete-popup-separator-color);
+ margin-bottom: 4px;
+}
+
+.urlbarView-row[type=tip]:not(:first-child) {
+ border-top: 1px solid var(--autocomplete-popup-separator-color);
+ margin-top: 4px;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner {
+ min-height: 32px;
+
+ /* Add space between the tip title (and the rest of row-inner) and its
+ button. */
+ margin-inline-end: 1.8em;
+}
+
+.urlbarView-row[type=tip]:not([tip-type=dismissalAcknowledgment]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+ width: 24px;
+ height: 24px;
+ margin-inline-end: 12px;
+ flex-basis: 24px;
+ flex-grow: 0;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-url {
+ display: none;
+}
+
+.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
+ white-space: normal;
+}
+
+.urlbarView-row[type=tip][tip-type=dismissalAcknowledgment] {
+ padding-block: 6px;
+}
+
+/* Row label (a.k.a. group label) */
+
+.urlbarView-row[label]::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: calc(-1.27em - 2px);
+ 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;
+}
+:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before {
+ /* Same as `.search-panel-header > label` in searchbar.css */
+ opacity: 1;
+}
+
+.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: calc(1.46em + 4px);
+}
+
+/* Feedback acknowledgment */
+
+.urlbarView-row[feedback-acknowledgment]::after {
+ content: attr(feedback-acknowledgment);
+ display: flex;
+ align-items: center;
+ position: absolute;
+ bottom: 0.72em;
+ font-size: 0.85em;
+ margin-inline-start: var(--urlbarView-item-inline-padding);
+ padding-inline-start: calc(var(--urlbarView-favicon-width) + 6px);
+ background-image: url("chrome://branding/content/icon32.png");
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ background-size: var(--urlbarView-favicon-width);
+ min-height: var(--urlbarView-favicon-width);
+}
+
+.urlbarView-row[feedback-acknowledgment] {
+ position: relative;
+ padding-bottom: 1.94em;
+}
+
+/* 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;
+}
+
+/* Tail suggestions */
+.urlbarView-tail-prefix {
+ display: none;
+ justify-content: flex-end;
+ white-space: pre;
+}
+
+.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix {
+ display: inline-flex;
+}
+
+.urlbarView-tail-prefix > .urlbarView-tail-prefix-string {
+ visibility: hidden;
+}
+
+.urlbarView-tail-prefix > .urlbarView-tail-prefix-char {
+ position: absolute;
+}
+
+/* Title separator */
+
+.urlbarView-title-separator::before {
+ content: "\2014";
+ margin: 0 .4em;
+ opacity: 0.6;
+}
+
+.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator {
+ display: none;
+}
+
+/* URLs, action labels, tags */
+
+.urlbarView-tags,
+.urlbarView-url,
+.urlbarView-title:not(:empty) ~ .urlbarView-action {
+ font-size: .85em;
+}
+
+.urlbarView-title:not(:empty) ~ .urlbarView-action {
+ color: var(--urlbar-popup-action-color);
+}
+
+.urlbarView-row[sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ color: unset;
+ opacity: .6;
+}
+
+.urlbarView-row[sponsored][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row[sponsored] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-action {
+ opacity: 1;
+}
+
+/* Firefox Suggest sponsored results */
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner {
+ /* 0px of top padding because the space between the favicon/title and the top
+ edge of the row is determined by the favicon margin-top and we don't want
+ any extra padding to complicate that. 1px of bottom padding so the bottom
+ edge of the action isn't touching the bottom edge of the row. The space
+ between the bottom edge of the favicon and the bottom edge of the row is
+ determined by this + the action margin-top. */
+ padding-block: 0 1px;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap {
+ /* Wrap the action span onto a new row. */
+ flex-wrap: wrap;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+ /* The favicon should be vertically centered in the row. The action span wraps
+ below the favicon and title, leaving the favicon centered with the title,
+ not the row, so we add margin-top. Normally there is 8x between the top
+ edge of the favicon and the top edge of the row. Here 1em = 13.75px, so
+ that's 8 / 13.75 =~ 0.58em. */
+ margin-top: 0.58em;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
+ /* The width of favicon + this title element + help icon is over than total
+ displayed width, favicon and title will collapse as different row, the style
+ will be broken. To avoid it, we specify the max displayable width for title
+ explicitly. */
+ flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end));
+ /* Move the title away from the action a little. This does not affect the
+ height of the row. */
+ margin-top: -0.3em;
+}
+
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ flex-basis: 100%;
+ margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
+ font-size: 0.73em;
+ /* This value + the bottom padding control the space between the bottom edge
+ of the favicon and the bottom edge of the row. The bottom padding is 1px,
+ leaving 8px - 1px = 7px we need to make up here. Here 1em = 0.73 * 13.75 =~
+ 10px, so that's 7 / 10 = 0.7em. However, the action itself takes up some of
+ that space, so it's not that simple. The value used here was arrived at by
+ trial and error and is approximately 5px. */
+ margin-top: -0.5em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ /* The slide-in effect is delayed ~100ms to reduce motion during result
+ composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
+ seen by the user until after the delay. */
+ @keyframes urlbarView-action-slide-in {
+ 0%, 28.6% {
+ translate: var(--urlbarView-action-slide-in-distance);
+ opacity: 0;
+ }
+ 100% {
+ translate: 0;
+ opacity: 1;
+ }
+ }
+
+ .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title:not(:empty) ~ .urlbarView-action[slide-in] {
+ animation-name: urlbarView-action-slide-in;
+ animation-duration: 350ms;
+ animation-timing-function: var(--animation-easing-function);
+ }
+}
+
+.urlbarView-url {
+ color: var(--urlbar-popup-url-color);
+ /* Increase line-height to avoid cutting overhanging glyphs due to masking on
+ the element */
+ line-height: 1.4;
+}
+
+.urlbarView-row:is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url,
+.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
+ color: inherit;
+}
+
+.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > .urlbarView-url,
+.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
+ /* Use visibility:collapse instead of display:none since the latter can
+ confuse the overflow state of title and url elements when their content
+ changes while they're hidden. */
+ visibility: collapse;
+}
+
+.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row:is([type=search], [restyled-search]):not([selected], [rich-selection], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
+.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
+.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ display: none;
+}
+
+/* Switch-to-tab action text is styled as a chiclet. */
+.urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ color: var(--urlbar-box-text-color);
+ background-color: var(--urlbar-box-focus-bgcolor);
+ border-radius: var(--toolbarbutton-border-radius);
+ padding: 6px 8px;
+ margin-block: -6px;
+ margin-inline-start: 8px;
+}
+
+:root[uidensity=compact] .urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ padding: 3px 6px;
+ margin-block: -3px;
+}
+
+.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
+ color: var(--urlbarView-result-button-selected-color);
+ background-color: var(--urlbarView-result-button-selected-background-color);
+}
+
+.urlbarView-row[type=remotetab]:not([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before,
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .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;
+ /* -1em for the width of the \2014 character. -.4em to offset the
+ margin-inline-start already set on this element. */
+ margin-inline-end: -1.4em;
+}
+
+/* Tags */
+
+.urlbarView-tags {
+ display: flex;
+ /* 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: .4em;
+ border-radius: 4px;
+}
+
+/* Best match */
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
+ align-items: center;
+ justify-content: start;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner,
+.urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
+ flex-wrap: nowrap;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-favicon {
+ width: 52px;
+ height: 52px;
+ flex-basis: 52px;
+ flex-shrink: 0;
+ flex-grow: 0;
+ border-radius: 2px;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body {
+ flex-grow: 1;
+ flex-shrink: 1;
+ min-width: 0;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ align-items: center;
+ justify-content: start;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ align-items: center;
+ justify-content: start;
+ flex-shrink: 0;
+ min-width: 0;
+}
+
+.urlbarView-results:not([wrap]) > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
+ /* Limit the title (which is inside .urlbarView-row-body-top-no-wrap) to 70%
+ of the width so the URL is never completely hidden. */
+ max-width: 70%;
+}
+
+.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom {
+ font-size: 0.73em;
+ opacity: 0.6;
+}
+
+.urlbarView-row[type=bestmatch][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom {
+ opacity: 1;
+}
+
+/* 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(--autocomplete-popup-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(--toolbarbutton-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-no-wrap > .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-no-wrap > .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-no-wrap > .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-no-wrap > .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-no-wrap > .urlbarView-favicon,
+#urlbar-engine-one-off-item-bookmarks[selected] {
+ fill: currentColor;
+ fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+/* search bar popup */
+
+#PopupSearchAutoComplete {
+ --panel-color: var(--toolbar-field-focus-color);
+ --panel-background: var(--toolbar-field-focus-background-color);
+ --panel-border-color: var(--arrowpanel-border-color);
+}
+
+#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(--autocomplete-popup-highlight-background);
+ color: var(--autocomplete-popup-highlight-color);
+}