Relationship lines and folding for Minimal Theme

minimal-folding.css

/* TOC 
  
  Relationship lines in Preview
  Relationship lines in Editor
  Folding padding adjustment
  Folding icons in Preview
  Folding icons in Editor

*/


/* Relationship lines in Preview */

ul ul {
  position: relative;
}
ul ul::before {
  content:'';
  border-left: 1px solid var(--background-modifier-border);
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0; 
}
ul.contains-task-list::before {
  top:5px;
}
.markdown-preview-view .task-list-item-checkbox {
  margin-left:-21px;
}

/* Relationship lines in edit mode */

.cm-hmd-list-indent > .cm-tab {
  display:inline-block;
}
.cm-hmd-list-indent > .cm-tab:after {
  content: " ";
  display: block;
  width: 1px;
  position: absolute;
  top: 1px;
  border-right:1px solid var(--background-modifier-border);
  height: 100%;
}


/* Add padding to account for gutter in Edit mode when folding is on */

body:not(.plugin-sliding-panes-rotate-header) .view-header-title,
.allow-fold-headings.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
.allow-fold-lists.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
  padding-left:16px;
}

/* Folding icons in Preview */

.markdown-preview-view .heading-collapse-indicator.collapse-indicator svg,
.markdown-preview-view ul > li .collapse-indicator svg {
  opacity:0;
}

h1:hover .heading-collapse-indicator.collapse-indicator svg,
h2:hover .heading-collapse-indicator.collapse-indicator svg,
h3:hover .heading-collapse-indicator.collapse-indicator svg,
h4:hover .heading-collapse-indicator.collapse-indicator svg,
h5:hover .heading-collapse-indicator.collapse-indicator svg,
.markdown-preview-view .is-collapsed .collapse-indicator svg,
.markdown-preview-view .collapse-indicator:hover svg {
  opacity:1;
}

.markdown-preview-view ul > li.task-list-item .collapse-indicator {
  margin-left:-42px;
}
.markdown-preview-view .heading-collapse-indicator.collapse-indicator {
  margin-left:-25px;
  padding-right:8px;
}
.markdown-preview-view .collapse-indicator {
  margin-left:-40px;
  padding-bottom:10px;
  padding-top:8px;}

.markdown-preview-view ul > li:not(.task-list-item) .collapse-indicator {
  padding-right:20px;}

.markdown-preview-view ul > li:not(.task-list-item)::before {
  content:'';
  border-radius:50%;
  background:var(--text-faint);
  margin-right:10px;
  margin-top:0px;
  display:inline-block;
  line-height:0;
  height:0.15em;
  width:0.15em;
  border:1px solid var(--text-faint);
  vertical-align:middle;
  color:transparent
}
.markdown-preview-view ul > li:not(.task-list-item).is-collapsed::before {
  box-shadow:0 0 0px 4px var(--background-modifier-border);
}
.list-collapse-indicator .collapse-indicator .collapse-icon {
  opacity:0;
}

/* Folding icons in Editor */

.CodeMirror-foldmarker {
  color:var(--text-faint);
  cursor:default;
}

.CodeMirror-foldgutter-folded {
  margin-top:-3px;
  transform:rotate(-90deg);
}
.CodeMirror-foldgutter-open {
  margin-top:-1px;
  width:16px;
  height:20px;
}
.CodeMirror-foldgutter-folded:after,
.CodeMirror-foldgutter-open:after  {
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
  color:transparent;
}
.theme-dark .CodeMirror-foldgutter-folded:after,
.theme-dark .CodeMirror-foldgutter-open:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='8' height='8' class='right-triangle'%3E%3Cpath fill='%23FFFFFF' stroke='%23FFFFFF' d='M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z'%3E%3C/path%3E%3C/svg%3E");
}
.CodeMirror-foldgutter-open:after {
  opacity:0;
}
.CodeMirror-foldgutter-folded:after,
.CodeMirror-code > div:hover .CodeMirror-foldgutter-open:after {
  opacity:0.3;
}
.CodeMirror-code > div:hover .CodeMirror-foldgutter-open:hover:after,
.CodeMirror-code > div:hover .CodeMirror-foldgutter-folded:hover:after {
  opacity:1;
}

@kepano This is great! Very robust. Only thing I noticed while testing was that ordered lists are missing from here:

https://gist.github.com/kepano/c7f3d1d672d9c489421097d26d3de4b6#file-minimal-folding-css-L73-L82

Not sure if this was intentional, but either way, everything seems to work really well.

@mgmeyers thanks, this is now added