mirror of
https://gh-proxy.org/https://github.com/klinsmaya/multica.git
synced 2026-11-08 01:16:45 +08:00
苗大
e13a902f59
* chore(docs): upgrade to Fumadocs 16 and Next.js 16 Fumadocs UI 16 requires Next.js 16, so the docs app moves to Next 16 alongside it (apps/web is already on 16). - fumadocs-core/ui 15 -> 16, fumadocs-mdx 12 -> 15 - import collections from .source/server and RootProvider from fumadocs-ui/provider/next - migrate UI translation keys to the v16 message ids - rename middleware.ts to proxy.ts per the Next 16 convention - declare the status, diff and overlay color slots v16 moved out of preset.css - keep heading anchors, now rendered as a[data-card], out of the card styles - drop the language select v16 adds to the sidebar footer; the docs settings menu already switches language * feat(docs): add a kit for click-through product demos Docs pages can embed small demos that imitate the product and walk the reader through one action. The kit holds the shared frame (title, replay, live caption), the coach mark that rings the next control with a localized "Click" and an arrow, and timeline pieces for runs, comments and steps. Demos start when scrolled into view, take their scenario copy per locale, and isolate their stacking so they stay under the page header. tw-animate-css provides the enter animations, as in apps/web. * fix(docs): consistent Steps, Tabs and Accordion styling - a Steps item is at least as tall as its number badge, so one-line steps don't stack their badges - accordion headers (not-prose h3) skip the editorial heading styles - hide the copy-link button Fumadocs adds beside accordion titles; the ids stay so links still open an entry - tab bars end in a hairline that carries the active underline without overflowing the scrolling bar, and a lone code block in a tab keeps its inset and border, so every tab group looks the same * docs: interactive getting-started pages - concepts: clickable map of the core objects and their relations - how-multica-works: step-through of one run from issue to result - triggering-agents: pick a goal, get the way to start an agent, including issue wakeups - cloud-quickstart and tutorial use Steps; agent creation, the runtimes entry and the sidebar paths match the current product Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: interactive workspace, issue and project pages - demos for member roles, issue statuses, project progress, workflow handoffs, creating an issue with an agent, deliverable versions and local directory modes - new Analytics page with a demo of the usage and errors tabs: cost estimates, runtime usage, custom prices and per-issue spend - issues: custom properties, display settings and saved views, peek, bulk edits and duplicates - project progress counts the done and closed categories; status category names, the workflow return label and share links follow the product; agent moves trigger handoffs too - project-resources: modes as Tabs, worktree details as Accordions Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: interactive agent pages - demos for agent Access, creating an agent, adding a skill and a squad run led by its leader - agents-create describes the current runtime -> configure -> done flow instead of the removed start-blank / build-with-AI choice, and covers workspace-shared MCP servers - squads: notified members, a three-column re-trigger table, and the sections the ja/ko pages were missing Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: interactive everyday-collaboration pages - demos for steering a running agent, mentioning an agent, assigning an issue, resolving a thread, running a quick action, chat, the chat message queue and the inbox - mentioning-agents documents steering and the per-recipient delivery options; follow-ups no longer always wait for the run to end - comments: sub-issues created from a thread, the thread minimap and edit-conflict comparison - chat: the floating window, draft restore and the message queue - new page for search, keyboard shortcuts and preferences - quick actions: the sidebar list is not filtered by invoke permission Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: interactive runtime and automation pages - demos for a failed run and its retry, a run waiting on an offline computer, an autopilot run, an issue wakeup and picking a coding tool - new Issue wakeups page: event, time and periodic conditions, check-ins, limits, the child_done system rule and its workspace default, and the `multica issue wakeup` commands - daemon-runtimes: start at login, local MCP merging, cleanup and retention, Codex memory defaults, and sharing a runtime with specific members - runs on an offline runtime fail only after the reconnect grace (default 3h); the execution log lists the latest three past runs - providers and the install guide add ZeroClaw and the model-selection column; install-agent-runtime uses Steps, Tabs and per-tool Accordions - the event-filter heading keeps the anchor the product links to Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: interactive integration and app pages - demos for talking to a channel bot, a merged PR completing its issue and per-workspace desktop tabs - the bot guides share one Steps-based layout with their old anchors - Lark and Telegram attach recent group messages as read-only context - desktop-app: pinned tabs - fix stale French GitHub and mobile self-hosting sections, and the compressed ja/ko Telegram pages Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * docs: restructure self-hosting and reference pages - self-host-quickstart and troubleshooting use Steps, Tabs and Accordions with ASCII ids so links open the right entry; code-block tabs become Tabs like everywhere else - environment-variables adds the GC, log rotation and per-tool path/model settings and drops the unused MULTICA_KEEP_ENV_AFTER_TASK - cli adds issue timeline, issue wakeup, daemon autostart and the commonly used flags - fix a corrupted link, flattened code indentation and dead anchors - translations no longer call GitHub issues "tasks" Covers en, zh, ja, ko and fr; copy edited to drop template phrasing. * feat(docs): show the search bar with compact results The site already served a per-locale search index from /api/search (with character-level tokenizers for zh and ja), but the layout hid Fumadocs's search toggle, leaving ⌘K as the only, undiscoverable way in. The toggle is back: a search bar atop the sidebar on desktop and an icon in the mobile header. Fumadocs's default dialog renders every matching paragraph, table and row in full, which buries the page titles. Like DocSearch and Pagefind, results now show the page and section titles plus at most three matches per page, each a two-line excerpt around the match; table rows become one line with their cells joined. The index and ranking are unchanged.
845 lines
27 KiB
CSS
845 lines
27 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "fumadocs-ui/css/preset.css";
|
|
@import "../../../packages/ui/styles/tokens.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@source "../../../packages/ui/**/*.{ts,tsx}";
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Font stack. `--font-inter` is the next/font Inter family (+ synthetic
|
|
* size-adjusted fallback), set on <html> by inter.variable in app/[lang]/layout.tsx.
|
|
* `--font-sans` is composed here in static CSS so it can be overridden per
|
|
* `<html lang>` and stays CSP-safe (no inline <style>). Tailwind's `font-sans`
|
|
* utility resolves `var(--font-sans)`. Mirrors apps/web/app/globals.css.
|
|
*
|
|
* Default (en / zh / ko): Latin → Inter, CJK → Chinese then Korean. Chinese MUST
|
|
* stay before Korean so zh users don't get Korean Hanja glyph shapes.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Apple SD Gothic Neo",
|
|
"Malgun Gothic", "Noto Sans CJK KR", sans-serif;
|
|
}
|
|
|
|
/* Japanese: Kanji share the Han Unicode block with Chinese and CSS fallback
|
|
order is not affected by `<html lang>`, so promote a Japanese-first CJK chain
|
|
only for Japanese docs (`<html lang="ja">`). `[lang|="ja"]` is the BCP-47
|
|
language-range selector — matches exactly `ja` or `ja-<region>`, never
|
|
unrelated subtags like `jam`. Inter still leads for Latin. */
|
|
html[lang|="ja"] {
|
|
--font-sans: var(--font-inter), "Hiragino Sans", "Hiragino Kaku Gothic ProN",
|
|
"Yu Gothic", "YuGothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP",
|
|
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
"Microsoft YaHei", "Noto Sans CJK SC", "Apple SD Gothic Neo", "Malgun Gothic",
|
|
"Noto Sans CJK KR", sans-serif;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Multica Docs — editorial visual identity (v2)
|
|
*
|
|
* Docs site is intentionally distinct from the product app: warm-paper
|
|
* background, editorial serif headings (Source Serif 4), indigo accent,
|
|
* ruled dividers. Product app keeps its cool-gray dense Linear-style; docs
|
|
* reads like a literary publication. Same split as Stripe, Cursor, Linear.
|
|
*
|
|
* Implementation: docs-scoped token override on top of Multica tokens
|
|
* (whose @theme inline references read --background / --foreground / etc
|
|
* at runtime, so re-pointing the vars cascades through fumadocs's full
|
|
* --color-fd-* bridge below).
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--fd-page-width: 1080px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Editorial palette — light
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--background: oklch(0.972 0.003 85); /* near-white, faint warm — matches landing #f7f7f5 */
|
|
--foreground: oklch(0.182 0.012 50); /* warm ink */
|
|
--muted: oklch(0.955 0.006 85); /* hairline, slightly warmer than bg */
|
|
--muted-foreground: oklch(0.482 0.012 65); /* warm muted */
|
|
--card: oklch(0.99 0.002 85); /* paper — near white */
|
|
--card-foreground: oklch(0.182 0.012 50);
|
|
--popover: oklch(0.99 0.002 85);
|
|
--popover-foreground: oklch(0.182 0.012 50);
|
|
--primary: oklch(0.55 0.16 255); /* Multica brand */
|
|
--primary-foreground: oklch(0.985 0.008 85);
|
|
--secondary: oklch(0.945 0.012 85);
|
|
--secondary-foreground: oklch(0.182 0.012 50);
|
|
--accent: oklch(0.945 0.022 255); /* brand soft wash */
|
|
--accent-foreground: oklch(0.46 0.16 255); /* brand ink */
|
|
--border: oklch(0.91 0.014 85); /* ruled lines */
|
|
--input: oklch(0.91 0.014 85);
|
|
--ring: oklch(0.55 0.16 255);
|
|
--sidebar: oklch(0.99 0.002 85); /* paper — same as card */
|
|
--sidebar-foreground: oklch(0.182 0.012 50);
|
|
--sidebar-accent: oklch(0.945 0.006 85); /* subtle cream, hover/active fill */
|
|
--sidebar-accent-foreground: oklch(0.182 0.012 50);
|
|
--sidebar-border: oklch(0.91 0.014 85);
|
|
|
|
/* Docs-only extras (not bridged to fumadocs slots) */
|
|
--docs-rule: oklch(0.835 0.018 85); /* heavier rule */
|
|
--docs-faint: oklch(0.72 0.018 75); /* faintest accent */
|
|
--docs-code-bg: oklch(0.94 0.018 85); /* warm beige code surface */
|
|
--docs-code-border: oklch(0.89 0.018 85);
|
|
--docs-terminal-bg: oklch(0.18 0.012 50); /* terminal warm dark */
|
|
--docs-terminal-fg: oklch(0.92 0.012 80);
|
|
--docs-terminal-accent: oklch(0.65 0.16 255);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Editorial palette — dark (warm dark, NOT Multica's cool dark)
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.dark {
|
|
--background: oklch(0.18 0.008 50);
|
|
--foreground: oklch(0.95 0.012 85);
|
|
--muted: oklch(0.22 0.008 50);
|
|
--muted-foreground: oklch(0.65 0.012 75);
|
|
--card: oklch(0.21 0.008 50);
|
|
--card-foreground: oklch(0.95 0.012 85);
|
|
--popover: oklch(0.22 0.008 50);
|
|
--popover-foreground: oklch(0.95 0.012 85);
|
|
--primary: oklch(0.7 0.15 255); /* Multica brand — dark */
|
|
--primary-foreground: oklch(0.18 0.008 50);
|
|
--secondary: oklch(0.24 0.008 50);
|
|
--secondary-foreground: oklch(0.95 0.012 85);
|
|
--accent: oklch(0.3 0.05 255); /* brand soft wash — dark */
|
|
--accent-foreground: oklch(0.78 0.14 255); /* brand ink — dark */
|
|
--border: oklch(0.28 0.012 50);
|
|
--input: oklch(0.28 0.012 50);
|
|
--ring: oklch(0.7 0.15 255);
|
|
--sidebar: oklch(0.21 0.008 50);
|
|
--sidebar-foreground: oklch(0.95 0.012 85);
|
|
--sidebar-accent: oklch(0.26 0.01 50); /* warm neutral, hover/active fill — dark */
|
|
--sidebar-accent-foreground: oklch(0.95 0.012 85);
|
|
--sidebar-border: oklch(0.28 0.012 50);
|
|
|
|
--docs-rule: oklch(0.36 0.012 50);
|
|
--docs-faint: oklch(0.42 0.012 50);
|
|
--docs-code-bg: oklch(0.165 0.008 50);
|
|
--docs-code-border: oklch(0.26 0.012 50);
|
|
--docs-terminal-bg: oklch(0.155 0.012 50);
|
|
--docs-terminal-fg: oklch(0.92 0.012 80);
|
|
--docs-terminal-accent: oklch(0.78 0.14 255);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Fumadocs slot bridge
|
|
*
|
|
* Map fumadocs's --color-fd-* slots to our (now warm) Multica tokens.
|
|
* @theme inline keeps the var() reference live so the cascade resolves
|
|
* at runtime — same pattern tokens.css uses.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
@theme inline {
|
|
--color-fd-background: var(--background);
|
|
--color-fd-foreground: var(--foreground);
|
|
--color-fd-muted: var(--muted);
|
|
--color-fd-muted-foreground: var(--muted-foreground);
|
|
--color-fd-popover: var(--popover);
|
|
--color-fd-popover-foreground: var(--popover-foreground);
|
|
--color-fd-card: var(--card);
|
|
--color-fd-card-foreground: var(--card-foreground);
|
|
--color-fd-border: var(--border);
|
|
--color-fd-primary: var(--primary);
|
|
--color-fd-primary-foreground: var(--primary-foreground);
|
|
--color-fd-secondary: var(--secondary);
|
|
--color-fd-secondary-foreground: var(--secondary-foreground);
|
|
--color-fd-accent: var(--accent);
|
|
--color-fd-accent-foreground: var(--accent-foreground);
|
|
--color-fd-ring: var(--ring);
|
|
}
|
|
|
|
/* Fumadocs 16 moved these slots out of preset.css into its color themes
|
|
* (neutral.css etc.). We don't import a theme — its `.dark` block would
|
|
* override the bridge above — so declare the remaining slots with the
|
|
* Fumadocs defaults. */
|
|
@theme static {
|
|
--color-fd-overlay: hsla(0, 0%, 0%, 0.2);
|
|
--color-fd-info: oklch(62.3% 0.214 259.815);
|
|
--color-fd-warning: oklch(76.9% 0.188 70.08);
|
|
--color-fd-error: oklch(63.7% 0.237 25.331);
|
|
--color-fd-success: oklch(72.3% 0.219 149.579);
|
|
--color-fd-idea: oklch(70.5% 0.209 60.849);
|
|
--color-fd-diff-remove: rgba(200, 10, 100, 0.12);
|
|
--color-fd-diff-remove-symbol: rgb(230, 10, 100);
|
|
--color-fd-diff-add: rgba(14, 180, 100, 0.1);
|
|
--color-fd-diff-add-symbol: rgb(10, 200, 100);
|
|
}
|
|
|
|
/* Interactive demos: the pulse around the control a reader should use next. */
|
|
@keyframes demo-halo {
|
|
from {
|
|
box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent);
|
|
}
|
|
to {
|
|
box-shadow: 0 0 0 10px color-mix(in oklab, var(--brand) 0%, transparent);
|
|
}
|
|
}
|
|
|
|
.demo-halo {
|
|
animation: demo-halo 1.4s ease-out infinite;
|
|
}
|
|
|
|
/* The coach-mark arrow nudges toward the control it points at. */
|
|
@keyframes demo-nudge {
|
|
50% {
|
|
translate: var(--demo-nudge);
|
|
}
|
|
}
|
|
|
|
.demo-nudge-top,
|
|
.demo-nudge-bottom,
|
|
.demo-nudge-left,
|
|
.demo-nudge-right {
|
|
animation: demo-nudge 1s ease-in-out infinite;
|
|
}
|
|
|
|
.demo-nudge-top {
|
|
--demo-nudge: 0 3px;
|
|
}
|
|
|
|
.demo-nudge-bottom {
|
|
--demo-nudge: 0 -3px;
|
|
}
|
|
|
|
.demo-nudge-left {
|
|
--demo-nudge: 3px 0;
|
|
}
|
|
|
|
.demo-nudge-right {
|
|
--demo-nudge: -3px 0;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.demo-halo,
|
|
.demo-nudge-top,
|
|
.demo-nudge-bottom,
|
|
.demo-nudge-left,
|
|
.demo-nudge-right {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* Sidebar uses dedicated --sidebar-* tokens so it sits a hair off the main
|
|
* canvas. Fumadocs renders it as #nd-sidebar (desktop) and
|
|
* #nd-sidebar-mobile (mobile drawer); both IDs need the override. */
|
|
#nd-sidebar,
|
|
#nd-sidebar-mobile {
|
|
--color-fd-background: var(--sidebar);
|
|
--color-fd-foreground: var(--sidebar-foreground);
|
|
--color-fd-muted: var(--sidebar-accent);
|
|
--color-fd-muted-foreground: var(--sidebar-foreground);
|
|
--color-fd-accent: var(--sidebar-accent);
|
|
--color-fd-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-fd-border: var(--sidebar-border);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Editorial typography
|
|
*
|
|
* Body keeps Inter for legibility (especially CJK where serif Latin clashes
|
|
* with sans CJK). Headings switch to Source Serif 4 for the editorial
|
|
* signature. Italic is intentionally avoided — Chinese italic is a CSS
|
|
* synthetic slant against upright-designed glyphs and reads as broken.
|
|
* Emphasis is carried by serif/sans contrast, brand color, and weight.
|
|
*
|
|
* Sizing:
|
|
* - DocsHero h1 (welcome page only): 44px serif, brand-color em accent
|
|
* - prose h1 (guide / reference pages): 30px serif
|
|
* - prose h2: 26px serif (no italic)
|
|
* - prose h3: 13px sans uppercase label
|
|
* - body: 15.5px (kept from previous build — proven reading size for CN)
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
article:has(.prose),
|
|
.prose {
|
|
font-size: 0.96875rem; /* 15.5px */
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* DocsTitle h1 (Fumadocs hardcodes text-[1.75em] font-semibold — utility
|
|
* specificity 0,1,0 beats plain article > h1 0,0,2; !important wins). */
|
|
article > h1 {
|
|
font-family: var(--font-serif), ui-serif, serif !important;
|
|
font-size: 1.875rem !important; /* 30px guide-page heading */
|
|
font-weight: 400 !important;
|
|
letter-spacing: -0.018em;
|
|
line-height: 1.15;
|
|
margin-bottom: 0.5em;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Lead paragraph below DocsTitle */
|
|
article > p.text-lg {
|
|
font-family: var(--font-serif), ui-serif, serif;
|
|
font-size: 1.125rem; /* 18px serif lede */
|
|
line-height: 1.55;
|
|
margin-bottom: 2rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* Paragraph rhythm */
|
|
.prose :where(p):not(:where([class~="not-prose"] *)) {
|
|
margin-top: 0;
|
|
margin-bottom: 0.875rem;
|
|
color: oklch(from var(--foreground) calc(l + 0.06) c h);
|
|
}
|
|
.prose :where(p):not(:where([class~="not-prose"] *)):last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.prose :where(p) strong {
|
|
color: var(--foreground);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose :where(ul, ol) {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.prose h1 {
|
|
font-family: var(--font-serif), ui-serif, serif;
|
|
font-size: 1.875rem; /* 30px */
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
margin-bottom: 0.5em;
|
|
color: var(--foreground);
|
|
}
|
|
/* Italic is avoided sitewide (Chinese italic = synthetic slant, looks broken).
|
|
* Force any italicized element to non-italic in prose. Tailwind Typography
|
|
* defaults blockquote to italic; we also undo it here. Emphasis is carried
|
|
* by brand color + font-weight in headings, foreground+weight in body. */
|
|
.prose em,
|
|
.prose i,
|
|
.prose cite,
|
|
.prose blockquote,
|
|
.prose blockquote p {
|
|
font-style: normal;
|
|
}
|
|
.prose h1 em {
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
.prose p em,
|
|
.prose li em {
|
|
color: var(--foreground);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* The page article is a flex column (gap-4), so the prose body's first
|
|
element must not stack its own top margin on top of that gap. */
|
|
.prose > :first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.prose h2:not(.not-prose) {
|
|
font-family: var(--font-serif), ui-serif, serif;
|
|
font-size: 1.625rem; /* 26px */
|
|
font-weight: 400;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.3;
|
|
margin-top: 2em;
|
|
margin-bottom: 0.5em;
|
|
color: var(--foreground);
|
|
scroll-margin-top: 80px;
|
|
}
|
|
|
|
/* h3 = small uppercase sans label, ruled-bottom — v2 editorial signature */
|
|
.prose h3:not(.not-prose) {
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
font-size: 0.8125rem; /* 13px */
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted-foreground);
|
|
margin-top: 2.25em;
|
|
margin-bottom: 0.75em;
|
|
padding-bottom: 0.25em;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.prose h4:not(.not-prose) {
|
|
font-family: var(--font-serif), ui-serif, serif;
|
|
font-size: 1.0625rem; /* 17px */
|
|
font-weight: 500;
|
|
letter-spacing: -0.005em;
|
|
line-height: 1.4;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.375em;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Description paragraph (fumadocs adds text-lg + muted) */
|
|
.prose > p:first-of-type:has(+ *) {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Links — Vercel-style hairline underline, reveal brand on hover
|
|
*
|
|
* Markdown-heavy prose can put 4+ inline links in a single sentence; a
|
|
* permanent brand-color underline on every one turns the paragraph into
|
|
* highlighter spam. The trick isn't "no underline" — it's underlining
|
|
* in the hairline border color so the line exists but visually recedes.
|
|
* Hover swaps both text and underline to brand color (no thickness
|
|
* change) — the link "arrives" as a single color shift.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.prose
|
|
a:not([data-card]):not(.not-prose):not(
|
|
:where([class~="not-prose"] *)
|
|
) {
|
|
color: var(--foreground);
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--border);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
transition: text-decoration-color 150ms, color 150ms;
|
|
}
|
|
.prose
|
|
a:not([data-card]):not(.not-prose):not(
|
|
:where([class~="not-prose"] *)
|
|
):hover {
|
|
color: var(--primary);
|
|
text-decoration-color: var(--primary);
|
|
}
|
|
|
|
/* Callout already carries four visual signals (left brand bar, brand-wash
|
|
* bg, uppercase NOTE label, body). Another decoration over-loads it — so
|
|
* links inside a callout drop the underline entirely. Color shift on
|
|
* hover is the full affordance. */
|
|
.prose
|
|
div.shadow-md:has(> [role="none"])
|
|
a:not([data-card]):not(.not-prose):not(
|
|
:where([class~="not-prose"] *)
|
|
),
|
|
.prose
|
|
div.shadow-md:has(> [role="none"])
|
|
a:not([data-card]):not(.not-prose):not(
|
|
:where([class~="not-prose"] *)
|
|
):hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Inline code — warm beige chip, accent-color text */
|
|
.prose :not(pre) > code {
|
|
background: var(--docs-code-bg);
|
|
color: var(--accent-foreground);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
font-family: var(--font-mono), ui-monospace, monospace;
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
}
|
|
.prose :not(pre) > code::before,
|
|
.prose :not(pre) > code::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Lists */
|
|
.prose :where(ul, ol) > li {
|
|
margin-top: 0.375em;
|
|
margin-bottom: 0.375em;
|
|
padding-inline-start: 0.375em;
|
|
}
|
|
.prose :where(ul) > li::marker {
|
|
color: var(--docs-faint);
|
|
content: "— ";
|
|
font-family: var(--font-serif), serif;
|
|
}
|
|
.prose :where(ol) > li::marker {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* Blockquote — editorial accent rule, serif voice */
|
|
.prose blockquote {
|
|
font-family: var(--font-serif), ui-serif, serif;
|
|
font-weight: 400;
|
|
font-size: 1.0625rem;
|
|
line-height: 1.55;
|
|
color: var(--foreground);
|
|
border-inline-start-width: 2px;
|
|
border-inline-start-color: var(--primary);
|
|
padding-inline-start: 1.25em;
|
|
margin-block: 1.5em;
|
|
quotes: none;
|
|
}
|
|
.prose blockquote p::before,
|
|
.prose blockquote p::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Tables — hairline below thead only, no outer frame (Stripe / Linear
|
|
* docs convention). The heavier ink-color top rule v2 used on its API
|
|
* reference block is intentionally not applied here — that treatment is
|
|
* "this is a formal declaration"; regular guide tables want quiet. */
|
|
.prose table {
|
|
font-size: 0.9375em;
|
|
border-collapse: collapse;
|
|
margin-block: 1.5em;
|
|
}
|
|
.prose thead {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.prose thead th {
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted-foreground);
|
|
padding-block: 0.5rem 0.625rem;
|
|
text-align: start;
|
|
}
|
|
.prose tbody tr {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.prose tbody td {
|
|
padding-block: 0.875rem;
|
|
}
|
|
|
|
/* HR — heavier ruled separator */
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--docs-rule);
|
|
margin-block: 3em;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Callout — editorial 2px accent bar + soft accent wash
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.prose div.shadow-md:has(> [role="none"]) {
|
|
box-shadow: none !important;
|
|
border-radius: 0 4px 4px 0 !important;
|
|
background: var(--accent) !important;
|
|
border: none !important;
|
|
border-inline-start: 2px solid var(--primary) !important;
|
|
padding: 0.875rem 1.125rem !important;
|
|
gap: 0.625rem !important;
|
|
align-items: flex-start;
|
|
margin-block: 1.5rem;
|
|
}
|
|
|
|
.prose div.shadow-md:has(> [role="none"]) > [role="none"] {
|
|
display: none;
|
|
}
|
|
|
|
.prose div.shadow-md:has(> [role="none"]) > div:last-child > p {
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.prose div.shadow-md:has(> [role="none"]) > div:last-child > div {
|
|
color: var(--foreground) !important;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Cards — fallback editorial treatment for fumadocs's <Cards>/<Card>
|
|
* (NumberedCards is the showpiece; this keeps non-showpiece pages on tone)
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *) {
|
|
border-radius: 4px !important;
|
|
border: 1px solid var(--border) !important;
|
|
background: var(--card);
|
|
padding: 1.125rem !important;
|
|
transition: border-color 150ms, background-color 150ms !important;
|
|
}
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *):hover {
|
|
border-color: var(--primary) !important;
|
|
background: var(--card) !important;
|
|
}
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *) > div:first-child {
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
color: var(--accent-foreground) !important;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *) > div:first-child svg {
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *) h3 {
|
|
font-family: var(--font-serif), serif !important;
|
|
font-size: 1.125rem !important;
|
|
font-weight: 500 !important;
|
|
font-style: normal !important;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: 0.25rem !important;
|
|
margin-top: 0 !important;
|
|
text-transform: none !important;
|
|
border-bottom: none !important;
|
|
padding-bottom: 0 !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.prose [data-card]:not(.peer, :is(h1, h2, h3, h4, h5, h6) > *) p {
|
|
color: var(--muted-foreground) !important;
|
|
line-height: 1.6;
|
|
font-size: 0.9375rem !important;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Sidebar — editorial chrome
|
|
*
|
|
* Section headers: small uppercase sans label, ruled bottom border.
|
|
* Items: muted-foreground at rest, foreground on hover.
|
|
* Active: solid background fill (mirrors product app's app-sidebar.tsx —
|
|
* data-active:bg-sidebar-accent / data-active:text-sidebar-accent-foreground).
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
#nd-sidebar p,
|
|
#nd-sidebar-mobile p {
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
font-size: 0.6875rem; /* 11px */
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted-foreground);
|
|
height: auto;
|
|
display: block;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.375rem;
|
|
padding-block: 0 0.375rem;
|
|
padding-inline-start: 0.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
#nd-sidebar p:first-child,
|
|
#nd-sidebar-mobile p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#nd-sidebar a[data-active],
|
|
#nd-sidebar-mobile a[data-active] {
|
|
height: auto;
|
|
padding: 0.375rem 0.625rem;
|
|
font-size: 0.84375rem; /* 13.5px */
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.005em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* The padding shorthand above flattens the folder tree indent
|
|
(ps-(--sidebar-item-offset)); restore it for links that carry the
|
|
offset utility so children clear the vertical guide line. */
|
|
#nd-sidebar a[data-active][class*="ps-("],
|
|
#nd-sidebar-mobile a[data-active][class*="ps-("] {
|
|
padding-inline-start: var(--sidebar-item-offset, 0.625rem);
|
|
}
|
|
|
|
#nd-sidebar a[data-active="false"],
|
|
#nd-sidebar-mobile a[data-active="false"] {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
#nd-sidebar a[data-active="false"]:hover,
|
|
#nd-sidebar-mobile a[data-active="false"]:hover {
|
|
background: color-mix(in oklab, var(--sidebar-accent) 70%, transparent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Active — solid background fill, no left mark (matches product app) */
|
|
#nd-sidebar a[data-active="true"],
|
|
#nd-sidebar-mobile a[data-active="true"] {
|
|
background: var(--sidebar-accent) !important;
|
|
color: var(--sidebar-accent-foreground) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Sidebar footer — drop the hard top rule. The scroll viewport already
|
|
* fades content into the footer, so a 1px line on top reads as a
|
|
* double-weight edge. Fumadocs hardcodes `border-t p-4 pt-2` on its
|
|
* SidebarFooter div; target that exact class trio inside the sidebar IDs
|
|
* so we don't touch any other border-t in the app. */
|
|
#nd-sidebar .border-t.p-4.pt-2,
|
|
#nd-sidebar-mobile .border-t.p-4.pt-2 {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Top nav — quiet, ruled bottom
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
#nd-nav,
|
|
#nd-subnav {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--card);
|
|
}
|
|
|
|
#nd-nav a,
|
|
#nd-subnav a {
|
|
font-size: 0.875rem;
|
|
color: var(--muted-foreground);
|
|
transition: color 150ms;
|
|
}
|
|
|
|
#nd-nav a:hover,
|
|
#nd-subnav a:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* TOC (right rail) — quiet sans, brand-color when active
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
#nd-toc a {
|
|
font-size: 0.84375rem;
|
|
color: var(--muted-foreground);
|
|
padding-block: 0.3125rem;
|
|
letter-spacing: -0.005em;
|
|
transition: color 150ms;
|
|
}
|
|
|
|
#nd-toc a:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
#nd-toc a[data-active="true"] {
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* TOC heading (Fumadocs renders "On this page" as an h3 / first p) */
|
|
#nd-toc h3,
|
|
#nd-toc > p:first-child {
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 0.625rem;
|
|
padding-bottom: 0.375rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Code blocks — warm beige (light) / warm dark (dark), NOT pinned
|
|
*
|
|
* Removes the previous "always-dark hero black" treatment. Code surface
|
|
* now follows page theme so it harmonizes with the warm-paper background
|
|
* in light mode and warm-dark in dark mode. Terminal-style blocks
|
|
* (handled by the custom <Terminal> component, not here) stay pinned to
|
|
* the deeper warm dark for the "shell session" feel.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
article figure.shiki {
|
|
background: var(--docs-code-bg) !important;
|
|
border: 1px solid var(--docs-code-border) !important;
|
|
border-radius: 4px !important;
|
|
box-shadow: none !important;
|
|
margin-block: 1.25rem !important;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
article figure.shiki pre {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
color: inherit !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
article figure.shiki > div[class*="overflow-auto"] {
|
|
font-size: 0.84375rem !important;
|
|
line-height: 1.7;
|
|
padding: 1rem 1.125rem !important;
|
|
}
|
|
|
|
/* Header bar (filename via ```lang filename="x.ts") */
|
|
article figure.shiki > div[class*="border-b"] {
|
|
border-bottom-color: var(--docs-code-border) !important;
|
|
background: var(--muted) !important;
|
|
color: var(--muted-foreground) !important;
|
|
font-family: var(--font-mono), ui-monospace, monospace;
|
|
font-size: 0.75rem;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
/* Shiki tokens — pick the palette that matches page theme.
|
|
* Default (light): use --shiki-light. Override under .dark to --shiki-dark.
|
|
* Specificity: article figure.shiki code span (0,1,4) beats fumadocs's
|
|
* default, so no !important needed for the light path. */
|
|
article figure.shiki code span {
|
|
color: var(--shiki-light);
|
|
}
|
|
|
|
.dark article figure.shiki code span {
|
|
color: var(--shiki-dark);
|
|
}
|
|
|
|
/* Copy button on code blocks */
|
|
article figure.shiki button {
|
|
color: var(--muted-foreground) !important;
|
|
background: transparent !important;
|
|
}
|
|
article figure.shiki button:hover {
|
|
color: var(--foreground) !important;
|
|
background: var(--muted) !important;
|
|
}
|
|
|
|
/* Accordion ids exist so links can open an entry; the "copy link" button
|
|
* Fumadocs adds next to each title only adds noise, so it is hidden. */
|
|
[data-accordion-value] > button[aria-live] {
|
|
display: none;
|
|
}
|
|
|
|
/* A Steps item is at least as tall as its number badge plus a gap, so
|
|
* consecutive one-line steps never stack their badges. */
|
|
.fd-step {
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
/* Fumadocs Tabs: a hairline closes the tab bar and the active underline sits
|
|
* on it, so the indicator never meets the panel's rounded corner. The hairline
|
|
* is an inset shadow because the tab bar scrolls horizontally: anything that
|
|
* reaches past its edge adds a scrollbar. The panel's own radius is dropped;
|
|
* the outer frame already clips the corners. A lone code block keeps its inset
|
|
* and border instead of bleeding to the edges, so every tab group reads the
|
|
* same. */
|
|
[dir][data-orientation="horizontal"]:has(> [role="tablist"]) {
|
|
> [role="tablist"] {
|
|
box-shadow: inset 0 -1px 0 var(--border);
|
|
}
|
|
> [role="tablist"] > [role="tab"] {
|
|
border-bottom-width: 2px;
|
|
}
|
|
> [role="tabpanel"] {
|
|
border-radius: 0;
|
|
}
|
|
> [role="tabpanel"] > figure:only-child {
|
|
margin: 0;
|
|
border-style: solid;
|
|
}
|
|
}
|