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 <[email protected]>

Author: silverwind

web_src/less/_base.less

@@ -214,18 +214,12 @@ details summary > * {
   background: transparent;
 }
 
-.CodeMirror-cursor {
-  border-color: var(--color-caret) !important;
-}
-
-::selection,
-.CodeMirror-selected {
+::selection {
   background: var(--color-primary-light-1) !important;
   color: var(--color-white) !important;
 }
 
 ::placeholder,
-.CodeMirror-placeholder,
 .ui.dropdown:not(.button) > .default.text,
 .ui.default.dropdown:not(.button) > .text {
   color: var(--color-placeholder-text) !important;
@@ -280,10 +274,6 @@ a.label,
   border-color: var(--color-primary);
 }
 
-.CodeMirror-focused {
-  border-color: var(--color-primary) !important;
-}
-
 /* currently used for search bar dropdowns in repo search and explore code */
 .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
   min-width: 10em;

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);
 }

web_src/less/_repository.less

@@ -2040,26 +2040,8 @@
     }
 
     &.new {
-      .CodeMirror {
-        .CodeMirror-code {
-          font-family: var(--fonts-monospace);
-
-          .cm-comment {
-            background: inherit;
-          }
-        }
-      }
-
-      .editor-preview {
-        background-color: white;
-      }
-
       .ui.attached.tabular.menu.previewtabs {
         margin-bottom: 15px;
-
-        & + .field .editor-toolbar:not(.fullscreen) a.fa-eye {
-          display: none;
-        }
       }
     }
 

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;
+}

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;
+    }
+  }
+}

web_src/less/codemirror/light.less

@@ -0,0 +1 @@
+/* Placeholder, there is no light theme, it uses CM defaults */

web_src/less/index.less

@@ -16,6 +16,8 @@
 
 @import "./chroma/base.less";
 @import "./chroma/light.less";
+@import "./codemirror/base.less";
+@import "./codemirror/light.less";
 
 @import "_svg";
 @import "_tribute";

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;
 }