first part of syncing LCARStrek with Firefox 49/50 devtools theme changes

[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-autocomplete-listbox {
  background-color: transparent;
  border-width: 0px !important;
  margin: 0;
}

.devtools-autocomplete-listbox > scrollbox {
  padding: 2px;
}

.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 > richlistitem,
.devtools-autocomplete-listbox > richlistitem[selected] {
  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.dark-theme > richlistitem > label {
/*  color: #ccc;*/
}

.devtools-autocomplete-listbox > richlistitem > .initial-value,
.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  margin: 0;
  padding: 1px 0;
}

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

/* Rest of the dark and light theme */

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

.devtools-autocomplete-popup.light-theme {
}

.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-listbox.firebug-theme > richlistitem > label,
.devtools-autocomplete-listbox.light-theme > richlistitem > label {
/*  color: #666;*/
}

/* 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;
}