From 0a9868606c0d59e468546bb01e9a37e0328a0960 Mon Sep 17 00:00:00 2001 From: Willem Kokke Date: Wed, 5 Feb 2025 10:44:26 +0000 Subject: [PATCH] Fix embedded mermaid css to fix class diagram arrow heads Originally used id based selecters, which doesn't work as the ids are made unique. Replacing them with class based selectors fixes this. --- .../javascripts/components/content/mermaid/index.css | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/templates/assets/javascripts/components/content/mermaid/index.css b/src/templates/assets/javascripts/components/content/mermaid/index.css index 6dbab33a2e1..17c7659387c 100644 --- a/src/templates/assets/javascripts/components/content/mermaid/index.css +++ b/src/templates/assets/javascripts/components/content/mermaid/index.css @@ -171,19 +171,15 @@ g.classGroup text { } /* Class extension, composition and dependency marker */ -defs #classDiagram-extensionStart, -defs #classDiagram-extensionEnd, -defs #classDiagram-compositionStart, -defs #classDiagram-compositionEnd, -defs #classDiagram-dependencyStart, -defs #classDiagram-dependencyEnd { +defs marker.marker.extension.class path, +defs marker.marker.composition.class path , +defs marker.marker.dependency.class path { fill: var(--md-mermaid-edge-color) !important; stroke: var(--md-mermaid-edge-color) !important; } /* Class aggregation marker */ -defs #classDiagram-aggregationStart, -defs #classDiagram-aggregationEnd { +defs marker.marker.aggregation.class path { fill: var(--md-mermaid-label-bg-color) !important; stroke: var(--md-mermaid-edge-color) !important; }