Improved CSS in night-mode

A general invert-filter is applied to all pre elements in night mode. As diagrams are embedded inside pre tags, they're inverted as well. For sequence-diagrams and flow-charts this looks well, if we wouldn't additionally set the stroke and text color to white in night-mode. These additional white rules invert the already inverted diagram again and make it not good visible. The graphviz and abc embeddings aren't really optimized to be inverted, therefore they're now excluded from invertion and stay in day mode.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

1 files changed, 8 insertions, 19 deletions

diff --git a/public/css/markdown.css b/public/css/markdown.css
index 23ed6bab..8162fd5e 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -74,9 +74,10 @@
 }
 
 .night .markdown-body .gist table tr:nth-child(2n){
-
     background-color: #ddd;
-
+}
+.night .markdown-body .gist table tr:nth-child(2n+1) {
+    background-color: #e3e3e3;
 }
 
 .markdown-body code[data-gist-id] {
@@ -133,8 +134,8 @@
     white-space: inherit;
 }
 
-.night .markdown-body pre.graphviz .graph > polygon{
-    fill: #333;
+.night .markdown-body pre.graphviz {
+    filter: none;
 }
 
 .night .markdown-body pre.mermaid .titleText,
@@ -160,27 +161,15 @@
     height: 100%;
 }
 
-.night .markdown-body .abc path{
-    fill: #eee;
-}
-
-.night .markdown-body .abc path.note_selected{
-    fill: ##4DD0E1;
-}
-
-.night tspan{
-    fill: #fefefe;
+.night .markdown-body .abc {
+    background-color: #fff;
+    filter: none;
 }
 
 .night pre rect{
     fill: transparent;
 }
 
-.night pre.flow-chart rect,
-.night pre.flow-chart path{
-    stroke: white;
-}
-
 .markdown-body pre > code.wrap {
     white-space: pre-wrap;       /* Since CSS 2.1 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */