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, 1 insertions, 106 deletions

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 091cd28752..35a0e88d88 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1,4 +1,5 @@
 @import "../chroma/dark.less";
+@import "../codemirror/dark.less";
 
 :root {
   --is-dark-theme: true;
@@ -292,19 +293,6 @@ a.ui.basic.green.label:hover {
   background-color: #393d4a !important;
 }
 
-.repository.file.editor.edit,
-.repository.wiki.new .CodeMirror {
-  .editor-preview,
-  .editor-preview-side,
-  & + .editor-preview-side {
-    background: #353945;
-
-    .markup.ui.segment {
-      border-width: 0;
-    }
-  }
-}
-
 .overflow.menu .items .item {
   color: #9d9d9d;
 }
@@ -445,99 +433,6 @@ td.blob-excerpt {
   border-right-color: var(--color-secondary) !important;
 }
 
-/* code mirror dark theme */
-
-.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: #ff6e00; */
-      color: #dbdbeb;
-    }
-  }
-}
-
 footer .container .links > * {
   border-left-color: #888;
 }