First complete version

Author: andredelft

tailwind-dark.css

@@ -32,6 +32,7 @@
   --blur-text-color: var(--blur-text-color-inverted);
   --item-hover-bg-color: var(--item-hover-bg-color-inverted);
   --typora-source-body: var(--typora-source-body-inverted);
+  --mermaid-theme: var(--mermaid-theme-inverted);
 
   --code-neutral: var(--code-neutral-inverted);
   --code-cursor: var(--code-cursor-inverted);
@@ -45,6 +46,7 @@
   --code-citation: var(--code-citation-inverted);
 
   --footnote-bg: var(--footnote-bg-inverted);
+  --button-bg: var(--button-bg-inverted);
 
   --md-grid-header: var(--md-grid-header-inverted);
   --md-grid-header-ext: var(--md-grid-header-ext-inverted);
@@ -53,11 +55,3 @@
   --md-grid-active: var(--md-grid-active-inverted);
   --md-grid-border-color: var(--md-grid-border-color-inverted);
 }
-
-titlebar {
-  color: #fff;
-}
-
-.CodeMirror.cm-s-inner {
-  background: transparent;
-}

tailwind.css

@@ -93,10 +93,12 @@
   --meta-content-color: var(--theme-500);
   --typora-source-body: var(--theme-800);
   --heading-char-color: var(--md-char-color);
+  --mermaid-theme: neutral;
 
   --md-char-color-inverted: var(--theme-500);
   --meta-content-color-inverted: var(--theme-400);
   --typora-source-body-inverted: var(--theme-300);
+  --mermaid-theme-inverted: dark;
 
   /* Sidebar */
   --side-bar-bg-color: var(--tw-prose-bg);
@@ -128,8 +130,10 @@
   /* Custom */
   --footnote: var(--theme-800);
   --footnote-bg: var(--theme-200);
+  --button-bg: var(--theme-200);
 
   --footnote-bg-inverted: var(--theme-400);
+  --button-bg-inverted: var(--theme-600);
 
   --md-grid-header: var(--theme-100);
   --md-grid-header-ext: var(--theme-400);
@@ -572,8 +576,30 @@ tbody td:last-child {
   padding-right: 0;
 }
 
