Bug 1438458 - Change initial value and autocomplete value to respectively --theme-highlight-color-yellow and --theme-selection-color in the devtools autocomplete listbox - r=nchevobbe
MozReview-Commit-ID: KAjAPawDm6h
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -133,44 +133,40 @@ html|button, html|select {
.devtools-autocomplete-listbox .autocomplete-item:hover {
background-color: rgba(128,128,128,0.3);
}
.theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover {
background-color: rgba(0,0,0,0.5);
}
+.devtools-autocomplete-listbox .autocomplete-item > span {
+ color: #666;
+}
+
+.theme-dark .devtools-autocomplete-listbox .autocomplete-item > span {
+ color: #ccc;
+}
+
.devtools-autocomplete-listbox .autocomplete-selected,
.devtools-autocomplete-listbox .autocomplete-selected:hover,
.theme-dark .devtools-autocomplete-listbox .autocomplete-selected,
.theme-dark .devtools-autocomplete-listbox .autocomplete-selected:hover {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
-.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%);
+.devtools-autocomplete-listbox .autocomplete-selected > span,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span {
+ color: var(--theme-selection-color);
}
-.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 > .initial-value,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
+ color: var(--theme-highlight-yellow);
}
/* 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;