extra.css

/* Catalog tables (effects / modifiers / layouts / drivers), rendered from prose
   ### blocks by moondeck/docs/mkdocs_hooks.py. Give the four columns sensible
   proportions and let the preview image fill its column instead of the tiny
   hand-authored width="300".

   Scoped to `.mm-catalog` (a class we add to the rendered table) so it doesn't
   reshape the generated test-inventory tables or any other table on the site. */

/* Material tables default to width:auto with content-based column sizing, which
   IGNORES percentage column widths (the Preview column collapsed to ~100px and
   the GIF rendered as a 68px thumbnail). `table-layout: fixed` + full width makes
   the browser honour the column percentages below. */
.md-typeset .mm-catalog-wrap table {
  table-layout: fixed;
  width: 100%;
}

/* The preview GIF/PNG fills its (now properly-sized) column; auto height keeps
   the aspect ratio. No max-width — let it use the full column so previews are big. */
.md-typeset .mm-catalog-wrap table td img.mm-preview {
  width: 100%;
  height: auto;
  display: block;
}

/* Column proportions: name+description and parameters get the room; preview and
   links are narrower. nth-child targets the 4 columns of the catalog table. */
.md-typeset .mm-catalog-wrap table th:nth-child(1),
.md-typeset .mm-catalog-wrap table td:nth-child(1) { width: 26%; }   /* Name + description */
.md-typeset .mm-catalog-wrap table th:nth-child(2),
.md-typeset .mm-catalog-wrap table td:nth-child(2) { width: 26%; }   /* Preview */
.md-typeset .mm-catalog-wrap table th:nth-child(3),
.md-typeset .mm-catalog-wrap table td:nth-child(3) { width: 30%; }   /* Parameters */
.md-typeset .mm-catalog-wrap table th:nth-child(4),
.md-typeset .mm-catalog-wrap table td:nth-child(4) { width: 18%; }   /* Links */

/* fixed layout clips overflow by default — allow long param/description text to wrap. */
.md-typeset .mm-catalog-wrap table td { word-wrap: break-word; overflow-wrap: anywhere; vertical-align: top; }

/* Name column: title distinct from description (was one run-on line). The name is
   bold and slightly larger; the description sits below in a muted color with a
   small gap, reading as title + subtitle. */
.md-typeset .mm-catalog-wrap .mm-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--md-typeset-a-color);   /* accent purple, matching the param names */
}
.md-typeset .mm-catalog-wrap .mm-desc {
  color: var(--md-default-fg-color--light);
  display: inline-block;
  margin-top: 0.3rem;
}

/* Parameters column: each param on its own line, compact (small gap, no left rule
   — the earlier version made many-param effects like GameOfLife very tall). What
   makes each param scannable is the NAME standing out, not the spacing. */
.md-typeset .mm-catalog-wrap .mm-param {
  display: block;
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
}
.md-typeset .mm-catalog-wrap .mm-param:last-child { margin-bottom: 0; }

/* The param NAME (a `code` chip in the source) is the anchor the eye scans for —
   make it stand out: accent color, bold, no chip background so it reads as a
   highlighted term rather than a muted grey box blending into the prose. */
.md-typeset .mm-catalog-wrap .mm-param code {
  color: var(--md-typeset-a-color);   /* the theme accent (purple) */
  background: transparent;
  font-weight: 600;
  font-size: 0.82em;
  padding: 0;
}

/* Control description (the prose after the em-dash) greyed, matching the muted
   module description — so within a param, the name pops (purple) and its
   explanation recedes (grey), consistent with name-vs-description elsewhere. */
.md-typeset .mm-catalog-wrap .mm-pdesc {
  color: var(--md-default-fg-color--light);
}

/* Links column: grey the plain attribution prose (author, project, year). The
   actual links (Tests, source .h, MoonLight) keep their accent color — Material's
   `a` rule is more specific than this, so only the surrounding text greys. */
.md-typeset .mm-catalog-wrap .mm-links {
  color: var(--md-default-fg-color--light);
}

/* ---------------------------------------------------------------------------
   Colored headings (whole site). The slate theme renders every heading in the
   same near-white, so an h1/h2/h3 doesn't stand out from body text — the page
   reads as one grey wall. Give headings the theme's primary/accent color so
   the document structure is scannable at a glance (the standard Material-site
   look: colored headings over neutral body). h4+ stay default — coloring
   every level would just re-flatten the hierarchy. */
.md-typeset h1,
.md-typeset h2 {
  color: var(--md-primary-fg-color);
  font-weight: 700;
}
.md-typeset h3 {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Signature standout on the generated moxygen technical pages. Each attribute /
   method renders as a paragraph leading with its declaration
   (`uint8_t protocol = 0`, `virtual void defineControls() override`) followed
   by a `: summary`. gen_api.py rewrites each into
   `<code class="mm-sig">…<span class="mm-sig-name">name</span>…</code>` so the
   chip can highlight ONLY the declared member name while the type and arguments
   stay muted — the eye lands on the name it's scanning for, and the signature
   still reads as one code chip. (A flat `<code>` can't do this in CSS alone —
   there's no way to select 'the name' inside an undelimited string.) */
.md-typeset code.mm-sig {
  background: color-mix(in srgb, var(--md-accent-fg-color) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 22%, transparent);
  color: var(--md-default-fg-color--light);   /* type + args: muted */
  padding: 0.15em 0.5em;
}
.md-typeset code.mm-sig .mm-sig-name {
  color: var(--md-accent-fg-color);           /* the declared name: accent + bold */
  font-weight: 700;
}

/* Power-functions tables: the first column holds a function NAME, which must never
   break mid-token (`draw::fill` wrapping to "draw::fil / l" is unreadable — the reader
   is scanning for an identifier, not prose). Material sizes table columns by content
   and lets long inline code wrap anywhere: right for prose, wrong for a symbol.
   Applied via an explicit {.mm-pf} class on each table (attr_list), so no other table
   on the site is reshaped. */
.md-typeset .mm-pf table,
.md-typeset table.mm-pf {
  table-layout: fixed;
  width: 100%;
}
.md-typeset .mm-pf table th:nth-child(1), .md-typeset .mm-pf table td:nth-child(1),
.md-typeset table.mm-pf th:nth-child(1), .md-typeset table.mm-pf td:nth-child(1) { width: 17%; }
.md-typeset .mm-pf table th:nth-child(2), .md-typeset .mm-pf table td:nth-child(2),
.md-typeset table.mm-pf th:nth-child(2), .md-typeset table.mm-pf td:nth-child(2) { width: 35%; }
.md-typeset .mm-pf table th:nth-child(3), .md-typeset .mm-pf table td:nth-child(3),
.md-typeset table.mm-pf th:nth-child(3), .md-typeset table.mm-pf td:nth-child(3) { width: 38%; }
.md-typeset .mm-pf table th:nth-child(4), .md-typeset .mm-pf table td:nth-child(4),
.md-typeset table.mm-pf th:nth-child(4), .md-typeset table.mm-pf td:nth-child(4) { width: 10%; }
/* The identifier column: keep each symbol whole rather than breaking it mid-token. */
.md-typeset .mm-pf table td:nth-child(1) code,
.md-typeset table.mm-pf td:nth-child(1) code { white-space: nowrap; }
.md-typeset .mm-pf table td, .md-typeset table.mm-pf td { vertical-align: top; }