make devtools tooltips have black background and blue border for readability

[themes.git] / LCARStrek / devtools / common.css

diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css
index 7ed2d9e9733555efa04f32e6d4343eede5f1d0cf..d76eda349b8593d266eaa6394cc7ab271ddf3cd3 100644 (file)
--- a/LCARStrek/devtools/common.css
+++ b/LCARStrek/devtools/common.css
@@ -35,56 +35,46 @@ notification {
   border-radius: 3px;
   overflow-x: hidden;
   max-height: 20rem;
+
+  /* Devtools autocompletes display technical english keywords and should be displayed
+     using LTR direction. */
+  direction: ltr !important;
 }
 
-.devtools-autocomplete-listbox {
-  background-color: transparent;
-  border-width: 0px !important;
-  margin: 0;
+/* Reset list styles. */
+.devtools-autocomplete-popup ul {
+  list-style: none;
 }
 
-.devtools-autocomplete-listbox > scrollbox {
-  padding: 2px;
+.devtools-autocomplete-popup ul,
+.devtools-autocomplete-popup li {
+  margin: 0;
 }
 
-.inplace-editor-autocomplete-popup .devtools-autocomplete-listbox {
-  /* Inplace editor closes the autocomplete popup on blur, the autocomplete
-  popup should not steal the focus here.*/
-  -moz-user-focus: ignore;
+.devtools-autocomplete-listbox {
+  background-color: transparent;
+  border-width: 0px !important;
+  margin: 0;
 }
 
-.devtools-autocomplete-listbox > richlistitem,
-.devtools-autocomplete-listbox > richlistitem[selected] {
+.devtools-autocomplete-listbox .autocomplete-item {
   width: 100%;
   background-color: transparent;
   border-radius: 4px;
 }
 
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
-.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
-/*  background-color: rgba(0,0,0,0.5); */
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
-.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
-/*  color: hsl(208,100%,60%);*/
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
-/*  color: #eee;*/
+.devtools-autocomplete-listbox .autocomplete-selected {
+/*  background-color: rgba(0,0,0,0.2); */
 }
 
-.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
-/*  color: #ccc;*/
-}
-
-.devtools-autocomplete-listbox > richlistitem > .initial-value,
-.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
+.devtools-autocomplete-listbox .autocomplete-item > .initial-value,
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
   margin: 0;
-  padding: 1px 0;
+  padding: 0;
+  cursor: default;
 }
 
-.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
   text-align: end;
 }
 
@@ -93,30 +83,24 @@ notification {
 .devtools-autocomplete-popup,
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
-  border: 1px solid #FF9F00;
+  border: 1px solid #9C9CFF;
   background-color: #000000;
 }
 
-.devtools-autocomplete-popup.light-theme {
-}
+/* Autocomplete list clone used for accessibility. */
 
-.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected],
-.devtools-autocomplete-listbox.firebug-theme > richlistitem:hover,
-.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
-.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
-/*  background-color: rgba(128,128,128,0.3); */
-}
-
-.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected] > .autocomplete-value,
-.devtools-autocomplete-listbox:focus.firebug-theme > richlistitem[selected] > .initial-value,
-.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
-.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
-/*  color: #222;*/
+.devtools-autocomplete-list-aria-clone {
+  /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
+  position: fixed;
+  overflow: hidden;
+  margin: 0;
+  width: 0;
+  height: 0;
 }
 
-.devtools-autocomplete-listbox.firebug-theme > richlistitem > label,
-.devtools-autocomplete-listbox.light-theme > richlistitem > label {
-/*  color: #666;*/
+.devtools-autocomplete-list-aria-clone li {
+  /* Prevent screen readers from prefacing every item with 'bullet'. */
+  list-style-type: none;
 }
 
 /* links to source code, like displaying `myfile.js:45` */
@@ -159,7 +143,6 @@ notification {
 
 textbox[focused="true"] {
   border-color: var(--theme-focus-border-color-textbox);
-
 /*  box-shadow: var(--theme-focus-box-shadow-textbox);*/
   transition: all 0.2s ease-in-out
 }
@@ -176,3 +159,24 @@ input[type="checkbox"]:-moz-focusring,
 checkbox:-moz-focusring {
   outline: none;
 }
+
+
+:root {
+  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: var(--clear-icon-url);
+}
+
+.devtools-button.devtools-filter-icon::before {
+  background-image: var(--filter-image);
+}
+
+.devtools-toolbarbutton.devtools-clear-icon {
+  list-style-image: var(--clear-icon-url);
+}
+
+.devtools-option-toolbarbutton {
+  list-style-image: var(--tool-options-image);
+}