| /* figures: jsonview (features/json_view/*.md; SVGs from scripts/figures/json_view_layout.py, stepper in js/fig-jsonview.js) */ | |
| /* one colour per concept, the same in every figure: structure (object/array, views) blue, keys navy, strings green, | |
| numbers orange, decoded strings purple, owned edit storage teal, dangling/invalid red */ | |
| .nj-jsonview, .nj-jsonview-cmp { | |
| --jv-struct: var(--nj-blue); | |
| --jv-key: var(--nj-hl-key); | |
| --jv-str: var(--nj-hl-string); | |
| --jv-num: var(--nj-hl-number); | |
| --jv-dec: var(--nj-hl-function); | |
| --jv-own: var(--nj-hl-type); | |
| --jv-bad: var(--nj-red); | |
| --jv-line: color-mix(in srgb, currentColor 55%, var(--md-default-bg-color)); | |
| } | |
| .md-typeset svg.nj-jsonview { min-width: 34rem; max-width: 42rem; } | |
| .nj-jsonview .nj-jsonview-c-struct { --c: var(--jv-struct); } | |
| .nj-jsonview .nj-jsonview-c-key { --c: var(--jv-key); } | |
| .nj-jsonview .nj-jsonview-c-str { --c: var(--jv-str); } | |
| .nj-jsonview .nj-jsonview-c-num { --c: var(--jv-num); } | |
| .nj-jsonview .nj-jsonview-c-dec { --c: var(--jv-dec); } | |
| .nj-jsonview .nj-jsonview-c-own { --c: var(--jv-own); } | |
| .nj-jsonview .nj-jsonview-c-bad { --c: var(--jv-bad); } | |
| .nj-jsonview .nj-jsonview-c-line { --c: var(--jv-line); } | |
| .nj-jsonview text { fill: currentColor; font-size: 13px; } | |
| .nj-jsonview text[class*="nj-jsonview-c-"] { fill: var(--c); } | |
| .nj-jsonview .nj-jsonview-h { font-size: 15px; font-weight: 600; fill-opacity: .85; } | |
| .nj-jsonview .nj-jsonview-sm2 { font-size: 14px; } | |
| .nj-jsonview .nj-jsonview-note { font-size: 13px; fill-opacity: .75; } | |
| .nj-jsonview .nj-jsonview-strong { font-weight: 600; fill-opacity: 1; } | |
| .nj-jsonview .nj-jsonview-tiny { font-size: 10.5px; fill-opacity: .7; } | |
| .nj-jsonview .nj-jsonview-mono { font-family: var(--md-code-font-family), monospace; font-size: 13px; } | |
| .nj-jsonview .nj-jsonview-sm { font-size: 12px; } | |
| .nj-jsonview .nj-jsonview-xs { font-size: 11px; } | |
| .nj-jsonview .nj-jsonview-muted { fill-opacity: .75; } | |
| .nj-jsonview .nj-jsonview-byte { font-size: 12px; } | |
| .nj-jsonview .nj-jsonview-kind { font-size: 12.5px; font-weight: 700; } | |
| .nj-jsonview .nj-jsonview-box { fill: var(--md-default-bg-color); stroke: var(--jv-line); stroke-width: 1.5; } | |
| .nj-jsonview .nj-jsonview-heap { fill: color-mix(in srgb, currentColor 7%, var(--md-default-bg-color)); stroke: var(--jv-line); stroke-width: 1.5; stroke-dasharray: 5 3; } | |
| .nj-jsonview .nj-jsonview-ribbon { fill: color-mix(in srgb, currentColor 4%, var(--md-default-bg-color)); stroke: var(--jv-line); stroke-width: 1.2; } | |
| .nj-jsonview .nj-jsonview-span { fill: color-mix(in srgb, var(--c) 18%, var(--md-default-bg-color)); } | |
| .nj-jsonview .nj-jsonview-frame { fill: none; stroke: var(--jv-line); stroke-width: 1.2; stroke-dasharray: 6 4; } | |
| .nj-jsonview .nj-jsonview-store { fill: color-mix(in srgb, var(--jv-own) 6%, var(--md-default-bg-color)); stroke: color-mix(in srgb, var(--jv-own) 55%, var(--md-default-bg-color)); stroke-width: 1.2; stroke-dasharray: 6 4; } | |
| .nj-jsonview .nj-jsonview-node { fill: color-mix(in srgb, var(--c) 12%, var(--md-default-bg-color)); stroke: var(--c); stroke-width: 1.5; } | |
| .nj-jsonview .nj-jsonview-node.nj-jsonview-hot { stroke-width: 3; } | |
| .nj-jsonview .nj-jsonview-node.nj-jsonview-gap { fill: var(--md-default-bg-color); stroke: var(--jv-bad); stroke-dasharray: 4 3; } | |
| .nj-jsonview .nj-jsonview-node.nj-jsonview-free { fill: none; stroke-dasharray: 3 3; } | |
| .nj-jsonview .nj-jsonview-sep { stroke: var(--jv-line); stroke-width: 1; fill: none; } | |
| .nj-jsonview .nj-jsonview-arr { stroke: var(--c); stroke-width: 1.5; fill: none; } | |
| .nj-jsonview .nj-jsonview-dash { stroke-dasharray: 4 3; } | |
| .nj-jsonview .nj-jsonview-head { fill: var(--c); } | |
| .nj-jsonview .nj-jsonview-bar { fill: color-mix(in srgb, var(--jv-struct) 30%, var(--md-default-bg-color)); stroke: var(--jv-struct); stroke-width: 1.2; } | |
| .nj-jsonview .nj-jsonview-bad { | |
| fill: color-mix(in srgb, var(--jv-bad) 20%, var(--md-default-bg-color)); | |
| stroke: var(--jv-bad); stroke-width: 1.2; stroke-dasharray: 4 2; | |
| } | |
| .nj-jsonview .nj-jsonview-evt { stroke: var(--jv-bad); stroke-width: 2; fill: none; } | |
| .nj-jsonview .nj-jsonview-evt--ok { stroke: var(--jv-struct); stroke-dasharray: 4 3; } | |
| .nj-jsonview .nj-jsonview-onbad, .nj-jsonview .nj-jsonview-onok { font-size: 11.5px; fill-opacity: 1; } | |
| /* the edit stepper: without JS all frames are shown one below the other */ | |
| .nj-jsonview-steps { margin: 1.5rem 0; } | |
| .md-typeset .nj-jsonview-step { display: block; width: 100%; max-width: none; margin: 0 0 1.5rem; } | |
| .nj-jsonview-step > figcaption { | |
| margin: .25rem 0 0; font-size: .75rem; color: var(--md-default-fg-color--light); text-align: left; | |
| max-width: none; | |
| } | |
| .nj-jsonview-step > figcaption code { font-size: .95em; } | |
| .nj-jsonview-step .nj-jsonview-scroll { overflow-x: auto; } | |
| .md-typeset .nj-jsonview-steps.is-enhanced .nj-jsonview-step { display: none; margin: 0; } | |
| .md-typeset .nj-jsonview-steps.is-enhanced .nj-jsonview-step.is-current { display: block; } | |
| .nj-jsonview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; } | |
| .nj-jsonview-controls button { | |
| min-height: 2.2rem; min-width: 2.2rem; padding: 0 .8rem; | |
| font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; | |
| color: var(--md-typeset-a-color); background: var(--md-default-bg-color); | |
| border: 1.5px solid var(--md-typeset-a-color); border-radius: .4rem; | |
| } | |
| .nj-jsonview-controls button:hover:not(:disabled) { background: color-mix(in srgb, var(--md-typeset-a-color) 10%, var(--md-default-bg-color)); } | |
| .nj-jsonview-controls button:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; } | |
| .nj-jsonview-controls button:disabled { opacity: .45; cursor: default; } | |
| .nj-jsonview-controls button[aria-current="step"], .nj-jsonview-controls button[aria-current="step"]:hover { color: var(--md-default-bg-color); background: var(--md-typeset-a-color); } | |
| .nj-jsonview-controls .nj-jsonview-status { font-size: .7rem; color: var(--md-default-fg-color--light); margin-left: .25rem; } | |
| @media (max-width: 44.9375em) { | |
| .nj-jsonview-controls button { min-height: 44px; min-width: 44px; } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .nj-jsonview-steps.is-enhanced .nj-jsonview-step.is-current { animation: nj-jsonview-fade .25s ease-out; } | |
| } | |
| @keyframes nj-jsonview-fade { from { opacity: .3; } to { opacity: 1; } } | |
| /* json vs ordered_json vs editable document */ | |
| .nj-jsonview-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0; } | |
| .nj-jsonview-cmp > div { | |
| border: 1px solid var(--md-default-fg-color--lightest); border-radius: .4rem; padding: .5rem .6rem .6rem; | |
| background: var(--md-code-bg-color); min-width: 0; | |
| } | |
| .nj-jsonview-cmp > div.nj-jsonview-cmp--best { border-color: var(--jv-struct); } | |
| .nj-jsonview-cmp .nj-jsonview-cmp-h { font-size: .7rem; font-weight: 600; margin: 0 0 .1rem; } | |
| .nj-jsonview-cmp .nj-jsonview-cmp-v { font-size: .64rem; color: var(--md-default-fg-color--light); margin: 0 0 .4rem; } | |
| .md-typeset .nj-jsonview-cmp pre { margin: 0; font-family: var(--md-code-font-family), monospace; font-size: .68rem; line-height: 1.5; white-space: pre; overflow-x: auto; background: none; color: var(--md-code-fg-color); } | |
| .nj-jsonview-cmp .nj-jsonview-bad { color: var(--jv-bad); font-weight: 600; text-decoration: underline wavy; text-underline-offset: 3px; } | |
| .nj-jsonview-cmp .nj-jsonview-ok { color: var(--jv-own); font-weight: 600; } | |
| @media (max-width: 44.9375em) { | |
| .nj-jsonview-cmp { grid-template-columns: minmax(0, 1fr); } | |
| } |