Obsidian list threading and highlight in live preview and source view

README.md

Obsidian live-preview list threading and highlight

Obsidian forum thread: https://forum.obsidian.md/t/plugin-for-bullet-threading/37317/22

Add these CSS files in Appearance settings.

Changelog:

• 2024-08-15

  • separate versions for mouse hover and active line (keyboard focus)
    • can be enabled simultaneously without conflicts
  • works in live preview and source view
  • configurable with Style Settings plugin
  • threading snippets now have priority for wrapped text by default, can be toggled to priority for images
  • default styles adjusted to keep hover and active line threading distinguishable while using same color palette
  • threading line offsets are fixed to match latest Obsidian styles

• 2023-10-02

  • highlight snippet
    • halved the alpha, making highlight more subtle
    • made 6th color a bit more distinct from 5th
  • threading snippet
    • removed accidental dependency on another CSS snippet
    • adjusted offsets to better match indentation lines with the default font size
    • using --list-indent variable to hopefully make the snippet more compatible with styles that alter it
    • providing height calculations that prioritize wrapped text over images (or any other oversized inline content with default vertical alignment) - requires manual edits in 3 places to switch

---

Support me if you'd like me to publish Obsidian things more often:

https://github.com/sponsors/KillyMXI

bullet-list-live-preview-highlight-active.css

/* @settings

name: Live preview list highlight - active line
id: live-preview-list-highlight-active
settings:
    - 
        id: colors-section
        title: Colors
        type: heading
        level: 2
        collapsed: false
    - 
        id: list-highlight-active-alpha
        title: Alpha
        description: The alpha (transparency) of all highlights
        type: variable-number-slider
        default: 0.05
        min: 0.0
        max: 1.0
        step: 0.05
    - 
        id: style-settings-bug-note
        title: Note
        description: "Style Settings seems to be [bugged](https://github.com/mgmeyers/obsidian-style-settings/issues/168). You may not see the actual colors here before interacting with each color picker."
        type: info-text
        markdown: true
    - 
        id: list-highlight-active-color-1
        title: Color 1
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(23, 100%, 45%)'
    - 
        id: list-highlight-active-color-2
        title: Color 2
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(46, 100%, 45%)'
    - 
        id: list-highlight-active-color-3
        title: Color 3
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(70, 100%, 45%)'
    - 
        id: list-highlight-active-color-4
        title: Color 4
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(105, 100%, 45%)'
    - 
        id: list-highlight-active-color-5
        title: Color 5
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(187, 100%, 45%)'
    - 
        id: list-highlight-active-color-6
        title: Color 6
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(223, 100%, 45%)'

*/

