make devtools tooltips have black background and blue border for readability

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

/* vim:set ts=2 sw=2 sts=2 et: */
/* 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/. */

@import url("splitters.css");

/* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */
window {
  padding: 0;
}

notification {
  margin-bottom: 3px;
}

/* End LCARStrek toolbox rules */

:root {
  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  --proportional-font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  --monospace-font-family: "Liberation Mono", Consolas, "Courier New", monospace;
  --monospace-font-size: 12px;
}

.devtools-monospace {
  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size);
}


/* Autocomplete Popup */

.devtools-autocomplete-popup {
  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;
}

/* Reset list styles. */
.devtools-autocomplete-popup ul {
  list-style: none;
}

.devtools-autocomplete-popup ul,
.devtools-autocomplete-popup li {
  margin: 0;
}

.devtools-autocomplete-listbox {
  background-color: transparent;
  border-width: 0px !important;
  margin: 0;
}

.devtools-autocomplete-listbox .autocomplete-item {
  width: 100%;
  background-color: transparent;
  border-radius: 4px;
}

.devtools-autocomplete-listbox .autocomplete-selected {
/*  background-color: rgba(0,0,0,0.2); */
}

.devtools-autocomplete-listbox .autocomplete-item > .initial-value,
.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
  margin: 0;
  padding: 0;
  cursor: default;
}

.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
  text-align: end;
}

/* Rest of the dark and light theme */

.devtools-autocomplete-popup,
.CodeMirror-hints,
.CodeMirror-Tern-tooltip {
  border: 1px solid #9C9CFF;
  background-color: #000000;
}

/* 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;
  margin: 0;
  width: 0;
  height: 0;
}

.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` */

.devtools-source-link {
  font-family: var(--monospace-font-family);
  color: var(--theme-text-blue);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  text-decoration: none;
  font-size: 11px;
  width: 12em; /* probably should be changed for each tool */
}

.devtools-source-link:hover {
  text-decoration: underline;
}

.devtools-source-link > .filename {
  text-overflow: ellipsis;
  text-align: end;
  overflow: hidden;
  margin: 2px 0px;
  cursor: pointer;
}

.devtools-source-link > .line-number {
  flex: none;
  margin: 2px 0px;
  cursor: pointer;
}

/* Keyboard focus highlight styles */

:-moz-focusring {
  outline: var(--theme-focus-outline);
  outline-offset: -1px;
}

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
}

textbox :-moz-focusring {
  box-shadow: none;
  outline: none;
}

/* Form fields should already have box-shadow hightlight */
select:-moz-focusring,
input[type="radio"]:-moz-focusring,
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);
}