object-visualizer
Version:
Visualize JSON object to DOM.
1 lines • 1.72 kB
CSS
.object-visualizer{margin:0;padding:10px;font-family:Menlo;font-size:1rem;line-height:1.4;cursor:default;overflow:auto}.object-visualizer>*{width:100%;display:inline-block}.object-visualizer .value{white-space:nowrap}.object-visualizer .array>.value,.object-visualizer .object>.value{display:flex;flex-direction:column;margin-left:2rem}.object-visualizer .array[aria-expanded=false]>.count,.object-visualizer .object[aria-expanded=false]>.count{margin-right:.5rem}.object-visualizer .indicator{font-size:.8rem;padding-right:.3rem;user-select:none;vertical-align:text-bottom}.object-visualizer>*>.preview{font-style:italic}.object-visualizer .value>.array,.object-visualizer .value>.object{position:relative;left:-.8rem}.object-visualizer{background-color:#fff}.object-visualizer .null>.value{color:#80868a}.object-visualizer .false>.value,.object-visualizer .number>.value,.object-visualizer .true>.value{color:#1a1aa6}.object-visualizer .quotes,.object-visualizer .string>.value{color:#c80200}.object-visualizer .indicator{color:#5f6367}.object-visualizer .key{color:#881180}.object-visualizer .separator{color:#202124}.object-visualizer .count{color:#5f6367}.object-visualizer .preview{color:#202124}@media (prefers-color-scheme:dark){.object-visualizer{background-color:#202124}.object-visualizer .null>.value{color:#80868a}.object-visualizer .false>.value,.object-visualizer .number>.value,.object-visualizer .true>.value{color:#9980ff}.object-visualizer .quotes,.object-visualizer .string>.value{color:#36d4c7}.object-visualizer .indicator{color:#9aa0a6}.object-visualizer .key{color:#5db0d7}.object-visualizer .separator{color:#e8eaed}.object-visualizer .count{color:#9aa0a6}.object-visualizer .preview{color:#e8eaed}}