bkdotcom/PHPDebugConsole

$color-prettified: #000b9bee;
$color-timestamp: #009;
$color-bg-specialchar: #c0c0c0;
$color-specialchar: #003;
$color-bg-maxlen: #ffcc77;
$color-bg-unicode: #c0c0ff;

.expand-all {
  margin-bottom: 0.5em;
}

.file-link {
  &.lpad { margin-left: 0.33em; }
  i {
    margin-right: 0;
    vertical-align: baseline;
  }
}

.hasTooltip,
*[title]:not(a) {
  cursor: help;
  &:hover { background-color: rgba(0, 0, 0, 0.05); }
}
*[data-toggle] { cursor: pointer; }

.string-encoded {
  &.tabs-container {
    > i {
      line-height: 20px;
      margin-right: 0;
    }
  }
  &[data-type=base64] > .string-raw .t_string {
    font-family: monospace;
  }
}

.prettified { color: $color-prettified; }
.timestamp { color: $color-timestamp; }

.binary,
.maxlen,
.unicode {
  margin: 0 0.1em;
  padding: 0 0.3em;
  background-color: $color-bg-specialchar;
  color: $color-specialchar;
  font-weight: bold;
}
.maxlen {
  background-color: $color-bg-maxlen;
}
.unicode {
  background-color: $color-bg-unicode;
}
.c1-control {
  display: inline-block;
  vertical-align: baseline;
  clip-path: inset(30% 0);
  transform: scale(2);
}

//
// Whitespace
//
.ws_s,
.ws_t,
.ws_r,
.ws_n,
.ws_p { opacity: 0.33; }
.ws_t::before {
  display: inline-block;
  content: "\203A"; // ›
  width: 1em;
}
.ws_r::before { content: "\\r"; }
.ws_n::before { content: "\\n"; }