/* See license.txt for terms of usage */

/******************************************************************************/
/* Toolbox & Panel Tabs */

.theme-firebug #toolbox-buttons {
  display: none;
}

.theme-firebug .devtools-tabbar,
.theme-firebug .devtools-sidebar-tabs tabs {
  border-bottom-width: 0;
  box-shadow: none;
  font-family: Lucida Grande, Tahoma, sans-serif;
  -moz-appearance: none;
  background-color: rgb(219, 234, 249);
  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
}

/* Only apply bottom-border for:
  1) The main tab list.
  2) The side tab list if there is no scroll-box that has its own border.

  Use !important to override even the rule in webconsole.css that uses
  ID in the selector. */
.theme-firebug .devtools-tabbar,
.theme-firebug .devtools-sidebar-tabs tabs {
  border-bottom: 1px solid rgb(170, 188, 207) !important;
}

.theme-firebug .devtools-sidebar-tabs tabs,
.theme-firebug .devtools-sidebar-tabs tabscrollbox {
  height: 28px;
  background-color: rgb(219, 234, 249) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.theme-firebug .devtools-sidebar-tabs tabscrollbox {
  -moz-binding: url("chrome://firebug/skin/tabScrollBox.xml#tabScrollBox");
  min-height: 28px;
  border-bottom: 1px solid rgb(170, 188, 207);
}

.theme-firebug .devtools-tab,
.theme-firebug .devtools-sidebar-tabs tab {
  margin: 3px 0 -1px 0;
  padding: 0 2px 1px 0;
  border: 1px solid transparent !important;
  border-radius: 4px 4px 0 0;
  font-size: 11px;
  font-weight: bold;
  color: #565656;
  box-shadow: none;
}

/* In order to hide bottom-border of side panel tabs we need
 to make the parent element overflow visible, so child element
 can move one pixel down to hide the bottom border. */
.theme-firebug .devtools-sidebar-tabs tabs {
  overflow: visible;
}

.theme-firebug .devtools-tab:hover,
.theme-firebug .devtools-sidebar-tabs tab:hover {
  border: 1px solid #C8C8C8 !important;
  border-bottom: 1px solid transparent;
}

.theme-firebug .devtools-tab[selected],
.theme-firebug #toolbox-sidetabs .devtools-tab[selected],
.theme-firebug .devtools-sidebar-tabs tab[selected] {
  background-color: rgb(247, 251, 254);
  border: 1px solid rgb(170, 188, 207) !important;
  border-bottom-width: 0 !important;
  padding-bottom: 2px;
  color: inherit;
  box-shadow: none;
}

.theme-firebug .devtools-tab spacer,
.theme-firebug .devtools-tab image {
  display: none;
}

.theme-firebug .toolbox-tab label {
  margin: 0;
}

.theme-firebug #panelSideBox .devtools-tab[selected],
.theme-firebug .devtools-sidebar-tabs tab[selected] {
  background-color: white;
}

.theme-firebug #panelSideBox .devtools-tab:first-child,
.theme-firebug .devtools-sidebar-tabs tab:first-child {
  margin-left: 5px;
}

/* Do not display the All Tabs button opening a menu-popup with list of tabs */
.theme-firebug .devtools-sidebar-alltabs {
  display: none;
}

/******************************************************************************/
/* Debugger Panel Tab */

/* Highlight debugger tab when it's paused and not selected.
   There is also execution pointer displayed in the tab indicating
   that the debugger is paused. */
.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] {
  background-color: rgba(89, 178, 234, .2);
  background-image: url(chrome://firebug/skin/executionPointer.svg);
  background-repeat: no-repeat;
  padding-left: 13px !important;
  background-position: 3px 7px, 0 0;
}

/******************************************************************************/
/* Firebug Menu Button */

.theme-firebug #firebug-menu-button {
  margin: 3px;
  margin-right: 0;
  padding: 1px 3px;
}

.theme-firebug #firebug-menu-button:hover {
  filter: url(chrome://firebug/skin/filters.svg#darken);
}

.theme-firebug #firebug-menu-button:active {
  filter: url(chrome://firebug/skin/filters.svg#deepDarken);
}

.theme-firebug #firebug-menu-button .toolbarbutton-menu-dropmarker {
  visibility: collapse;
}

/******************************************************************************/
/* Tools Menu Button */

.theme-firebug #firebug-tools-menu {
  margin: 3px;
  margin-right: 0;
  padding: 1px 3px;
}

.theme-firebug #firebug-tools-menu:hover {
  filter: url(chrome://firebug/skin/filters.svg#darken);
}

/******************************************************************************/
/* Element Picker */

.theme-firebug #command-button-pick {
  background: none !important;
  margin: 3px;
  margin-left: 0;
}

/* Remove the original button image */
.theme-firebug #command-button-pick > image {
  background-image: none;
}

.theme-firebug #command-button-pick {
  list-style-image: url(chrome://firebug/skin/inspect.svg);
}

.theme-firebug #command-button-pick:hover {
  filter: url(chrome://firebug/skin/filters.svg#darken);
}

.theme-firebug #command-button-pick:active {
  filter: url(chrome://firebug/skin/filters.svg#deepDarken);
}

/******************************************************************************/
/* Options Tab */

.theme-firebug #toolbox-tab-options {
  margin-right: 4px;
  background-color: white;
}

.theme-firebug #toolbox-tab-options::before {
  content: url(chrome://firebug/skin/options.svg);
  display: block;
  margin: 4px 7px 0;
}

.theme-firebug #toolbox-tab-options image {
  display: none;
}

.theme-firebug #toolbox-tab-options:not([selected]):hover::before {
  filter: url(chrome://firebug/skin/filters.svg#darken);
}

.theme-firebug #toolbox-tab-options[selected] image {
  filter: url(chrome://browser/skin/devtools/filters.svg#invert) !important;
  opacity: 0.6;
}

/******************************************************************************/
/* Toolbox Controls */

.theme-firebug #toolbox-controls {
  margin-right: 2px;
}

.theme-firebug #toolbox-controls toolbarbutton {
  margin-left: 0 !important;
  width: 12px;
  min-width: 12px;
}

.theme-firebug #toolbox-controls toolbarbutton:hover {
  background: none;
  box-shadow: none;
}

.theme-firebug #toolbox-dock-bottom > image {
  background-image: url("chrome://firebug/skin/attachAtBottom.svg");
}

.theme-firebug #toolbox-dock-side > image {
  background-image: url("chrome://firebug/skin/attachAtSide.svg");
}

.theme-firebug #toolbox-dock-window > image {
  background-image: url("chrome://firebug/skin/detach.svg");
}

.theme-firebug #toolbox-close > image {
  background-image: url("chrome://firebug/skin/close.svg");
}

.theme-firebug #toolbox-dock-side > image,
.theme-firebug #toolbox-dock-bottom > image,
.theme-firebug #toolbox-dock-window > image,
.theme-firebug #toolbox-close > image {
  filter: none !important;
}
