bkdotcom/PHPDebugConsole

//
// data types and "tokens"
//

$color-identifier: #039;
$color-keyword: #07a;
$color-type: #693;
$color-key-bracket: #999;
$color-punct: #999;
$color-operator: #a67f59;

$color-true: #993;
$color-true-shadow: rgba(153, 153, 51, 0.5);
$color-false: #c33;
$color-false-shadow: rgba(204, 51, 51, 0.5);
$color-numeric: #009;
$color-recursion: #f00;
$color-string: #333;
$color-stringified: rgba(0, 200, 200, 0.6);

.t_type { color: $color-type; }

.t_bool[data-type-more=true] {
  color: $color-true;
  text-shadow: 1px 1px 2px $color-true-shadow;
}
.t_bool[data-type-more=false] {
  color: $color-false;
  text-shadow: 1px 1px 2px $color-false-shadow;
}

/*
.t_callable {
  font-weight: bold;
  .t_type,
  .namespace {
    font-weight: normal;
  }
}
*/

//
// property-name, constant-name, method-name
//
.t_identifier {
  color: $color-identifier;
  font-weight: bold;
  font-family: monospace;
  white-space: nowrap;
  .t_name {
    color: inherit;
  }
}
.t_int,
.t_float,
.t_string[data-type-more=numeric],
.t_string[data-type-more=timestamp] {
  font-family: $font-family-numeric !important;
  color: $color-numeric;
  font-size: 1.15em;
  line-height: 1.15em;
  &::before,
  &::after {
    // undo font-size increase got
    font-family: $font-family;
    font-size: 0.8695em;
  }
}

.t_key {
  opacity: 0.75;
  &[data-file] {
    opacity: 1;
  }
  &::before,
  &::after {
    font-family: $font-family;
    color: $color-key-bracket;
  }
  &::before {
    content: '[';
    margin-right: 1px;
  }
  &::after {
    content: ']';
    margin-left: 1px;
  }
  &.t_int { white-space: nowrap; }
}
.t_keyword { color: $color-keyword; }
.t_null { opacity: 0.3; }
.t_operator {
  color: $color-operator;
  white-space: nowrap !important; //  override .debug .t_string > *
}
.t_punct { color: $color-punct; }

.excluded,
.t_maxDepth,
.t_notInspected,
.t_recursion,
.t_unknown {
  font-weight: bold;
  color: $color-recursion;
}
.t_resource { font-style: italic; }
.t_string {
  white-space: pre-wrap;
  word-break: break-all;
  &::before,
  &::after {
    font-family: $font-family;
    opacity: 0.33;
    color: $color-string;
  }
  &::before { content: open-quote; }
  &::after { content: close-quote; }
  &.classname {
    &::before { content: none; }
    &::after { content: none; }
  }
  > * {
    white-space: normal;
    word-break: break-word;
  }
  pre {
    white-space: pre;
  }
}
.t_stringified { text-shadow: 0 0 2px $color-stringified; }
.t_undefined::after {
  content: "undefined";
  opacity: 0.3;
}