Bug 1297788 - Make urlbar autocomplete style match photon light/dark themes. r=jaws
MozReview-Commit-ID: IKnX5lLLj4L
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -13,16 +13,21 @@
--toolbar-gbimage: none;
--toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
--toolbar-non-lwt-textcolor: var(--chrome-color);
--toolbar-non-lwt-bgimage: none;
--toolbarbutton-icon-fill-opacity: .7;
--tab-line-color: #0a84ff;
+
+ --urlbar-popup-background: var(--url-and-searchbar-background-color);
+ --urlbar-popup-color: var(--chrome-color);
+ --urlbar-popup-highlight-background: var(--chrome-selection-background-color);
+ --urlbar-popup-highlight-color: var(--chrome-selection-color);
}
:root:-moz-lwtheme-brighttext {
/* Chrome */
--chrome-background-color: hsl(240, 5%, 5%);
--chrome-color: rgb(249, 249, 250);
--chrome-secondary-background-color: hsl(240, 1%, 20%);
--toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -1,29 +1,52 @@
%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
+:root {
+ --urlbar-popup-background: -moz-field;
+ --urlbar-popup-color: -moz-fieldtext;
+ --urlbar-popup-highlight-background: Highlight;
+ --urlbar-popup-highlight-color: HighlightText;
+}
+
#treecolAutoCompleteImage {
max-width: 36px;
}
+#PopupAutoCompleteRichResult {
+ background: var(--urlbar-popup-background);
+ color: var(--urlbar-popup-color);
+}
+
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
padding: 4px 3px;
+ background: transparent;
+ color: inherit;
}
#PopupAutoCompleteRichResult .autocomplete-richlistitem {
min-height: 30px;
font: message-box;
border-radius: 2px;
padding-inline-start: var(--item-padding-start);
/* For the space after the autocomplete text we have to use a transparent
border instead of padding, because the latter would considered part of the
scrollable area when generating the overflow events that we use to
constrain the autocomplete result item size. */
border-inline-end: var(--item-padding-end) solid transparent;
}
+#PopupAutoCompleteRichResult .autocomplete-richlistitem[selected] {
+ background: var(--urlbar-popup-highlight-background);
+ color: var(--urlbar-popup-highlight-color);
+}
+
:root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
min-height: 40px;
}
+
+#PopupAutoCompleteRichResult .search-panel-input-value {
+ color: var(--urlbar-popup-color);
+}