.HyperMD-list-line-1.cm-active,
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-2, .HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active) {
  background-color: hsl(var(--list-highlight-active-color-1, 23, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

.HyperMD-list-line-2.cm-active,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active) {
  background-color: hsl(var(--list-highlight-active-color-2, 46, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

.HyperMD-list-line-3.cm-active,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active) {
  background-color: hsl(var(--list-highlight-active-color-3, 70, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

.HyperMD-list-line-4.cm-active,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6).cm-active) {
  background-color: hsl(var(--list-highlight-active-color-4, 105, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

.HyperMD-list-line-5.cm-active,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6).cm-active) {
  background-color: hsl(var(--list-highlight-active-color-5, 187, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

.HyperMD-list-line-6.cm-active {
  background-color: hsl(var(--list-highlight-active-color-6, 223, 100%, 45%), var(--list-highlight-active-alpha, 0.05));
}

bullet-list-live-preview-highlight-hover.css

/* @settings

name: Live preview list highlight - on hover
id: live-preview-list-highlight-hover
settings:
    - 
        id: colors-section
        title: Colors
        type: heading
        level: 2
        collapsed: false
    - 
        id: list-highlight-hover-alpha
        title: Alpha
        description: The alpha (transparency) of all highlights
        type: variable-number-slider
        default: 0.05
        min: 0.0
        max: 1.0
        step: 0.05
    - 
        id: style-settings-bug-note
        title: Note
        description: "Style Settings seems to be [bugged](https://github.com/mgmeyers/obsidian-style-settings/issues/168). You may not see the actual colors here before interacting with each color picker."
        type: info-text
        markdown: true
    - 
        id: list-highlight-hover-color-1
        title: Color 1
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(23, 100%, 45%)'
    - 
        id: list-highlight-hover-color-2
        title: Color 2
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(46, 100%, 45%)'
    - 
        id: list-highlight-hover-color-3
        title: Color 3
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(70, 100%, 45%)'
    - 
        id: list-highlight-hover-color-4
        title: Color 4
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(105, 100%, 45%)'
    - 
        id: list-highlight-hover-color-5
        title: Color 5
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(187, 100%, 45%)'
    - 
        id: list-highlight-hover-color-6
        title: Color 6
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(223, 100%, 45%)'

*/

.HyperMD-list-line-1:hover,
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-2, .HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(var(--list-highlight-hover-color-1, 23, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

.HyperMD-list-line-2:hover,
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(var(--list-highlight-hover-color-2, 46, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

.HyperMD-list-line-3:hover,
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(var(--list-highlight-hover-color-3, 70, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

.HyperMD-list-line-4:hover,
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover) {
  background-color: hsl(var(--list-highlight-hover-color-4, 105, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

.HyperMD-list-line-5:hover,
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover) {
  background-color: hsl(var(--list-highlight-hover-color-5, 187, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

.HyperMD-list-line-6:hover {
  background-color: hsl(var(--list-highlight-hover-color-6, 223, 100%, 45%), var(--list-highlight-hover-alpha, 0.05));
}

bullet-list-live-preview-threading-active.css

/* @settings

name: Live preview list threading - active line
id: live-preview-list-threading-active
settings:
    - 
        id: list-threading-active-elbow-location
        title: Threading line elbow location
        description: Where the threading line elbow is located
        type: class-select
        allowEmpty: false
        default: list-threading-active-elbow-top
        options:
            - 
                label: "Top (priority for wrapped text)"
                value: list-threading-active-elbow-top
            - 
                label: "Bottom (priority for images)"
                value: list-threading-active-elbow-bottom
    - 
        id: list-threading-active-width
        title: Threading line width
        description: The width of the threading line
        type: variable-number
        default: 3
        format: px
    - 
        id: list-threading-active-offset-extra
        title: Thread line extra offset
        description: Extra offset for threading line
        type: variable-number
        default: 2
        format: px
    - 
        id: colors-section
        title: Colors
        type: heading
        level: 2
        collapsed: false
    - 
        id: list-threading-active-alpha
        title: Alpha
        description: The alpha (transparency) of all threading lines
        type: variable-number-slider
        default: 0.2
        min: 0.0
        max: 1.0
        step: 0.05
    - 
        id: style-settings-bug-note
        title: Note
        description: "Style Settings seems to be [bugged](https://github.com/mgmeyers/obsidian-style-settings/issues/168). You may not see the actual colors here before interacting with each color picker."
        type: info-text
        markdown: true
    - 
        id: list-threading-active-color-1
        title: Color 1
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(23, 100%, 45%)'
    - 
        id: list-threading-active-color-2
        title: Color 2
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(46, 100%, 45%)'
    - 
        id: list-threading-active-color-3
        title: Color 3
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(70, 100%, 45%)'
    - 
        id: list-threading-active-color-4
        title: Color 4
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(105, 100%, 45%)'
    - 
        id: list-threading-active-color-5
        title: Color 5
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(187, 100%, 45%)'

*/

.markdown-source-view .HyperMD-list-line {
  /* Unitless zero in variables is evil */
  --list-padding-inline-start-fix: 0px; /*calc(1px * var(--list-indent-source));*/
}
.markdown-source-view.is-live-preview .HyperMD-list-line {
  --list-padding-inline-start-fix: var(--list-indent-editing);
}

.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2).cm-active),
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2.cm-active, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active)) > .cm-hmd-list-indent {
  &::before {
    --list-threading-active-color: hsl(var(--list-threading-active-color-1, 23, 100%, 45%), var(--list-threading-active-alpha, 0.2));
    --list-threading-active-offset: calc(var(--list-threading-active-offset-extra, 2px) + var(--list-padding-inline-start-fix));
  }
}

.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3).cm-active),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3.cm-active, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6).cm-active)) > .cm-hmd-list-indent {
  &::before {
    --list-threading-active-color: hsl(var(--list-threading-active-color-2, 46, 100%, 45%), var(--list-threading-active-alpha, 0.2));
    --list-threading-active-offset: calc(var(--list-threading-active-offset-extra, 2px) + var(--list-padding-inline-start-fix) + var(--list-indent));
  }
}

.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4).cm-active),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4.cm-active, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6).cm-active),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6).cm-active)) > .cm-hmd-list-indent {
  &::before {
    --list-threading-active-color: hsl(var(--list-threading-active-color-3, 70, 100%, 45%), var(--list-threading-active-alpha, 0.2));
    --list-threading-active-offset: calc(var(--list-threading-active-offset-extra, 2px) + var(--list-padding-inline-start-fix) + 2 * var(--list-indent));
  }
}

.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5).cm-active),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5.cm-active, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6).cm-active),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-6).cm-active)) > .cm-hmd-list-indent {
  &::before {
    --list-threading-active-color: hsl(var(--list-threading-active-color-4, 105, 100%, 45%), var(--list-threading-active-alpha, 0.2));
    --list-threading-active-offset: calc(var(--list-threading-active-offset-extra, 2px) + var(--list-padding-inline-start-fix) + 3 * var(--list-indent));
  }
}

