[feature request] Show bullet threading on hover

[ChangqingW]

I was wondering if it is possible to show bullet threading when hovering the block / bullet, instead of only when the block is active.

[PixelTux]

Sure! To see how it may appear, go to Settings -> General and then Edit custom.css. Add the following:

/* Block bullet path should only show in a nested block */
.ls-block {
    /* Fix for headings like h1, h2 etc */
    /* Basic "curve" */
    /* Fix multi-line blocks with children */
  }
  .ls-block .bullet {
    background-color: var(--ls-block-bullet-active-color);
    box-shadow: 0 0 0 1px var(--ls-block-bullet-active-color);
  }
  .ls-block div.block-control-wrap {
    position: relative;
    height: 26px !important;
  }
  .ls-block > .items-baseline {
    align-items: initial;
  }
  .ls-block:not(:hover) .bullet {
    background-color: var(--ls-block-bullet-color);
    transform: scale(1);
    box-shadow: none;
  }
  .ls-block:not(:hover) > .items-baseline {
    align-items: baseline;
  }
  .ls-block .ls-block > div > div.items-center::before {
    pointer-events: none;
    content: "";
    left: calc(var(--ls-block-bullet-threading-width) * -1);
    right: 20px;
    top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
    bottom: 50%;
    /* shift left 1px for border */
    position: absolute;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
    border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
    border-bottom-left-radius: 10px;
  }
  .ls-block .ls-block:hover > div > div.items-center::before {
    border-color: var(--ls-block-bullet-active-color);
  }
  .ls-block .block-children > .ls-block::before {
    pointer-events: none;
    content: "";
    top: -1rem;
    bottom: 0;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
    left: calc(var(--ls-block-bullet-threading-width) * -1);
    position: absolute;
  }
  .ls-block .block-children:hover > .ls-block:not(:hover)::before {
    border-color: var(--ls-block-bullet-active-color);
  }
  .ls-block .block-children:hover > .ls-block:hover ~ .ls-block::before {
    border-color: transparent;
  }
  .ls-block[haschild] > div > .block-content-wrapper::before {
    pointer-events: none;
    content: "";
    top: 12px;
    bottom: 0;
    left: -21px;
    position: absolute;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
  }
  .ls-block[haschild]:hover > div > .block-content-wrapper::before {
    border-color: var(--ls-block-bullet-active-color);
  }
  
  :is(.embed-block > div, .embed-page) > div > div > div > div.ls-block > div > div.items-center::before {
    border-color: transparent !important;
  }
  
  @media (max-width: 640px) {
    .ls-block[haschild] > div > .block-content-wrapper::before {
      left: -11px;
    }
  }

This is just a workaround and can definitely be improved, but take a look and let me know your thoughts! 😊