gecko-dev/browser/themes/shared/urlbarView.inc.css

%if 0
/* 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/. */
%endif

%filter substitution
%define urlbarViewPadding 4px
%define urlbarViewIconMarginEnd (@identityBoxPaddingInline@ + @identityBoxMarginInlineEnd@)
%define urlbarViewMarginInline 7px
%define urlbarViewItemInlinePadding 6px

:root {
  --autocomplete-popup-background: var(--arrowpanel-background);
  --autocomplete-popup-color: var(--arrowpanel-color);
  --autocomplete-popup-highlight-background: Highlight;
  --autocomplete-popup-highlight-color: HighlightText;

  /* Colors copied from in-content button styling */
  --urlbarView-button-background: rgba(12, 12, 13, 0.1);
  --urlbarView-button-background-hover: rgba(12, 12, 13, 0.2);
  --urlbarView-button-background-active: rgba(12, 12, 13, 0.3);
  --urlbarView-primary-button-text: white;
  --urlbarView-primary-button-background: #0060df;
  --urlbarView-primary-button-background-hover: #003eaa;
  --urlbarView-primary-button-background-active: #002275;
}

:root:-moz-lwtheme {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
  --urlbar-popup-action-color: hsl(178, 100%, 28%);
}

:root:-moz-lwtheme[lwt-toolbar-field-focus-brighttext] {
  --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
  --urlbar-popup-action-color: #30e60b;

  /* Colors copied from in-content button styling */
  --urlbarView-button-background: rgba(249, 249, 250, 0.24);
  --urlbarView-button-background-hover: rgba(249, 249, 250, 0.15);
  --urlbarView-button-background-active: rgba(249, 249, 250, 0.2);
}

.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: -moz-hidden-unscrollable;
  margin-inline: @urlbarViewMarginInline@;
  width: calc(100% - 2 * @urlbarViewMarginInline@);

  /* Match urlbar-background's border. */
  border-inline: 1px solid transparent;

  /* Offsets the toolbar overlap so the view's top border aligns with the
     toolbar. */
  margin-block-start: -@urlbarBreakoutExtend@;
}

.urlbarView-body-inner {
  width: 100%;
  border-top: 1px solid var(--urlbar-separator-color);
}

.urlbarView-results {
  padding-block: @urlbarViewPadding@;
  white-space: nowrap;
}

.urlbarView-row {
  fill: currentColor;
  fill-opacity: .6;
  padding-block: 3px;
}

.urlbarView-row-inner {
  border-radius: 2px;
  padding-inline-start: @urlbarViewItemInlinePadding@;
  padding-block: 6px;
}

:root[uidensity=touch] .urlbarView-row:not([type=tip]) {
  padding-block: 11px;
}

.urlbarView-row[type=tip] {
  padding-block-start: 18px;
  /* Compensating for the 16px bottom margin on the tip elements. */
  padding-block-end: calc(18px - 16px);
  /* Compensating for the 4px focus ring on tip buttons. */
  padding-inline-end: calc(@urlbarViewItemInlinePadding@ + 4px);
}

.urlbarView-row-inner,
.urlbarView-no-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: start;
}

.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][type=remotetab]:-moz-any(: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 * (16px + (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 {
    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(@urlbarViewItemInlinePadding@ + @identityBoxMarginInlineEnd@ + /* favicon */ 16px);
  }
  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
    padding-right: calc(@urlbarViewItemInlinePadding@ + @identityBoxMarginInlineEnd@ + /* favicon */ 16px);
  }
  /* Note: switchtab entries show the url only in override mode,
     remotetab 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]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
  .urlbarView-results[wrap] > .urlbarView-row[type=remotetab]:-moz-any(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator {
    display: none;
  }
}

/* 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]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow],
.urlbarView-url[overflow] {
  mask-image: linear-gradient(to left, transparent, black 2em);
}

.urlbarView-row:not([type=tip]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([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-row:not([type=tip]):hover > .urlbarView-row-inner {
  background: var(--arrowpanel-dimmed);
}

.urlbarView-row:not([type=tip])[selected] > .urlbarView-row-inner {
  background: var(--autocomplete-popup-highlight-background);
  color: var(--autocomplete-popup-highlight-color);
  fill-opacity: 1;
}

/* Favicon */

.urlbarView-favicon {
  min-width: 16px;
  height: 16px;
  margin-inline-end: calc(@urlbarViewIconMarginEnd@);
  background-repeat: no-repeat;
  background-size: contain;
  -moz-context-properties: fill, fill-opacity;
}

@media (min-resolution: 2dppx) {
  .urlbarView-favicon {
      transform: translateY(-1.5px);
  }
}

.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon {
  min-width: 24px;
  height: 24px;
  margin-inline-end: 12px;
  flex-basis: 24px;
  flex-grow:  0;
  flex-shrink: 0;
}

/* Type icon */

.urlbarView-type-icon {
  position: absolute;
  min-width: 12px;
  height: 12px;
  margin-bottom: -4px;
  margin-inline-start: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  -moz-context-properties: fill, stroke;
}

/* Favicon badges have this priority: switchtab/remotetab > pinned > bookmark. */

.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/bookmark-12.svg);
  color: #0060df; /* Blue-60 */
  stroke: #fff;
}

