@anilkumarthakur/vue3-json-viewer/dist/vue3-json-viewer.css

A beautiful, customizable JSON viewer component for Vue 3 with TypeScript support, dark/light mode, expand/collapse controls, and syntax highlighting.

.jv-node{font-family:JetBrains Mono,Fira Code,Monaco,Menlo,monospace;font-size:13px;line-height:1.6}.jv-root{border-radius:8px;padding:16px;overflow:auto}.jv-dark{color:#cdd6f4;background:linear-gradient(135deg,#1e1e2e 0%,#2d2d3f 100%)}.jv-light{color:#343a40;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)}.jv-root-controls{gap:8px;margin-bottom:16px;display:flex}.jv-control-btn{cursor:pointer;border:1px solid;border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.jv-control-btn-dark{color:#89b4fa;background:#89b4fa1a;border-color:#89b4fa4d}.jv-control-btn-dark:hover{background:#89b4fa33;border-color:#89b4fa80}.jv-control-btn-light{color:#1971c2;background:#1971c21a;border-color:#1971c24d}.jv-control-btn-light:hover{background:#1971c233;border-color:#1971c280}.jv-item{margin-left:0}.jv-children{border-left:2px solid;margin-left:20px;padding-left:12px}.jv-row{align-items:center;gap:0;padding:2px 0;display:flex;position:relative}.jv-row:hover .jv-copy-btn{opacity:1}.jv-key{cursor:pointer;font-weight:600}.jv-clickable{transition:opacity .2s}.jv-clickable:hover{opacity:.7}.jv-colon{margin-right:4px}.jv-type-indicator{align-items:center;gap:4px;display:inline-flex}.jv-type-badge{text-transform:uppercase;letter-spacing:.3px;border-radius:3px;padding:1px 4px;font-size:9px;font-weight:600}.jv-type-object{color:#f5c2e7;background:#f5c2e733}.jv-light .jv-type-object{color:#c2255c;background:#c2255c1a}.jv-type-array{color:#89b4fa;background:#89b4fa33}.jv-light .jv-type-array{color:#1971c2;background:#1971c21a}.jv-toggle{cursor:pointer;font-weight:600;transition:color .2s}.jv-toggle:hover{opacity:.8}.jv-toggle-dark{color:#cdd6f4}.jv-toggle-light{color:#495057}.jv-bracket{font-weight:600}.jv-bracket-dark{color:#cdd6f4}.jv-bracket-light{color:#495057}.jv-count{cursor:pointer;border-radius:4px;margin-left:8px;padding:1px 6px;font-size:11px;transition:background .2s}.jv-count:hover{opacity:.8}.jv-count-dark{color:#89b4fa;background:#89b4fa26}.jv-count-light{color:#1971c2;background:#1971c21a}.jv-string-dark{color:#a6e3a1}.jv-string-light{color:#2f9e44}.jv-number-dark{color:#fab387}.jv-number-light{color:#e8590c}.jv-boolean-dark{color:#f9e2af}.jv-boolean-light{color:#f59f00}.jv-null{font-style:italic}.jv-null-dark{color:#f38ba8}.jv-null-light{color:#e03131}.jv-date-dark{color:#94e2d5}.jv-date-light{color:#0c8599}.jv-regexp-dark{color:#cba6f7}.jv-regexp-light{color:#7048e8}.jv-comma{color:inherit;opacity:.6}.jv-copy-btn{cursor:pointer;opacity:0;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;margin-left:8px;padding:4px;transition:all .2s;display:flex}.jv-copy-btn:hover{transform:scale(1.1)}.jv-copy-btn-dark{color:#89b4fa}.jv-copy-btn-dark:hover{background:#89b4fa26}.jv-copy-btn-light{color:#1971c2}.jv-copy-btn-light:hover{background:#1971c21a}.jv-primitive .jv-copy-btn{opacity:0}.jv-primitive:hover .jv-copy-btn{opacity:1}
/*$vite$:1*/