diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 300323b2e8..fc242e1592 100644
--- a/web_src/less/_base.less
+++ b/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;
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);
}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index bf8722690c..bb4bee2805 100644
--- a/web_src/less/_repository.less
+++ b/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;
- }
}
}
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 */
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 0aa4a2f8f8..e95cb72eb0 100644
--- a/web_src/less/index.less
+++ b/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";
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;
}