My css snippets for outline, inspired by logseq bullet threading plugin

[subframe7536]

Currently, the method to achieve the effect in the editor using pure CSS is

1. to give all the list elements and outline elements in the editor a hierarchical structure (which conflicts with the element design philosophy for the live preview mode);
2. to add a class name at the beginning of each list to identify it (which obviously will not be considered based on the design philosophy like quotes and code blocks or the limitations of CodeMirror itself).

[jon.wall]

Hi @subframe7536, the outline core plugin of Obsidian was updated and and using your css snippet, the outline is not aligned anymore.

Do you have an updated version of the snippet?

I checked your obsidian-theme-maple theme and found outline.css and theme.css but I am not sure what the relevant parts are that are needed for this snippet.

Thanks for your help!

[SharpZhou]

I’ve modify it to adapt to the new Obsidian version, here is it:

/* Outline CSS Snippet
https://forum.obsidian.md/t/my-css-snippets-for-outline-inspired-by-logseq-bullet-threading-plugin/48558
*/
body {
  --outline-guideline-width: var(--size-2-1);
  --outline-guideline-color: var(--accent-active);
  --outline-item-height: calc(var(--nav-item-size) * 1.8);
  /*active color*/
  --accent-active: hsl(var(--accent-h),
      var(--accent-s),
      calc(var(--accent-l) + 4%));
}

