Monaco improvements (#15333)

- Create theme at runtime which follows the CSS variables of the site
- Disable a few opinionated Monaco defaults like minimap and word highlights
- Move styles to separate file

Co-authored-by: zeripath <art27@cantab.net>

5 files changed, 36 insertions, 22 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index bbd80c45f7..45d88db5d2 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -106,9 +106,11 @@
   --color-markdown-code-block: #00000010;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
+  --color-shadow: #00000030;
   --color-secondary-bg: #f4f4f4;
   --color-expand-button: #d8efff;
   --color-placeholder-text: #aaa;
+  --color-editor-line-highlight: var(--color-primary-light-6);
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index c23de4f2e0..156430af0e 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -74,25 +74,3 @@
   border-left: 1px solid var(--color-secondary) !important;
   border-right: 1px solid var(--color-secondary) !important;
 }
-
-.monaco-editor-container {
-  width: 100%;
-  min-height: 200px;
-  height: 90vh;
-}
-
-/* overwrite conflicting styles from fomantic */
-.monaco-editor-container .inputarea {
-  min-height: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  resize: none !important;
-  border: none !important;
-  color: transparent !important;
-  background-color: transparent !important;
-}
-
-.edit.githook .monaco-editor-container {
-  border: 1px solid var(--color-secondary);
-  height: 70vh;
-}
diff --git a/web_src/less/features/codeeditor.less b/web_src/less/features/codeeditor.less
new file mode 100644
index 0000000000..3bd290876f
--- /dev/null
+++ b/web_src/less/features/codeeditor.less
@@ -0,0 +1,32 @@
+.monaco-editor-container {
+  width: 100%;
+  min-height: 200px;
+  height: 90vh;
+}
+
+.edit.githook .monaco-editor-container {
+  border: 1px solid var(--color-secondary);
+  height: 70vh;
+}
+
+/* overwrite conflicting styles from fomantic */
+.monaco-editor-container .inputarea {
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  resize: none !important;
+  border: none !important;
+  color: transparent !important;
+  background-color: transparent !important;
+}
+
+/* these seem unthemeable */
+.monaco-scrollable-element > .scrollbar > .slider {
+  background: var(--color-primary) !important;
+}
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+  background: var(--color-primary-dark-1) !important;
+}
+.monaco-scrollable-element > .scrollbar > .slider:active {
+  background: var(--color-primary-dark-2) !important;
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index ec3008df3b..3fea33a65d 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -6,6 +6,7 @@
 @import "./features/animations.less";
 @import "./features/heatmap.less";
 @import "./features/imagediff.less";
+@import "./features/codeeditor.less";
 @import "./markdown/mermaid.less";
 
 @import "./chroma/base.less";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 2f9bd4a4b1..c7f15e1d1e 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -106,6 +106,7 @@
   --color-text-focus: #fff;
   --color-expand-button: #3c404d;
   --color-placeholder-text: #6a737d;
+  --color-editor-line-highlight: var(--color-primary-light-5);
 }
 
 .ui.horizontal.segments > .segment {