Bug 1438458 - Differentiate hover and selected colors in the devtools autocomplete popup - r=nchevobbe
MozReview-Commit-ID: GNFea0JLBQ2
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -152,46 +152,40 @@ html|button, html|select {
.theme-dark .devtools-autocomplete-popup,
.theme-dark .CodeMirror-hints,
.theme-dark .CodeMirror-Tern-tooltip {
border: 1px solid hsl(210,11%,10%);
background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
}
-.devtools-autocomplete-listbox .autocomplete-selected,
.devtools-autocomplete-listbox .autocomplete-item:hover {
- background-color: rgba(128,128,128,0.3);
-}
-
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected,
-.theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover {
- background-color: rgba(0,0,0,0.5);
-}
-
-.devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value,
-.devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value {
- color: #222;
-}
-
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value,
-.theme-dark .devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value {
- color: hsl(208,100%,60%);
+ background: var(--theme-selection-background-hover);
}
.devtools-autocomplete-listbox .autocomplete-item > span {
color: #666;
}
.theme-dark .devtools-autocomplete-listbox .autocomplete-item > span {
color: #ccc;
}
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span {
- color: #eee;
+.devtools-autocomplete-listbox .autocomplete-selected,
+.devtools-autocomplete-listbox .autocomplete-selected:hover {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > span {
+ color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
+ font-weight: bold;
}
/* Autocomplete list clone used for accessibility. */
.devtools-autocomplete-list-aria-clone {
/* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
position: fixed;
overflow: hidden;