` above the first row labels
the columns ("Description" / `input_data.json`).
============================================================ */
.md-typeset .json-side,
.md-typeset .json-side-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.md-typeset .json-side {
margin: 1.5rem 0;
}
.md-typeset .json-side .js-code,
.md-typeset .json-side .js-text {
min-width: 0;
}
.md-typeset .json-side .js-code .highlight,
.md-typeset .json-side .js-code pre {
margin: 0;
}
/* Long code blocks inside the .js-text column (e.g. shell `cp` lines)
need to scroll horizontally rather than stretch the column. */
.md-typeset .json-side .js-text pre {
max-width: 100%;
overflow-x: auto;
}
/* Smaller prose in the left column so the JSON dominates the row. */
.md-typeset .json-side .js-text {
font-size: 0.78rem;
line-height: 1.55;
}
.md-typeset .json-side .js-text h3 {
font-size: 1rem;
margin: 0 0 0.4rem;
}
.md-typeset .json-side .js-text > :first-child {
margin-top: 0;
}
.md-typeset .json-side .js-text > :last-child {
margin-bottom: 0;
}
/* Column-header row above the first .json-side block. */
.md-typeset .json-side-header {
margin: 2rem 0 0.5rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--durham-gold);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem;
color: var(--durham-purple);
}
.md-typeset .json-side-header code {
font-size: 0.82rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
background: transparent;
border: none;
padding: 0;
color: var(--durham-ink);
}
/* Stack on narrow viewports, and hide the header (labels would orphan). */
@media (max-width: 76.25em) {
.md-typeset .json-side {
grid-template-columns: 1fr;
}
.md-typeset .json-side-header {
display: none;
}
}
/* ============================================================
Walkthrough rows: single column with the text block above and
the screenshot below. Used for screenshot-driven step-by-step
guides such as the ParaView walkthrough.
============================================================ */
.md-typeset .walkthrough {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin: 1.5rem 0;
}
.md-typeset .walkthrough > div > :first-child { margin-top: 0; }
.md-typeset .walkthrough > div > :last-child { margin-bottom: 0; }
.md-typeset .walkthrough img {
width: 100%;
height: auto;
}
/* ============================================================
Terminal-window styling for shell / console examples.
Wrap a code block in `
` to get
a dark window with macOS-style traffic-light chrome. Pure
visual treatment — no actual execution. Use the `console`
Pygments lexer inside to dim `$` prompts vs output.
============================================================ */
.md-typeset .terminal {
background: #1e1f29;
border-radius: 8px;
margin: 1.5rem 0;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Title bar with the three traffic-light dots, drawn with
radial-gradients so we don't need extra HTML or SVG assets. */
.md-typeset .terminal::before {
content: "";
display: block;
height: 28px;
background:
radial-gradient(circle 6px at 18px 14px, #ff5f57 50%, transparent 52%),
radial-gradient(circle 6px at 38px 14px, #febc2e 50%, transparent 52%),
radial-gradient(circle 6px at 58px 14px, #28c840 50%, transparent 52%),
linear-gradient(180deg, #3a3a44 0%, #2d2e36 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
/* Strip Material's code-block chrome inside the terminal so the
dark background carries through edge-to-edge. */
.md-typeset .terminal .highlight,
.md-typeset .terminal pre,
.md-typeset .terminal pre > code {
background: transparent;
border: none;
margin: 0;
color: #f8f8f2;
}
.md-typeset .terminal pre > code {
display: block;
padding: 0.9rem 1.1rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.78rem;
line-height: 1.55;
}
/* Cap the terminal's visible height and scroll internally when the
session is longer. ~16 visible lines at the font-size + line-height
above; raise/lower `max-height` to taste. */
.md-typeset .terminal pre {
max-height: 22rem;
overflow-y: auto;
/* Slim scrollbar themed for the dark window (Firefox). */
scrollbar-width: thin;
scrollbar-color: rgba(248, 248, 242, 0.25) transparent;
}
/* Modifier: drop the height cap so the whole session is shown without
scrolling. Use on short-but-must-show-in-full terminals (e.g. the
one-off Julia setup output that introduces tutorials). */
.md-typeset .terminal.terminal-full pre {
max-height: none;
overflow-y: visible;
}
/* WebKit / Chromium scrollbar styling. */
.md-typeset .terminal pre::-webkit-scrollbar {
width: 8px;
}
.md-typeset .terminal pre::-webkit-scrollbar-track {
background: transparent;
}
.md-typeset .terminal pre::-webkit-scrollbar-thumb {
background: rgba(248, 248, 242, 0.22);
border-radius: 4px;
}
.md-typeset .terminal pre::-webkit-scrollbar-thumb:hover {
background: rgba(248, 248, 242, 0.4);
}
/* Force every token-coloured span inside the terminal to inherit the body
foreground colour. The `console` lexer otherwise applies Julia/Pkg/Bash
syntax colours to output that should read as plain terminal text. */
.md-typeset .terminal .highlight code * {
color: inherit;
font-style: normal;
font-weight: normal;
}
/* Only the prompt (gp = generic prompt) is given a colour, so commands
stand out from the surrounding output. Julia brand green from
julialang.org/assets/infra/logo.svg — matches the colour used for
`julia>` in the real Julia REPL. */
.md-typeset .terminal .highlight .gp {
color: #389826;
user-select: none;
margin-right: 0.5em;
}
/* Julia REPL keyword colours, applied by docs/javascripts/julia-repl-colors.js
to match the colours users see in a real Julia session. Brand colours from
julialang.org/assets/infra/logo.svg. */
.md-typeset .terminal .highlight .repl-green { color: #389826; }
.md-typeset .terminal .highlight .repl-red { color: #CB3C33; }
.md-typeset .terminal .highlight .repl-purple { color: #9558B2; }
.md-typeset .terminal .highlight .repl-cyan { color: #5cbeff; }
/* Copy-code button — keep visible on the dark background. */
.md-typeset .terminal .md-clipboard {
color: rgba(248, 248, 242, 0.55);
}
.md-typeset .terminal .md-clipboard:hover {
color: #f8f8f2;
}
/* ============================================================
TOC-less pages (tutorials use `hide: [toc]` frontmatter):
when Material omits the secondary sidebar, let the content
fill the freed space instead of stopping at the centred
1400px cap. `:has()` detects the missing sidebar.
============================================================ */
@media screen and (min-width: 76.25em) {
.md-main:not(:has(.md-sidebar--secondary)) > .md-main__inner,
.md-main:not(:has(.md-sidebar--secondary)) .md-content {
max-width: none;
}
}
/* Compact reference tables on dense field-list pages such as
InputFormat.md. Wrap a table in
...
to drop cell text to ~0.8x and tighten padding so
many keys fit at a glance. */
.md-typeset .small-table table {
font-size: 0.8em;
}
.md-typeset .small-table table th,
.md-typeset .small-table table td {
padding: 0.4em 0.6em;
}
/* Underline body-content links so they read as obvious affordances.
Scoped to `.md-typeset` (the article column) so the header tabs,
sidebar nav and footer keep their unobtrusive default styling. */
.md-typeset a {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.md-typeset a:hover {
text-decoration-thickness: 2px;
}