Support improved styles with spaced indentation

[miluoshi]

Current styling of indentation lines relies on .cm-tab element which is present only when "Use tabs" setting is on.

To support styling of indentation without tabs as well, instead of adding ::before pseudo-element with border line on .cm-tab, a ::before pseudo element is added to it's parent .cm-hmd-list-indent that is present also with spaced indentation.
Instead of using border, the lines are rendered as background-image with function linear-gradient that renders repeating pattern of vertical lines. Space between lines is defined using ch unit that is defined as "a width of the glyph 0 in the element's font so it scales nicely with current font-size setting.

After testing with ~7 different themes, the new styles work with the same set of themes as original solution. It breaks mostly if a theme defines its' custom font-family.

[vslinko]

Hi @miluoshi!

Wow, that's awesome! Thank you for your contribution!

Released in https://github.com/vslinko/obsidian-outliner/releases/tag/1.4.0

[miluoshi]

There might be additional indent lines added for multi-line list items:

/* Indent guide next to additional lines of a list item */
.outliner-plugin-bls .CodeMirror-line .cm-tab {
  position: relative;
}
.outliner-plugin-bls .CodeMirror-line .cm-tab::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 3px;
  top: 0;
  border-left: 1px solid var(--text-faint);
  padding-top: 0.3em;
}

Before:

After:

[GitMurf]

@miluoshi any way to extend the multi line list item indent line (like you have pictures above) when using 4 spaces instead of tabs? Thanks!