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>

1 files changed, 22 insertions, 16 deletions

diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index 6ddb1a3357..73e5bda0a2 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -1,19 +1,3 @@
-.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: 3px;
-    padding: 0 !important;
-  }
-
-  .cm-comment {
-    background: inherit !important;
-  }
-}
-
 .repository.file.editor .tab[data-tab="write"] {
   padding: 0 !important;
 }
@@ -33,6 +17,10 @@
   border-color: var(--color-secondary);
 }
 
+.editor-toolbar.fullscreen {
+  background: var(--color-body);
+}
+
 .editor-toolbar button {
   border: none !important;
   color: var(--color-text-light);
@@ -55,6 +43,24 @@
   background: var(--color-active);
 }
 
+/* hide preview button, we have the preview tab for this */
+.editor-toolbar:not(.fullscreen) .preview {
+  display: none;
+}
+
+/* hide revert button in fullscreen, it breaks the page */
+.editor-toolbar.fullscreen .revert-to-textarea {
+  display: none;
+}
+
+.editor-preview {
+  background-color: var(--color-body);
+}
+
+.editor-preview-side {
+  border-color: var(--color-secondary);
+}
+
 .editor-statusbar {
   color: var(--color-text-light);
 }