change fold icons and dots

client/styles/components/_editor.scss

@@ -13,17 +13,17 @@
 
 .CodeMirror-linenumber {
 	width: #{32 / $base-font-size}rem;
-  left: 0 !important;
+  left: #{-3 / $base-font-size}rem !important;
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
 }
 
 .CodeMirror-lines {
-	padding-top: #{25 / $base-font-size}rem;
+  padding-top: #{25 / $base-font-size}rem;
 }
 
-.CodeMirror-line {
+pre.CodeMirror-line {
 	padding-left: #{5 / $base-font-size}rem;
 }
 
@@ -243,6 +243,36 @@
   background: transparent url(../images/exit.svg) no-repeat;
 }
 
+.CodeMirror-foldgutter-open:after {
+  background-image: url(../images/down-arrow.svg);
+}
+
+.CodeMirror-foldgutter-folded:after {
+  background-image: url(../images/right-arrow.svg);
+}
+
+.CodeMirror-foldgutter-folded:after,
+.CodeMirror-foldgutter-open:after {
+  background-size: 10px 10px;
+  content: "";
+  padding-left: 15px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.CodeMirror-foldmarker {
+  text-shadow: none;
+  border-radius: 5px;
+  opacity: 1;
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
+  height: 0.85em;
+  line-height: 0.7;
+  padding: 0 #{5 / $base-font-size}rem;
+  font-family: serif;
+}
+
 .editor-holder {
   height: calc(100% - #{29 / $base-font-size}rem);
   width: 100%;

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -125,3 +125,8 @@ $p5-contrast-activeline: #999999;
   color: $p5-contrast-pink;
   font-weight: bold;
 }
+
+.cm-s-p5-contrast .CodeMirror-foldmarker {
+  background-color: white;
+  color: #333;
+}

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -128,3 +128,8 @@ $p5-dark-activeline: rgb(207, 207, 207);
   color: $p5-dark-pink;
   font-weight: bold;
 }
+
+.cm-s-p5-dark .CodeMirror-foldmarker {
+  background-color: white;
+  color: #333;
+}

client/styles/components/_p5-light-codemirror-theme.scss

@@ -126,3 +126,8 @@ $p5-light-activeline: rgb(207, 207, 207);
 .cm-s-p5-light .cm-p5-variable {
   color: $p5-light-pink;
 }
+
+.cm-s-p5-light .CodeMirror-foldmarker {
+  background-color: #333;
+  color: white;
+}