4758e4b5de
Adds MarkdownEditor (react-markdown + remark-gfm, no raw HTML — authored/retrieved content is data, not markup) with Edit | Preview tabs, wired into the AGENTS.md and SKILL.md editors, the agent persona, and the review artifact. Adds a read-only "View" on every skill and agent-profile card — including builtins, which previously had no way to be inspected at all — rendering the full SKILL.md / AGENTS.md (frontmatter + body + actions/golden tests). Collapses a same-version builtin that an org has forked so its own copy shadows it, keeping the version picker unambiguous and the item clearly editable/versionable. Also lands the agent-face wiring on the seat configurator (a live xl preview with a state cycler) and the review inbox header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
115 lines
2.5 KiB
CSS
115 lines
2.5 KiB
CSS
/*
|
|
* Prose styling for rendered markdown previews. Scoped to .md-prose so it never leaks into the app
|
|
* chrome. Uses the design tokens so it adapts to light/dark like everything else.
|
|
*/
|
|
.md-prose {
|
|
font-size: 0.875rem;
|
|
line-height: 1.65;
|
|
color: var(--foreground);
|
|
word-wrap: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.md-prose > :first-child { margin-top: 0; }
|
|
.md-prose > :last-child { margin-bottom: 0; }
|
|
|
|
.md-prose h1,
|
|
.md-prose h2,
|
|
.md-prose h3,
|
|
.md-prose h4 {
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin: 1.2em 0 0.5em;
|
|
}
|
|
.md-prose h1 { font-size: 1.4em; }
|
|
.md-prose h2 { font-size: 1.2em; }
|
|
.md-prose h3 { font-size: 1.05em; }
|
|
.md-prose h4 { font-size: 1em; }
|
|
.md-prose h1,
|
|
.md-prose h2 {
|
|
padding-bottom: 0.25em;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.md-prose p,
|
|
.md-prose ul,
|
|
.md-prose ol,
|
|
.md-prose blockquote,
|
|
.md-prose table,
|
|
.md-prose pre { margin: 0 0 0.75em; }
|
|
|
|
.md-prose ul,
|
|
.md-prose ol { padding-left: 1.4em; }
|
|
.md-prose li { margin: 0.2em 0; }
|
|
.md-prose li > ul,
|
|
.md-prose li > ol { margin: 0.2em 0; }
|
|
|
|
.md-prose a {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.md-prose code {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 0.85em;
|
|
background: var(--muted);
|
|
padding: 0.12em 0.35em;
|
|
border-radius: 4px;
|
|
}
|
|
.md-prose pre {
|
|
background: var(--muted);
|
|
padding: 0.8em 1em;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
.md-prose pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.md-prose blockquote {
|
|
border-left: 3px solid var(--border);
|
|
padding-left: 0.9em;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.md-prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
.md-prose th,
|
|
.md-prose td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.4em 0.6em;
|
|
text-align: left;
|
|
}
|
|
.md-prose th { background: var(--muted); font-weight: 600; }
|
|
|
|
.md-prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1.2em 0;
|
|
}
|
|
|
|
.md-prose img { max-width: 100%; border-radius: 6px; }
|
|
|
|
.md-prose input[type='checkbox'] { margin-right: 0.4em; }
|
|
|
|
/* The frontmatter block (YAML) shown above the rendered body for .md-file editors. */
|
|
.md-frontmatter {
|
|
margin: 0 0 1em;
|
|
padding: 0.6em 0.85em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--muted);
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 0.78rem;
|
|
line-height: 1.5;
|
|
color: var(--muted-foreground);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|