Mermaid-Preview-Nova/Assets/preview.css

/*
 * preview.css — styling for the generated page.
 *
 * Three themes, resolved entirely in CSS so the page never flashes the wrong
 * one while the scripts load: "auto" follows the system appearance the way
 * Nova's own Markdown preview does, "light" and "dark" are fixed.
 */

:root {
    --bg: #ffffff;
    --fg: #1f2328;
    --fg-muted: #59636e;
    --border: #d1d9e0;
    --border-subtle: #e4e8ec;
    --link: #0969da;
    --code-bg: #f3f5f7;
    --code-fg: #1f2328;
    --quote-border: #d1d9e0;
    --table-stripe: #f8fafc;
    --mark: #fff8c5;
    --diagram-bg: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --bg: #1c1c1e;
        --fg: #e6edf3;
        --fg-muted: #9198a1;
        --border: #3d444d;
        --border-subtle: #2c3138;
        --link: #67aaff;
        --code-bg: #26262a;
        --code-fg: #e6edf3;
        --quote-border: #3d444d;
        --table-stripe: #222226;
        --mark: #4a3d00;
        --diagram-bg: #1c1c1e;
    }
}

:root[data-theme="dark"] {
    --bg: #1c1c1e;
    --fg: #e6edf3;
    --fg-muted: #9198a1;
    --border: #3d444d;
    --border-subtle: #2c3138;
    --link: #67aaff;
    --code-bg: #26262a;
    --code-fg: #e6edf3;
    --quote-border: #3d444d;
    --table-stripe: #222226;
    --mark: #4a3d00;
    --diagram-bg: #1c1c1e;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 2.5rem 1.75rem 6rem;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.markdown-body {
    max-width: var(--content-width, 860px);
    margin: 0 auto;
}

.markdown-body[aria-busy="true"] {
    opacity: 0;
}

.markdown-body > *:first-child {
    margin-top: 0;
}

/* -- text ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 2rem 0 1rem;
    line-height: 1.25;
    font-weight: 600;
}

h1 { font-size: 2rem; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
h2 { font-size: 1.5rem; padding-bottom: .3em; border-bottom: 1px solid var(--border-subtle); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: .9rem; }
h6 { font-size: .9rem; color: var(--fg-muted); }

p, ul, ol, blockquote, table, pre, figure {
    margin: 0 0 1rem;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* The anchor link that appears beside a heading on hover. */
.heading-anchor {
    margin-left: .4rem;
    color: var(--fg-muted);
    opacity: 0;
    font-weight: 400;
    text-decoration: none;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
h5:hover .heading-anchor,
h6:hover .heading-anchor {
    opacity: 1;
}

strong { font-weight: 600; }
mark { background: var(--mark); color: inherit; }

hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: var(--border);
}

blockquote {
    padding: 0 1rem;
    border-left: .25rem solid var(--quote-border);
    color: var(--fg-muted);
}

blockquote > :last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.75rem; }
li + li { margin-top: .25rem; }
li > ul, li > ol { margin: .25rem 0; }

li.task-item {
    list-style: none;
    margin-left: -1.35rem;
}

li.task-item input {
    margin-right: .45rem;
    vertical-align: middle;
}

/* -- code ---------------------------------------------------------------- */

code, kbd, pre, samp {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
    font-size: .875em;
}

code {
    padding: .2em .4em;
    border-radius: 6px;
    background: var(--code-bg);
    color: var(--code-fg);
}

pre {
    padding: 1rem;
    overflow-x: auto;
    border-radius: 8px;
    background: var(--code-bg);
    color: var(--code-fg);
    line-height: 1.5;
}

pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* -- tables and media ---------------------------------------------------- */

.table-scroll {
    margin: 0 0 1rem;
    overflow-x: auto;
}

table {
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    padding: .5rem .85rem;
    border: 1px solid var(--border);
    text-align: left;
}

th { font-weight: 600; }
tbody tr:nth-child(2n) { background: var(--table-stripe); }

img {
    max-width: 100%;
    height: auto;
}

/* -- diagrams ------------------------------------------------------------ */

.mermaid-block {
    margin: 0 0 1.25rem;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--diagram-bg);
    text-align: center;
}

.mermaid-block svg {
    max-width: 100%;
    height: auto;
}

.mermaid-block.is-pending {
    min-height: 4rem;
    color: var(--fg-muted);
    text-align: left;
}

.mermaid-block.is-error {
    border-color: #cf222e;
    text-align: left;
}

.mermaid-block.is-error .mermaid-error-message {
    margin: 0 0 .75rem;
    color: #cf222e;
    font-weight: 600;
}

.mermaid-block.is-error pre {
    margin: 0;
}

/* -- failure ------------------------------------------------------------- */

#error {
    max-width: var(--content-width, 860px);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border: 1px solid #cf222e;
    border-radius: 8px;
    color: #cf222e;
}

#error pre {
    color: var(--fg);
}