| /* figures: sax (SAX event stepper on features/parsing/sax_interface.md, js/fig-sax.js; memory_over_time.svg and | |
| chunk_buffering.svg on features/parsing/large_and_partial_input.md). Event colours are the --cb-* variables of the | |
| parser-callback figure in brand.css, which .nj-fig provides. */ | |
| /* ---------- stepper ---------- */ | |
| .md-typeset .nj-sax { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr); | |
| gap: .9rem 1.4rem; | |
| margin: 1.5rem 0; | |
| padding: 1rem 1.1rem; | |
| border: 1px solid var(--md-default-fg-color--lightest); | |
| border-radius: 8px; | |
| background: var(--md-default-bg-color); | |
| font-size: .74rem; | |
| } | |
| @media screen and (min-width: 45em) { | |
| .md-typeset .nj-sax { | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); | |
| grid-template-areas: "ctl ctl" "text text" "ev state" "status status"; | |
| } | |
| .md-typeset .nj-sax > .nj-sax__controls { grid-area: ctl; } | |
| .md-typeset .nj-sax > .nj-sax__lane--text { grid-area: text; } | |
| .md-typeset .nj-sax > .nj-sax__lane--events { grid-area: ev; } | |
| .md-typeset .nj-sax > .nj-sax__lane--state { grid-area: state; } | |
| .md-typeset .nj-sax > .nj-sax__status { grid-area: status; } | |
| } | |
| .md-typeset .nj-sax p { margin: 0; } | |
| .md-typeset .nj-sax .nj-sax__h { | |
| margin: 0 0 .45rem; | |
| color: var(--md-default-fg-color--light); | |
| font-size: .68rem; | |
| font-weight: 600; | |
| letter-spacing: .02em; | |
| } | |
| .md-typeset .nj-sax .nj-sax__h code { font-size: .95em; } | |
| .md-typeset .nj-sax .nj-sax__text code { | |
| display: inline-block; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| padding: .35rem .6rem; | |
| font-size: .95rem; | |
| white-space: pre; | |
| word-break: normal; | |
| } | |
| .nj-sax .nj-sax-unread { color: var(--md-default-fg-color--light); } | |
| .nj-sax .nj-sax-unread--never { color: var(--md-default-fg-color--lighter); text-decoration: line-through; text-decoration-color: var(--md-default-fg-color--lighter); } | |
| .nj-sax .nj-sax-read { color: var(--md-code-fg-color); } | |
| .nj-sax .nj-sax-tok { border-radius: 3px; box-shadow: inset 0 -3px 0 var(--nj-sax-ev, var(--cb-v)); background: color-mix(in srgb, var(--nj-sax-ev, var(--cb-v)) 22%, transparent); } | |
| .nj-sax .nj-sax-tok--os, .nj-sax .nj-sax-ev--os { --nj-sax-ev: var(--cb-os); } | |
| .nj-sax .nj-sax-tok--oe, .nj-sax .nj-sax-ev--oe { --nj-sax-ev: var(--cb-oe); } | |
| .nj-sax .nj-sax-tok--k, .nj-sax .nj-sax-ev--k { --nj-sax-ev: var(--cb-k); } | |
| .nj-sax .nj-sax-tok--as, .nj-sax .nj-sax-ev--as { --nj-sax-ev: var(--cb-as); } | |
| .nj-sax .nj-sax-tok--ae, .nj-sax .nj-sax-ev--ae { --nj-sax-ev: var(--cb-ae); } | |
| .nj-sax .nj-sax-tok--v, .nj-sax .nj-sax-ev--v { --nj-sax-ev: var(--cb-v); } | |
| /* event ticker */ | |
| .md-typeset .nj-sax ol.nj-sax__events { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| counter-reset: nj-sax; | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__events > li { | |
| position: relative; | |
| margin: 0 0 .2rem; | |
| padding: .12rem .4rem .12rem 2.6rem; | |
| border-radius: 5px; | |
| counter-increment: nj-sax; | |
| line-height: 1.5; | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__events > li::before { | |
| content: counter(nj-sax); | |
| position: absolute; | |
| left: .35rem; | |
| top: .2rem; | |
| width: 1.1rem; | |
| color: var(--md-default-fg-color--lighter); | |
| font-size: .64rem; | |
| font-variant-numeric: tabular-nums; | |
| text-align: right; | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__events > li::after { | |
| content: ""; | |
| position: absolute; | |
| left: 1.75rem; | |
| top: 50%; | |
| width: .55rem; | |
| height: .55rem; | |
| margin-top: -.275rem; | |
| border-radius: 50%; | |
| background: var(--nj-sax-ev); | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__events code { background: none; padding: 0; font-size: .8rem; } | |
| .nj-sax .nj-sax-ev--todo { opacity: .42; } | |
| .nj-sax .nj-sax-ev--skip { opacity: .42; text-decoration: line-through; } | |
| .nj-sax .nj-sax-ev--skip::after { background: var(--md-default-fg-color--lighter) !important; } | |
| .nj-sax .nj-sax-ev--cur { background: color-mix(in srgb, var(--nj-sax-ev) 16%, transparent); } | |
| .md-typeset .nj-sax .nj-sax-ev--false > code::after { | |
| content: " \2192 false"; | |
| color: var(--nj-red); | |
| font-weight: 600; | |
| } | |
| /* handler state */ | |
| .md-typeset .nj-sax pre.nj-sax__tree { margin: 0 0 .6rem; } | |
| .md-typeset .nj-sax pre.nj-sax__tree > code { padding: .5rem .7rem; font-size: .76rem; line-height: 1.45; } | |
| .nj-sax .nj-sax-hit { border-radius: 3px; background: color-mix(in srgb, var(--nj-blue) 22%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nj-blue) 55%, transparent); } | |
| .nj-sax .nj-sax-dim { color: var(--md-default-fg-color--lighter); } | |
| .md-typeset .nj-sax .nj-sax__stackh { margin: 0 0 .3rem; color: var(--md-default-fg-color--light); font-size: .66rem; font-weight: 600; } | |
| .md-typeset .nj-sax ol.nj-sax__stack { | |
| display: flex; | |
| flex-direction: column-reverse; | |
| gap: .25rem; | |
| margin: 0 0 .6rem; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__stack > li { | |
| margin: 0; | |
| padding: .2rem .5rem; | |
| border: 1px solid var(--md-default-fg-color--lightest); | |
| border-left: 3px solid var(--nj-blue); | |
| border-radius: 4px; | |
| } | |
| .md-typeset .nj-sax ol.nj-sax__stack > li.nj-sax-dim { border-left-color: var(--md-default-fg-color--lightest); } | |
| .md-typeset .nj-sax ol.nj-sax__stack code { background: none; padding: 0; } | |
| .md-typeset .nj-sax .nj-sax__note { color: var(--md-default-fg-color--light); font-size: .75rem; line-height: 1.5; } | |
| .md-typeset .nj-sax dl.nj-sax__kv { | |
| display: grid; | |
| grid-template-columns: auto minmax(0, 1fr); | |
| gap: .35rem .8rem; | |
| margin: 0 0 .6rem; | |
| } | |
| .md-typeset .nj-sax dl.nj-sax__kv dt { color: var(--md-default-fg-color--light); font-weight: 600; } | |
| .md-typeset .nj-sax dl.nj-sax__kv dd { margin: 0; } | |
| /* controls */ | |
| .nj-sax .nj-sax__controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; } | |
| .nj-sax .nj-sax__btns, .nj-sax .nj-sax__modes { display: flex; flex-wrap: wrap; gap: .35rem; } | |
| .nj-sax .nj-sax__modes { margin-left: auto; } | |
| .md-typeset .nj-sax .nj-sax-btn { | |
| min-height: 2.2rem; | |
| padding: .3rem .8rem; | |
| border: 1px solid color-mix(in srgb, var(--nj-blue) 55%, var(--md-default-bg-color)); | |
| border-radius: 6px; | |
| background: var(--md-default-bg-color); | |
| color: var(--nj-blue); | |
| font: inherit; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .md-typeset .nj-sax .nj-sax-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--nj-blue) 10%, var(--md-default-bg-color)); } | |
| .md-typeset .nj-sax .nj-sax-btn--main, .md-typeset .nj-sax .nj-sax-btn[aria-pressed="true"] { | |
| border-color: var(--nj-band); | |
| background: var(--nj-band); | |
| color: #fff; | |
| } | |
| .md-typeset .nj-sax .nj-sax-btn--main:hover:not(:disabled), .md-typeset .nj-sax .nj-sax-btn[aria-pressed="true"]:hover { | |
| background: var(--md-primary-fg-color--light); | |
| } | |
| .md-typeset .nj-sax .nj-sax-btn:disabled { opacity: .4; cursor: default; } | |
| .md-typeset .nj-sax .nj-sax-btn:focus-visible, .nj-sax .nj-sax__stop input:focus-visible { | |
| outline: 2px solid var(--nj-blue); | |
| outline-offset: 2px; | |
| } | |
| .nj-sax .nj-sax__stop { display: inline-flex; gap: .45rem; align-items: center; min-height: 2.2rem; cursor: pointer; } | |
| .nj-sax .nj-sax__stop input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--nj-red); } | |
| .nj-sax .nj-sax__stop:has(input:disabled) { opacity: .45; cursor: default; } | |
| .md-typeset .nj-sax .nj-sax__status { | |
| padding-top: .6rem; | |
| border-top: 1px solid var(--md-default-fg-color--lightest); | |
| color: var(--md-default-fg-color--light); | |
| font-size: .72rem; | |
| min-height: 2.6em; | |
| } | |
| @media screen and (max-width: 44.984375em) { | |
| .md-typeset .nj-sax { padding: .8rem; } | |
| .md-typeset .nj-sax .nj-sax-btn { min-height: 44px; min-width: 44px; } | |
| .nj-sax .nj-sax__stop { min-height: 44px; } | |
| .nj-sax .nj-sax__modes { margin-left: 0; } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .nj-sax .nj-sax__events > li { transition: opacity .2s, background-color .2s; } | |
| } | |
| /* ---------- static SVG figures ---------- */ | |
| .md-typeset svg.nj-fig--sax-mem { min-width: 34rem; max-width: 40rem; } | |
| .md-typeset svg.nj-fig--sax-buf { min-width: 36rem; max-width: 42rem; } | |
| .nj-fig .nj-sax-axis { fill: none; stroke: var(--fg-line); stroke-width: 1.5; } | |
| .nj-fig .nj-sax-illus { font-style: italic; } | |
| .nj-fig .nj-sax-curve { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } | |
| .nj-fig .nj-sax-c-dom { --nj-sax-c: var(--nj-red); } | |
| .nj-fig .nj-sax-c-doc { --nj-sax-c: var(--nj-hl-type); } | |
| .nj-fig .nj-sax-c-cb { --nj-sax-c: var(--nj-hl-number); } | |
| .nj-fig .nj-sax-c-sax { --nj-sax-c: var(--nj-blue); } | |
| .nj-fig .nj-sax-curve.nj-sax-c-doc { stroke-dasharray: 9 5; } | |
| .nj-fig .nj-sax-curve { stroke: var(--nj-sax-c); } | |
| .nj-fig .nj-sax-lab { fill: var(--nj-sax-c); font-size: 14.5px; font-weight: 700; } | |
| .nj-fig .nj-sax-old { fill: color-mix(in srgb, currentColor 10%, var(--md-default-bg-color)); } | |
| .nj-fig .nj-sax-new { fill: color-mix(in srgb, var(--md-typeset-a-color) 18%, var(--md-default-bg-color)); stroke: var(--md-typeset-a-color); stroke-width: 1; } | |
| .nj-fig .nj-sax-buf { fill: currentColor; font-family: var(--md-code-font-family), monospace; font-size: 14px; white-space: pre; } | |
| .nj-fig .nj-sax-sep { stroke: var(--fg-line); stroke-width: 1; stroke-dasharray: 3 3; } | |
| .nj-fig .nj-sax-status { font-size: 14px; font-weight: 600; } | |
| .nj-fig .nj-sax-s-wait { fill: var(--nj-blue); } | |
| .nj-fig .nj-sax-s-ok { fill: var(--nj-hl-string); } | |
| .nj-fig .nj-sax-s-err { fill: var(--nj-red); } |