bkdotcom/PHPDebugConsole

//
// array & objects
//

$color-classname: #8d0c4c;
$color-param: #263;

$color-debug: #000b9bee;
$color-magic: #f80e;
$color-private: #00000082;
$color-protected: #000000c6;
$color-public: inherit;
$color-warning: #F00;

$color-static: #da0d87ee;
$color-final: #f00e;

.namespace { opacity: 0.5; }

.array-inner,
.object-inner {
  display: block;
  margin-left: 1em;
}

.classname {
  font-weight: bold;
  color: color-mix(in lch, currentColor, $color-classname);
}

// this is outside of .t_object because tooltip gets placed outside
.attribute {
  .t_punct {
    color: inherit;
    font-weight: bold;
  }
}
// method parameter or attribute argument
// this is outside of .t_object because tooltip gets placed outside
.t_parameter-name {
  color: $color-param;
}

.t_array {
  > .t_array-collapse,
  > .array-inner,
  > .t_punct {
    display: none;
  }
  &.expanded {
    > .t_array-expand {
      display: none;
    }
    > .t_array-collapse,
    > .t_punct {
      display: inline;
    }
    > .array-inner {
      display: block;
    }
  }
  &.array-file-tree {
    .array-inner {
      margin-left: 0.25em;
    }
    .exclude-count {
      background: $info-bg;
      color: $info-fg;
    }
    .t_key {
      color: #000040;
      font-weight: bold;
    }
    .t_string,
    .t_key {
      // directory "key" & files
      &::before,
      &::after {
        display: none;
      }
    }
  }
}
.array-inner {
  > li {
    > .t_operator {
      margin: 0 0.25em;
    }
  }
}
li[class*=m_] > .t_array.array-file-tree > .array-inner {
  margin-left: -10px;
}

.t_object {
  display: inline;

  /*
    Method static-vars / return-value header
  */
  h3 {
    margin: 0;
    font-size: inherit;
    font-style: italic;
    color: $color-header;
  }

  .t_modifier_public {
    color: $color-public;
  }
  .t_modifier_protected {
    color: $color-protected;
  }
  .t_modifier_private {
    color: $color-private;
  }
  .t_modifier_final {
    color: $color-final;
    font-weight: bold;
  }
  .t_modifier_static {
    font-style: italic;
    color: $color-static;
  }
  .t_modifier_debug {
    color: $color-debug;
  }

  > .object-inner {
    > .modifiers {
      display: none;
    }
    > dd[class*=t_modifier_] {
      display: inline-block;
      margin-left: 0;
      margin-right: 0.5em;
      border: solid 1px;
      border-radius: 4px;
      padding: 0 .75em;
      height: 1.75em;
      text-indent: 0;
      line-height: 1.5;
      font-weight: bold;
    }
    /*
    > dd[class*=t_modifier_]:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
    */
    > .t_modifier_readonly {
      color: $warn-fg;
      background-color: $warn-bg;
      border-color: $warn-fg;
      .fa-stack {
        font-size: 0.8em;
        margin-right: 0.33em;
        .fa-ban {
          opacity: 0.75;
        }
      }
    }
    > .t_modifier_final {
      color: $error-fg;
      background-color: lighten($error-bg, 10%);
      border-color: $error-fg;
    }
    .heading {
      color: #4f16b0;
      text-decoration: underline;
      font-weight: bold;
    }
  }

  .vis-toggles {
    *[data-toggle] {
      padding: 0.15em 0.5em;
      display: inline-block;
    }
  }
  dd + .vis-toggles {
    margin-top: .25em;
  }

  .method .parameter .t_parameter-name[title],
  .t_identifier[title],
  .t_type[title] {
    text-decoration: underline;
  }

  .method {
    ul {
      margin-left: 15px;
    }
    &.deprecated {
      opacity: 0.66;
      i {
        opacity: 0.66; // inherits, want even lighter
        color: $error-fg;
        border-bottom: 0;
      }
    }
    > .t_punct:not(.t_colon) {
      opacity: 1;
      font-weight: bold;
      color: inherit;
    }
    i.fa-clone { color: #999; }
  }

  .private-ancestor:not(:hover) {
    > * { opacity: 0.5; }
    > .fa-lock,
    > .t_modifier_private {
      opacity: 1;
    }
  }

  i.fa-flag,
  i.fa-warning {
    color: $color-warning;
  }

  i.fa-eye {
    color: $color-debug;
    font-size: 1.1em;
    border-bottom: 0;
  }
  i.fa-magic,
  .t_modifier_magic,
  .t_modifier_magic-read,
  .t_modifier_magic-write {
    color: $color-magic;
  }
  .debugInfo-excluded > i.fa-eye-slash { color: #999; }

  .info {
    // "this object has magic methods"
    display: inline-block;
    background-color: $info-bg;
    color: $info-fg;
  }
}
td.t_object {
  display: table-cell;
}