228 lines
7.3 KiB
CSS
228 lines
7.3 KiB
CSS
/* ──────────────────────────────────────────────────────────────
|
||
Mermaid — Site CSS
|
||
- Mindmap: your custom palette (section-*)
|
||
- Flowchart: blue theme with white text
|
||
- Works in light & dark (via CSS vars)
|
||
- Responsive width + centering
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
/* ===== Brand palette (edit to taste) ===== */
|
||
:root {
|
||
/* === Mindmap Blue–Teal Theme === */
|
||
--mm-root-fill: #1e3a8a;
|
||
--mm-sec0-fill: #1e6091;
|
||
--mm-sec1-fill: #168aad;
|
||
--mm-sec2-fill: #34a0a4;
|
||
--mm-sec3-fill: #99d98c;
|
||
|
||
|
||
|
||
/* uniform thicker grey stroke for all nodes */
|
||
--mm-root-stroke: #7a7a7a;
|
||
--mm-sec0-stroke: #7a7a7a;
|
||
--mm-sec1-stroke: #7a7a7a;
|
||
--mm-sec2-stroke: #7a7a7a;
|
||
--mm-sec3-stroke: #7a7a7a;
|
||
|
||
/* optional text + fallback colors */
|
||
--mm-fallback-fill: #f8fafc;
|
||
--mm-fallback-stroke:#7a7a7a;
|
||
--mm-fallback-text: #0f172a;
|
||
|
||
/* edge color (grey-green neutral to fit palette) */
|
||
--mm-edge: #7a7a7a;
|
||
}
|
||
|
||
|
||
|
||
/* ===== Shared text overrides (foreignObject + tspans) ===== */
|
||
.mermaid svg[id^="mermaid-"] {
|
||
|
||
font-size: 110% !important; /* small global bump */
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] text,
|
||
.mermaid svg[id^="mermaid-"] tspan {
|
||
fill: #ffffff !important; /* default white text */
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] foreignObject,
|
||
.mermaid svg[id^="mermaid-"] foreignObject * {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* ===== Mindmap palette (section-* classes) ===== */
|
||
/* Root node */
|
||
.mermaid svg[id^="mermaid-"] .section-root rect,
|
||
.mermaid svg[id^="mermaid-"] .section-root path,
|
||
.mermaid svg[id^="mermaid-"] .section-root circle,
|
||
.mermaid svg[id^="mermaid-"] .section-root polygon {
|
||
fill: var(--mm-root-fill) !important;
|
||
stroke: var(--mm-root-stroke) !important;
|
||
stroke-width: 4px !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .section-root text,
|
||
.mermaid svg[id^="mermaid-"] .section-root tspan {
|
||
fill: #ffffff !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
/* Depth sections */
|
||
.mermaid svg[id^="mermaid-"] .section-0 rect,
|
||
.mermaid svg[id^="mermaid-"] .section-0 path,
|
||
.mermaid svg[id^="mermaid-"] .section-0 circle,
|
||
.mermaid svg[id^="mermaid-"] .section-0 polygon {
|
||
fill: var(--mm-sec0-fill) !important;
|
||
stroke: var(--mm-sec0-stroke) !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .section-0 text,
|
||
.mermaid svg[id^="mermaid-"] .section-0 tspan { fill: #ffffff !important; }
|
||
|
||
.mermaid svg[id^="mermaid-"] .section-1 rect,
|
||
.mermaid svg[id^="mermaid-"] .section-1 path,
|
||
.mermaid svg[id^="mermaid-"] .section-1 circle,
|
||
.mermaid svg[id^="mermaid-"] .section-1 polygon {
|
||
fill: var(--mm-sec1-fill) !important;
|
||
stroke: var(--mm-sec1-stroke) !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .section-1 text,
|
||
.mermaid svg[id^="mermaid-"] .section-1 tspan { fill: #ffffff !important; }
|
||
|
||
.mermaid svg[id^="mermaid-"] .section-2 rect,
|
||
.mermaid svg[id^="mermaid-"] .section-2 path,
|
||
.mermaid svg[id^="mermaid-"] .section-2 circle,
|
||
.mermaid svg[id^="mermaid-"] .section-2 polygon {
|
||
fill: var(--mm-sec2-fill) !important;
|
||
stroke: var(--mm-sec2-stroke) !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .section-2 text,
|
||
.mermaid svg[id^="mermaid-"] .section-2 tspan { fill: #ffffff !important; }
|
||
|
||
.mermaid svg[id^="mermaid-"] .section-3 rect,
|
||
.mermaid svg[id^="mermaid-"] .section-3 path,
|
||
.mermaid svg[id^="mermaid-"] .section-3 circle,
|
||
.mermaid svg[id^="mermaid-"] .section-3 polygon {
|
||
fill: var(--mm-sec3-fill) !important;
|
||
stroke: var(--mm-sec3-stroke) !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .section-3 text,
|
||
.mermaid svg[id^="mermaid-"] .section-3 tspan { fill: #ffffff !important; }
|
||
|
||
/* Fallback for other section-* */
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] rect,
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] path,
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] circle,
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] polygon {
|
||
fill: var(--mm-fallback-fill) !important;
|
||
stroke: var(--mm-fallback-stroke) !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] text,
|
||
.mermaid svg[id^="mermaid-"] [class^="section-"] tspan {
|
||
fill: var(--mm-fallback-text) !important;
|
||
}
|
||
|
||
/* Mindmap branches/edges */
|
||
.mermaid svg[id^="mermaid-"] .edge,
|
||
.mermaid svg[id^="mermaid-"] .mindmap-edges path,
|
||
.mermaid svg[id^="mermaid-"] .mindmap-edges line,
|
||
.mermaid svg[id^="mermaid-"] [class^="section-edge-"] {
|
||
stroke: var(--mm-edge) !important;
|
||
stroke-width: 2px !important;
|
||
fill: none !important;
|
||
}
|
||
|
||
/* Optional: tiny underline lines Mermaid adds in some node styles */
|
||
.mermaid svg[id^="mermaid-"] .node-line-0,
|
||
.mermaid svg[id^="mermaid-"] .node-line-1,
|
||
.mermaid svg[id^="mermaid-"] .node-line-2 {
|
||
stroke: rgba(0,0,0,0.25) !important;
|
||
}
|
||
|
||
|
||
:root {
|
||
--mm-node-blue: #1570ef; /* inner node fill (light) */
|
||
--mm-surface: rgba(0,0,0,0.06); /* cluster/edge-label pill bg on light */
|
||
--mm-edge: color-mix(in srgb, currentColor 70%, transparent);
|
||
}
|
||
html.dark {
|
||
--mm-node-blue: #1363d1; /* inner node fill (dark) */
|
||
--mm-surface: rgba(255,255,255,0.08); /* cluster/edge-label pill bg on dark */
|
||
--mm-edge: color-mix(in srgb, currentColor 60%, transparent);
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .label text,
|
||
.mermaid svg[id^="mermaid-"] text,
|
||
.mermaid svg[id^="mermaid-"] tspan,
|
||
.mermaid svg[id^="mermaid-"] foreignObject,
|
||
.mermaid svg[id^="mermaid-"] foreignObject * {
|
||
fill: currentColor !important;
|
||
color: currentColor !important;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .node rect,
|
||
.mermaid svg[id^="mermaid-"] .node circle,
|
||
.mermaid svg[id^="mermaid-"] .node ellipse,
|
||
.mermaid svg[id^="mermaid-"] .node polygon,
|
||
.mermaid svg[id^="mermaid-"] .node path {
|
||
fill: var(--mm-node-blue) !important;
|
||
stroke: none !important;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .node .label text,
|
||
.mermaid svg[id^="mermaid-"] .node .label tspan,
|
||
.mermaid svg[id^="mermaid-"] .node foreignObject,
|
||
.mermaid svg[id^="mermaid-"] .node foreignObject * {
|
||
fill: #ffffff !important;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .cluster rect {
|
||
fill: var(--mm-surface) !important;
|
||
stroke: none !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .cluster text,
|
||
.mermaid svg[id^="mermaid-"] .cluster span {
|
||
fill: currentColor !important;
|
||
color: currentColor !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .edgePath .path,
|
||
.mermaid svg[id^="mermaid-"] .flowchart-link {
|
||
stroke: var(--mm-edge) !important;
|
||
stroke-width: 2px !important;
|
||
fill: none !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .marker,
|
||
.mermaid svg[id^="mermaid-"] .arrowheadPath {
|
||
fill: var(--mm-edge) !important;
|
||
stroke: var(--mm-edge) !important;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] .edgeLabel rect {
|
||
fill: var(--mm-surface) !important;
|
||
stroke: none !important;
|
||
opacity: 1 !important;
|
||
}
|
||
.mermaid svg[id^="mermaid-"] .edgeLabel span,
|
||
.mermaid svg[id^="mermaid-"] .edgeLabel text {
|
||
fill: currentColor !important;
|
||
color: currentColor !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.mermaid svg[id^="mermaid-"] rect.text { fill: none !important; }
|
||
|
||
/* ===== Layout: responsive width + centering in docs ===== */
|
||
.vp-doc .mermaid > svg {
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
display: block;
|
||
}
|
||
.vp-doc .mermaid {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|