.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6).cm-active),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6.cm-active),
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line.cm-active)):is(.cm-active) > .cm-hmd-list-indent {
  &::before {
    --list-threading-active-color: hsl(var(--list-threading-active-color-5, 187, 100%, 45%), var(--list-threading-active-alpha, 0.2));
    --list-threading-active-offset: calc(var(--list-threading-active-offset-extra, 2px) + var(--list-padding-inline-start-fix) + 4 * var(--list-indent));
  }
}

/* tails */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2).cm-active),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3).cm-active),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4).cm-active),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5).cm-active),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)):has(~ :is(.HyperMD-list-line-6).cm-active) {
  &::before {
    content: "";
    position: absolute;
    left: var(--list-threading-active-offset);
    bottom: 0;
    width: var(--list-threading-active-width, 3px);
    background-color: var(--list-threading-active-color);
    height: calc(100% - 0.75em);
  }
  .is-live-preview &:is(.HyperMD-task-line)::before {
    max-height: calc(100% - 1.3em);
  }
  body.list-threading-active-elbow-bottom &::before {
    height: 0.8em;
  }
  body.list-threading-active-elbow-bottom .is-live-preview &:is(.HyperMD-task-line)::before {
    max-height: 0.275em;
  }
}

/* in-between lines */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2.cm-active, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3).cm-active),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3.cm-active, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4).cm-active),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4.cm-active, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5).cm-active),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5.cm-active, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6).cm-active),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6.cm-active) {
  &::before {
    content: "";
    position: absolute;
    left: var(--list-threading-active-offset);
    top: 0;
    height: 100%;
    width: var(--list-threading-active-width, 3px);
    background-color: var(--list-threading-active-color);
  }
}

/* elbows */
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3).cm-active)),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4).cm-active)),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5).cm-active)),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line.cm-active)):is(.cm-active, :has(~ :is(.HyperMD-list-line-6).cm-active)),
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line.cm-active)):is(.cm-active) {
  & > .cm-hmd-list-indent::before {
    content: "";
    position: absolute;
    left: var(--list-threading-active-offset);
    width: calc(var(--list-indent) - var(--list-threading-active-width, 3px));
    top: 0;
    border-bottom-left-radius: var(--radius-m);
    border-bottom: var(--list-threading-active-width, 3px) solid var(--list-threading-active-color);
    border-left: var(--list-threading-active-width, 3px) solid var(--list-threading-active-color);
    height: calc(0.775em);
  }
  body.list-threading-active-elbow-bottom & > .cm-hmd-list-indent::before {
    height: calc(100% - 0.825em - var(--list-threading-active-width, 3px) / 2);
  }
  .is-live-preview &:is(.HyperMD-task-line) > .cm-hmd-list-indent::before {
    max-width: calc(var(--list-indent) - 0.35em - var(--list-threading-active-offset-extra, 2px));
  }
}

bullet-list-live-preview-threading-hover.css

