зеркало из https://github.com/mozilla/gecko-dev.git
746 строки
22 KiB
CSS
746 строки
22 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/. */
|
|
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
:root {
|
|
--toolbar-field-border-color: hsla(240,5%,5%,.25);
|
|
--toolbar-field-focus-border-color: var(--focus-outline-color);
|
|
--urlbar-container-padding: 1px;
|
|
--urlbar-margin-inline: 5px;
|
|
--urlbar-search-button-width: calc(16px + 2 * var(--urlbar-icon-padding));
|
|
}
|
|
|
|
@media not (prefers-contrast) {
|
|
:root {
|
|
--toolbar-field-border-color: transparent;
|
|
--toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
|
|
}
|
|
}
|
|
|
|
#urlbar-container,
|
|
#search-container {
|
|
padding-block: 4px;
|
|
margin-inline: var(--urlbar-margin-inline);
|
|
}
|
|
|
|
#search-container[cui-areatype="panel"] {
|
|
margin: var(--arrowpanel-menuitem-margin);
|
|
}
|
|
|
|
:root[uidensity=touch] #urlbar-container,
|
|
:root[uidensity=touch] #search-container {
|
|
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.
|
|
*/
|
|
#urlbar:-moz-lwtheme,
|
|
#searchbar:-moz-lwtheme {
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]),
|
|
:root[lwt-toolbar-field-brighttext] #searchbar:not(:focus-within),
|
|
:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"],
|
|
:root[lwt-toolbar-field-focus-brighttext] #searchbar:focus-within {
|
|
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 {
|
|
-moz-box-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 {
|
|
-moz-box-align: center;
|
|
}
|
|
|
|
#urlbar-container,
|
|
#wrapper-urlbar-container {
|
|
-moz-box-flex: 400;
|
|
}
|
|
|
|
#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: 10px 10px;
|
|
width: 16px;
|
|
height: 16px;
|
|
-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(--toolbar-field-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. In the future we should have a standardized SVG
|
|
solution we can apply to add-on icons, for now we can only try to make them
|
|
visible through some filtering tricks */
|
|
:root[lwt-toolbar-field-brighttext] #urlbar:not([focused="true"]) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon,
|
|
:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"] .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon {
|
|
filter: grayscale(100%) brightness(20%) invert();
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* As above, but for the default theme in dark mode, which suffers from the same issue */
|
|
:root:not(:-moz-lwtheme) .urlbar-addon-page-action[style*=".svg"] > .urlbar-icon {
|
|
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;
|
|
}
|
|
|
|
#contextual-feature-recommendation {
|
|
width: 28px;
|
|
margin-inline-start: 0;
|
|
transition: margin-inline-start step-end var(--cfr-animation-duration);
|
|
}
|
|
#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 {
|
|
margin: -2px 0;
|
|
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"] #cfr-button {
|
|
list-style-image: var(--cfr-button-highlights-icon);
|
|
}
|
|
#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
|
|
fill: white;
|
|
fill-opacity: 1;
|
|
background-color: transparent; /* Override hover background-color */
|
|
transform: translateX(calc(var(--cfr-label-width) * -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: 5px;
|
|
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);
|
|
-moz-box-align: 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(--toolbar-field-icon-fill-attention);
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
/* Zoom button */
|
|
|
|
#urlbar-zoom-button {
|
|
appearance: none;
|
|
color: inherit;
|
|
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: -moz-box;
|
|
}
|
|
|
|
#urlbar-zoom-button > .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Search bar */
|
|
|
|
#search-container {
|
|
min-width: 125px;
|
|
}
|
|
|
|
#search-container,
|
|
#wrapper-search-container {
|
|
-moz-box-flex: 175;
|
|
}
|
|
|
|
#search-container[width] {
|
|
/* Take something closer to the explicit width when requested */
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
#search-container[cui-areatype="panel"] > #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 {
|
|
-moz-box-align: 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: url("chrome://browser/skin/search-engine-placeholder.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.searchbar-engine-one-off-add-engine:not([image]),
|
|
moz-input-box > menupopup .context-menu-add-engine:not([image]) {
|
|
list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
|
|
}
|
|
}
|
|
|
|
.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: -moz-box;
|
|
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;
|
|
}
|