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

/******************************************************************************/
/* Frame Table */

.frameTable {
  font-family: Lucida Grande, Tahoma, sans-serif;
  font-size: 11px;
  width: 100%;
  border-spacing: 0;
  border: none;
}

.frameTHead th {
  min-height: 17px;
  cursor: pointer;
  -moz-user-select: none;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
  padding: 2px;
  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;
}

.frameTHead th[sorted] {
  background-color: #AAC3DC;
}

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

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

.frameTHead th: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%);
}

/******************************************************************************/
/* Frame Rows */

.frameRow td {
  height: 17px;
  line-height: 15px;
  border-bottom: 1px solid #EFEFEF;
  margin: 0;
  padding: 1px;
}

/* #65 Wrap extremely long connect URIs */
.frameRow.eventRow td {
  word-wrap: break-word;
  max-width: 20px;
}

/******************************************************************************/
/* Inline Packet Details Preview */

.frameRow .preview {
  overflow: auto;
  width: 100%;
  max-height: 200px;
}

.frameRow .memberRow:hover {
  background-color: transparent;
}

.frameRow .domTable {
  width: auto;
}

.frameRow .domTable > tbody > tr > td {
  border-bottom: transparent;
}

/******************************************************************************/
/* Events */

.eventRow .uri {
  color: gray;
  padding-left: 5px;
}

.eventRow .text {
  color: black;
  font-weight: bold;
  padding-left: 20px;
}

/******************************************************************************/
/* Frame Columns */

.frameTHead th {
  padding-left: 5px;
  padding-right: 5px;
}

.frameRow .direction {
  width: 20px;
  min-width: 20px;
}

.frameRow .direction div {
  background-image: url('./send.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.frameRow.send td.direction div {
  background-position: -12px 2px;
}

.frameRow.receive td.direction div {
  transform: scaleX(-1);
  background-position: -14px 2px;
}

.frameTHead th.socketId,
.frameRow td.socketId {
  text-align: center;
  width: 20px;
}

.frameTHead th.payload,
.frameRow td.payload {
  text-align: left;
  padding-left: 3px;
  padding-right: 3px;
}

.frameTHead th.bit,
.frameRow td.bit {
  text-align: center;
  width: 20px;
}

.frameTHead th.opcode,
.frameRow td.opcode {
  text-align: center;
  width: 55px;
}

.frameRow td.opcode {
  color: gray;
}

.frameTHead th.payloadSize,
.frameRow td.payloadSize {
  text-align: center;
  width: 55px;
}

.frameTHead th.time,
.frameRow td.time {
  text-align: center;
  width: 50px;
}

.frameRow td.time {
  padding-right: 3px;
}

/******************************************************************************/
/* Summary */

.frameTFoot td {
  height: 16px;
  font-weight: bold;
  background-color: #C8D2DC;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 2px;
}

.frameTFoot td span {
  margin-left: 5px;
  margin-right: 11px;
}

/******************************************************************************/
/* Warning */

.frameTable .warningRow {
  height: 50px;
  padding: 50px;
  font-size: 12px;
  font-family: sans-serif;
}

.frameTable .warningRow .bugLink {
  color: #00c;
}

.frameTable .warningRow .bugLink:hover {
  text-decoration: underline;
}

/******************************************************************************/
/* Theme Dark & Light */

.theme-light .frameRow td,
.theme-dark .frameRow td {
  border-bottom: none;
}

.theme-light .frameRow:hover>td,
.theme-dark .frameRow:hover>td {
  background-color: var(--theme-toolbar-background);
}

.theme-light .frameRow.selected>td,
.theme-dark .frameRow.selected>td {
  /* JSON text (blue) must be visible, so we can't use --theme-selection-background */
  background-color: var(--theme-selection-background-semitransparent);
}

.theme-light .frameTHead th,
.theme-dark .frameTHead th {
  font-weight: normal;
  color: var(--theme-body-color-alt);
  background-color: var(--theme-toolbar-background);
}

.theme-light .frameTFoot td,
.theme-dark .frameTFoot td {
  background-color: var(--theme-toolbar-background);
  border-top: 1px solid var(--table-splitter-color);
  border-bottom: 1px solid var(--table-splitter-color);
  height: 18px;
}

.theme-dark .eventRow .text {
  color: var(--theme-body-color-alt);
}