/* @settings

name: Live preview list threading - on hover
id: live-preview-list-threading-hover
settings:
    - 
        id: list-threading-hover-elbow-location
        title: Threading line elbow location
        description: Where the threading line elbow is located
        type: class-select
        allowEmpty: false
        default: list-threading-hover-elbow-top
        options:
            - 
                label: "Top (priority for wrapped text)"
                value: list-threading-hover-elbow-top
            - 
                label: "Bottom (priority for images)"
                value: list-threading-hover-elbow-bottom
    - 
        id: list-threading-hover-width
        title: Threading line width
        description: The width of the threading line
        type: variable-number
        default: 1
        format: px
    - 
        id: list-threading-hover-offset-extra
        title: Thread line extra offset
        description: Extra offset for threading line
        type: variable-number
        default: 4
        format: px
    - 
        id: colors-section
        title: Colors
        type: heading
        level: 2
        collapsed: false
    - 
        id: list-threading-hover-alpha
        title: Alpha
        description: The alpha (transparency) of all threading lines
        type: variable-number-slider
        default: 0.4
        min: 0.0
        max: 1.0
        step: 0.05
    - 
        id: style-settings-bug-note
        title: Note
        description: "Style Settings seems to be [bugged](https://github.com/mgmeyers/obsidian-style-settings/issues/168). You may not see the actual colors here before interacting with each color picker."
        type: info-text
        markdown: true
    - 
        id: list-threading-hover-color-1
        title: Color 1
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(23, 100%, 45%)'
    - 
        id: list-threading-hover-color-2
        title: Color 2
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(46, 100%, 45%)'
    - 
        id: list-threading-hover-color-3
        title: Color 3
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(70, 100%, 45%)'
    - 
        id: list-threading-hover-color-4
        title: Color 4
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(105, 100%, 45%)'
    - 
        id: list-threading-hover-color-5
        title: Color 5
        type: variable-color
        opacity: false
        format: hsl-values
        default: 'hsl(187, 100%, 45%)'

*/

.markdown-source-view .HyperMD-list-line {
  /* Unitless zero in variables is evil */
  --list-padding-inline-start-fix: 0px; /*calc(1px * var(--list-indent-source));*/
}
.markdown-source-view.is-live-preview .HyperMD-list-line {
  --list-padding-inline-start-fix: var(--list-indent-editing);
}

.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2):hover),
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2:hover, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-3, .HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover)) > .cm-hmd-list-indent {
  &::after {
    --list-threading-hover-color: hsl(var(--list-threading-hover-color-1, 23, 100%, 45%), var(--list-threading-hover-alpha, 0.4));
    --list-threading-hover-offset: calc(var(--list-threading-hover-offset-extra, 4px) + var(--list-padding-inline-start-fix));
  }
}

.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3:hover, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-4, .HyperMD-list-line-5, .HyperMD-list-line-6):hover)) > .cm-hmd-list-indent {
  &::after {
    --list-threading-hover-color: hsl(var(--list-threading-hover-color-2, 46, 100%, 45%), var(--list-threading-hover-alpha, 0.4));
    --list-threading-hover-offset: calc(var(--list-threading-hover-offset-extra, 4px) + var(--list-padding-inline-start-fix) + var(--list-indent));
  }
}

.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4:hover, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-5, .HyperMD-list-line-6):hover)) > .cm-hmd-list-indent {
  &::after {
    --list-threading-hover-color: hsl(var(--list-threading-hover-color-3, 70, 100%, 45%), var(--list-threading-hover-alpha, 0.4));
    --list-threading-hover-offset: calc(var(--list-threading-hover-offset-extra, 4px) + var(--list-padding-inline-start-fix) + 2 * var(--list-indent));
  }
}

.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5:hover, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6):hover),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6):hover)) > .cm-hmd-list-indent {
  &::after {
    --list-threading-hover-color: hsl(var(--list-threading-hover-color-4, 105, 100%, 45%), var(--list-threading-hover-alpha, 0.4));
    --list-threading-hover-offset: calc(var(--list-threading-hover-offset-extra, 4px) + var(--list-padding-inline-start-fix) + 3 * var(--list-indent));
  }
}

.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6:hover),
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line:hover)):is(:hover) > .cm-hmd-list-indent {
  &::after {
    --list-threading-hover-color: hsl(var(--list-threading-hover-color-5, 187, 100%, 45%), var(--list-threading-hover-alpha, 0.4));
    --list-threading-hover-offset: calc(var(--list-threading-hover-offset-extra, 4px) + var(--list-padding-inline-start-fix) + 4 * var(--list-indent));
  }
}

/* tails */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3, .HyperMD-list-line-2):hover),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):has(~ :is(.HyperMD-list-line-6):hover) {
  &::after {
    content: "";
    position: absolute;
    left: var(--list-threading-hover-offset);
    bottom: 0;
    width: var(--list-threading-hover-width, 1px);
    background-color: var(--list-threading-hover-color);
    height: calc(100% - 0.75em);
  }
  .is-live-preview &:is(.HyperMD-task-line)::after {
    max-height: calc(100% - 1.3em);
  }
  body.list-threading-hover-elbow-bottom &::after {
    height: 0.8em;
  }
  body.list-threading-hover-elbow-bottom .is-live-preview &:is(.HyperMD-task-line)::after {
    max-height: 0.275em;
  }
}