-/* tooltip above tables */
-.md-table-edit {
+.md-grid-board tr[row="1"] {
+  background-color: var(--md-grid-header);
+}
+
+.md-grid-board a:hover,
+.md-grid-board a.md-active {
+  background: var(--md-grid-active);
+}
+
+.md-grid-board tr[row="1"] a:hover,
+.md-grid-board tr[row="1"] a.md-active {
+  background: var(--md-grid-header-active);
+}
+
+.md-grid-board .md-grid-ext {
+  background: var(--md-grid-ext);
+}
+
+.md-grid-board tr[row="1"] .md-grid-ext {
+  background: var(--md-grid-header-ext);
+}
+
+.md-grid-board a {
+  border-color: var(--md-grid-border-color) !important;
 }
 
 /* lists */
@@ -630,8 +656,8 @@ ol > li p {
   margin-bottom: 0.8em;
 }
 
-#write > ul > li > not(input):first-child,
-#write > ol > li > not(input):first-child,
+#write > ul > li > :not(input):first-child,
+#write > ol > li > :not(input):first-child,
 #write > ul > li > input + *,
 #write > ol > li > input + * {
   margin-top: 1.2em;
@@ -697,14 +723,16 @@ p {
 
 /* diagram panel */
 .md-diagram-panel {
+  color: var(--tw-prose-body);
 }
 
-/* diagram panel in preview */
-#write .md-focus .md-diagram-panel {
+.enable-diagrams .md-diagram .code-tooltip {
+  bottom: -1.9em;
+  right: 0;
 }
 
-/* reference link definition */
-.md-def-link {
+.md-fences-adv-panel {
+  margin-top: 1.3em;
 }
 
 /* footnote definition */
@@ -713,9 +741,8 @@ sup.md-footnote {
   background-color: var(--footnote-bg);
 }
 
-.md-def-footnote {
-  padding-top: 1.5em;
-  font-size: 0.87em;
+.footnotes {
+  font-size: 0.85em;
 }
 
 .md-reverse-footnote-area a {
@@ -761,6 +788,10 @@ g[data-mml-node="merror"] > g {
   color: var(--tw-prose-pre-code);
 }
 
+.code-tooltip .md-mathjax-preview {
+  color: var(--tw-prose-body);
+}
+
 .md-htmlblock-container,
 .md-rawblock-input.md-rawblock-control,
 .md-htmlblock-panel.md-rawblock-control,
@@ -775,12 +806,12 @@ g[data-mml-node="merror"] > g {
 }
 
 .md-mathblock-panel .md-rawblock-before {
-  padding-top: 1.1111111em;
+  padding-top: 1.1em;
   border-top-left-radius: 0.5rem;
 }
 
 .md-mathblock-panel .md-rawblock-after {
-  padding-bottom: 1.1111111em;
+  padding-bottom: 1.1em;
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
 }
@@ -818,8 +849,7 @@ g[data-mml-node="merror"] > g {
   margin-top: 2em;
   margin-bottom: 2em;
   border-radius: 0.5rem /* 8px */;
-  padding-top: 1.1111111em;
-  padding-bottom: 1.1111111em;
+  padding: 1.1111111em 1.3333333em;
 }
 
 .md-fences.md-focus {
@@ -857,11 +887,6 @@ pre code::after {
   content: none;
 }
 
-.CodeMirror-sizer {
-  width: fit-content;
-  padding: 0 1.3333333em !important;
-}
-
 #write .CodeMirror-line {
   white-space: nowrap;
   margin: 0;
@@ -913,6 +938,9 @@ pre code::after {
 .CodeMirror-cursor {
   border-left: 1px solid var(--code-cursor) !important;
 }
+.CodeMirror-gutters {
+  border-color: var(--code-comment);
+}
 .cm-s-inner span.cm-string {
   color: var(--code-string);
 }
@@ -929,7 +957,6 @@ pre code::after {
 
 .cm-s-inner .CodeMirror-guttermarker,
 .cm-s-inner .CodeMirror-guttermarker-subtle,
-.cm-s-inner .CodeMirror-linenumber,
 .cm-s-inner span.cm-comment.cm-def,
 .cm-s-inner span.cm-comment.cm-type,
 .cm-s-inner span.cm-builtin,
@@ -951,7 +978,8 @@ pre code::after {
 .cm-s-inner span.cm-def {
   color: var(--code-variable);
 }
-.cm-s-inner span.cm-comment {
+.cm-s-inner span.cm-comment,
+.cm-s-inner .CodeMirror-linenumber {
   color: var(--code-comment);
 }
 .cm-s-inner span.cm-operator {
@@ -967,11 +995,6 @@ pre code::after {
   text-decoration: underline;
 }
 
-/**
-  * Mermaid Diagrams
-  * see https://github.com/knsv/mermaid/blob/master/dist/mermaid.css
-  */
-
 /**
   * Inline Elements
   */
@@ -1073,69 +1096,40 @@ mark {
   color: var(--code-bracket);
 }
 
-.md-grid-board tr[row="1"] {
-  background-color: var(--md-grid-header);
-}
-
-.md-grid-board a:hover,
-.md-grid-board a.md-active {
-  background: var(--md-grid-active);
-}
-
-.md-grid-board tr[row="1"] a:hover,
-.md-grid-board tr[row="1"] a.md-active {
-  background: var(--md-grid-header-active);
-}
-
-.md-grid-board .md-grid-ext {
-  background: var(--md-grid-ext);
-}
-
-.md-grid-board tr[row="1"] .md-grid-ext {
-  background: var(--md-grid-header-ext);
-}
-
-.md-grid-board a {
-  border-color: var(--md-grid-border-color) !important;
+.file-list-item-file-ext-part {
+  opacity: 0.5;
 }
 
-/**
-  * Control UI (optional)
-  */
-
-/* button style */
-.btn,
-.btn .btn-default {
+#write div.md-toc-tooltip {
+  background-color: var(--tw-prose-bg);
 }
 
-/* outline area when popover */
-#outline-dropmenu {
+.md-toc {
+  font-size: 0.8em;
 }
 
-/* side bar */
-.pin-outline #outline-dropmenu {
+.md-toc-h1 .md-toc-inner {
+  margin-left: 0;
 }
 
-.file-list-item-file-ext-part {
-  opacity: 0.5;
+.md-toc-h2 .md-toc-inner {
+  margin-left: 1em;
 }
 
-/* when sidepanel is visible */
-.pin-outline #write {
+.md-toc-h3 .md-toc-inner {
+  margin-left: 2em;
 }
 
-/* dialogs */
-.modal-content {
-}
-.modal-title {
+.md-toc-h4 .md-toc-inner {
+  margin-left: 3em;
 }
 
-/* search panel */
-#md-searchpanel {
+.md-toc-h5 .md-toc-inner {
+  margin-left: 4em;
 }
 
-#write div.md-toc-tooltip {
-  background-color: white;
+.md-toc-h6 .md-toc-inner {
+  margin-left: 5em;
 }
 
 #typora-sidebar {
@@ -1153,43 +1147,6 @@ mark {
   background-color: var(--search-hit-text-bg-color);
 }
 
-/**
-  * Control UI on Mac (optional)
-  */
-
-/* quick open panel */
-#typora-quick-open {
-  /* background-color: #525C65; */
-}
-
-#md-searchpanel,
-.on-search-panel-open header,
-.modal-content,
-.popover,
-.context-menu {
-  /* background-color: @dialog-background; */
-}
-
-.popover.bottom > .arrow:after {
-  /* border-bottom-color: @dialog-background; */
-}
-
-/**
-  * Control UI on Windows/Linux (optional)
-  */
-
-/* context menu */
-.context-menu {
-}
-
-/* statue bar */
-footer {
-}
-
-/**
-  * Control UI on Windows Unibody Style (optional)
-  */
-
-/* left side mega menu */
-.megamenu-content {
+.btn-default {
+  background-color: var(--button-bg);
 }