summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/urlbar-searchbar.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /browser/themes/shared/urlbar-searchbar.css
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/themes/shared/urlbar-searchbar.css')
-rw-r--r--browser/themes/shared/urlbar-searchbar.css881
1 files changed, 881 insertions, 0 deletions
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
new file mode 100644
index 0000000000..9fc88fbde8
--- /dev/null
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -0,0 +1,881 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+ --urlbar-container-padding: 1px;
+ --urlbar-margin-inline: 5px;
+ --urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding));
+}
+
+/* When rich suggestions are enabled the urlbar identity icon is given extra padding to
+ * align the results and urlbar text */
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "browser.urlbar.richSuggestions.featureGate") {
+ #urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] > .identity-box-button {
+ padding-inline: calc(6px + var(--urlbar-icon-padding));
+ }
+}
+
+#urlbar-container,
+#search-container {
+ padding-block: 4px;
+ margin-inline: var(--urlbar-margin-inline);
+
+ :root[uidensity=touch] & {
+ padding-block: 5px;
+ }
+}
+
+#urlbar,
+#searchbar {
+ min-height: var(--urlbar-min-height);
+ text-shadow: none;
+ color: var(--toolbar-field-color);
+ /**
+ * System colors and widgets are set based on toolbar color. Since toolbar
+ * fields can be styled differently from the toolbar, we need to use the
+ * correct color scheme in toolbar fields.
+ */
+ :root[lwt-toolbar-field="light"] & {
+ color-scheme: light;
+ }
+ :root[lwt-toolbar-field="dark"] & {
+ color-scheme: dark;
+ }
+}
+
+#urlbar[focused="true"],
+#searchbar:focus-within {
+ :root[lwt-toolbar-field-focus="light"] & {
+ color-scheme: light;
+ }
+ :root[lwt-toolbar-field-focus="dark"] & {
+ color-scheme: dark;
+ }
+}
+
+#urlbar-background,
+#searchbar {
+ background-color: var(--toolbar-field-background-color);
+ background-clip: border-box;
+ border: 1px solid var(--toolbar-field-border-color);
+ border-radius: var(--toolbarbutton-border-radius);
+}
+
+#urlbar-input-container,
+#searchbar {
+ border-radius: var(--toolbarbutton-border-radius);
+ overflow: clip;
+}
+
+#urlbar-input,
+#urlbar-scheme,
+.searchbar-textbox {
+ flex: 1;
+ background-color: transparent;
+ color: inherit;
+ border: none;
+ margin: 0;
+ padding: 0;
+ outline: none;
+}
+
+#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
+#searchbar:focus-within {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+ /* We used --focus-outline above to inherit its width and style properties,
+ but we still want to use the theme's border-color.
+ --toolbar-field-focus-border-color is set equal to --focus-outline-color
+ on :root, but LWT themes can override this value. */
+ outline-color: var(--toolbar-field-focus-border-color);
+ border-color: transparent;
+}
+
+#urlbar[focused="true"] > #urlbar-background,
+#searchbar:focus-within {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
+}
+
+#urlbar[open] > #urlbar-background {
+ border-color: var(--arrowpanel-border-color);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
+}
+
+#urlbar:is([focused="true"], [open]),
+#searchbar:focus-within {
+ color: var(--toolbar-field-focus-color);
+}
+
+#urlbar:is([focused="true"], [open]) > #urlbar-background,
+#searchbar:focus-within {
+ background-color: var(--toolbar-field-focus-background-color);
+}
+
+#urlbar-input::placeholder,
+.searchbar-textbox::placeholder {
+ opacity: 0.69;
+}
+
+#TabsToolbar #searchbar:not(:focus-within) {
+ /* The tabs toolbar is usually a different color than the other toolbars, and
+ we can't predict it, to avoid a transparent field we enforce a border. */
+ border-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+#urlbar-input:-moz-lwtheme::selection,
+.searchbar-textbox:-moz-lwtheme::selection {
+ background-color: var(--lwt-toolbar-field-highlight, Highlight);
+ color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+#urlbar-input:not(:focus):-moz-lwtheme::selection,
+.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection {
+ background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background);
+}
+
+#urlbar:not([focused="true"]) {
+ caret-color: transparent;
+}
+
+#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button {
+ width: var(--urlbar-search-button-width);
+ background-image: url(chrome://global/skin/icons/search-glass.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ -moz-context-properties: fill, fill-opacity;
+ fill: var(--toolbarbutton-icon-fill);
+}
+
+#urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button {
+ margin-inline-end: 6px;
+}
+
+/**
+ * The urlbar background is a separate element so we can animate it
+ * independently from the content. It's positioned absolutely and stretched to
+ * the bounds of the urlbar.
+ */
+
+#urlbar,
+#urlbar-input-container,
+.urlbarView {
+ position: relative;
+}
+
+#urlbar-background {
+ display: block;
+ position: absolute;
+ inset: 0;
+}
+
+:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background,
+:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background {
+ inset-inline-start: var(--urlbar-search-button-width);
+}
+
+#urlbar-input-container {
+ /* Match urlbar-background's border. */
+ border: 1px solid transparent;
+ padding: var(--urlbar-container-padding);
+}
+
+#urlbar-container[breakout] {
+ position: relative;
+ min-height: var(--urlbar-container-height);
+}
+
+#urlbar[breakout] {
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: var(--urlbar-height);
+ top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
+ left: 0;
+}
+
+#urlbar[breakout] > #urlbar-input-container {
+ width: 100%;
+ height: 100%;
+}
+
+#urlbar:not([open]) > .urlbarView,
+#urlbar:not([breakout]) > .urlbarView {
+ display: none;
+}
+
+#urlbar[breakout][breakout-extend],
+#urlbar[breakout][breakout-extend-disabled][open] {
+ /* The z-index needs to be big enough to trump other positioned UI pieces
+ that we want to overlay. 3 is used in the tab bar. */
+ z-index: 3;
+ height: auto;
+}
+
+#urlbar[breakout][breakout-extend] {
+ top: 0;
+ left: calc(-1 * var(--urlbar-margin-inline));
+ width: calc(100% + 2 * var(--urlbar-margin-inline));
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-input-container {
+ height: var(--urlbar-toolbar-height);
+ padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
+ padding-inline: calc(var(--urlbar-margin-inline) + var(--urlbar-container-padding));
+}
+
+#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {
+ fill: currentColor;
+ fill-opacity: .6;
+}
+
+@keyframes urlbar-grow {
+ 0% {
+ transform: scaleX(.99) scaleY(.98);
+ }
+ 100% {
+ transform: scale(1.0);
+ }
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-background {
+ animation-name: urlbar-grow;
+ animation-duration: 0s;
+ animation-timing-function: var(--animation-easing-function);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
+ animation-duration: 150ms;
+ }
+}
+
+:root[chromehidden~="toolbar"] #urlbar-container {
+ /* Remove excess space between the address bar and the menu button in popups. */
+ padding-inline-end: 0;
+}
+
+:root[customizing] .urlbar-input-box {
+ visibility: hidden;
+}
+
+#urlbar-container {
+ align-items: center;
+}
+
+#urlbar-container,
+#wrapper-urlbar-container {
+ flex: 400 0 auto;
+}
+
+:root[chromehidden~="toolbar"] :is(#urlbar-container, #wrapper-urlbar-container) {
+ flex-shrink: 1;
+}
+
+#urlbar-search-splitter {
+ /* The splitter width should equal the location and search bars' combined
+ neighboring margin and border width. */
+ min-width: 12px;
+ margin: 0 -6px;
+ position: relative;
+ border: none;
+ background: transparent;
+ appearance: none;
+}
+
+/* Urlbar search mode indicator */
+#urlbar-search-mode-indicator {
+ display: none;
+ background-color: var(--urlbar-box-bgcolor);
+ color: var(--urlbar-box-text-color);
+ margin-inline-end: 8px;
+ align-items: center;
+ border-radius: var(--urlbar-icon-border-radius);
+ padding-inline: 8px 6px;
+}
+
+#urlbar[focused="true"] #urlbar-search-mode-indicator {
+ background-color: var(--urlbar-box-focus-bgcolor);
+}
+
+#urlbar[searchmode] > #urlbar-input-container > #urlbar-search-mode-indicator {
+ display: inline-flex;
+}
+
+#urlbar[searchmode] > #urlbar-input-container > #urlbar-label-box {
+ display: none;
+}
+
+#urlbar-search-mode-indicator-close {
+ background: url(chrome://global/skin/icons/close.svg) no-repeat center;
+ background-size: round(62.5%, 2px);
+ width: round(max(16px, 1em), 2px);
+ height: round(max(16px, 1em), 2px);
+ -moz-context-properties: fill, fill-opacity;
+ fill-opacity: 0.6;
+ fill: currentColor;
+ border-radius: var(--urlbar-icon-border-radius);
+}
+
+#urlbar-search-mode-indicator-close:hover {
+ background-color: var(--urlbar-box-hover-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+#urlbar-search-mode-indicator-close:hover:active {
+ background-color: var(--urlbar-box-active-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+
+@media (prefers-contrast) {
+ #urlbar-search-mode-indicator-close {
+ fill-opacity: 1.0;
+ }
+}
+
+#urlbar-search-mode-indicator-title {
+ padding-inline: 0 3px;
+}
+
+/* Page action panel */
+.pageAction-panel-button > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
+#pageAction-panel-bookmark,
+#star-button {
+ list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
+}
+#pageAction-panel-bookmark[starred],
+#star-button[starred] {
+ list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+#star-button[starred] {
+ fill-opacity: 1;
+ fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+/* URL bar and page action buttons */
+
+/*
+ * The background can be very dark and if the add-on uses a black-ish svg it
+ * will be barely visible. For now we try to make them more visible through
+ * some filtering tricks.
+ *
+ * TODO(emilio): Evaluate removing this. SVGs can use prefers-color-scheme to
+ * determine the right color-scheme to use, see bug 1779457.
+ */
+.urlbar-addon-page-action[style*=".svg"] > .urlbar-icon {
+ :root[lwt-toolbar-field="dark"] #urlbar:not([focused="true"]) &,
+ :root[lwt-toolbar-field-focus="dark"] #urlbar[focused="true"] & {
+ filter: grayscale(100%) brightness(20%) invert();
+ }
+
+ /* As above, but for the default theme in dark mode, which suffers from the same issue */
+ @media (prefers-color-scheme: dark) {
+ &:not(:-moz-lwtheme) {
+ filter: grayscale(100%) brightness(20%) invert();
+ }
+ }
+}
+
+#userContext-icons,
+#urlbar-zoom-button {
+ margin-inline: 6px;
+}
+
+.urlbar-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+.urlbar-page-action,
+#urlbar-go-button,
+.search-go-button {
+ width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+ height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+ border-radius: var(--urlbar-icon-border-radius);
+ padding: var(--urlbar-icon-padding);
+ color: inherit;
+}
+
+.urlbar-page-action:not([disabled]):hover,
+#urlbar-go-button:hover,
+.search-go-button:hover {
+ background-color: var(--urlbar-box-hover-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+
+.urlbar-page-action:not([disabled])[open],
+.urlbar-page-action:not([disabled]):hover:active,
+#urlbar-go-button:hover:active,
+.search-go-button:hover:active {
+ background-color: var(--urlbar-box-active-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+
+.urlbar-page-action:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+}
+
+#urlbar-go-button,
+.search-go-button {
+ list-style-image: url("chrome://browser/skin/forward.svg");
+}
+
+#urlbar-go-button:-moz-locale-dir(rtl),
+.search-go-button:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+#pageActionButton,
+.share-more-button {
+ list-style-image: url("chrome://global/skin/icons/more.svg");
+}
+
+/**
+ * Contextual Feature Recommendation
+ *
+ * Animate the recommendation icon to expand outwards and display a text label.
+ * Fake the effect of a smoothly expanding width without animating any widths
+ * by (continuously) animating only `mask-position-x` and `transform`.
+ *
+ * In a few places, transition a property using the timing-function `step-start`
+ * while collapsed and `step-end` while expanded in order to (discretely) modify
+ * the value while expanded and while transitioning in either direction.
+ *
+ * This UI is part of an experiment launching in LTR locales only. Fixing the
+ * RTL issues is tracked by Bug 1485725.
+ */
+
+:root {
+ --cfr-animation-duration: 0.35s;
+ --cfr-button-addons-icon: url(chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg);
+ --cfr-button-features-icon: url(chrome://activity-stream/content/data/content/assets/glyph-cfr-feature-16.svg);
+ --cfr-button-highlights-icon: url(chrome://global/skin/icons/highlights.svg);
+ --cfr-active-color: #0060df;
+ --cfr-active-text-color: white;
+}
+
+#contextual-feature-recommendation {
+ width: 28px;
+ margin-inline-start: 0;
+ transition: margin-inline-start step-end var(--cfr-animation-duration);
+}
+#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] {
+ width: auto;
+
+ #cfr-button {
+ height: auto;
+ align-items: center;
+ }
+}
+
+#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
+ margin-inline-start: calc(var(--cfr-label-width) * -1);
+ transition: margin-inline-start step-start var(--cfr-animation-duration);
+}
+
+#cfr-button {
+ transition-property: fill, fill-opacity, transform;
+ transition-timing-function: ease-in-out;
+ transition-duration: var(--cfr-animation-duration);
+}
+
+#contextual-feature-recommendation[data-cfr-icon="webextensions-icon"] #cfr-button {
+ list-style-image: var(--cfr-button-addons-icon);
+}
+
+#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] #cfr-button {
+ list-style-image: var(--cfr-button-features-icon);
+}
+
+#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] {
+ width: auto;
+}
+
+#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] #cfr-button {
+ list-style-image: var(--cfr-button-highlights-icon);
+ height: auto;
+ align-items: center;
+}
+
+
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
+ background-color: transparent;
+ transform: translateX(calc(var(--cfr-label-width) * -1));
+
+ &,
+ .urlbar-icon {
+ fill: var(--cfr-active-text-color);
+ fill-opacity: 1;
+ }
+}
+
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
+ transform: translateX(calc(var(--cfr-label-width)));
+}
+@keyframes cfr-button-fade-through-active-color {
+ 33% {
+ fill-opacity: 1;
+ fill: var(--cfr-active-color);
+ }
+ 67% {
+ fill-opacity: 1;
+ fill: var(--cfr-active-color);
+ }
+}
+#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
+ animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
+}
+
+#cfr-label-container {
+ width: 0;
+ overflow: hidden;
+ border-radius: var(--urlbar-icon-border-radius);
+ padding-inline-start: 28px;
+ mask-image: linear-gradient(to right, transparent 0, black 0);
+ mask-position-x: var(--cfr-label-width);
+ mask-repeat: no-repeat;
+ transition-property: background-color, mask-position-x, width, margin-inline-end;
+ transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
+ transition-duration: var(--cfr-animation-duration);
+ align-items: center;
+ margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
+}
+#cfr-label-container:-moz-locale-dir(rtl) {
+ mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
+ width: calc(var(--cfr-label-width) + 28px);
+ background-color: var(--cfr-active-color);
+ margin-inline-end: -28px;
+ mask-position-x: 0;
+ transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
+}
+
+#cfr-label {
+ margin: 0;
+ padding: 3px 5px;
+ padding-inline-start: 0;
+ color: white;
+ mask-image: linear-gradient(to right, transparent 0, black 0);
+ mask-position-x: var(--cfr-label-width);
+ mask-repeat: no-repeat;
+ transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#cfr-label:-moz-locale-dir(rtl) {
+ mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
+ mask-position-x: 0;
+}
+
+/* Shift the url-bar text fading to stop the recommendation overlapping */
+#urlbar[cfr-recommendation-state] #urlbar-input {
+ /* A mask-image is usually only defined for the url bar when text overflows.
+ We need to re-define the mask image here so that it shows up correctly when
+ we transition to or from an `expanded` state (in which the right end of the
+ url bar may be obscured without overflow). */
+ mask-image: linear-gradient(to left, transparent, black 3ch);
+ transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) {
+ mask-image: linear-gradient(to right, transparent, black 3ch);
+}
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input {
+ mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) {
+ mask-position-x: calc(var(--cfr-label-width));
+}
+
+/* Reader mode icon */
+
+#reader-mode-button > .urlbar-icon {
+ list-style-image: url(chrome://browser/skin/reader-mode.svg);
+}
+
+#reader-mode-button[readeractive] > .urlbar-icon {
+ fill: var(--toolbarbutton-icon-fill-attention);
+ fill-opacity: 1;
+}
+
+/* Picture-in-Picture icon */
+#picture-in-picture-button > .urlbar-icon {
+ list-style-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
+}
+
+#picture-in-picture-button[pipactive] > .urlbar-icon {
+ list-style-image: url("chrome://global/skin/media/picture-in-picture-closed.svg");
+}
+
+#picture-in-picture-button:-moz-locale-dir(rtl) > .urlbar-icon {
+ transform: scaleX(-1);
+}
+
+/* Translations button */
+
+@keyframes translationsRotate {
+ from { transform: rotate(0); }
+ to { transform: rotate(360deg); }
+}
+
+@media not (prefers-reduced-motion) {
+ #translations-button-circle-arrows {
+ animation: translationsRotate 1.2s linear infinite;
+ }
+}
+
+#translations-button-icon {
+ list-style-image: url(chrome://browser/skin/translations.svg);
+ /* The translation icon's right letter is 1px too long, so account for that here.
+ Don't use margin-inline-end as this is adjusting the art of the icon. */
+ margin-right: -1px;
+}
+
+#translations-button[translationsactive] > #translations-button-icon {
+ fill: var(--toolbarbutton-icon-fill-attention);
+ fill-opacity: 1;
+}
+
+#translations-button-circle-arrows {
+ height: 16px;
+ width: 16px;
+ list-style-image: url("chrome://browser/skin/sync.svg");
+ fill: var(--toolbarbutton-icon-fill-attention);
+ fill-opacity: 1;
+ margin-inline: 1px;
+}
+
+#translations-button-locale {
+ background-color: var(--toolbarbutton-icon-fill-attention);
+ color: var(--toolbarbutton-icon-fill-attention-text);
+ border-radius: 4px;
+ font-size: 0.8em;
+ height: 20px;
+ min-width: 20px;
+ text-align: center;
+ padding-top: 3px;
+ padding-inline: 1px;
+ box-sizing: border-box;
+ margin-inline: 2px -2px;
+ margin-block: -2px;
+}
+
+#translations-button[translationsactive="true"] {
+ width: auto;
+}
+
+@media (prefers-contrast) and (-moz-platform: windows) {
+ #translations-button-locale {
+ font-weight: bold;
+ }
+
+ #translations-button[translationsactive]:is(:hover, [open]) > #translations-button-icon {
+ fill: currentColor;
+ }
+
+ #translations-button:is(:hover, [open]) > #translations-button-locale {
+ background-color: var(--toolbar-field-background-color);
+ color: var(--toolbarbutton-icon-fill-attention);
+ }
+
+ #translations-button:is(:hover, [open]) > #translations-button-circle-arrows {
+ fill: currentColor;
+ }
+}
+
+/* Zoom button */
+
+#urlbar-zoom-button {
+ appearance: none;
+ font-size: .8em;
+ padding: 3px 7px;
+ border-radius: var(--urlbar-icon-border-radius);
+ background-color: var(--urlbar-box-bgcolor);
+ color: var(--urlbar-box-text-color);
+ margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding));
+ overflow: hidden;
+}
+
+#urlbar[focused="true"] #urlbar-zoom-button:not(:hover) {
+ background-color: var(--urlbar-box-focus-bgcolor);
+}
+
+#urlbar-zoom-button:hover {
+ background-color: var(--urlbar-box-hover-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+
+#urlbar-zoom-button:hover:active {
+ background-color: var(--urlbar-box-active-bgcolor);
+ color: var(--urlbar-box-hover-text-color);
+}
+
+@keyframes urlbar-zoom-reset-pulse {
+ 0% {
+ transform: scale(0);
+ }
+ 75% {
+ transform: scale(1.5);
+ }
+ 100% {
+ transform: scale(1.0);
+ }
+}
+
+#urlbar-zoom-button[animate="true"] {
+ animation-name: urlbar-zoom-reset-pulse;
+ animation-duration: 250ms;
+}
+
+#urlbar-zoom-button:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+}
+
+#urlbar-zoom-button > .toolbarbutton-text {
+ display: flex;
+}
+
+#urlbar-zoom-button > .toolbarbutton-icon {
+ display: none;
+}
+
+/* Shopping Sidebar icon */
+
+#shopping-sidebar-button > .urlbar-icon {
+ list-style-image: url(chrome://browser/content/shopping/assets/shopping.svg);
+ pointer-events: none;
+}
+
+#shopping-sidebar-button[shoppingsidebaropen="true"] > .urlbar-icon {
+ fill: var(--toolbarbutton-icon-fill-attention);
+ fill-opacity: 1;
+}
+
+@media (prefers-contrast) {
+ #shopping-sidebar-button[shoppingsidebaropen="true"]:hover > .urlbar-icon {
+ fill: currentColor;
+ }
+}
+
+/* Search bar */
+
+#search-container {
+ min-width: 125px;
+ width: 125px;
+}
+
+#search-container,
+#wrapper-search-container {
+ flex: 175 175 auto;
+}
+
+#search-container[width] {
+ /* Take something closer to the explicit width when requested. Also important
+ * to use flex-basis auto so that the width is actually honored. */
+ flex: 1 auto;
+}
+
+.widget-overflow-list > #search-container {
+ margin: var(--arrowpanel-menuitem-margin);
+ width: auto;
+
+ & > #searchbar:-moz-lwtheme {
+ /* Theme authors usually only consider contrast against the toolbar when
+ picking a border color for the search bar. Since the search bar can be
+ dragged into the overflow panel, we need to show a high-contrast border
+ around the searchbar in case the searchbar and panel background are the
+ same color. */
+ border-color: var(--panel-separator-color);
+ }
+}
+
+.search-go-button {
+ margin-inline: 1px;
+}
+
+.searchbar-search-button {
+ align-items: center;
+ fill: currentColor;
+}
+
+.searchbar-search-icon {
+ list-style-image: url(chrome://global/skin/icons/search-glass.svg);
+ -moz-context-properties: fill, fill-opacity;
+ fill-opacity: var(--urlbar-icon-fill-opacity);
+ pointer-events: none;
+ margin-inline: 8px 6px;
+ width: 16px;
+}
+
+.searchbar-search-icon-overlay {
+ pointer-events: none;
+}
+
+.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
+ list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
+ margin-inline: -15px 4px;
+ margin-top: -10px;
+ width: 11px;
+ height: 11px;
+}
+
+.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
+ margin-inline: -25px 14px;
+}
+
+.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
+ list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+ -moz-context-properties: fill;
+ margin-inline: -8px 2px;
+ width: 6px;
+ height: 6px;
+}
+
+.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
+ margin-inline: -26px 20px;
+}
+
+.searchbar-engine-one-off-add-engine:not([image]),
+moz-input-box > menupopup .context-menu-add-engine:not([image]) {
+ list-style-image: image-set(url("chrome://browser/skin/search-engine-placeholder.png"), url("chrome://browser/skin/search-engine-placeholder@2x.png") 2x);
+}
+
+.searchbar-engine-one-off-add-engine > .button-box::after,
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
+ content: "";
+ position: relative;
+ display: flex;
+ background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
+ height: 11px;
+ width: 11px;
+ margin-inline: -4px -7px;
+ margin-top: -13px;
+}
+
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
+ /* These differ from the urlbar and searchbar because the context menu
+ may not have enough space */
+ margin-inline: -7px -4px;
+ margin-top: -8px;
+}
+
+/* Fade a little the icon so that the + badge is more evident and the button
+ is less likely to be visually confused with a normal search shortcut */
+.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon {
+ opacity: 0.7;
+}
+.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon {
+ opacity: 1;
+}