.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/pin-12.svg);
  color: #b1b1b3; /* Grey-40 */
  stroke: #fff;
}

.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,
.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/tab-12.svg);
  color: #008eaf; /* Teal-70 */
  stroke: #fff;
}

:root[lwt-toolbar-field-brighttext] .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #0a84ff; /* Blue-50 */
  stroke: #38383d; /* Grey-70 */
}

:root[lwt-toolbar-field-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #d7d7db; /* Grey-30 */
  stroke: #38383d; /* Grey-70 */
}

:root[lwt-toolbar-field-brighttext] .urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,
:root[lwt-toolbar-field-brighttext] .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #00c8d7; /* Teal-60 */
  stroke: #38383d; /* Grey-70 */
}

/* 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-tip-button,
.urlbarView-tip-help {
  margin-block-end: 16px;
}

/* The help icon is a standard Photon ghost button. */
.urlbarView-tip-help {
  min-width: 16px;
  height: 32px;
  background-image: url("chrome://global/skin/icons/help.svg");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  padding-inline: 8px;
  margin-inline-start: 8px;
  -moz-context-properties: fill, fill-opacity;
}

.urlbarView-tip-help[selected] {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}

.urlbarView-tip-help:hover {
  background-color: var(--urlbarView-button-background-hover);
}

.urlbarView-tip-help:hover:active {
  background-color: var(--urlbarView-button-background-active);
}

/* The tip button is a Photon default button when unfocused and a
   primary button in all other states. */
.urlbarView-tip-button {
  min-height: 16px;
  padding: 7px;
  border: 1px solid var(--urlbarView-button-border, var(--urlbarView-button-background));
  border-radius: 2px;
  font-size: 0.93em;
  color: var(--urlbarView-button-text, inherit);
  background-color: var(--urlbarView-button-background);
  background-clip: padding-box;
  min-width: 8.75em;
  text-align: center;
  flex-basis: initial;
  flex-shrink: 0;
}

.urlbarView-tip-button:hover {
  background-color: var(--urlbarView-button-background-hover);
}

.urlbarView-tip-button:hover:active {
  background-color: var(--urlbarView-button-background-active);
}

.urlbarView-tip-button[selected] {
  color: var(--urlbarView-primary-button-text);
  background-color: var(--urlbarView-primary-button-background);
  border-color: #0a84ff;
  box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}

.urlbarView-tip-button[selected]:hover {
  background-color: var(--urlbarView-primary-button-background-hover);
}

.urlbarView-tip-button[selected]:hover:active {
  background-color: var(--urlbarView-primary-button-background-active);
}

.urlbarView-tip-button-spacer {
  flex-basis: 48px;
  flex-grow: 1;
  flex-shrink: 1;
}

/* Title */

.urlbarView-title {
  overflow: hidden;
  white-space: nowrap;
}

.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;
}

/* 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-url {
  overflow: hidden;
  color: var(--urlbar-popup-url-color);
}

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url {
  color: inherit;
}

.urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .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[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  display: none;
}

.urlbarView-tags {
  overflow: hidden;
}

.urlbarView-tag {
  background-color: var(--arrowpanel-dimmed);
  border-radius: 2px;
  border: 1px solid var(--panel-separator-color);
  padding: 0 1px;
  margin-inline-start: .4em;
}

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tags > .urlbarView-tag {
  background-color: var(--autocomplete-popup-highlight-color);
  color: var(--autocomplete-popup-highlight-background);
}

/* Search one-offs */

#urlbar .search-one-offs:not([hidden]) {
  display: flex;
  align-items: start;
  padding-block: 16px;
  flex-wrap: wrap;
}

#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: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#urlbar .search-panel-one-offs-header-label {
  white-space: nowrap;
  margin: 0;
  padding-inline: 8px 16px;
}

#urlbar .searchbar-engine-one-off-item {
  min-width: 32px;
  height: 32px;
  margin-inline-end: 8px;
}

#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-compact {
  /* Force empty space before the button */
  margin-inline-start: calc(32px - /* settings start padding */ 8px );
}

#urlbar .search-one-offs-spacer {
  flex-grow: 1;
}

/* search bar popup */

#PopupSearchAutoComplete {
  background: var(--autocomplete-popup-background);
  color: var(--autocomplete-popup-color);
  border-color: var(--arrowpanel-border-color);
}

#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
  background: var(--autocomplete-popup-highlight-background);
  color: var(--autocomplete-popup-highlight-color);
}