208 lines
9.2 KiB
CSS
208 lines
9.2 KiB
CSS
/* 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); }
|