Extract CodeMirror styles (#17960)

- Extract CodeMirror-related styles to separate files
- Generalize CodeMirror styles where possible
- Improve fullscreen and side-by-side mode for dark theme

Co-authored-by: 6543 <6543@obermui.de>

3 files changed, 131 insertions, 0 deletions

diff --git a/web_src/less/codemirror/base.less b/web_src/less/codemirror/base.less
new file mode 100644
index 0000000000..8734457463
--- /dev/null
+++ b/web_src/less/codemirror/base.less
@@ -0,0 +1,41 @@
+.EasyMDEContainer .CodeMirror {
+  color: var(--color-input-text);
+  background-color: var(--color-input-background);
+  border-color: var(--color-secondary);
+  font: 14px var(--fonts-monospace);
+
+  &.cm-s-default {
+    border-radius: var(--border-radius);
+    padding: 0 !important;
+  }
+
+  &.CodeMirror-fullscreen.CodeMirror-focused {
+    border-right: 1px solid var(--color-primary) !important;
+  }
+}
+
+.CodeMirror-cursor {
+  border-color: var(--color-caret) !important;
+}
+
+.CodeMirror .cm-comment {
+  background: inherit !important;
+}
+
+.CodeMirror .CodeMirror-code {
+  font: 14px var(--fonts-monospace);
+}
+
+.CodeMirror-selected {
+  background: var(--color-primary-light-1) !important;
+  color: var(--color-white) !important;
+}
+
+.CodeMirror-placeholder {
+  color: var(--color-placeholder-text) !important;
+  opacity: 1 !important;
+}
+
+.CodeMirror-focused {
+  border-color: var(--color-primary) !important;
+}
diff --git a/web_src/less/codemirror/dark.less b/web_src/less/codemirror/dark.less
new file mode 100644
index 0000000000..d0e954df58
--- /dev/null
+++ b/web_src/less/codemirror/dark.less
@@ -0,0 +1,89 @@
+.CodeMirror {
+  &.cm-s-default,
+  &.cm-s-paper {
+    .cm-property {
+      color: #a0cc75;
+    }
+
+    .cm-header {
+      color: #9daccc;
+    }
+
+    .cm-quote {
+      color: #009900;
+    }
+
+    .cm-keyword {
+      color: #cc8a61;
+    }
+
+    .cm-atom {
+      color: #ef5e77;
+    }
+
+    .cm-number {
+      color: #ff5656;
+    }
+
+    .cm-def {
+      color: #e4e4e4;
+    }
+
+    .cm-variable-2 {
+      color: #00bdbf;
+    }
+
+    .cm-variable-3 {
+      color: #008855;
+    }
+
+    .cm-comment {
+      color: #8e9ab3;
+    }
+
+    .cm-string {
+      color: #a77272;
+    }
+
+    .cm-string-2 {
+      color: #ff5500;
+    }
+
+    .cm-meta,
+    .cm-qualifier {
+      color: #ffb176;
+    }
+
+    .cm-builtin {
+      color: #b7c951;
+    }
+
+    .cm-bracket {
+      color: #999977;
+    }
+
+    .cm-tag {
+      color: #f1d273;
+    }
+
+    .cm-attribute {
+      color: #bfcc70;
+    }
+
+    .cm-hr {
+      color: #999999;
+    }
+
+    .cm-url {
+      color: #c5cfd0;
+    }
+
+    .cm-link {
+      color: #d8c792;
+    }
+
+    .cm-error {
+      color: #dbdbeb;
+    }
+  }
+}
diff --git a/web_src/less/codemirror/light.less b/web_src/less/codemirror/light.less
new file mode 100644
index 0000000000..aa89263bc1
--- /dev/null
+++ b/web_src/less/codemirror/light.less
@@ -0,0 +1 @@
+/* Placeholder, there is no light theme, it uses CM defaults */