From 92bdc6b33bc610068b4ce418528b5120a00c45e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Tue, 9 Feb 2021 17:26:00 +0000
Subject: [PATCH] Fix Mermaid diagram styles

---
 .../src/less2/include/colortheme-dark.less    |  4 +--
 .../src/less2/include/colortheme.less         |  4 +--
 .../src/less2/include/markdown.less           | 35 +++++++++++--------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index 5a85e4374..14cb35d1c 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -207,8 +207,8 @@
 // Rendered Markdown
 @cp_markdown-bg: @cryptpad_color_grey_900;
 @cp_markdown-border: @cryptpad_color_grey_700;
-@cp_markdown-contrast-fg: white; // XXX
-@cp_markdown-contrast-bg: @cryptpad_color_grey; // XXX
+@cp_markdown-block-fg: @cryptpad_text_col;
+@cp_markdown-block-bg: @cryptpad_color_grey_800;
 
 // Avatar
 @cp_avatar-bg: @cryptpad_color_grey_700;
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 249883531..048363874 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -206,8 +206,8 @@
 // Rendered Markdown
 @cp_markdown-bg: @cryptpad_color_lighter_grey;
 @cp_markdown-border: @cryptpad_color_grey;
-@cp_markdown-contrast-fg: @cryptpad_text_col; // XXX
-@cp_markdown-contrast-bg: transparent; // XXX
+@cp_markdown-block-fg: @cryptpad_text_col; // XXX
+@cp_markdown-block-bg: @cryptpad_color_grey_200; // XXX
 
 // Avatar
 @cp_avatar-bg: @cryptpad_color_grey;
diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less
index 1bc271122..871e298c9 100644
--- a/customize.dist/src/less2/include/markdown.less
+++ b/customize.dist/src/less2/include/markdown.less
@@ -151,27 +151,34 @@
 
     // XXX apply the styles below in modals-ui-elements.less
 
-    pre.mermaid[mermaid-source^="pie"] { // XXX
+    pre.mermaid[mermaid-source^="pie"] {
         g.legend text, text.pieTitleText {
-            fill: @cp_markdown-contrast-fg;
+            fill: @cp_markdown-block-fg;
         }
     }
 
-    pre.mermaid[mermaid-source^="gantt"] { // XXX
-        background-color: @cp_markdown-contrast-bg;
-        background-color: #444;
+    pre.mermaid[mermaid-source^="gantt"] {
         text.titleText {
-            fill: @cp_markdown-contrast-fg;
+            fill: @cp_markdown-block-fg;
+        }
+        g.tick {
+            text {
+                fill: @cp_markdown-block-fg;
+            }
+            line {
+                stroke: fade(@cp_markdown-block-fg, 50%);
+            }
         }
     }
 
-    /* make sure markmap text shows up in dark mode */
-    pre.markmap svg { // XXX
-       color: @cp_markdown-contrast-fg;
+    pre.markmap svg {
+       color: @cp_markdown-block-fg;
     }
 
-    pre.mathjax { // XXX
-        background-color: @cp_markdown-contrast-bg;
+    pre.mathjax {
+        padding: 5px;
+        color: @cryptpad_text_col;
+        background-color: @cp_markdown-block-bg;
     }
 }
 
@@ -179,13 +186,13 @@
     pre > code {
         display: block;
         position: relative;
-        border: 1px solid @cp_markdown-border;
         width: 90%;
         margin: auto;
-        padding-left: .25vw;
+        padding: 5px;
         overflow-x: auto;
         overflow-y: hidden;
-        background-color: @cp_markdown-contrast-bg; // XXX
+        color: @cp_markdown-block-fg;
+        background-color: @cp_markdown-block-bg; // XXX
     }
 }