.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item {
  position: relative;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-self {
  position: relative;
  margin-bottom: 0;
  white-space: nowrap;
  margin-top: -5px !important;
  /* fix item gap */
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-self .tree-item-inner {
  position: relative;
  padding-left: var(--size-4-4);
  overflow: hidden;
  text-overflow: ellipsis;
  height: var(--outline-item-height);
  line-height: var(--outline-item-height);
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-self .tree-item-inner::before {
  content: "";
  width: var(--size-4-1);
  height: var(--size-4-1);
  border: var(--size-2-1) solid var(--outline-guideline-color);
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-self .tree-item-icon ~ .tree-item-inner {
  padding-left: var(--size-4-4); /* Changed from 'var(--size-4-1);' now looks right */
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-self .tree-item-icon ~ .tree-item-inner::before {
  content: none;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item.is-collapsed .tree-item-icon::before {
  box-shadow: 0 0 0 var(--size-4-1) var(--background-modifier-hover);
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item::after {
  content: "";
  width: var(--outline-guideline-width);
  position: absolute;
  background-color: transparent;
  top: calc(var(--outline-item-height) / 2 * -1);
  left: -6px;
  height: calc(100% - var(--outline-item-height) + var(--size-4-8));
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-icon {
  cursor: pointer;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-icon::before {
  width: var(--size-4-2);
  height: var(--size-4-2);
  background-color: var(--outline-guideline-color);
  border-radius: 50%;
  position: absolute;
  left: 7px;
  top: 120%;
  transform: translateY(-50%);
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item-icon svg path {
  display: none;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item:hover > .tree-item-children > .tree-item::after {
  background-color: var(--outline-guideline-color);
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item:hover > .tree-item-self:hover + .tree-item-children .tree-item::after {
  background-color: transparent;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item:hover > .tree-item-children > .tree-item:hover::after, .workspace-leaf-content[data-type=outline] .view-content .outline .tree-item:hover > .tree-item-children > .tree-item:hover ~ .tree-item::after {
  background-color: transparent;
}
.workspace-leaf-content[data-type=outline] .view-content .outline .tree-item:hover > .tree-item-children > .tree-item:hover::before {
  content: "";
  position: absolute;
  top: calc(var(--outline-item-height) / 2 * -1);
  left: -6px;
  bottom: calc(100% - (var(--outline-item-height) + var(--size-4-2)) / 2 - 1px);
  width: var(--size-4-4);
  border-bottom-left-radius: var(--radius-m);
  border-bottom: var(--outline-guideline-width) solid var(--outline-guideline-color);
  border-left: var(--outline-guideline-width) solid var(--outline-guideline-color);
}
.workspace-leaf-content[data-type=outline] .view-content .outline :is(.tree-item-children, .tree-item-self .tree-item-self) {
  padding-left: 0;
  margin-left: var(--size-4-5);
  border-left: none;
}

[jon.wall]

Thank you @SharpZhou.

However, the alignment and the bullets are displayed incorrectly for me. See here:

It appear to be related whether a heading has a subheading itself. When adding a subheading below # 1.2 or # 2 the indentation and bullet is correct:

[subframe7536]

update version in Chinese Forum: 大纲美化V3修复版 - 经验分享 - Obsidian 中文论坛

[LSKY]

Hi! I don’t know why, but the snippet stopped working. It could be due to:

• updated Obsidian from 1.4.13 to 1.4.14;
• updated my Macbook to MacOS 14.0 Sonoma.

I don’t know why these updates should impact only this snippet and not all the others, but it’s the only thing I could think about.

To prevent possible questions:

• I have not changed themes, I’m currently using Minimal theme btw.
• I have not installed, enabled, disabled or altered in any way any community plugin.
• Yesterday I enabled the core plugin workspaces, but I don’t think there’s any correlation, and disabling it doesn’t produce any effect.

Any idea how to fix or at least what’s the reason for this?

[NK8]

Experiencing the same issue since I updated to 1.4.14 as well, the snippet just does not work anymore. Any way to rectify the same? Cheers.

[subframe7536]

@LSKY @NK8 updated in Chinese Forum: 大纲美化片段 v1.4.14 修复 - 经验分享 - Obsidian 中文论坛

[NK8]

Hi, thanks for clearing that up. Works perfectly well now, just encountering an issue where if the heading is a little too long - it tends to get cut off. Unlike in the core outline plugin where it jumps to the next line. Have attached a picture showcasing the issue. Could you let me know if there is any potential workaround? Thanks a ton.

[subframe7536]

Currently the bullet height is determined by line height. If the item have multi lines, the bullet will render in wrong place that break the thread. That need some work to fix that.

I plan to add support for outline in editor ( reference ), and this might be fixed at that time

[KillyMXI]

As the author of the referenced style for the editor, I’m also not aware of a way to know for sure where the bullet point is drawn. That is unless you have an idea how to alter the thread design, so it doesn’t interfere with the bullet point position.
Multiline items and inline images affect the bullet point position differently -it can potentially be anywhere along the height of the item if the item is higher than trivial one-line text.

(side note: there are some feature requests under my gist, I plan to update it at some point, hopefully soon, although I might be busy for a couple weeks)

[man_x]

@jon.wall

Apparently I misunderstood what this snippet was for. I was under the impression that bullet threading would work for any list whereas this snippet is for the outline view

same. i misunderstood too.

it was certainly disappointing to know.

@subframe7536

sorry, but it can’t until the version of electron update to 21+ officially .there is no hierarchy in the dom tree of editor area, so i can’t get the preceding node without :has selector. this selector is only supported in electron 21+. so currently it only effect in outline panel

any update on this? i am seriously considering to move to obsidian but the bullet visual UI (the visual indicators of hierarchy and collapsed states) is so counter intuitive that I can’t just use obsidian.

[ShaneNZ]

Have a look in this thread Plugin for Bullet Threading - #31 by KillyMXI for what you want, the gist further up the thread (linked as a reply from the above post) has the CSS snippet.

[man_x]

@ShaneNZ

Have a look in this thread

you mean this code

on this page, right?

I tried, without the style setting, it didn’t work. so I installed style settings plugin. and this is how the text in my pages look now:

also,

[ShaneNZ]

Suggest you post into that thread, and maybe the author CSS author KillyMXI will be able to help you out to get it working. I’m currently away without access to my machine, although fwiw it was working for me perfectly when I left.