@lanyue/react-object-viewer/dist/style.css

A flexible and lightweight object viewer component for React.

.tree{--line-color: var(--tree-line-color, #ddd);padding:10px;font-size:13px}.tree+.tree{margin-top:15px}.tree .tree-item-fold-btn{display:inline-block;width:15px;height:15px;padding:0;vertical-align:middle;margin-right:2px;transition:transform .2s ease;border:none;background-color:transparent;cursor:pointer;border-radius:4px;text-align:center;flex-shrink:0}.tree .tree-item-fold-btn:hover{background-color:#efefef}.tree .tree-item-fold-btn .icon-arrow{margin-top:-2px;vertical-align:middle;fill:#9a9a9a}.tree .tree-item-fold-btn.is-expand{transform:rotate(90deg)}.tree .tree-item .tree-item-content{margin-left:14px;position:relative}.tree .tree-item-label{display:flex;align-items:center}.tree .tree-item-label-inline{flex:1 auto;width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tree .tree-item-space{display:inline-block;width:15px;height:15px;padding:0;vertical-align:middle;margin-right:2px;position:relative}.tree .tree-item-icon{width:14px;height:14px;margin-right:4px;display:flex;align-items:center;justify-content:center}.tree.show-line .tree-item .tree-item-content:before{content:"";width:1px;height:100%;border-left:dashed 1px var(--line-color);position:absolute;left:-7px}.tree.show-line .tree-item-space:after{content:"";position:absolute;width:1px;height:100%;border-left:dashed 1px var(--line-color);left:7px}.tree.show-line .tree-item-space:before{content:"";position:absolute;width:7px;height:1px;border-bottom:dashed 1px var(--line-color);top:6px;left:7px}.object-viewer{padding:10px;background-color:#f9f8f7;border:solid 1px #e8e5e8;border-radius:5px;color:#625666;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:13px}.object-viewer+.object-viewer{margin-top:15px}.object-viewer .more-btn{margin-left:15px;display:inline-block;height:15px;vertical-align:middle;cursor:pointer;padding:1px 4px;background-color:transparent;color:#b7b7b7;border:none;border-radius:4px;transition:color .2s ease,background-color .2s ease}.object-viewer .more-btn:hover{color:#767676;background-color:#efefef}.object-viewer .more-btn .icon-ellipsis{height:15px;vertical-align:middle;margin-top:-4px;color:inherit}.object-viewer .object-inline{flex:1 auto;overflow:hidden;display:flex}.object-viewer .object-inline .object-inline-items{max-width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.object-viewer .is-italic{font-style:italic}.object-viewer .is-no-enumerable>.tree-item-label .type-property{opacity:.6}.object-viewer .type-icon svg{vertical-align:-3px}.object-viewer .type-property{color:#625666}.object-viewer .type-system{color:inherit}.object-viewer .type-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.object-viewer .type-symbol{color:#607d8b}.object-viewer .type-boolean{color:#dd6547}.object-viewer .type-object{color:#7e91ff}.object-viewer .type-array{color:#ff9800}.object-viewer .type-null{color:#978998}.object-viewer .type-number,.object-viewer .type-bigint{color:#2196f3}.object-viewer .type-string{color:#33b277}.object-viewer .type-undefined{color:#aaa}.object-viewer .type-function{color:#7365f6;font-style:italic}.object-viewer .icon-symbol{fill:#607d8b}.object-viewer .icon-boolean{fill:#dd6547}.object-viewer .icon-function{fill:#8e85e5}.object-viewer .icon-null{fill:#978998}.object-viewer .icon-number{fill:#2196f3}.object-viewer .icon-object{fill:#7e91ff}.object-viewer .icon-array{fill:#ff9800}.object-viewer .icon-string{fill:#33b277}.object-viewer .icon-undefined{fill:#aaa}.object-viewer .icon-inner{fill:#fff}