bkdotcom/PHPDebugConsole

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

.badge {
  display: inline-block;
  padding: 0.25em 0.4em 0.16em;
  font-size: 82%;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: bottom;
  border-radius: 0.25rem;
  color: $secondary-fg;
  background-color: $secondary-bg;
}

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

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

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

*[data-toggle] { 
  cursor: pointer !important; 
}

.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 {
  padding: 0 0.3em;
}

.char-ws,
.maxlen,
.unicode {
  padding: 0 0.3em;
  // match a:hover (found in base.scss
  cursor: pointer;
  &:hover {
    outline: 0;
    color: #e00;
  }
}
.binary {
  background-color: $color-bg-binary;
  color: $color-fg-binary;
  font-family: monospace !important;
  font-weight: bold;
}

/*
char-control is a single "control picture" / replacement character
https://www.compart.com/en/unicode/block/U+2400
which displays very small
use ::after pseudo element to replace the char with abbreviation
*/
.char-control[data-abbr] {
  display: inline-block;
  text-indent: -9999px;
  line-height: 0;  // #reasons
  margin: 0 0.15em;
}
.char-control[data-abbr]::after {
  content: attr(data-abbr);
  display: block;
  text-indent: 0;
  
  line-height: 1.25em;
  position: relative;
  top: -0.25em;
  font-size: 0.66em;

  padding: 0.05em 0.5em 0;
  background-color: silver;
  color: $color-fg-binary;
  font-family: monospace !important;
}

.maxlen {
  background-color: $color-bg-maxlen;
}
.char-ws,
.unicode {
  background-color: $color-bg-unicode;
  font-weight: normal; // many chars don't render as bold
}
 
ul[data-type-more=binary] > li.t_string {
  &::before { content: ""; }
  &::after { content: ""; }
  > .binary {
    padding: 0;
    margin: 0;
    word-spacing: -0.25em;
    font-size: 0.8em;
  }
  text-indent: 0;
  padding: 0;
}

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