/* in-between lines */
.HyperMD-list-line-1:not(:has(~ .HyperMD-list-line-1 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-2:hover, ~ .HyperMD-list-line-2 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover),
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-3:hover, ~ .HyperMD-list-line-3 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-4:hover, ~ .HyperMD-list-line-4 ~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-5:hover, ~ .HyperMD-list-line-5 ~ :is(.HyperMD-list-line-6):hover),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)) ~ .HyperMD-list-line:has(~ .HyperMD-list-line-6:hover) {
  &::after {
    content: "";
    position: absolute;
    left: var(--list-threading-hover-offset);
    top: 0;
    height: 100%;
    width: var(--list-threading-hover-width, 1px);
    background-color: var(--list-threading-hover-color);
  }
}

/* elbows */
.HyperMD-list-line-2:not(:has(~ .HyperMD-list-line-2 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4, .HyperMD-list-line-3):hover)),
.HyperMD-list-line-3:not(:has(~ .HyperMD-list-line-3 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5, .HyperMD-list-line-4):hover)),
.HyperMD-list-line-4:not(:has(~ .HyperMD-list-line-4 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6, .HyperMD-list-line-5):hover)),
.HyperMD-list-line-5:not(:has(~ .HyperMD-list-line-5 ~ .HyperMD-list-line:hover)):is(:hover, :has(~ :is(.HyperMD-list-line-6):hover)),
.HyperMD-list-line-6:not(:has(~ .HyperMD-list-line-6 ~ .HyperMD-list-line:hover)):is(:hover) {
  & > .cm-hmd-list-indent::after {
    content: "";
    position: absolute;
    left: var(--list-threading-hover-offset);
    width: calc(var(--list-indent) - var(--list-threading-hover-width, 1px));
    top: 0;
    border-bottom-left-radius: var(--radius-m);
    border-bottom: var(--list-threading-hover-width, 1px) solid var(--list-threading-hover-color);
    border-left: var(--list-threading-hover-width, 1px) solid var(--list-threading-hover-color);
    height: calc(0.775em);
  }
  body.list-threading-hover-elbow-bottom & > .cm-hmd-list-indent::after {
    height: calc(100% - 0.825em - var(--list-threading-hover-width, 1px) / 2);
  }
  .is-live-preview &:is(.HyperMD-task-line) > .cm-hmd-list-indent::after {
    max-width: calc(var(--list-indent) - 0.35em - var(--list-threading-hover-offset-extra, 4px));
  }
}

@via-lactea7 why you deleted most of your comments? I'm recovering the discussion from email notifications.

When it comes to vertical adjustment for the bullet point location - there is some guesswork, and I adjusted it to Latin script and default theme with whatever font it uses.

You won't need to touch the top value.
You will need to adjust (increase) height (and possibly width) of elbow and adjust (decrease) height of tail - by adding/subtracting some value in formulas.
Pay attention that there are two different heights depending on the setting body.list-threading-hover-elbow-bottom.

Thanks for the question. I noted this issue, and I think I can add Style Settings variables to adjust this with ease. Will do this later (hopefully soon).

Advice by justanotherjurastudent was misguided. I'm deleting some comments to prevent further confusion.

Is it possible to make it look like this?

Plus that the threading is always active? So I can see every bullet list line even when I'm not actively hovering over or typing on it?

So end result in theory would look like this:

These are made in Paint so they look a little wonky

@David512

Is it possible to make it look like this?

Like what? The first part of the question would benefit from some clarification.

The second part of the question (tree view for lists) seems recurring often.
I answered it above already, but as requests keep coming, I'm more likely to look into it.
It is unhelpful to think about it as the same thing that is just always active - the implementation will be quite distinct.

Like what? The first part of the question would benefit from some clarification.

What I meant is that I can see all the active threads in a bullet list no matter which line I have selected.
So in the picture below I have selected row Test 4 for example. But I can still see the threads for Test 5 and Test 6, even though they have fewer indentations. I hope this is possible without much hassle since they're all under the main Test row?

Ah, ok. So, it is one question essentially.
For a tree view, making it all always visible - all branches in all lists - is the easiest way anyway.
As I said, it is unhelpful to think about it in the same terms as active threads highlight.

Ah, ok. So, it is one question essentially. For a tree view, making it all always visible - all branches in all lists - is the easiest way anyway. As I said, it is unhelpful to think about it in the same terms as active threads highlight.

Alright, I'm really bad at coding and tried to get some help from ChatGPT but it just couldn't solve it haha