Currently, the method to achieve the effect in the editor using pure CSS is
CodeMirror itself).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!
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;
}
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:
Hi! I don’t know why, but the snippet stopped working. It could be due to:
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:
Any idea how to fix or at least what’s the reason for this?
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.
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.
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
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)
