custom.css

/*
 * ComfyUI docs — custom theme overrides (custom.css)
 *
 * Color tokens
 * ────────────
 * --ink-900:         #151417  dark-mode nav shell (replaces Mintlify charcoal #211927)
 * --hub-shell-light: #f7f6f9  light-mode nav shell (replaces sidebar #ffffff vs body mismatch)
 * --accent-purple:   #49378b  Comfy brand purple — active nav text, headings, CTA outline
 * --cta-text-dark:   #1a1a1a  dark-mode label on yellow primary button
 *
 * Light-mode sidebar default text stays Mintlify gray #404042 (rgb 64,64,66).
 * Only the current page link gets #49378b + Mintlify lavender pill rgba(73,55,139,0.1).
 */

:root {
  --ink-900: #151417;
  --hub-shell-light: #f7f6f9;
  --accent-purple: #49378b;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */

/* Primary CTA: keep dark text (#1a1a1a) on yellow button */
html.dark .bg-primary-dark span {
  color: #1a1a1a !important;
}

/* Nav shell: topbar + sidebar → #151417 (was #211927) */
html.dark #navbar,
html.dark #sidebar,
html.dark #sidebar-content,
html.dark navbar-link,
html.dark navbar {
  background-color: var(--ink-900) !important;
}

html.dark .almond-layout,
html.dark .almond-layout > div,
html.dark body {
  background-color: var(--ink-900) !important;
}

html.dark #almond-background-color {
  background-color: var(--ink-900) !important;
}

/* ── Light mode — nav shell ─────────────────────────────────────────────────── */

/* Unify topbar + sidebar with page shell → #f7f6f9 (was #ffffff on sidebar) */
html:not(.dark) #navbar,
html:not(.dark) #sidebar,
html:not(.dark) #sidebar-content,
html:not(.dark) navbar-link,
html:not(.dark) navbar {
  background-color: var(--hub-shell-light) !important;
}

html:not(.dark) .almond-layout,
html:not(.dark) .almond-layout > div,
html:not(.dark) body {
  background-color: var(--hub-shell-light) !important;
}

html:not(.dark) #almond-background-color {
  background-color: var(--hub-shell-light) !important;
}

/* ── Router API reference ───────────────────────────────────────────────────── */

/*
 * The generated Router reference needs its full content width for six-column
 * parameter tables. The sticky page outline otherwise sits alongside the
 * article and visually covers the rightmost columns. This class is emitted
 * only by the Router reference generator. The marker is a sibling before the
 * generated Markdown, so it does not change paragraph semantics.
 */
body:has(.router-api-reference-marker) #content-container {
  max-width: none;
}

body:has(.router-api-reference-marker) #content-area {
  max-width: 48rem;
}

body:has(.router-api-reference-marker) #content-area table {
  width: 100%;
  table-layout: auto;
}

body:has(.router-api-reference-marker) #content-area th,
body:has(.router-api-reference-marker) #content-area td {
  min-width: 4rem !important;
  overflow-wrap: anywhere;
}

body:has(.router-api-reference-marker) #content-area table:has(th:nth-child(6)) th:nth-child(3),
body:has(.router-api-reference-marker) #content-area table:has(th:nth-child(6)) td:nth-child(3) {
  min-width: 5rem !important;
}

/*
 * The standard right outline appears at Mintlify's xl breakpoint. The Router
 * reference needs more width for its complete API tables, so defer it to a
 * wider desktop layout. It remains available on roomy screens.
 */
@media (max-width: 1535px) {
  body:has(.router-api-reference-marker) #content-side-layout {
    display: none !important;
  }
}

/* The Quickstart is structured as numbered Steps, not heading sections. */
body:has(.router-quickstart-marker) #content-side-layout {
  display: none !important;
}

/* ── Light mode — active nav (top tabs + dropdown) ─────────────────────────── */

/*
 * Active tab / dropdown item: #49378b text, no full-width fill.
 * Does NOT target sidebar groups — expanded sections keep default #404042 text.
 */
html:not(.dark) .nav-tabs-item[data-active],
html:not(.dark) mobile-nav-tabs-item[data-active],
html:not(.dark) nav-dropdown-item[data-active] {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #49378b !important;
  font-weight: 600 !important;
}

html:not(.dark) .nav-tabs-item[data-active] *,
html:not(.dark) mobile-nav-tabs-item[data-active] *,
html:not(.dark) nav-dropdown-item[data-active] * {
  color: inherit !important;
}

/* ── Light mode — sidebar current page only ─────────────────────────────────── */

/*
 * Mintlify marks expanded groups with [data-active], which previously forced
 * #49378b on every child. Target only the current page link (aria-current="page"):
 *   • active link  → #49378b + Mintlify pill rgba(73,55,139,0.1)
 *   • siblings     → default #404042 (theme, unchanged)
 */
html:not(.dark) #sidebar-content li:has(> a[aria-current="page"]) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] {
  color: #49378b !important;
  font-weight: 600 !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] * {
  color: inherit !important;
}

/* ── Light mode — right TOC ─────────────────────────────────────────────────── */

/* Current heading in page TOC: #49378b, no block fill */
html:not(.dark) toc-item[data-active],
html:not(.dark) toc-item[data-active-deepest],
html:not(.dark) toc-item[data-active] a,
html:not(.dark) toc-item[data-active-deepest] a {
  background-color: transparent !important;
  color: #49378b !important;
  font-weight: 600 !important;
}

/* ── Light mode — content headings ─────────────────────────────────────────── */

/* All article headings h1–h6 → #49378b */
html:not(.dark) #header :where(h1, h2, h3, h4, h5, h6),
html:not(.dark) #content-area :where(h1, h2, h3, h4, h5, h6) {
  color: #49378b !important;
}

/* ── Light mode — Comfy Cloud CTA ───────────────────────────────────────────── */

/* Navbar Cloud button: #49378b text + #49378b border, transparent fill (no neon yellow) */
html:not(.dark) #navbar a[href*="comfy.org/cloud"] {
  background-color: transparent !important;
  color: #49378b !important;
  border: 1px solid #49378b !important;
  box-shadow: none !important;
}

html:not(.dark) #navbar a[href*="comfy.org/cloud"] * {
  color: inherit !important;
}