big-json-viewer/styles/default.css

JavaScript Library to view big JSON structures.

.json-node-type {
  color: #7f7f7f;
}

.json-node-toggler,
.json-node-stub-toggler {
  text-decoration: none;
  color: inherit;
}

.json-node-toggler:hover,
.json-node-stub-toggler:hover {
  background: #e2e2e2;
}

.json-node-children,
.json-node-root {
  padding-left: 1em;
}

.json-node-header mark {
  background-color: rgba(199, 193, 0, 0.5);
  padding: 0;
}

.json-node-header mark.highlight-active {
  background-color: rgba(199, 103, 46, 0.5);
}

.json-node-label {
  color: #184183;
}

.json-node-number .json-node-value {
  color: blue;
}

.json-node-string .json-node-value {
  color: green;
}

.json-node-boolean .json-node-value {
  color: #95110f;
}

.json-node-null .json-node-value {
  color: #959310;
}

.json-node-number .json-node-type,
.json-node-string .json-node-type,
.json-node-boolean .json-node-type,
.json-node-undefined .json-node-type,
.json-node-null .json-node-type {
  display: none;
}

.json-node-accessor {
  position: relative;
}

.json-node-accessor::before {
  position: absolute;
  content: '▶';
  font-size: 0.6em;
  line-height: 1.6em;
  right: 0.5em;
  transition: transform 100ms ease-out;
}

.json-node-open .json-node-accessor::before {
  transform: rotate(90deg);
}

.json-node-children {
  /*animation-duration: 500ms;*/
  /*animation-name: json-node-children-open;*/
  /*transform-origin: top;*/
}

.json-node-stub-toggler .json-node-label,
.json-node-collapse {
  color: #7f7f7f;
}
.json-node-collapse {
  font-size: 0.8em;
}

@keyframes json-node-children-open {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.json-node-link {
  display: none;
  padding-left: 0.5em;
  font-size: 0.8em;
  color: #7f7f7f;
  text-decoration: none;
}

.json-node-link:hover {
  color: black;
}

.json-node-header:hover .json-node-link {
  display: inline;
}