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

/******************************************************************************/
/* Toolbar */

/* The toolbar should take the entire horizontal space, since there will
be toggle-side-panels button at the end at some point */
.theme-firebug #network-table #panelToolbar {
  -moz-box-flex: 1;
}

#requests-menu-perf-notice-button {
  list-style-image: url(chrome://firebug/skin/profile.svg);
}

/******************************************************************************/
/* Sidebar */

/* Hide the original toggle side-bar button */
.theme-firebug toolbarbutton#details-pane-toggle {
  display: none;
}

/******************************************************************************/
/* Header and Footer */

.theme-firebug .theme-sidebar {
  background-color: white;
}

.theme-firebug #requests-menu-toolbar {
  height: 16px !important;
}

.theme-firebug .requests-menu-header {
  cursor: pointer;
  -moz-user-select: none;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
  padding: 0 !important;
  font-weight: bold;
  background: linear-gradient(
          rgba(255, 255, 255, 0.05),
          rgba(0, 0, 0, 0.05)),
      radial-gradient(1px 60% at right,
          rgba(0, 0, 0, 0.8) 0%,
          transparent 80%) repeat-x #C8D2DC;
  color: #000000;
  white-space: nowrap;
}

.theme-firebug #requests-menu-footer {
  background-color: rgb(200, 210, 220);
  height: 16px;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-firebug .requests-menu-header-button {
  transition: none;
  min-height: 17px;
}

.theme-firebug .requests-header-menu-button[sorted] {
  background-color: #AAC3DC;
}

.theme-firebug .requests-menu-header-button:not(:active)[sorted=descending] {
  background: url(chrome://firebug/skin/arrowDown.svg) no-repeat calc(100% - 4px);
}

.theme-firebug .requests-menu-header-button:not(:active)[sorted=ascending] {
  background: url(chrome://firebug/skin/arrowUp.svg) no-repeat calc(100% - 4px);
}

.theme-firebug .requests-header-menu:hover:active {
  background-image: linear-gradient(
          rgba(0, 0, 0, 0.1),
          transparent),
      radial-gradient(1px 60% at right,
          rgba(0, 0, 0, 0.8) 0%,
          transparent 80%);
}

.theme-firebug .requests-menu-filter-button,
.theme-firebug .devtools-searchinput,
.theme-firebug #requests-menu-clear-button {
  display: none;
}

/******************************************************************************/
/* HTTP Entries */

.theme-firebug .side-menu-widget-item {
  background: white;
  height: 17px;
  line-height: 15px;
  border-bottom: 1px solid #EFEFEF;
  margin: 0;
  padding: 0;
}

.theme-firebug .requests-menu-subitem {
  padding: 1px;
}

/* HTTP Status Column */
.theme-firebug .requests-menu-subitem.requests-menu-icon-and-file {
  font-weight: bold;
}

/* Method Column */
.theme-firebug .requests-menu-subitem.requests-menu-status-and-method {
  color: rgb(128, 128, 128);
}

/* Selection */
.theme-firebug .side-menu-widget-item.selected .requests-menu-timings-total,
.theme-firebug .side-menu-widget-item.selected .requests-menu-icon-and-file,
.theme-firebug .side-menu-widget-item.selected .requests-menu-status-and-method,
.theme-firebug .side-menu-widget-item.selected {
  background: #3399ff;
  color: white;
}

.theme-firebug .side-menu-widget-item:not(.selected):hover {
  background: #EFEFEF;
}

/******************************************************************************/
/* Timings */

.theme-firebug .requests-menu-timings-box {
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
  height: 16px;
}

.theme-firebug .requests-menu-timings-total {
  color: #808080;
  min-width: 16px;
}

.theme-firebug .requests-menu-timings-box.blocked {
  background-color: rgba(235, 83, 104, 0.8); /* red */
}

.theme-firebug .requests-menu-timings-box.dns {
  background-color: rgba(223, 128, 255, 0.8); /* pink */
}

.theme-firebug .requests-menu-timings-box.connect {
  background-color: rgba(217, 102, 41, 0.8); /* orange */
}

.theme-firebug .requests-menu-timings-box.send {
  background-color: rgba(70, 175, 227, 0.8); /* light blue */
}

.theme-firebug .requests-menu-timings-box.wait {
  background-color: rgba(94, 136, 176, 0.8); /* blue grey */
}

.theme-firebug .requests-menu-timings-box.receive {
  background-color: rgba(112, 191, 83, 0.8); /* green */
}

.theme-firebug .requests-menu-subitem.requests-menu-waterfall {
  background-image: none;
}

/******************************************************************************/
/* Charts */

.theme-firebug .chart-colored-blob[name=html] {
  fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */
  background: rgba(94, 136, 176, 0.8);
}

.theme-firebug .chart-colored-blob[name=css] {
  fill: rgba(70, 175, 227, 0.8); /* light blue */
  background: rgba(70, 175, 227, 0.8);
}

.theme-firebug .chart-colored-blob[name=js] {
  fill: rgba(235, 83, 104, 0.8); /* red */
  background: rgba(235, 83, 104, 0.8);
}

.theme-firebug .chart-colored-blob[name=xhr] {
  fill: rgba(217, 102, 41, 0.8); /* orange  */
  background: rgba(217, 102, 41, 0.8);
}

.theme-firebug .chart-colored-blob[name=fonts] {
  fill: rgba(223, 128, 255, 0.8); /* pink */
  background: rgba(223, 128, 255, 0.8);
}

.theme-firebug .chart-colored-blob[name=images] {
  fill: rgba(112, 191, 83, 0.8); /* pink */
  background: rgba(112, 191, 83, 0.8);
}

.theme-firebug .chart-colored-blob[name=media] {
  fill: rgba(235, 235, 84, 0.8); /* yellow */
  background: rgba(235, 235, 84, 0.8);
}

.theme-firebug .chart-colored-blob[name=flash] {
  fill: rgba(84, 235, 159, 0.8); /* cyan */
  background: rgba(84, 235, 159, 0.8);
}

/******************************************************************************/
/* Side Bar */

.theme-firebug .devtools-sidebar-tabs toolbar {
  display: none;
}

/******************************************************************************/
/* Side panels */

.theme-firebug #network-inspector-view .variables-view-scope > .title > .theme-twisty {
  display: block;
}

