diff --git a/examples/basic-json/output.html b/examples/basic-json/output.html index aca74aa..303e6a3 100644 --- a/examples/basic-json/output.html +++ b/examples/basic-json/output.html @@ -2,146 +2,119 @@ .json-container { font-family: system-ui, sans-serif; line-height: 1.5; - padding: 5px; + padding: 0; } + + .json-item { + margin: 4px 0; + } + .json-key { font-weight: bold; - color: #000; + color: #111; } + .json-value { - margin-left: 8px; - color: #3b3b3b; + color: #444; } + .json-number { - margin-left: 8px; - color: #0f766e; + color: #0F766E; } + .json-boolean { - margin-left: 8px; - color: #9333ea; + color: #9333EA; } + .json-null { - margin-left: 8px; color: #888; font-style: italic; } + + .json-string { + color: #444; + } + .json-heading { margin: 16px 0 8px 0; + font-size: 1em; + } + + .json-section { + margin-bottom: 12px; + } + + .json-content { + margin-left: 10px; } + .json-list { margin: 0; - padding: 0 0 0 20px; + padding-left: 20px; line-height: 1.5; } - .json-top-list { - margin: 0; - padding: 0 0 0 20px; - list-style: "↘"; - } - .json-top-list > li { - color: inherit; + + .json-listItem { + margin: 2px 0; } - .json-top-list > li::marker { - color: #9ca3af; + + .json-arrayItem { + border: 1px solid #e5e7eb; + border-radius: 6px; + padding: 8px; + margin-bottom: 8px; } - .json-top-list-item { - display: inline-flex; - align-items: center; - } - .json-top-list-marker { - margin-right: 8px; - color: #000; + + .json-arrayItemHeader { + background-color: #f9fafb; + border-radius: 4px 4px 0 0; + font-weight: bold; + margin: -8px -8px 8px; + padding: 4px 8px; + border-bottom: 1px solid #e5e7eb; } + .json-circular { - margin-left: 8px; - color: #ff0000; + color: #FF0000; }