docs: new design for the documentation site (#5934)
* docs: new design for the documentation site Apply the brand to the Material for MkDocs site: Inter and JetBrains Mono served by the site (upright and real italic), brand colours, blue header band with the syntax pattern, wordmark in the header, new home page (hero, cards, animated feature tour), 404 page, polish for tabs, search, footer, focus rings, tables and code blocks, and theme features (code copy, previous/next footer, TOC follow, search suggestions). Draw the number railroad diagram, the parser callback events and the iterator illustrations as inline SVGs that follow the light and dark scheme. The generator scripts are in docs/mkdocs/scripts/figures; the feature slideshow (json-light.svg, json-dark.svg, replacing json.gif on the home page) is built by docs/mkdocs/scripts/slideshow. Decision nodes in five flowcharts become hexagons, which need far less room. Signed-off-by: Niels Lohmann <mail@nlohmann.me> * docs: add figures, table captions and a macro chooser - Figures with numbered captions: SAX stepper, json_view layout and edit stepper, exception map, JSON pointer and patch walkers, QA pipeline, scaling and binary size charts, roadmap lanes, release timeline, integration decision tree and namespace builder - Table captions (nj-table-caption) on 9 pages - Compile times: modules and PCH charts, filesystem section, re-measured Figure 1, links between features/modules.md and compile_times.md - Interactive macro chooser for features/arbitrary_types.md - Link check: exclude URLs that answer the plugin with 400/401/419 or are dead (customers.md) Signed-off-by: Niels Lohmann <mail@nlohmann.me> * docs: macro chooser generates adl_serializer for non-default-constructible types Signed-off-by: Niels Lohmann <mail@nlohmann.me> * docs: cross-link concept pages and API pages in See also sections Add See also links in both directions between the concept pages (features, home, integration) and the API pages, write API links in code font, give every entry a comment after a dash, and show the callback event figure on the parser callbacks page. Signed-off-by: Niels Lohmann <mail@nlohmann.me> * docs: address review comments on the new design - Home: add a "Latest release" button - Sponsors: update the list and group it by tier - Features: list all feature pages on the index page - Releases: add highlights per release, link the 4.0 roadmap, add the first commit to the timeline - Exceptions: prefix all example messages with the exception name - API: no code font for format names in the See also links of the to_/from_ pages - Merge Patch: show the document before, the patch, and the result - Replace "--" with typographic dashes, mark external links with an icon, center Mermaid diagrams Signed-off-by: Niels Lohmann <mail@nlohmann.me> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me>
This commit is contained in:
Niels Lohmann authored and GitHub committed
1 parent
2bb2feeef4
commit
a47170346a
417 files changed
+11100
-3041
No files matched your search
@@ -0,0 +1,803 @@
|
||||
/* nlohmann/json brand for Material for MkDocs (values from brand/kit/tokens.css) */
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("fonts/Inter.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("fonts/Inter-Italic.woff2") format("woff2");
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("fonts/JetBrainsMono.woff2") format("woff2");
|
||||
font-weight: 100 800;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--md-text-font: "Inter";
|
||||
--md-code-font: "JetBrains Mono";
|
||||
}
|
||||
|
||||
/* light */
|
||||
[data-md-color-scheme="default"] {
|
||||
--nj-blue: #1747a6;
|
||||
--nj-blue-deep: #10357d;
|
||||
--nj-blue-soft: #eaf1fd;
|
||||
--nj-band: #1747a6;
|
||||
--nj-red: #d93a3f;
|
||||
--nj-red-soft: #fdeced;
|
||||
--nj-string: #b4322a;
|
||||
--nj-comment: #646d7a;
|
||||
|
||||
--md-primary-fg-color: var(--nj-band);
|
||||
--md-primary-fg-color--light: #1d55c4;
|
||||
--md-primary-fg-color--dark: #10357d;
|
||||
--md-accent-fg-color: var(--nj-blue-deep);
|
||||
--md-accent-fg-color--transparent: rgba(23, 71, 166, .1);
|
||||
--md-typeset-a-color: var(--nj-blue);
|
||||
--md-default-fg-color: #0f1419;
|
||||
--md-default-fg-color--light: #4a515c;
|
||||
--md-default-fg-color--lighter: #8a919c;
|
||||
--md-default-fg-color--lightest: #e3e6eb;
|
||||
--md-typeset-color: #0f1419;
|
||||
--md-code-bg-color: #f5f7fa;
|
||||
--md-code-fg-color: #0f1419;
|
||||
}
|
||||
|
||||
/* dark */
|
||||
[data-md-color-scheme="slate"] {
|
||||
--nj-blue: #7aa7f5;
|
||||
--nj-blue-deep: #a9c6f8;
|
||||
--nj-blue-soft: #16233b;
|
||||
--nj-band: #173e8c;
|
||||
--nj-red: #f06a6e;
|
||||
--nj-red-soft: #3a1c1e;
|
||||
--nj-string: #f08a7e;
|
||||
--nj-comment: #8b929e;
|
||||
|
||||
--md-hue: 220;
|
||||
--md-primary-fg-color: var(--nj-band);
|
||||
--md-primary-fg-color--light: #163f93;
|
||||
--md-primary-fg-color--dark: #0c2556;
|
||||
--md-accent-fg-color: var(--nj-blue-deep);
|
||||
--md-accent-fg-color--transparent: rgba(122, 167, 245, .12);
|
||||
--md-typeset-a-color: var(--nj-blue);
|
||||
--md-default-bg-color: #0f1218;
|
||||
--md-default-fg-color: #f2f4f7;
|
||||
--md-default-fg-color--light: #b3b9c4;
|
||||
--md-default-fg-color--lighter: #7b828e;
|
||||
--md-default-fg-color--lightest: #272c36;
|
||||
--md-typeset-color: #f2f4f7;
|
||||
--md-code-bg-color: #171b23;
|
||||
--md-code-fg-color: #f2f4f7;
|
||||
--md-footer-bg-color: #0b0e13;
|
||||
--md-footer-bg-color--dark: #08090d;
|
||||
}
|
||||
|
||||
/* syntax colours (all at least 4.5:1 on the code panel in both schemes) */
|
||||
[data-md-color-scheme="default"] {
|
||||
--nj-hl-keyword: #1747a6;
|
||||
--nj-hl-type: #0d6e72;
|
||||
--nj-hl-function: #6b3fb8;
|
||||
--nj-hl-string: #23793a;
|
||||
--nj-hl-escape: #0f5d2a;
|
||||
--nj-hl-key: #10357d;
|
||||
--nj-hl-number: #b04a07;
|
||||
--nj-hl-preproc: #a3247a;
|
||||
}
|
||||
[data-md-color-scheme="slate"] {
|
||||
--nj-hl-keyword: #7aa7f5;
|
||||
--nj-hl-type: #4fd1c5;
|
||||
--nj-hl-function: #c4a3ff;
|
||||
--nj-hl-string: #7ed491;
|
||||
--nj-hl-escape: #b2ecc0;
|
||||
--nj-hl-key: #a9c6f8;
|
||||
--nj-hl-number: #f5a65b;
|
||||
--nj-hl-preproc: #f48fc8;
|
||||
}
|
||||
.md-typeset .highlight :is(.k, .kd, .kn, .kr, .kp, .kv, .ow) { color: var(--nj-hl-keyword); font-weight: 600; }
|
||||
.md-typeset .highlight :is(.kt, .nc, .nn, .na) { color: var(--nj-hl-type); }
|
||||
.md-typeset .highlight :is(.nf, .fm, .nb, .bp) { color: var(--nj-hl-function); }
|
||||
.md-typeset .highlight :is(.s, .s1, .s2, .sb, .sc, .sd, .sh, .sx, .sr, .ss, .sa, .dl, .cpf) { color: var(--nj-hl-string); }
|
||||
.md-typeset .highlight :is(.se, .si) { color: var(--nj-hl-escape); font-weight: 600; }
|
||||
.md-typeset .highlight .nt { color: var(--nj-hl-key); }
|
||||
.md-typeset .highlight :is(.m, .mi, .mf, .mh, .mo, .mb, .il, .kc) { color: var(--nj-hl-number); }
|
||||
.md-typeset .highlight .kc { font-weight: 500; }
|
||||
.md-typeset .highlight .cp { color: var(--nj-hl-preproc); }
|
||||
.md-typeset .highlight :is(.c, .c1, .cm, .ch, .cs) { color: var(--nj-comment); font-style: italic; }
|
||||
.md-typeset .highlight :is(.o, .p) { color: var(--md-default-fg-color--light); }
|
||||
.md-typeset .highlight :is(.n, .nx, .nv, .no, .ni, .nl, .py) { color: var(--md-code-fg-color); }
|
||||
.md-typeset .highlight .err { color: inherit; background: none; }
|
||||
|
||||
/* typography: Inter with cv11/ss03, bold headlines with negative tracking */
|
||||
body {
|
||||
font-feature-settings: "cv11", "ss03";
|
||||
}
|
||||
.md-typeset {
|
||||
font-size: .85rem; /* 17 px body */
|
||||
line-height: 1.65;
|
||||
}
|
||||
.md-typeset h1 {
|
||||
color: var(--md-typeset-color);
|
||||
font-weight: 800;
|
||||
letter-spacing: -.035em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.md-typeset h2 {
|
||||
font-weight: 800;
|
||||
letter-spacing: -.025em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.md-typeset h3 {
|
||||
font-weight: 700;
|
||||
letter-spacing: -.015em;
|
||||
}
|
||||
.md-typeset table:not([class]) {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* header and tabs: one blue band with the faint syntax pattern; wordmark instead of the site name.
|
||||
A veil over the tile keeps the glyphs from running through the navigation text; the hero shows the pattern at full strength. */
|
||||
.md-header, .md-tabs {
|
||||
--nj-veil: linear-gradient(color-mix(in srgb, var(--md-primary-fg-color) 62%, transparent), color-mix(in srgb, var(--md-primary-fg-color) 62%, transparent));
|
||||
background-color: var(--md-primary-fg-color);
|
||||
background-image: var(--nj-veil), url("pattern-on-blue.svg");
|
||||
background-size: auto, 160px 160px;
|
||||
background-position: 0 0, 0 0;
|
||||
}
|
||||
.md-tabs {
|
||||
background-position: 0 0, 0 -48px; /* continue the header's tile */
|
||||
}
|
||||
.md-header__button.md-logo img {
|
||||
width: auto;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.md-header__topic:first-child .md-ellipsis { /* the wordmark replaces the site name at every width */
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 76.234375em) { /* Material hides the header logo here: show the wordmark on phones, too */
|
||||
.md-header__button.md-logo {
|
||||
display: block;
|
||||
margin: 0 0 0 .2rem;
|
||||
padding: .4rem .2rem;
|
||||
}
|
||||
.md-header__button[for="__drawer"] {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
.md-nav__button.md-logo img {
|
||||
width: auto;
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
/* shapes: 6 px corners on blocks, 4 px on inline code */
|
||||
.md-typeset pre > code, .md-typeset .highlight, .md-typeset .highlighttable,
|
||||
.md-typeset .admonition, .md-typeset details, .md-typeset .tabbed-set,
|
||||
.md-typeset .grid.cards > ul > li, .md-typeset .md-button {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.md-typeset code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* inline code: the font alone marks it, no grey box; linked code keeps the link colour */
|
||||
.md-typeset :not(pre) > code {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
font-size: .88em;
|
||||
}
|
||||
.md-typeset .highlight pre > code, .md-typeset .highlighttable {
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
|
||||
/* callouts: 3 px left border; note/info/tip in blue on blue-soft, danger/bug in red on red-soft */
|
||||
.md-typeset .admonition, .md-typeset details {
|
||||
border-width: 0 0 0 3px;
|
||||
box-shadow: none;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.md-typeset :is(.admonition, details):is(.note, .info, .tip, .abstract, .example, .question) {
|
||||
border-color: var(--nj-blue);
|
||||
background-color: var(--nj-blue-soft);
|
||||
}
|
||||
.md-typeset :is(.note, .info, .tip, .abstract, .example, .question) > :is(.admonition-title, summary) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.md-typeset :is(.note, .info, .tip, .abstract, .example, .question) > :is(.admonition-title, summary)::before {
|
||||
background-color: var(--nj-blue);
|
||||
}
|
||||
.md-typeset :is(.admonition, details):is(.danger, .bug, .failure) {
|
||||
border-color: var(--nj-red);
|
||||
background-color: var(--nj-red-soft);
|
||||
}
|
||||
.md-typeset :is(.danger, .bug, .failure) > :is(.admonition-title, summary) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.md-typeset :is(.danger, .bug, .failure) > :is(.admonition-title, summary)::before {
|
||||
background-color: var(--nj-red);
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
.md-typeset .md-button--primary {
|
||||
background-color: var(--nj-blue);
|
||||
border-color: var(--nj-blue);
|
||||
}
|
||||
|
||||
/* home page hero (overrides/home.html): blue band with the syntax pattern, headline, lead, buttons, code panel */
|
||||
.nj-hero {
|
||||
--nj-hero-to: #123a8a;
|
||||
color: #fff;
|
||||
background-color: var(--md-primary-fg-color);
|
||||
background-image: url("pattern-on-blue.svg"), linear-gradient(160deg, var(--md-primary-fg-color), var(--nj-hero-to));
|
||||
background-size: 160px 160px, auto;
|
||||
background-position: 0 -96px, 0 0; /* continue the tile of header and tabs */
|
||||
}
|
||||
[data-md-color-scheme="slate"] .nj-hero {
|
||||
--nj-hero-to: #0c2556;
|
||||
}
|
||||
.nj-hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||
gap: 2.4rem;
|
||||
align-items: center;
|
||||
padding: 3rem .8rem 3.6rem;
|
||||
}
|
||||
.nj-hero__kicker {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: .15rem .55rem;
|
||||
border: 1px solid rgba(255, 255, 255, .35);
|
||||
border-radius: 4px;
|
||||
color: #bcd3fb;
|
||||
font-family: var(--md-code-font-family);
|
||||
font-size: .65rem; /* 13 px */
|
||||
font-weight: 500;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.nj-hero__title {
|
||||
margin: 0 0 .8rem;
|
||||
color: #fff;
|
||||
font-size: clamp(1.7rem, 4.2vw, 3.2rem); /* 34-64 px */
|
||||
font-weight: 800;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -.035em;
|
||||
}
|
||||
.nj-hero__title span {
|
||||
color: #bcd3fb;
|
||||
}
|
||||
.nj-hero__lead {
|
||||
max-width: 22em;
|
||||
margin: 0 0 2rem;
|
||||
color: rgba(255, 255, 255, .9);
|
||||
font-size: clamp(1.1rem, 2.2vw, 1.6rem); /* 22-32 px */
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -.015em;
|
||||
}
|
||||
.nj-hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .6rem;
|
||||
margin: 0;
|
||||
}
|
||||
.nj-hero .md-button.nj-hero__button {
|
||||
margin: 0;
|
||||
padding: .55em 1.3em;
|
||||
border: 1px solid rgba(255, 255, 255, .6);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nj-hero .md-button--primary.nj-hero__button {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
color: var(--md-primary-fg-color);
|
||||
}
|
||||
.nj-hero .md-button.nj-hero__button:is(:hover, :focus) {
|
||||
border-color: #fff;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: #fff;
|
||||
}
|
||||
.nj-hero .md-button--primary.nj-hero__button:is(:hover, :focus) {
|
||||
background-color: #eaf1fd;
|
||||
color: var(--md-primary-fg-color);
|
||||
}
|
||||
.nj-hero__code {
|
||||
border-radius: 6px;
|
||||
background-color: var(--md-code-bg-color);
|
||||
box-shadow: 0 12px 32px rgba(5, 18, 48, .35);
|
||||
}
|
||||
.nj-hero__code pre {
|
||||
margin: 0;
|
||||
padding: 1.1rem 1.3rem;
|
||||
overflow-x: auto;
|
||||
color: var(--md-code-fg-color);
|
||||
font-family: var(--md-code-font-family);
|
||||
font-size: .7rem; /* 14 px */
|
||||
line-height: 1.7;
|
||||
}
|
||||
.nj-hero__code .nj-k { color: var(--nj-hl-type); }
|
||||
.nj-hero__code .nj-s { color: var(--nj-hl-string); }
|
||||
.nj-hero__code .nj-n { color: var(--nj-hl-number); }
|
||||
.nj-hero__code .nj-c { color: var(--nj-comment); font-style: italic; }
|
||||
@media screen and (max-width: 59.984375em) {
|
||||
.nj-hero__inner {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1.8rem;
|
||||
padding: 2rem .8rem 2.4rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 29.984375em) {
|
||||
.nj-hero__code pre {
|
||||
font-size: .6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* the hero carries the headline: keep the page's h1 for the title and screen readers only */
|
||||
body:has(.nj-hero) .md-content__inner > h1 {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* cards: 1 px line border, 6 px corners, blue icon on soft blue, blue border on hover */
|
||||
.md-typeset .grid.cards > ul > li {
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
background-color: var(--md-default-bg-color);
|
||||
transition: border-color 150ms, box-shadow 150ms, transform 150ms;
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li:is(:hover, :focus-within) {
|
||||
border-color: var(--nj-blue);
|
||||
box-shadow: 0 6px 18px rgba(23, 71, 166, .12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li > hr {
|
||||
display: none;
|
||||
}
|
||||
.md-typeset .grid.cards .twemoji.lg {
|
||||
box-sizing: content-box;
|
||||
margin-right: .5rem;
|
||||
padding: .3rem;
|
||||
border-radius: 6px;
|
||||
background-color: var(--nj-blue-soft);
|
||||
color: var(--nj-blue);
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li > p:first-child strong {
|
||||
font-size: .9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li > p:last-child a {
|
||||
font-weight: 600;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.md-typeset .grid.cards > ul > li { transition: none; transform: none !important; }
|
||||
}
|
||||
|
||||
/* home page: no table of contents, so keep the text at reading width and the cards in three columns */
|
||||
body:has(.nj-hero) .md-content {
|
||||
max-width: 58rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media screen and (min-width: 60em) {
|
||||
body:has(.nj-hero) .md-typeset .grid.cards {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* lists: Material's indent, bullets as small blue squares, numbers in the secondary text colour */
|
||||
.md-typeset ul:not(.task-list, .md-annotation-list) > li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
.md-typeset ul:not(.task-list, .md-annotation-list) > li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: .65em; /* middle of the first line at line-height 1.65 */
|
||||
left: -.95em;
|
||||
width: .36em;
|
||||
height: .36em;
|
||||
background-color: var(--nj-blue);
|
||||
}
|
||||
.md-typeset ol > li::marker {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* wider page: Material's grid stops at 61rem (1220 px) */
|
||||
.md-grid {
|
||||
max-width: 72rem; /* 1440 px */
|
||||
}
|
||||
|
||||
/* tables: full width, 1 px line border with 6 px corners, header row on the panel colour, 15 px text */
|
||||
.md-typeset__table {
|
||||
display: block; /* Material: inline-block, so tables only grow to their content */
|
||||
}
|
||||
.md-typeset table:not([class]) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
font-size: .75rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.md-typeset table:not([class]) th {
|
||||
padding: .65em 1em;
|
||||
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
||||
background-color: var(--md-code-bg-color);
|
||||
color: var(--md-typeset-color);
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.md-typeset table:not([class]) th:first-child { border-top-left-radius: 5px; }
|
||||
.md-typeset table:not([class]) th:last-child { border-top-right-radius: 5px; }
|
||||
.md-typeset table:not([class]) td {
|
||||
padding: .65em 1em;
|
||||
border-top: 1px solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
.md-typeset table:not([class]) tbody tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
.md-typeset table:not([class]) tbody tr:hover {
|
||||
background-color: var(--nj-blue-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
.md-typeset table:not([class]) td code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* numbers and header code stay on one line; a table wider than the screen scrolls sideways instead */
|
||||
.md-typeset table:not([class]) :is(td, th):is([align="right"], [style*="right"]),
|
||||
.md-typeset table:not([class]) th code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media screen and (max-width: 44.984375em) {
|
||||
.md-typeset table:not([class]) {
|
||||
font-size: .7rem;
|
||||
}
|
||||
.md-typeset table:not([class]) :is(th, td) {
|
||||
padding: .55em .75em;
|
||||
}
|
||||
}
|
||||
|
||||
/* more room before headings (Material: h2 1.6em, h3 1.6em, h4-h6 1-1.25em) and at the end of each page (1.2rem) */
|
||||
.md-typeset h2 { margin-top: 2.4em; }
|
||||
.md-typeset h3 { margin-top: 2.2em; }
|
||||
.md-typeset h2 + h3 { margin-top: .8em; }
|
||||
.md-typeset :is(h4, h5, h6) { margin-top: 1.8em; }
|
||||
.md-content__inner {
|
||||
margin-bottom: 4.8rem; /* 96 px */
|
||||
}
|
||||
|
||||
/* Mermaid diagrams: white boxes with a blue outline, grey lines, Inter; shapes and spacing in js/mermaid-brand.js */
|
||||
:root > * {
|
||||
--md-mermaid-font-family: var(--md-text-font-family), sans-serif;
|
||||
--md-mermaid-edge-color: var(--md-default-fg-color--lighter);
|
||||
--md-mermaid-node-bg-color: var(--md-default-bg-color);
|
||||
--md-mermaid-node-fg-color: var(--nj-blue);
|
||||
--md-mermaid-label-bg-color: var(--md-default-bg-color);
|
||||
--md-mermaid-label-fg-color: var(--md-default-fg-color);
|
||||
--md-mermaid-sequence-actor-bg-color: var(--nj-blue-soft);
|
||||
--md-mermaid-sequence-actor-line-color: var(--md-default-fg-color--lighter);
|
||||
--md-mermaid-sequence-note-bg-color: var(--md-code-bg-color);
|
||||
--md-mermaid-sequence-note-border-color: var(--md-default-fg-color--lightest);
|
||||
--md-mermaid-sequence-number-fg-color: #fff;
|
||||
}
|
||||
|
||||
/* a diagram wider than the column scrolls sideways (js/mermaid-brand.js stops shrinking it at 80 %) */
|
||||
.md-typeset .mermaid {
|
||||
overflow-x: auto;
|
||||
}
|
||||
/* ... and one that is narrower than the column sits in the middle of it */
|
||||
.md-typeset .mermaid {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* external links (marked by js/external-links.js) get a small "open in new window" icon (Font Awesome
|
||||
"external-link-alt") in front of them */
|
||||
.md-typeset a.nj-external::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: .72em;
|
||||
height: .72em;
|
||||
margin-right: .3em;
|
||||
background-color: currentColor;
|
||||
opacity: .65;
|
||||
-webkit-mask: var(--nj-external-icon) no-repeat center / contain;
|
||||
mask: var(--nj-external-icon) no-repeat center / contain;
|
||||
}
|
||||
:root {
|
||||
--nj-external-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M432 320h-32a16 16 0 0 0-16 16v112H64V128h144a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V336a16 16 0 0 0-16-16zM488 0H360c-21.37 0-32.05 25.91-17 41l35.73 35.73L135 320.37a24 24 0 0 0 0 34L157.67 377a24 24 0 0 0 34 0l243.61-243.68L471 169c15 15 41 4.5 41-17V24a24 24 0 0 0-24-24z"/></svg>');
|
||||
}
|
||||
|
||||
|
||||
/* ---- polish pass ---- */
|
||||
|
||||
/* header: a search field that reads as a field on the band, tabs with an active marker, readable GitHub facts */
|
||||
.md-header .md-search__form {
|
||||
border: 1px solid rgba(255, 255, 255, .22);
|
||||
border-radius: 6px;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
transition: background-color 150ms, border-color 150ms;
|
||||
}
|
||||
.md-header .md-search__form:hover {
|
||||
border-color: rgba(255, 255, 255, .4);
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.md-search__output {
|
||||
border-radius: 0 0 6px 6px;
|
||||
box-shadow: 0 16px 40px rgba(5, 18, 48, .28);
|
||||
}
|
||||
.md-search-result__link:focus-visible, .md-search-result__more summary:focus-visible {
|
||||
outline: 2px solid var(--nj-blue);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.md-tabs__link {
|
||||
font-size: .72rem;
|
||||
font-weight: 500;
|
||||
opacity: .85;
|
||||
}
|
||||
.md-tabs__item--active .md-tabs__link, .md-tabs__link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.md-tabs__item--active {
|
||||
box-shadow: inset 0 -2px 0 #fff;
|
||||
}
|
||||
.md-source__facts {
|
||||
font-size: .62rem;
|
||||
}
|
||||
|
||||
/* footer: deep brand blue instead of neutral black (the dark scheme keeps its own near-black) */
|
||||
[data-md-color-scheme="default"] {
|
||||
--md-footer-bg-color: #0d2a66;
|
||||
--md-footer-bg-color--dark: #0a2152;
|
||||
}
|
||||
.md-footer-meta .md-copyright, .md-footer-meta .md-copyright a {
|
||||
color: rgba(255, 255, 255, .72);
|
||||
}
|
||||
.md-footer__link {
|
||||
border-radius: 6px;
|
||||
transition: background-color 150ms;
|
||||
}
|
||||
.md-footer__link:is(:hover, :focus-visible) {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
/* page title: tighter to the first paragraph; page actions (view/edit source) stay in the background */
|
||||
.md-typeset h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.md-content__button {
|
||||
opacity: .55;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
.md-content__button:is(:hover, :focus-visible) {
|
||||
opacity: 1;
|
||||
}
|
||||
body:has(.nj-hero) .md-content__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* sidebars: bold marker for the current page, rail and marker for the table of contents */
|
||||
.md-nav__link--active {
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-nav--secondary > .md-nav__list {
|
||||
margin-left: -.1rem;
|
||||
border-left: 1px solid color-mix(in srgb, var(--md-default-fg-color) 16%, transparent);
|
||||
}
|
||||
.md-nav--secondary .md-nav__link {
|
||||
margin-left: -1px;
|
||||
padding-left: .6rem;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
.md-nav--secondary .md-nav__link--active {
|
||||
border-left-color: var(--nj-blue);
|
||||
color: var(--nj-blue);
|
||||
}
|
||||
.md-nav--secondary .md-nav__list .md-nav__list {
|
||||
padding-left: .6rem;
|
||||
}
|
||||
.md-nav--secondary .md-nav__title {
|
||||
font-size: .64rem;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* keyboard focus: one visible ring in the brand blue */
|
||||
.md-typeset a:focus-visible, .md-typeset .md-button:focus-visible, .md-typeset summary:focus-visible,
|
||||
.md-nav__link:focus-visible, .md-tabs__link:focus-visible, .md-top:focus-visible {
|
||||
outline: 2px solid var(--nj-blue);
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.md-header :is(a, button, label):focus-visible, .nj-hero a:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* inline code must not stretch the line box (JetBrains Mono has tall metrics), abbreviations stay quiet */
|
||||
.md-typeset :not(pre) > code {
|
||||
line-height: 1;
|
||||
}
|
||||
.md-typeset abbr {
|
||||
border-bottom-color: var(--md-default-fg-color--lighter);
|
||||
}
|
||||
.md-typeset :is(h1, h2, h3, h4, a, .grid.cards > ul > li > p:first-child) abbr {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
/* number railroad diagram: inline SVG (docs/images/json_syntax_number.svg), follows the colour scheme */
|
||||
.md-typeset .railroad-wrap, .md-typeset .nj-fig-wrap {
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.md-typeset svg.railroad {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 36rem;
|
||||
max-width: 52rem;
|
||||
margin-inline: auto;
|
||||
color: var(--md-default-fg-color);
|
||||
font-family: var(--md-text-font-family), sans-serif;
|
||||
}
|
||||
.railroad .rr-t { fill: color-mix(in srgb, var(--md-typeset-a-color) 10%, transparent); stroke: var(--md-typeset-a-color); stroke-width: 2; }
|
||||
.railroad .rr-track, .railroad .rr-n { stroke: color-mix(in srgb, currentColor 60%, var(--md-default-bg-color)); stroke-opacity: 1; } /* opaque, so overlapping segments do not darken */
|
||||
.railroad .rr-n { fill: color-mix(in srgb, currentColor 6%, transparent); stroke-width: 2; }
|
||||
.railroad .rr-bg { fill: var(--md-default-bg-color); }
|
||||
.railroad .rr-arrow { fill: currentColor; fill-opacity: .6; }
|
||||
.railroad text { fill: currentColor; text-anchor: middle; }
|
||||
.railroad .rr-c { font-family: var(--md-code-font-family), monospace; font-size: 16px; font-weight: 500; }
|
||||
.railroad .rr-b { font-size: 14.5px; font-weight: 500; }
|
||||
.railroad .rr-l { font-size: 14px; text-anchor: start; fill-opacity: .6; }
|
||||
.railroad .rr-name { font-size: 17px; font-weight: 700; fill-opacity: 1; }
|
||||
/* figures drawn as inline SVG (docs/images/callback_events.svg, range-*.svg): they follow the colour scheme */
|
||||
.md-typeset svg.nj-fig {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-inline: auto;
|
||||
color: var(--md-default-fg-color);
|
||||
font-family: var(--md-text-font-family), sans-serif;
|
||||
}
|
||||
.md-typeset svg.nj-fig--range { min-width: 30rem; max-width: 40rem; }
|
||||
.md-typeset svg.nj-fig--cb { max-width: 30rem; }
|
||||
.nj-fig { --fg-line: color-mix(in srgb, currentColor 55%, var(--md-default-bg-color)); }
|
||||
.nj-fig .fg-cell { fill: color-mix(in srgb, var(--md-typeset-a-color) 14%, var(--md-default-bg-color)); stroke: var(--fg-line); stroke-width: 1.5; }
|
||||
.nj-fig .fg-cell--end { fill: none; stroke-dasharray: 4 3; }
|
||||
.nj-fig .fg-pill { fill: color-mix(in srgb, var(--md-typeset-a-color) 10%, var(--md-default-bg-color)); stroke: var(--md-typeset-a-color); stroke-width: 1.5; }
|
||||
.nj-fig .fg-pilltext { fill: var(--md-typeset-a-color); font-family: var(--md-code-font-family), monospace; font-size: 14px; font-weight: 500; text-anchor: middle; }
|
||||
.nj-fig .fg-arrow { stroke: var(--fg-line); stroke-width: 1.5; fill: none; }
|
||||
.nj-fig .fg-arrow--dash { stroke-dasharray: 3 3; }
|
||||
.nj-fig .fg-head { fill: var(--fg-line); }
|
||||
.nj-fig .fg-note { fill: currentColor; fill-opacity: .7; font-size: 13.5px; text-anchor: middle; }
|
||||
.nj-fig .fg-note--r { text-anchor: end; }
|
||||
.nj-fig .fg-note--l { text-anchor: start; }
|
||||
.nj-fig .fg-h { fill: currentColor; fill-opacity: .7; font-size: 15px; font-weight: 600; }
|
||||
.nj-fig .fg-code { fill: currentColor; font-family: var(--md-code-font-family), monospace; font-size: 16px; white-space: pre; }
|
||||
.nj-fig .fg-leg { font-size: 15px; }
|
||||
.nj-fig { --cb-os: #4eb05a; --cb-oe: #1a6b34; --cb-k: #e5534b; --cb-as: #f0c000; --cb-ae: #b07d00; --cb-v: #1f6fd1; }
|
||||
[data-md-color-scheme="slate"] .nj-fig { --cb-os: #7ee787; --cb-oe: #2ea043; --cb-k: #ff7b72; --cb-as: #f2cc60; --cb-ae: #c69026; --cb-v: #58a6ff; }
|
||||
.nj-fig .cb-os { fill: var(--cb-os); }
|
||||
.nj-fig .cb-oe { fill: var(--cb-oe); }
|
||||
.nj-fig .cb-k { fill: var(--cb-k); }
|
||||
.nj-fig .cb-as { fill: var(--cb-as); }
|
||||
.nj-fig .cb-ae { fill: var(--cb-ae); }
|
||||
.nj-fig .cb-v { fill: var(--cb-v); }
|
||||
.md-typeset img[src*="json-light"], .md-typeset img[src*="json-dark"] {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.md-typeset img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* home page: content uses the same column as every other page */
|
||||
body:has(.nj-hero) .md-content {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
.md-typeset .grid.cards {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 404 page (overrides/404.html) */
|
||||
.nj-404 {
|
||||
max-width: 30rem;
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
.nj-404__code {
|
||||
margin: 0 0 .4rem;
|
||||
color: var(--nj-blue);
|
||||
font-family: var(--md-code-font-family);
|
||||
font-size: .8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.md-typeset .nj-404 h1 {
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
.nj-404 .md-button {
|
||||
margin: .4rem .4rem 0 0;
|
||||
}
|
||||
|
||||
/* touch targets and phones */
|
||||
@media screen and (max-width: 59.984375em) {
|
||||
.md-nav__link {
|
||||
padding-block: .2rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 29.984375em) {
|
||||
.md-typeset h1 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.md-typeset .highlight pre > code {
|
||||
font-size: .68rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* figure captions: "Figure N." in bold, close to the figure, set in from the text column; figures and tables are
|
||||
numbered per page, each with its own counter */
|
||||
.md-content__inner { counter-reset: nj-figure nj-table; }
|
||||
.md-typeset :is(.nj-caption, .nj-charts-caption) {
|
||||
max-width: none;
|
||||
margin: .3rem 2rem 1.5rem;
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
.md-typeset :is(.nj-fig-wrap, .railroad-wrap, .nj-charts-grid-wrap) + :is(.nj-caption, .nj-charts-caption) { margin-top: -1.1rem; }
|
||||
.md-typeset .nj-charts-grid-wrap + :is(.nj-caption, .nj-charts-caption) { margin-top: .3rem; }
|
||||
.md-typeset :is(.nj-caption, .nj-charts-caption)::before {
|
||||
counter-increment: nj-figure;
|
||||
content: "Figure " counter(nj-figure) ". ";
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
@media screen and (max-width: 44.9375em) {
|
||||
.md-typeset :is(.nj-caption, .nj-charts-caption) { margin-inline: 1rem; }
|
||||
}
|
||||
|
||||
/* table captions: "Table N." in bold, directly below the table, in the figure caption style */
|
||||
.md-typeset .nj-table-caption {
|
||||
max-width: none;
|
||||
margin: .3rem 2rem 1.5rem;
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
.md-typeset :is(.md-typeset__scrollwrap, .md-typeset__table) + .nj-table-caption { margin-top: -.4rem; }
|
||||
.md-typeset .nj-table-caption::before {
|
||||
counter-increment: nj-table;
|
||||
content: "Table " counter(nj-table) ". ";
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
@media screen and (max-width: 44.9375em) {
|
||||
.md-typeset .nj-table-caption { margin-inline: 1rem; }
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* figures: charts (docs/images/compile_times.svg, binary_sizes_*.svg, ordered_json_scaling.svg from
|
||||
scripts/figures/charts.py) and the number literal explorer on features/types/number_handling.md */
|
||||
|
||||
/* series colours: categorical slots validated for CVD separation on the light and the slate surface */
|
||||
.nj-charts, .nj-charts-key {
|
||||
--nj-charts-c1: #2a78d6;
|
||||
--nj-charts-c2: #eb6834;
|
||||
--nj-charts-c3: #1baf7a;
|
||||
--nj-charts-c4: #eda100;
|
||||
--nj-charts-c5: #e87ba4;
|
||||
--nj-charts-c6: #008300;
|
||||
--nj-charts-ink2: var(--md-default-fg-color--light);
|
||||
--nj-charts-grid: color-mix(in srgb, currentColor 12%, var(--md-default-bg-color));
|
||||
--nj-charts-base: color-mix(in srgb, currentColor 35%, var(--md-default-bg-color));
|
||||
}
|
||||
[data-md-color-scheme="slate"] :is(.nj-charts, .nj-charts-key) {
|
||||
--nj-charts-c1: #3987e5;
|
||||
--nj-charts-c2: #d95926;
|
||||
--nj-charts-c3: #199e70;
|
||||
--nj-charts-c4: #c98500;
|
||||
--nj-charts-c5: #d55181;
|
||||
--nj-charts-c6: #008300;
|
||||
}
|
||||
/* concepts: two compilers, two object types */
|
||||
.nj-charts { --nj-charts-clang-c: var(--nj-charts-c1); --nj-charts-gcc-c: var(--nj-charts-c2);
|
||||
--nj-charts-json-c: var(--nj-charts-c1); --nj-charts-ojson-c: var(--nj-charts-c2); }
|
||||
|
||||
.md-typeset svg.nj-charts--compile, .md-typeset svg.nj-charts--scaling { max-width: 26rem; }
|
||||
.md-typeset svg.nj-charts--sizes { max-width: 26rem; }
|
||||
|
||||
.nj-charts text { fill: currentColor; font-size: 13px; }
|
||||
.nj-charts .nj-charts-leg { font-size: 13.5px; }
|
||||
.nj-charts .nj-charts-rowlabel { font-size: 13.5px; font-weight: 500; }
|
||||
.nj-charts .nj-charts-code { font-family: var(--md-code-font-family), monospace; font-size: 12.5px; }
|
||||
.nj-charts .nj-charts-sub { fill: var(--nj-charts-ink2); font-weight: 400; }
|
||||
.nj-charts .nj-charts-fmt { text-anchor: end; font-weight: 400; }
|
||||
.nj-charts .nj-charts-best { font-weight: 700; }
|
||||
.nj-charts .nj-charts-panel { font-family: var(--md-code-font-family), monospace; font-size: 14px; font-weight: 600; }
|
||||
.nj-charts .nj-charts-tick { fill: var(--nj-charts-ink2); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
|
||||
.nj-charts .nj-charts-tick--l { text-anchor: start; }
|
||||
.nj-charts .nj-charts-tick--r { text-anchor: end; }
|
||||
.nj-charts .nj-charts-val { font-size: 12px; font-variant-numeric: tabular-nums;
|
||||
paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 4px; stroke-linejoin: round; }
|
||||
.nj-charts .nj-charts-factor { fill: var(--nj-charts-ink2); font-size: 12px; font-weight: 600; text-anchor: middle; }
|
||||
.nj-charts .nj-charts-note { fill: var(--nj-charts-ink2); font-size: 12px; }
|
||||
|
||||
.nj-charts .nj-charts-grid { stroke: var(--nj-charts-grid); stroke-width: 1; }
|
||||
.nj-charts .nj-charts-zero, .nj-charts .nj-charts-axis { stroke: var(--nj-charts-base); stroke-width: 1.5; }
|
||||
.nj-charts .nj-charts-ref { stroke: currentColor; stroke-width: 1.5; }
|
||||
|
||||
.nj-charts .nj-charts-c1 { fill: var(--nj-charts-c1); }
|
||||
.nj-charts .nj-charts-c2 { fill: var(--nj-charts-c2); }
|
||||
.nj-charts .nj-charts-c3 { fill: var(--nj-charts-c3); }
|
||||
.nj-charts .nj-charts-c4 { fill: var(--nj-charts-c4); }
|
||||
.nj-charts .nj-charts-c5 { fill: var(--nj-charts-c5); }
|
||||
.nj-charts .nj-charts-c6 { fill: var(--nj-charts-c6); }
|
||||
.nj-charts .nj-charts-dim { fill-opacity: .45; }
|
||||
.nj-charts .nj-charts-clang { fill: var(--nj-charts-clang-c); }
|
||||
.nj-charts .nj-charts-gcc { fill: var(--nj-charts-gcc-c); }
|
||||
.nj-charts polyline.nj-charts-json, .nj-charts line.nj-charts-json { stroke: var(--nj-charts-json-c); stroke-width: 2; fill: none; }
|
||||
.nj-charts polyline.nj-charts-ojson, .nj-charts line.nj-charts-ojson { stroke: var(--nj-charts-ojson-c); stroke-width: 2; fill: none; }
|
||||
.nj-charts .nj-charts-json-dot { fill: var(--nj-charts-json-c); stroke: var(--md-default-bg-color); stroke-width: 2; }
|
||||
.nj-charts .nj-charts-ojson-dot { fill: var(--nj-charts-ojson-c); stroke: var(--md-default-bg-color); stroke-width: 2; }
|
||||
|
||||
/* single wide charts: larger text on phones, where the SVG is scaled down */
|
||||
@media screen and (max-width: 44.9375em) {
|
||||
svg.nj-charts.nj-charts--compile text, svg.nj-charts.nj-charts--scaling text { font-size: 15px; }
|
||||
svg.nj-charts.nj-charts--compile .nj-charts-code { font-size: 14px; }
|
||||
svg.nj-charts:is(.nj-charts--compile, .nj-charts--scaling) :is(.nj-charts-tick, .nj-charts-val, .nj-charts-factor, .nj-charts-note) { font-size: 14px; }
|
||||
}
|
||||
|
||||
/* small multiples: two panels per row, one on narrow screens */
|
||||
.md-typeset .nj-charts-grid-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: 1rem 2rem;
|
||||
margin: 1.5rem 0 .5rem;
|
||||
}
|
||||
.md-typeset .nj-charts-grid-wrap > .nj-fig-wrap { margin: 0; }
|
||||
|
||||
/* number literal explorer */
|
||||
.md-typeset .nj-charts-num-ui {
|
||||
margin: 1rem 0 .75rem;
|
||||
padding: .8rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.md-typeset .nj-charts-num-ui label { display: block; font-weight: 600; font-size: .75rem; margin-bottom: .3rem; }
|
||||
.md-typeset .nj-charts-num-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-height: 44px;
|
||||
padding: .4rem .6rem;
|
||||
font-family: var(--md-code-font-family), monospace;
|
||||
font-size: .8rem;
|
||||
color: var(--md-default-fg-color);
|
||||
background: var(--md-code-bg-color);
|
||||
border: 1px solid var(--md-default-fg-color--lighter);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.md-typeset .nj-charts-num-input:focus-visible, .md-typeset .nj-charts-num-chip:focus-visible {
|
||||
outline: 2px solid var(--md-typeset-a-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips:not([hidden]) { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; padding: 0; list-style: none; }
|
||||
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li { margin: 0; padding: 0; list-style: none; }
|
||||
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::before, .md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::marker { content: none; }
|
||||
.md-typeset .nj-charts-num-chip {
|
||||
min-height: 44px;
|
||||
max-width: 100%;
|
||||
padding: .25rem .6rem;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: var(--md-code-font-family), monospace;
|
||||
font-size: .7rem;
|
||||
color: var(--md-typeset-a-color);
|
||||
background: color-mix(in srgb, var(--md-typeset-a-color) 8%, var(--md-default-bg-color));
|
||||
border: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 35%, var(--md-default-bg-color));
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.md-typeset .nj-charts-num-chip[aria-pressed="true"] {
|
||||
color: var(--md-default-bg-color);
|
||||
background: var(--md-typeset-a-color);
|
||||
border-color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-charts-num-out {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: .2rem .8rem;
|
||||
margin: 0;
|
||||
font-size: .75rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.md-typeset .nj-charts-num-out dt { color: var(--md-default-fg-color--light); margin: 0; }
|
||||
.md-typeset .nj-charts-num-out dd { margin: 0; }
|
||||
.md-typeset .nj-charts-num-miss { font-size: .75rem; color: var(--md-default-fg-color--light); margin: 0; }
|
||||
.md-typeset .nj-charts-num tr.nj-charts-num-hit td { background: var(--md-accent-fg-color--transparent); }
|
||||
|
||||
/* direct line labels replace the legend */
|
||||
.nj-charts .nj-charts-name-json { fill: var(--nj-charts-json-c); font-weight: 600; }
|
||||
.nj-charts .nj-charts-name-ojson { fill: var(--nj-charts-ojson-c); font-weight: 600; }
|
||||
@@ -0,0 +1,75 @@
|
||||
/* figures: exceptions (home/exceptions.md exception map, community/quality_assurance.md pipeline) */
|
||||
|
||||
/* the generated SVGs hold a wide and a narrow drawing; show one of them */
|
||||
.md-typeset svg.nj-exceptions-map--wide, .md-typeset svg.nj-exceptions-qa--wide { max-width: 47.5rem; }
|
||||
.md-typeset svg.nj-exceptions-map--narrow, .md-typeset svg.nj-exceptions-qa--narrow { display: none; max-width: 24rem; }
|
||||
@media screen and (max-width: 37.5em) {
|
||||
.md-typeset svg.nj-exceptions-map--wide, .md-typeset svg.nj-exceptions-qa--wide { display: none; }
|
||||
.md-typeset svg.nj-exceptions-map--narrow, .md-typeset svg.nj-exceptions-qa--narrow { display: block; }
|
||||
}
|
||||
|
||||
/* shared */
|
||||
.nj-fig { --nj-exceptions-line: color-mix(in srgb, currentColor 45%, var(--md-default-bg-color)); }
|
||||
.nj-fig .nj-exceptions-edge { stroke: var(--nj-exceptions-line); stroke-width: 1.5; fill: none; }
|
||||
.nj-fig .nj-exceptions-tri { fill: var(--md-default-bg-color); stroke: var(--nj-exceptions-line); stroke-width: 1.3; }
|
||||
.nj-fig .nj-exceptions-box {
|
||||
fill: color-mix(in srgb, currentColor 4%, var(--md-default-bg-color));
|
||||
stroke: color-mix(in srgb, currentColor 30%, var(--md-default-bg-color));
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
.nj-fig .nj-exceptions-box--fam {
|
||||
fill: color-mix(in srgb, var(--md-typeset-a-color) 9%, var(--md-default-bg-color));
|
||||
stroke: color-mix(in srgb, var(--md-typeset-a-color) 55%, var(--md-default-bg-color));
|
||||
}
|
||||
.nj-fig .nj-exceptions-name { fill: currentColor; font-family: var(--md-code-font-family), monospace; font-size: 14px; font-weight: 600; }
|
||||
.nj-fig .nj-exceptions-sub { fill: currentColor; fill-opacity: .68; font-size: 12.5px; }
|
||||
|
||||
/* exception map: id chips are links */
|
||||
.nj-fig .nj-exceptions-chip rect {
|
||||
fill: color-mix(in srgb, var(--md-typeset-a-color) 7%, var(--md-default-bg-color));
|
||||
stroke: color-mix(in srgb, var(--md-typeset-a-color) 40%, var(--md-default-bg-color));
|
||||
stroke-width: 1.2;
|
||||
transition: fill .15s;
|
||||
}
|
||||
.nj-fig .nj-exceptions-chip--named rect {
|
||||
fill: color-mix(in srgb, var(--md-typeset-a-color) 16%, var(--md-default-bg-color));
|
||||
stroke: var(--md-typeset-a-color);
|
||||
}
|
||||
.nj-fig .nj-exceptions-id { fill: var(--md-typeset-a-color); font-family: var(--md-code-font-family), monospace; font-size: 13px; font-weight: 600; }
|
||||
.nj-fig .nj-exceptions-label { fill: currentColor; font-size: 12.5px; font-weight: 500; }
|
||||
.nj-fig a:hover rect, .nj-fig a:focus-visible rect {
|
||||
fill: color-mix(in srgb, var(--md-typeset-a-color) 28%, var(--md-default-bg-color));
|
||||
}
|
||||
.nj-fig a:focus { outline: none; }
|
||||
.nj-fig a:focus-visible rect { stroke: var(--md-typeset-a-color); stroke-width: 2.5; }
|
||||
.nj-fig a:hover .nj-exceptions-name, .nj-fig a:focus-visible .nj-exceptions-name { text-decoration: underline; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nj-fig .nj-exceptions-chip rect { transition: none; }
|
||||
}
|
||||
|
||||
/* quality assurance pipeline */
|
||||
.nj-fig { --nj-exceptions-push: var(--md-typeset-a-color); --nj-exceptions-sched: #a86400; --nj-exceptions-cont: #1a7f37; }
|
||||
[data-md-color-scheme="slate"] .nj-fig { --nj-exceptions-sched: #e3a33b; --nj-exceptions-cont: #56c46e; }
|
||||
.nj-fig .nj-exceptions-groupbox {
|
||||
fill: color-mix(in srgb, currentColor 2.5%, var(--md-default-bg-color));
|
||||
stroke: color-mix(in srgb, currentColor 22%, var(--md-default-bg-color));
|
||||
stroke-width: 1.2;
|
||||
stroke-dasharray: 5 4;
|
||||
}
|
||||
.nj-fig .nj-exceptions-group { fill: currentColor; fill-opacity: .68; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
|
||||
.nj-fig .nj-exceptions-card .nj-exceptions-box { fill: var(--md-default-bg-color); }
|
||||
.nj-fig .nj-exceptions-ctitle { fill: currentColor; font-size: 15px; font-weight: 700; }
|
||||
.nj-fig .nj-exceptions-line { fill: currentColor; fill-opacity: .8; font-size: 12.5px; }
|
||||
.nj-fig .nj-exceptions-badge { stroke-width: 1.2; }
|
||||
.nj-fig .nj-exceptions-badgetext { font-size: 11px; font-weight: 600; text-anchor: middle; }
|
||||
.nj-fig .nj-exceptions-badge--push { fill: color-mix(in srgb, var(--nj-exceptions-push) 12%, var(--md-default-bg-color)); stroke: var(--nj-exceptions-push); }
|
||||
.nj-fig .nj-exceptions-badge--sched { fill: color-mix(in srgb, var(--nj-exceptions-sched) 12%, var(--md-default-bg-color)); stroke: var(--nj-exceptions-sched); }
|
||||
.nj-fig .nj-exceptions-badge--cont { fill: color-mix(in srgb, var(--nj-exceptions-cont) 12%, var(--md-default-bg-color)); stroke: var(--nj-exceptions-cont); }
|
||||
.nj-fig .nj-exceptions-badgetext--push { fill: var(--nj-exceptions-push); }
|
||||
.nj-fig .nj-exceptions-badgetext--sched { fill: var(--nj-exceptions-sched); }
|
||||
.nj-fig .nj-exceptions-badgetext--cont { fill: var(--nj-exceptions-cont); }
|
||||
.nj-fig .nj-exceptions-stage { fill: var(--md-typeset-a-color); }
|
||||
.nj-fig .nj-exceptions-stagetext { fill: #fff; font-size: 14px; font-weight: 700; text-anchor: middle; }
|
||||
.nj-fig .nj-exceptions-stagesub { fill: #fff; fill-opacity: .85; font-size: 12px; text-anchor: middle; }
|
||||
[data-md-color-scheme="slate"] .nj-fig .nj-exceptions-stage { fill: #1747a6; }
|
||||
.nj-fig .nj-exceptions-qa .fg-head, .nj-exceptions-qa .fg-head { fill: var(--nj-exceptions-line); }
|
||||
@@ -0,0 +1,176 @@
|
||||
/* figures: integration */
|
||||
|
||||
/* namespace name builder (features/namespace.md, js/fig-integration.js) */
|
||||
.md-typeset .nj-integration-ns {
|
||||
--nj-int-line: color-mix(in srgb, currentColor 30%, var(--md-default-bg-color));
|
||||
display: block;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
margin: 1.5rem 0;
|
||||
padding: .9rem 1rem;
|
||||
text-align: left;
|
||||
border: 1px solid var(--nj-int-line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: .5rem .15rem;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg code {
|
||||
padding: .25em .5em;
|
||||
border: 1.5px solid var(--nj-int-line);
|
||||
border-radius: 6px;
|
||||
background: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color);
|
||||
font-size: .8rem;
|
||||
font-weight: 600;
|
||||
word-break: normal;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg small {
|
||||
max-width: 10rem;
|
||||
margin-top: .25rem;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: .58rem;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg--sep code {
|
||||
border-color: transparent;
|
||||
padding-inline: .1em;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg--abi code {
|
||||
border-color: var(--md-typeset-a-color);
|
||||
background: color-mix(in srgb, var(--md-typeset-a-color) 12%, var(--md-default-bg-color));
|
||||
color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg--tag code {
|
||||
border-style: dashed;
|
||||
border-color: var(--md-typeset-a-color);
|
||||
color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-integration-ns__seg--ver code {
|
||||
background: color-mix(in srgb, currentColor 8%, var(--md-default-bg-color));
|
||||
}
|
||||
.md-typeset .nj-integration-ns figcaption {
|
||||
max-width: none;
|
||||
margin: .8rem 0 0;
|
||||
font-size: .75rem;
|
||||
text-align: left;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
.md-typeset .nj-integration-ns__controls {
|
||||
margin-top: 1rem;
|
||||
padding-top: .8rem;
|
||||
border-top: 1px solid var(--nj-int-line);
|
||||
font-size: .7rem;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__version select {
|
||||
min-height: 2rem;
|
||||
margin-left: .3rem;
|
||||
padding: 0 .4rem;
|
||||
border: 1px solid var(--nj-int-line);
|
||||
border-radius: 6px;
|
||||
background: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color);
|
||||
font: inherit;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
|
||||
gap: 0 1rem;
|
||||
margin: .7rem 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__list legend {
|
||||
padding: 0;
|
||||
margin-bottom: .3rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__opt {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1rem 1fr;
|
||||
align-items: center;
|
||||
gap: 0 .55rem;
|
||||
min-height: 2.2rem;
|
||||
padding: .15rem 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__meta {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 .45rem;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__opt input {
|
||||
grid-row: 1 / span 2;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin: 0;
|
||||
accent-color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-integration-ns__opt input:focus-visible {
|
||||
outline: 2px solid var(--md-accent-fg-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__opt code {
|
||||
font-size: .64rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__hint {
|
||||
color: var(--md-typeset-a-color);
|
||||
font-family: var(--md-code-font-family);
|
||||
font-size: .64rem;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__since {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: .6rem;
|
||||
}
|
||||
.md-typeset .nj-integration-ns__opt.is-unavailable {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
}
|
||||
@media screen and (max-width: 44.984375em) {
|
||||
.md-typeset .nj-integration-ns__opt {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* roadmap lanes and release timeline (scripts/figures/integration.py, release_timeline.py) */
|
||||
.md-typeset svg.nj-fig--lanes { min-width: 44rem; max-width: 46rem; }
|
||||
.md-typeset svg.nj-fig--timeline { min-width: 44rem; max-width: 52rem; }
|
||||
.nj-fig .nj-int-lane { fill: color-mix(in srgb, var(--md-typeset-a-color) 10%, var(--md-default-bg-color)); stroke: var(--md-typeset-a-color); stroke-width: 1.5; }
|
||||
.nj-fig .nj-int-lane--future { fill: none; stroke-dasharray: 6 4; }
|
||||
.nj-fig .nj-int-lanetext { fill: var(--md-typeset-a-color); font-size: 15px; font-weight: 700; }
|
||||
.nj-fig .nj-int-text { fill: currentColor; font-size: 13px; }
|
||||
.nj-fig .nj-int-mute { fill: currentColor; fill-opacity: .7; font-size: 12.5px; }
|
||||
.nj-fig .nj-int-macro { fill: currentColor; font-family: var(--md-code-font-family), monospace; font-size: 12.5px; }
|
||||
.nj-fig .nj-int-val { fill: currentColor; font-family: var(--md-code-font-family), monospace; font-size: 13px; font-weight: 600; }
|
||||
.nj-fig .nj-int-row { fill: color-mix(in srgb, currentColor 4%, var(--md-default-bg-color)); }
|
||||
.nj-fig .nj-int-track { fill: color-mix(in srgb, currentColor 14%, var(--md-default-bg-color)); stroke: color-mix(in srgb, currentColor 45%, var(--md-default-bg-color)); stroke-width: 1.2; }
|
||||
.nj-fig .nj-int-track--on { fill: var(--md-typeset-a-color); stroke: var(--md-typeset-a-color); }
|
||||
.nj-fig .nj-int-knob { fill: var(--md-default-bg-color); stroke: color-mix(in srgb, currentColor 45%, var(--md-default-bg-color)); stroke-width: 1.2; }
|
||||
.nj-fig .nj-int-knob--on { stroke: var(--md-typeset-a-color); }
|
||||
.nj-fig .nj-int-axis { stroke: color-mix(in srgb, currentColor 45%, var(--md-default-bg-color)); stroke-width: 1.5; }
|
||||
.nj-fig .nj-int-grid { stroke: color-mix(in srgb, currentColor 14%, var(--md-default-bg-color)); stroke-width: 1; }
|
||||
.nj-fig .nj-int-minor { fill: var(--md-typeset-a-color); stroke: var(--md-default-bg-color); stroke-width: 1.5; }
|
||||
.nj-fig .nj-int-patch { fill: var(--md-default-bg-color); stroke: var(--md-typeset-a-color); stroke-width: 1.5; }
|
||||
.nj-fig .nj-int-major { fill: currentColor; fill-opacity: .7; font-size: 13px; font-weight: 600; }
|
||||
.nj-fig .nj-int-label { fill: currentColor; font-size: 12px; font-weight: 600; text-anchor: middle; }
|
||||
.nj-fig .nj-int-year { fill: currentColor; fill-opacity: .7; font-size: 12px; text-anchor: middle; }
|
||||
.nj-fig .nj-int-leader { stroke: color-mix(in srgb, currentColor 30%, var(--md-default-bg-color)); stroke-width: 1; }
|
||||
.nj-fig .nj-int-hit { fill: transparent; }
|
||||
|
||||
/* roadmap: value pills (3.x default -> 4.0 value) */
|
||||
.nj-fig .nj-int-pill { fill: color-mix(in srgb, currentColor 8%, var(--md-default-bg-color)); stroke: color-mix(in srgb, currentColor 35%, var(--md-default-bg-color)); stroke-width: 1.2; }
|
||||
.nj-fig .nj-int-pill--v4 { fill: var(--md-typeset-a-color); stroke: var(--md-typeset-a-color); }
|
||||
.nj-fig .nj-int-val--v4 { fill: var(--md-default-bg-color); }
|
||||
@@ -0,0 +1,107 @@
|
||||
/* 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); }
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/* figures: macro chooser (js/fig-macros.js) on features/arbitrary_types.md; colours come from the brand
|
||||
variables in brand.css, which switch with the light/slate scheme */
|
||||
.nj-macro-chooser {
|
||||
--nj-mc-line: color-mix(in srgb, currentColor 18%, var(--md-default-bg-color));
|
||||
--nj-mc-panel: color-mix(in srgb, currentColor 3%, var(--md-default-bg-color));
|
||||
--nj-mc-ink2: var(--md-default-fg-color--light);
|
||||
margin: 1.2em 0 1.6em;
|
||||
font-size: .74rem;
|
||||
}
|
||||
.md-typeset .nj-macro-chooser .nj-mc-fallback > :first-child { margin-top: 0; }
|
||||
|
||||
.nj-mc-app { border: 1px solid var(--nj-mc-line); border-radius: .3rem; background: var(--nj-mc-panel);
|
||||
padding: .9rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
|
||||
.nj-mc-form, .nj-mc-out, .nj-mc-editor, .nj-mc-members, .nj-mc-mbody { grid-template-columns: minmax(0, 1fr); }
|
||||
.nj-mc-form { display: grid; gap: 1rem; margin: 0; }
|
||||
|
||||
/* questions as segmented radio groups */
|
||||
.nj-mc-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14.5rem, 100%), 1fr)); gap: .7rem .9rem; }
|
||||
.nj-mc-q { border: 0; margin: 0; padding: 0; min-width: 0; }
|
||||
.nj-mc-q legend { font-weight: 600; padding: 0; margin-bottom: .3rem; font-size: .7rem; }
|
||||
.nj-mc-seg { display: flex; border: 1px solid var(--nj-mc-line); border-radius: .25rem; overflow: hidden;
|
||||
background: var(--md-default-bg-color); }
|
||||
.nj-mc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
|
||||
.nj-mc-seg label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
|
||||
min-height: 2.1rem; padding: .25rem .5rem; cursor: pointer; line-height: 1.25; font-size: .7rem;
|
||||
color: var(--md-default-fg-color); transition: background-color .15s, color .15s; }
|
||||
.nj-mc-seg label + input + label { border-left: 1px solid var(--nj-mc-line); }
|
||||
.nj-mc-seg label:hover { background: var(--nj-blue-soft); }
|
||||
.nj-mc-seg input:checked + label { background: var(--nj-blue); color: var(--md-default-bg-color); font-weight: 600; }
|
||||
.nj-mc-seg input:focus-visible + label { outline: 2px solid var(--md-accent-fg-color); outline-offset: -3px; }
|
||||
.nj-mc-q:disabled .nj-mc-seg { opacity: .45; }
|
||||
.nj-mc-q:disabled label { cursor: not-allowed; }
|
||||
.nj-mc-q:disabled label:hover { background: transparent; }
|
||||
.md-typeset .nj-mc-qnote { margin: .3rem 0 0; font-size: .64rem; line-height: 1.4; color: var(--nj-mc-ink2); }
|
||||
|
||||
/* type editor */
|
||||
.nj-mc-editor { display: grid; gap: .6rem; border-top: 1px solid var(--nj-mc-line); padding-top: .9rem; }
|
||||
.nj-mc-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: .6rem .9rem; }
|
||||
.nj-mc-field { display: grid; gap: .2rem; }
|
||||
.nj-mc-field label { font-weight: 600; font-size: .7rem; }
|
||||
.nj-mc-field[hidden] { display: none; }
|
||||
.nj-macro-chooser input[type="text"] { font-family: var(--md-code-font-family), monospace; font-size: .7rem;
|
||||
min-height: 2.1rem; padding: .2rem .45rem; min-width: 0; width: 100%; box-sizing: border-box;
|
||||
border: 1px solid var(--nj-mc-line); border-radius: .2rem; background: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color); }
|
||||
.nj-macro-chooser input[type="text"]:focus { outline: 2px solid var(--md-accent-fg-color); outline-offset: 0; border-color: transparent; }
|
||||
|
||||
.nj-mc-members { display: grid; gap: .35rem; }
|
||||
.nj-mc-mbody { display: grid; gap: .35rem; }
|
||||
.nj-mc-mrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2.2rem; gap: .4rem; align-items: center; }
|
||||
.nj-mc-custom .nj-mc-mrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 2.2rem; }
|
||||
.nj-mc-mrow .nj-mc-keycol { display: none; }
|
||||
.nj-mc-custom .nj-mc-mrow .nj-mc-keycol { display: block; }
|
||||
.nj-mc-mhead { font-weight: 600; font-size: .66rem; color: var(--nj-mc-ink2); }
|
||||
.nj-mc-mhead .nj-mc-keycol[hidden] { display: none; }
|
||||
|
||||
.nj-macro-chooser button { font: inherit; cursor: pointer; border-radius: .2rem; }
|
||||
.nj-macro-chooser button:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
|
||||
.nj-mc-rm { width: 2.2rem; height: 2.1rem; border: 1px solid var(--nj-mc-line); background: var(--md-default-bg-color);
|
||||
color: var(--nj-mc-ink2); font-size: 1rem; line-height: 1; padding: 0; }
|
||||
.nj-mc-rm:hover { color: var(--nj-red); border-color: var(--nj-red); }
|
||||
.nj-mc-add, .nj-mc-copy { justify-self: start; min-height: 2.1rem; padding: .2rem .8rem; font-size: .7rem; font-weight: 600;
|
||||
border: 1px solid var(--nj-blue); background: var(--md-default-bg-color); color: var(--nj-blue); }
|
||||
.nj-mc-add:hover, .nj-mc-copy:hover { background: var(--nj-blue-soft); }
|
||||
|
||||
/* output */
|
||||
.nj-mc-out { display: grid; gap: .7rem; }
|
||||
.nj-mc-result { border-left: .2rem solid var(--nj-blue); background: var(--nj-blue-soft); border-radius: 0 .2rem .2rem 0;
|
||||
padding: .55rem .8rem; }
|
||||
.nj-mc-result.nj-mc-bad { border-left-color: var(--nj-red); background: var(--nj-red-soft); }
|
||||
.md-typeset .nj-mc-result p { margin: 0; }
|
||||
.md-typeset .nj-mc-result p + p { margin-top: .3rem; }
|
||||
.md-typeset .nj-mc-label { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nj-mc-ink2); }
|
||||
.md-typeset .nj-mc-macro code { font-size: .8rem; font-weight: 600; background: transparent; padding: 0;
|
||||
overflow-wrap: anywhere; color: var(--md-default-fg-color); }
|
||||
.md-typeset .nj-mc-why { line-height: 1.5; }
|
||||
.md-typeset .nj-mc-hints { margin: 0; padding-left: 1.1rem; font-size: .68rem; color: var(--nj-mc-ink2); }
|
||||
.md-typeset .nj-mc-hints li { margin: 0; }
|
||||
.nj-mc-hints[hidden], .nj-mc-code[hidden] { display: none; }
|
||||
|
||||
.nj-mc-codebar { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
|
||||
.nj-mc-codetitle { font-weight: 600; font-size: .7rem; margin-right: auto; }
|
||||
.nj-mc-copystatus { font-size: .66rem; color: var(--nj-mc-ink2); }
|
||||
.md-typeset .nj-mc-code .highlight { margin: 0; }
|
||||
.md-typeset .nj-mc-code pre { margin: 0; }
|
||||
.md-typeset .nj-mc-code pre > code { max-height: 34rem; }
|
||||
|
||||
@media (max-width: 44.9375em) {
|
||||
.nj-mc-app { padding: .7rem; }
|
||||
.nj-mc-seg label, .nj-macro-chooser input[type="text"], .nj-mc-add, .nj-mc-copy { min-height: 2.75rem; }
|
||||
.nj-mc-rm { width: 2.75rem; height: 2.75rem; }
|
||||
.nj-mc-mrow, .nj-mc-custom .nj-mc-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; }
|
||||
.nj-mc-custom .nj-mc-mrow .nj-mc-keycol { grid-column: 1 / 3; }
|
||||
.nj-mc-custom .nj-mc-mhead { display: none; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nj-mc-seg label { transition: none; }
|
||||
}
|
||||
@@ -0,0 +1,459 @@
|
||||
/* figures: pointer (features/json_pointer.md, json_patch.md, merge_patch.md; widgets in js/fig-pointer.js) */
|
||||
|
||||
/* value types: the colours of the code highlighting (brand.css), so a string looks the same everywhere */
|
||||
.nj-pointer-walk, .nj-pointer-fl, .nj-patch {
|
||||
--nj-pointer-s: var(--nj-hl-string);
|
||||
--nj-pointer-n: var(--nj-hl-number);
|
||||
--nj-pointer-b: var(--nj-hl-function);
|
||||
--nj-pointer-line: color-mix(in srgb, var(--md-default-fg-color) 28%, var(--md-default-bg-color));
|
||||
--nj-pointer-ok: #23793a;
|
||||
--nj-pointer-ok-soft: #e6f4ea;
|
||||
}
|
||||
[data-md-color-scheme="slate"] :is(.nj-pointer-walk, .nj-pointer-fl, .nj-patch) {
|
||||
--nj-pointer-ok: #7ed491;
|
||||
--nj-pointer-ok-soft: #14301d;
|
||||
}
|
||||
|
||||
/* ---------- pointer walker ---------- */
|
||||
.md-typeset .nj-pointer-walk {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem 1.6rem;
|
||||
margin: 1.5rem 0;
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
@media screen and (min-width: 45em) {
|
||||
.md-typeset .nj-pointer-walk--js {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk--js .nj-pointer-panel { order: 2; }
|
||||
}
|
||||
.md-typeset .nj-pointer-static {
|
||||
margin: 0;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk code {
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
/* tree: elbow lines drawn by each item (::before up to its row, ::after down to the next sibling) */
|
||||
.md-typeset .nj-pointer-walk ul.nj-pointer-tree,
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
--nj-pointer-mid: .95rem;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree li::before,
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree li::after {
|
||||
content: none;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1rem;
|
||||
width: .8rem;
|
||||
height: var(--nj-pointer-mid);
|
||||
border: 0 solid var(--nj-pointer-line);
|
||||
border-width: 0 0 2px 2px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background: none;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -1rem;
|
||||
border-left: 2px solid var(--nj-pointer-line);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li.is-on::before {
|
||||
z-index: 1;
|
||||
border-color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li.is-pass::after {
|
||||
z-index: 1;
|
||||
border-left-color: var(--md-typeset-a-color);
|
||||
}
|
||||
|
||||
.md-typeset .nj-pointer-walk .nj-pointer-n {
|
||||
display: inline-block;
|
||||
margin: .15rem 0;
|
||||
padding: .2rem .5rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
color: var(--md-default-fg-color);
|
||||
font: inherit;
|
||||
font-family: var(--md-code-font-family), monospace;
|
||||
font-size: .95em;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk button.nj-pointer-n {
|
||||
cursor: pointer;
|
||||
}
|
||||
.md-typeset .nj-pointer-walk button.nj-pointer-n:hover {
|
||||
border-color: var(--md-default-fg-color--lightest);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk :is(button):focus-visible {
|
||||
outline: 2px solid var(--md-typeset-a-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.nj-pointer-k { color: var(--nj-hl-key); }
|
||||
.nj-pointer-t {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-family: var(--md-text-font-family), sans-serif;
|
||||
font-size: .88em;
|
||||
font-style: italic;
|
||||
}
|
||||
.nj-pointer-v--s { color: var(--nj-pointer-s); }
|
||||
.nj-pointer-v--n { color: var(--nj-pointer-n); }
|
||||
.nj-pointer-v--b { color: var(--nj-pointer-b); }
|
||||
|
||||
.md-typeset .nj-pointer-walk li.is-on > .nj-pointer-n {
|
||||
border-color: color-mix(in srgb, var(--md-typeset-a-color) 45%, transparent);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk li.is-target > .nj-pointer-n {
|
||||
border-color: var(--md-typeset-a-color);
|
||||
background-color: var(--nj-blue-soft);
|
||||
box-shadow: 0 0 0 1px var(--md-typeset-a-color);
|
||||
}
|
||||
/* the value a container pointer identifies includes its subtree */
|
||||
.md-typeset .nj-pointer-walk li.is-target li > .nj-pointer-n {
|
||||
background-color: var(--nj-blue-soft);
|
||||
}
|
||||
.md-typeset .nj-pointer-walk li.is-miss > .nj-pointer-n {
|
||||
border-color: var(--nj-red);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
/* panel: pointer bar, result, example pointers */
|
||||
.nj-pointer-lbl {
|
||||
margin: 0 0 .35rem;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: .62rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nj-pointer-lbl span {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
.nj-pointer-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
.md-typeset .nj-pointer-seg {
|
||||
margin: 0 -1px 0 0;
|
||||
padding: .3rem .55rem;
|
||||
border: 1px solid var(--md-typeset-a-color);
|
||||
background-color: var(--md-default-bg-color);
|
||||
color: var(--md-typeset-a-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
.md-typeset .nj-pointer-seg:first-child { border-radius: 6px 0 0 6px; }
|
||||
.md-typeset .nj-pointer-seg:last-child { border-radius: 0 6px 6px 0; }
|
||||
.md-typeset .nj-pointer-seg:only-child { border-radius: 6px; }
|
||||
.md-typeset .nj-pointer-seg code { color: inherit; font-size: 1em; }
|
||||
.md-typeset .nj-pointer-seg--root code { color: var(--md-default-fg-color--light); }
|
||||
.md-typeset .nj-pointer-seg.is-after {
|
||||
border-color: var(--md-default-fg-color--lighter);
|
||||
color: var(--md-default-fg-color--light);
|
||||
border-style: dashed;
|
||||
}
|
||||
.md-typeset .nj-pointer-seg[aria-pressed="true"] {
|
||||
position: relative;
|
||||
background-color: var(--md-typeset-a-color);
|
||||
color: var(--md-default-bg-color);
|
||||
}
|
||||
.md-typeset .nj-pointer-seg--root[aria-pressed="true"] code { color: inherit; }
|
||||
.nj-pointer-out {
|
||||
min-height: 3.2em;
|
||||
margin-bottom: .9rem;
|
||||
padding: .5rem .7rem;
|
||||
border-left: 3px solid var(--md-typeset-a-color);
|
||||
border-radius: 0 6px 6px 0;
|
||||
background-color: var(--md-code-bg-color);
|
||||
line-height: 1.6;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.md-typeset .nj-pointer-out .nj-pointer-val { color: var(--md-typeset-a-color); font-weight: 600; }
|
||||
.nj-pointer-out .nj-pointer-note { color: var(--md-default-fg-color--light); }
|
||||
.nj-pointer-out .nj-pointer-err { color: var(--nj-red); font-weight: 600; }
|
||||
.nj-pointer-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .35rem;
|
||||
}
|
||||
.md-typeset .nj-pointer-chip {
|
||||
padding: .2rem .5rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
background-color: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
.md-typeset .nj-pointer-chip:hover { border-color: var(--md-typeset-a-color); }
|
||||
.md-typeset .nj-pointer-chip[aria-pressed="true"] {
|
||||
border-color: var(--md-typeset-a-color);
|
||||
background-color: var(--nj-blue-soft);
|
||||
color: var(--md-typeset-a-color);
|
||||
}
|
||||
.md-typeset .nj-pointer-chip code { color: inherit; font-size: 1em; }
|
||||
@media (pointer: coarse), screen and (max-width: 44.984375em) {
|
||||
.md-typeset :is(.nj-pointer-seg, .nj-pointer-chip, .nj-patch-btn) { min-height: 44px; min-width: 44px; }
|
||||
.md-typeset .nj-pointer-walk button.nj-pointer-n { min-height: 40px; }
|
||||
}
|
||||
|
||||
/* ---------- flatten / unflatten figure (scripts/figures/json_pointer_flatten.py) ---------- */
|
||||
.md-typeset svg.nj-pointer-fl { min-width: 28rem; max-width: 44rem; }
|
||||
.nj-pointer-fl .nj-pointer-fl-edge { fill: none; stroke: var(--fg-line); stroke-width: 1.5; }
|
||||
.nj-pointer-fl .nj-pointer-fl-link { fill: none; stroke-width: 1.5; stroke-opacity: .75; }
|
||||
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--s, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--s { stroke: var(--nj-pointer-s); }
|
||||
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--n, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--n { stroke: var(--nj-pointer-n); }
|
||||
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--b, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--b { stroke: var(--nj-pointer-b); }
|
||||
.nj-pointer-fl .nj-pointer-fl-dot { fill: var(--md-default-bg-color); stroke-width: 2; }
|
||||
.nj-pointer-fl tspan.nj-pointer-fl--s { fill: var(--nj-pointer-s); }
|
||||
.nj-pointer-fl tspan.nj-pointer-fl--n { fill: var(--nj-pointer-n); }
|
||||
.nj-pointer-fl tspan.nj-pointer-fl--b { fill: var(--nj-pointer-b); }
|
||||
.nj-pointer-fl .nj-pointer-fl-k, .nj-pointer-fl .nj-pointer-fl-inner, .nj-pointer-fl .nj-pointer-fl-key { fill: var(--nj-hl-key); }
|
||||
.nj-pointer-fl .nj-pointer-fl-op {
|
||||
fill: var(--md-typeset-a-color);
|
||||
font-family: var(--md-code-font-family), monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
/* ---------- JSON Patch stepper ---------- */
|
||||
.md-typeset .nj-patch--js .md-typeset__scrollwrap,
|
||||
.md-typeset .nj-patch--js > .md-typeset__table,
|
||||
.md-typeset .nj-patch--js > table {
|
||||
display: none;
|
||||
}
|
||||
.md-typeset .nj-patch-stage {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1rem 1.1rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.nj-patch-cols {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem 1.4rem;
|
||||
}
|
||||
@media screen and (min-width: 50em) {
|
||||
.nj-patch-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
|
||||
}
|
||||
.nj-patch-h {
|
||||
margin: 0 0 .35rem;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: .62rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nj-patch-doc {
|
||||
--nj-patch-lh: 1.9rem;
|
||||
--nj-patch-pad: .5rem;
|
||||
position: relative;
|
||||
padding: var(--nj-patch-pad) .6rem var(--nj-patch-pad) 2rem;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
background-color: var(--md-code-bg-color);
|
||||
font-family: var(--md-code-font-family), monospace;
|
||||
font-size: .95em;
|
||||
}
|
||||
.nj-patch-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0 .6rem;
|
||||
min-height: var(--nj-patch-lh);
|
||||
margin: 0 -.3rem;
|
||||
padding: 0 .3rem;
|
||||
border-radius: 4px;
|
||||
white-space: pre;
|
||||
}
|
||||
.nj-patch-code { white-space: pre; }
|
||||
.nj-patch-k { color: var(--nj-hl-key); }
|
||||
.nj-patch-s { color: var(--nj-pointer-s); }
|
||||
.nj-patch-note {
|
||||
padding: 0 .4rem;
|
||||
border-radius: 4px;
|
||||
font-family: var(--md-text-font-family), sans-serif;
|
||||
font-size: .82em;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nj-patch-line--add { background-color: var(--nj-pointer-ok-soft); box-shadow: inset 3px 0 0 var(--nj-pointer-ok); }
|
||||
.nj-patch-line--add .nj-patch-note { color: var(--nj-pointer-ok); }
|
||||
.nj-patch-line--del { background-color: var(--nj-red-soft); box-shadow: inset 3px 0 0 var(--nj-red); }
|
||||
.nj-patch-line--del .nj-patch-code { text-decoration: line-through; text-decoration-color: var(--nj-red); text-decoration-thickness: 2px; opacity: .75; }
|
||||
.nj-patch-line--del .nj-patch-note { color: var(--nj-red); }
|
||||
.nj-patch-line--mod .nj-patch-note { color: var(--nj-pointer-ok); }
|
||||
.nj-patch-line--test { background-color: var(--nj-blue-soft); box-shadow: inset 3px 0 0 var(--md-typeset-a-color); }
|
||||
.nj-patch-line--test .nj-patch-note { color: var(--md-typeset-a-color); }
|
||||
.nj-patch-ins { padding: .05rem .15rem; border-radius: 3px; background-color: var(--nj-pointer-ok-soft); box-shadow: 0 0 0 1.5px var(--nj-pointer-ok); }
|
||||
.nj-patch-src { padding: .05rem .15rem; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--md-typeset-a-color); }
|
||||
|
||||
/* move/copy connector in the left gutter: a bracket from the source line to the target line */
|
||||
.nj-patch-arc {
|
||||
position: absolute;
|
||||
left: .55rem;
|
||||
width: .8rem;
|
||||
border: 2px solid var(--md-typeset-a-color);
|
||||
border-right: 0;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
.nj-patch-arc::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
border: 5px solid transparent;
|
||||
border-left: 7px solid var(--md-typeset-a-color);
|
||||
}
|
||||
.nj-patch-arc--down::after { bottom: -6px; }
|
||||
.nj-patch-arc--up::after { top: -6px; }
|
||||
|
||||
.md-typeset .nj-patch-ops {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
counter-reset: nj-patch;
|
||||
}
|
||||
.md-typeset .nj-patch-ops > li {
|
||||
position: relative;
|
||||
margin: 0 0 .3rem;
|
||||
padding: .35rem .5rem .35rem 2rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
counter-increment: nj-patch;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.md-typeset .nj-patch-ops > li::before {
|
||||
content: counter(nj-patch);
|
||||
position: absolute;
|
||||
top: .35rem;
|
||||
left: .6rem;
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.md-typeset .nj-patch-ops code { font-size: .9em; overflow-wrap: anywhere; }
|
||||
.md-typeset .nj-patch-ops > li.is-done { opacity: .6; }
|
||||
.md-typeset .nj-patch-ops > li.is-cur {
|
||||
border-color: var(--md-typeset-a-color);
|
||||
background-color: var(--nj-blue-soft);
|
||||
}
|
||||
.md-typeset .nj-patch-ops > li.is-cur::before { color: var(--md-typeset-a-color); }
|
||||
.nj-patch-op { color: var(--nj-hl-keyword); font-weight: 600; }
|
||||
.nj-patch-path { color: var(--nj-pointer-s); }
|
||||
.md-typeset .nj-patch-ops > li.is-cur .nj-patch-path {
|
||||
padding: 0 .15rem;
|
||||
border-radius: 3px;
|
||||
background-color: var(--md-typeset-a-color);
|
||||
color: var(--md-default-bg-color);
|
||||
}
|
||||
.nj-patch-ctrl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
margin-top: .9rem;
|
||||
}
|
||||
.md-typeset .nj-patch-btn {
|
||||
padding: .3rem .9rem;
|
||||
border: 1px solid var(--md-default-fg-color--lighter);
|
||||
border-radius: 6px;
|
||||
background-color: var(--md-default-bg-color);
|
||||
color: var(--md-default-fg-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
.md-typeset .nj-patch-btn--primary {
|
||||
border-color: var(--md-typeset-a-color);
|
||||
background-color: var(--md-typeset-a-color);
|
||||
color: var(--md-default-bg-color);
|
||||
}
|
||||
.md-typeset .nj-patch-btn:disabled { opacity: .45; cursor: default; }
|
||||
.md-typeset .nj-patch-btn:focus-visible { outline: 2px solid var(--md-typeset-a-color); outline-offset: 2px; }
|
||||
.nj-patch-count {
|
||||
margin-left: auto;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.md-typeset .nj-patch-status {
|
||||
min-height: 3.2em;
|
||||
margin: .6rem 0 0;
|
||||
color: var(--md-default-fg-color--light);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.nj-patch-doc--anim :is(.nj-patch-line--add, .nj-patch-line--del, .nj-patch-line--test, .nj-patch-ins, .nj-patch-arc) {
|
||||
animation: nj-patch-in 450ms ease-out;
|
||||
}
|
||||
}
|
||||
@keyframes nj-patch-in {
|
||||
from { opacity: 0; transform: translateX(-.4rem); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* ---------- merge patch table ---------- */
|
||||
.nj-pointer-mpt {
|
||||
--nj-pointer-mp-set: var(--nj-hl-keyword);
|
||||
--nj-pointer-mp-add: #23793a;
|
||||
--nj-pointer-mp-del: var(--nj-red);
|
||||
--nj-pointer-mp-rec: var(--nj-hl-function);
|
||||
--nj-pointer-mp-arr: var(--nj-hl-number);
|
||||
--nj-pointer-mp-keep: var(--md-default-fg-color--light);
|
||||
}
|
||||
[data-md-color-scheme="slate"] .nj-pointer-mpt { --nj-pointer-mp-add: #7ed491; }
|
||||
.md-typeset .nj-pointer-mpt td { vertical-align: top; }
|
||||
.md-typeset .nj-pointer-mpt td:first-child { white-space: nowrap; }
|
||||
.nj-pointer-mp {
|
||||
display: inline-block;
|
||||
padding: .05rem .5rem;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 999px;
|
||||
background-color: color-mix(in srgb, currentColor 10%, var(--md-default-bg-color));
|
||||
font-size: .92em;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nj-pointer-mp--set { color: var(--nj-pointer-mp-set); }
|
||||
.nj-pointer-mp--add { color: var(--nj-pointer-mp-add); }
|
||||
.nj-pointer-mp--del { color: var(--nj-pointer-mp-del); }
|
||||
.nj-pointer-mp--rec { color: var(--nj-pointer-mp-rec); }
|
||||
.nj-pointer-mp--arr { color: var(--nj-pointer-mp-arr); }
|
||||
.nj-pointer-mp--keep { color: var(--nj-pointer-mp-keep); }
|
||||
.nj-pointer-mp-none { color: var(--md-default-fg-color--light); font-style: italic; }
|
||||
.md-typeset .nj-pointer-mpt table:not([class]) td code { white-space: normal; }
|
||||
.md-typeset .nj-pointer-mpt table:not([class]) td:nth-child(-n+2) code { white-space: nowrap; }
|
||||
/* the result cell takes a tint of the rule's colour */
|
||||
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--set) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-set) 8%, transparent); }
|
||||
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--add) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-add) 8%, transparent); }
|
||||
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--del) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-del) 8%, transparent); }
|
||||
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--rec) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-rec) 8%, transparent); }
|
||||
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--arr) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-arr) 8%, transparent); }
|
||||
@@ -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); }
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><g font-family='Menlo,monospace' font-size='26' font-weight='600' fill='#ffffff' fill-opacity='0.10'><text x='14' y='34'>{</text><text x='92' y='22'>]</text><text x='136' y='60'>:</text><text x='52' y='82'>[</text><text x='118' y='112'>,</text><text x='20' y='140'>}</text><text x='78' y='150'>:</text><text x='140' y='158'>{</text></g></svg>
|
||||
|
After Width: | Height: | Size: 408 B |
Reference in new issue
Block a user