1 files changed, 27 insertions, 10 deletions

diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index fa77862c..325f8d18 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -4,6 +4,11 @@ import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
 import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw';
 import { alpha, styled, type CSSObject } from '@mui/material/styles';
 
+import {
+  INDENTATION_MARKER_ACTIVE_CLASS,
+  INDENTATION_MARKER_CLASS,
+} from './indentationMarkerViewPlugin';
+
 function svgURL(svg: string): string {
   return `url('data:image/svg+xml;utf8,${svg}')`;
 }
@@ -62,6 +67,9 @@ export default styled('div', {
         background: theme.palette.highlight.selection,
       },
     },
+    '.cm-line': {
+      position: 'relative', // For indentation highlights
+    },
   };
 
   const highlightingStyle: CSSObject = {
@@ -149,6 +157,13 @@ export default styled('div', {
     '.cm-searchMatch-selected': {
       background: theme.palette.highlight.search.selected,
     },
+    [`.${INDENTATION_MARKER_CLASS}`]: {
+      display: 'inline-block',
+      boxShadow: `1px 0 0 ${theme.palette.highlight.lineNumber} inset`,
+    },
+    [`.${INDENTATION_MARKER_CLASS}.${INDENTATION_MARKER_ACTIVE_CLASS}`]: {
+      boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`,
+    },
   };
 
   const lineNumberStyle: CSSObject = {
@@ -311,17 +326,7 @@ export default styled('div', {
 
   const foldStyle = {
     '.cm-foldGutter': {
-      opacity: 0,
       width: 16,
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.short,
-      }),
-      '@media (hover: none)': {
-        opacity: 1,
-      },
-    },
-    '.cm-gutters:hover .cm-foldGutter': {
-      opacity: 1,
     },
     '.problem-editor-foldMarker': {
       display: 'block',
@@ -338,6 +343,18 @@ export default styled('div', {
         margin: '2px 0',
       },
     },
+    '.problem-editor-foldMarker-open': {
+      opacity: 0,
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short,
+      }),
+      '@media (hover: none)': {
+        opacity: 1,
+      },
+    },
+    '.cm-gutters:hover .problem-editor-foldMarker-open': {
+      opacity: 1,
+    },
     '.problem-editor-foldMarker-closed': {
       transform: 'rotate(-90deg)',
     },