add this to your custom.css or use it with the Stylus extension for web browser.
/*==================================================*/
/* === highlight current path by cannnibalox v0.2 ===*/
/*==================================================*/
.ls-block .bullet{
background-color:#dd0707;
}
.ls-block:not(:focus-within) .bullet{
background-color:var(--ls-block-bullet-color);
}
PS : you can replace .ls-block:not(:focus-within) (this works when a block is selected) with .ls-block:not(:hover) (will trigger highlight on hover) for a more interactive experience.
. code has been updated in the first post to avoid unwanted highlights inside the linked refs block
. optionnal highlights for tree lines (needs a bit of tweaking if you’re using a custom theme, and lines are full height) - this would be better using javascript
result
under the last line .ls-block > .block-children (...), add border-left-width: 2px; (or change it to the width you want)
here’s the full script I use with hover instead of :focus-whithin (meaning that the bullets and path are highlighted when hovering, if you prefer to highlight on select, then replmace all :hover by :focus-whithin
/*===================================================*/
/*= highlight current path by cannnibalox v20210220 =*/
/*====== option: (:hover) to (:focus-whithin) =======*/
.ls-block .bullet{
background-color:#dd0707;
}
.ls-block:not(:hover) .bullet{
background-color:var(--ls-block-bullet-color);
}
/*--- highlight indentation line - remove if not useful ---*/
/*---- tweak left: and top: offset to match yout theme ----*/
.blocks-container > div:not(:first-child) .ls-block:hover > div:first-child .bullet:before{
content : "└─";
color:#6e2222;
display: inline-block;
left: -20px;
top: -10px;
width: 30px;
position: relative;
}
.ls-block > .block-children:hover {
border-left-color:#6e2222;
border-left-width: 2px;
}
```
Thanks for the code! I am currently also using your code of “colorful indention” by changing the block-children [level="n"].
There will be overlapping between the original colorful tree line and the highlighted line. Can I temporarily remove the original colorful line when it is highlighted? Or just paint the highlighting color on top of the original lines to fully hide them.
can’t check now, but I think there was some opacity involved, you should be able to tweak the opacity to overlap the highlighting to hide what’s underneath (you’ll probably need to tweak the alignement too). I’ll try to take a look this w.e.
First thanks a lot for this,
I am not sure what it is but sometimes it “breaks”, if u look at the image the first level “line” is not highlighted with “└─” it happens (I think) when the first line of the page is a [[link]]
Hey @cannibalox I’ve been using this awesome hack since you announced it here. I was checking through your github to find the latest version of this css (as well as to keep updated with improvements)
can you point me in the right direction to the latest code on this
I’ve just pushed a commit to sync github with my local versions, thanks for the reminder. not much changes though, maybe you’ll need to tweak the margins/paggind if you use a custom theme (the default values are working for the theme logseq-darker-hpx)
