second and final part of syncing LCARStrek with Firefox 49/50 devtools theme changes
[themes.git] / LCARStrek / devtools / common.css
index 7ed2d9e9733555efa04f32e6d4343eede5f1d0cf..f3e8d0baa6ea4fc0d4741e622efc348ea75e7b15 100644 (file)
@@ -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 .autocomplete-selected {
+/*  background-color: rgba(0,0,0,0.2); */
 }
 
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
-/*  color: #eee;*/
-}
-
-.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;
 }
 
@@ -97,26 +87,20 @@ notification {
   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
 }