зеркало из https://github.com/mozilla/gecko-dev.git
893 строки
31 KiB
CSS
893 строки
31 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");
|
|
|
|
: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-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));
|
|
}
|
|
|
|
: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);
|
|
}
|
|
|
|
: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: 100%;
|
|
}
|
|
|
|
#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 {
|
|
fill: currentColor;
|
|
fill-opacity: var(--urlbar-icon-fill-opacity);
|
|
padding-block: 2px;
|
|
}
|
|
|
|
: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: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
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[has-buttons] > .urlbarView-row-inner {
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
/* For rows with buttons, row-inner is the main selectable part of the row,
|
|
and it takes up the entire row width except for the buttons.
|
|
28px = 24px button width + 4px margin-inline between buttons
|
|
12px = row-inner padding
|
|
2px = horizontally align last button with the one-off settings button */
|
|
width: calc(100% - (var(--button-count, 0) * 28px) - 12px - 2px);
|
|
}
|
|
|
|
.urlbarView-row[type=tip] {
|
|
padding-block-start: 18px;
|
|
/* Compensating for the 16px bottom margin on the tip elements. */
|
|
padding-block-end: calc(18px - 16px);
|
|
padding-inline-end: var(--urlbarView-icon-margin-end);
|
|
}
|
|
|
|
.urlbarView-row-inner,
|
|
.urlbarView-no-wrap {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: start;
|
|
}
|
|
|
|
.urlbarView-no-wrap {
|
|
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 > .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));
|
|
}
|
|
/* 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%;
|
|
}
|
|
}
|
|
|
|
/* We should always wrap tip results at narrow widths regardless of screen
|
|
height. Unlike regular results, unwrapped tips are taller than wrapped
|
|
tips. */
|
|
.urlbarView-results[wrap] > .urlbarView-row[type=tip] > .urlbarView-row-inner {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow],
|
|
.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow],
|
|
.urlbarView-tags[overflow],
|
|
.urlbarView-url[overflow] {
|
|
mask-image: linear-gradient(to left, transparent, black 2em);
|
|
}
|
|
|
|
.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([isurl]):-moz-locale-dir(rtl),
|
|
.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title[overflow]:-moz-locale-dir(rtl),
|
|
.urlbarView-tags[overflow]:-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;
|
|
}
|
|
|
|
.urlbarView-row:not([type=tip], [type=dynamic], [has-buttons]):hover > .urlbarView-row-inner,
|
|
.urlbarView-row[has-buttons] > .urlbarView-row-inner:not([selected]):hover {
|
|
background-color: var(--autocomplete-popup-hover-background);
|
|
}
|
|
|
|
.urlbarView-row:not([type=tip], [type=dynamic])[selected] > .urlbarView-row-inner,
|
|
.urlbarView-row-inner[selected] {
|
|
background-color: var(--autocomplete-popup-highlight-background);
|
|
color: var(--autocomplete-popup-highlight-color);
|
|
}
|
|
|
|
/* 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[type=tip] > .urlbarView-row-inner > .urlbarView-favicon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-inline-end: 12px;
|
|
flex-basis: 24px;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.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(--toolbar-field-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: 24px;
|
|
min-height: 24px;
|
|
vertical-align: middle;
|
|
background-size: 16px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
margin-inline: 4px;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
}
|
|
|
|
.urlbarView-button[selected] {
|
|
outline: var(--focus-outline);
|
|
}
|
|
|
|
.urlbarView-button:hover,
|
|
.urlbarView-button[open] {
|
|
background-color: var(--autocomplete-popup-hover-background);
|
|
}
|
|
|
|
.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");
|
|
}
|
|
|
|
.urlbarView-button-menu {
|
|
background-image: url("chrome://global/skin/icons/more.svg");
|
|
}
|
|
|
|
/* Tip rows */
|
|
|
|
.urlbarView-row[type=tip]:not(:last-child) {
|
|
border-bottom: 1px solid var(--panel-separator-color);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.urlbarView-row[type=tip]:not(:first-child) {
|
|
border-top: 1px solid var(--panel-separator-color);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.urlbarView-row[type=tip] > .urlbarView-row-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* For tips, give the title some bottom margin so that when the window is narrow
|
|
and the buttons wrap below it, there's space between it and the buttons. We
|
|
then need to give the same bottom margin to the other tip elements so that
|
|
they all remain vertically aligned. */
|
|
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon,
|
|
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title,
|
|
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-button-help,
|
|
.urlbarView-tip-button {
|
|
margin-block-end: 16px;
|
|
}
|
|
|
|
.urlbarView-tip-button,
|
|
.urlbarView-row:is([type=tip], [dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help {
|
|
min-height: 16px;
|
|
padding: 7px;
|
|
}
|
|
|
|
/* The tip button is a Photon default button when unfocused and a
|
|
primary button in all other states. */
|
|
.urlbarView-tip-button {
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
font-size: 0.93em;
|
|
background-color: var(--button-bgcolor);
|
|
font-weight: 600;
|
|
background-clip: padding-box;
|
|
min-width: 8.75em;
|
|
text-align: center;
|
|
flex-basis: initial;
|
|
flex-shrink: 0;
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.urlbarView-tip-button:hover {
|
|
background-color: var(--button-hover-bgcolor);
|
|
}
|
|
|
|
.urlbarView-tip-button:hover:active {
|
|
background-color: var(--button-active-bgcolor);
|
|
}
|
|
|
|
.urlbarView-tip-button[selected] {
|
|
color: var(--button-primary-color);
|
|
background-color: var(--button-primary-bgcolor);
|
|
outline: var(--focus-outline);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.urlbarView-tip-button[selected]:hover {
|
|
background-color: var(--button-primary-hover-bgcolor);
|
|
}
|
|
|
|
.urlbarView-tip-button[selected]:hover:active {
|
|
background-color: var(--button-primary-active-bgcolor);
|
|
}
|
|
|
|
.urlbarView-tip-button-spacer {
|
|
flex-basis: 48px;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.urlbarView-row:is([type=tip], [dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
margin-block-start: 2px;
|
|
margin-inline: 1.8em 0;
|
|
}
|
|
|
|
.urlbarView-row:is([dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help {
|
|
display: none;
|
|
}
|
|
|
|
.urlbarView-row:is([type=tip], [dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help[selected] {
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
.urlbarView-row:is([type=tip], [dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help:hover {
|
|
background-color: var(--button-hover-bgcolor);
|
|
}
|
|
|
|
.urlbarView-row:is([type=tip], [dynamicType="quickactions"]) > .urlbarView-row-inner > .urlbarView-button-help:hover:active {
|
|
background-color: var(--button-active-bgcolor);
|
|
}
|
|
|
|
.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: -1.27em;
|
|
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.inc.css. */
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before {
|
|
/* Same as `.search-panel-header > label` in searchbar.inc.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: 1.46em;
|
|
}
|
|
|
|
/* Title */
|
|
|
|
.urlbarView-title {
|
|
overflow: hidden;
|
|
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;
|
|
}
|
|
|
|
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title {
|
|
white-space: normal;
|
|
/* Give the tip title appropriate flex so that when the window is narrow, the
|
|
tip buttons wrap around under it. We want the icon and title to remain on
|
|
one line. So make the title's flex-basis the width of the parent minus the
|
|
width of the icon. */
|
|
flex-basis: calc(100% - /* .urlbarView-row-inner padding-inline-start */ 6px - /* .urlbarView-favicon width */ 24px - /* .urlbarView-favicon margin-inline-end */ 12px);
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
/* 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 {
|
|
overflow: hidden;
|
|
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[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
|
|
.urlbarView-row:hover > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
|
|
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url,
|
|
.urlbarView-row-inner[selected] > .urlbarView-no-wrap >.urlbarView-action,
|
|
.urlbarView-row-inner:hover > .urlbarView-no-wrap >.urlbarView-action,
|
|
.urlbarView-row-inner[selected] > .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], [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;
|
|
}
|
|
|
|
/* On hover and selected the chiclet background would fade into the row style,
|
|
thus we invert the background, using the panel color, instead. */
|
|
.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
|
|
background-color: var(--toolbar-field-focus-background-color);
|
|
color: var(--toolbar-field-focus-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 {
|
|
overflow: hidden;
|
|
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,
|
|
.urlbarView-row[type=bestmatch] > .urlbarView-row-inner[selected] > .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(--toolbar-field-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);
|
|
}
|