deploy: a47170346a
This commit is contained in:
nlohmann committed
1 parent
b36f8a9821
commit
11a863958e
1180 files changed
+14211
-6025
No files matched your search
+207
@@ -0,0 +1,207 @@
|
||||
/* 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); }
|
||||
Reference in new issue
Block a user