.theme-firebug .devtools-toolbar > .name {
  cursor: pointer;
}

.theme-firebug .variables-view-variable > .title > .name,
.theme-firebug .variables-view-variable > .title > .separator {
  font-weight: bold;
}

.theme-firebug .variables-view-variable > .title > .value {
  color: #18191A;
}

/******************************************************************************/
/* Headers side panel */

.theme-firebug box.requests-menu-status:not([code]) {
  background-color: rgba(143, 161, 178, 1); /* grey */
}

.theme-firebug box.requests-menu-status[code^="1"] {
  background-color: rgba(0, 136, 204, 1); /* light blue */
}

.theme-firebug box.requests-menu-status[code^="2"] {
  background-color: rgba(44, 187, 15, 1); /* green */
}

/* 3xx are triangles */
.theme-firebug box.requests-menu-status[code^="3"] {
  background-color: transparent;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
  border-radius: 0;
}

/* 4xx and 5xx are squares - error codes */
.theme-firebug box.requests-menu-status[code^="4"] {
  background-color: rgba(237, 38, 85, 1); /* red */
  border-radius: 0; /* squares */
}

.theme-firebug box.requests-menu-status[code^="5"] {
  background-color: rgba(184, 46, 229, 1); /* pink! */
  border-radius: 0;
  transform: rotate(45deg);
}

/******************************************************************************/
/* Side panel Headers (hide details) */

/* Make more space in the Headers side bar by hiding duplicated info */
.theme-firebug .tabpanel-content #headers-summary-url,
.theme-firebug .tabpanel-content #headers-summary-method,
.theme-firebug .tabpanel-content #headers-summary-address,
.theme-firebug .tabpanel-content #headers-summary-status,
.theme-firebug .tabpanel-content #headers-summary-version {
  display: none;
}

/* The general info in the Headers panel is hidden in Firebug theme */
.theme-firebug #headers-tabpanel.tabpanel-content .devtools-toolbar {
  display: none;
}

/* Headers separators are toolbars, but they have different height */
.theme-firebug #headers-tabpanel.tabpanel-content .title.devtools-toolbar {
  display: -moz-box;
  height: 20px !important;
}
