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));
  }
}

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