Better visual signposting of collapsed blocks

Questions & Help
1

I often fail to spot collapsed blocks because the visual signposting of collapsed blocks is rather subtle. You have a slight halo around the bullet point, as below.

Is there way to make these more salient? I am thinking of two possibilities, firstly to make the halo brighter / a different colour, and secondly, to add some bread crumbs (preferably brightly coloured) at the end of the collapsed block.

Could this be done by CSS? I can’t seem to find any themes which provide better signposting for collapsed blocks, so I suspect not.

image

1 Like
2

Either:

  • set css var --ls-block-bullet-border-color
  • customize css rule .bullet-container:not(.typed-list).bullet-closed
    • e.g. background-color
1 Like
3

Thanks. Sorry, I am not a CSS expert, and I am finding it hard to follow this. So far, I have

--ls-block-bullet-border-color:#f5b505
  
  .bullet-container:not(.typed-list).bullet-closed { background-colour: #f5b505 }

This is in my custom.css file. It does not do anything.

I do not understand the dot notation, e.g. before “bullet-container”, as this does not seem to be part of standard .css.

4

Accepted solution:

.bullet-container:not(.typed-list).bullet-closed {
    background-color: #f5b505
}

Don’t use both at the same time. Remove the variable (i.e. the first line) and change background-colour to background-color

2 Likes
5

Oh superb! Thanks very much - works a treat!

6

This is really helpful – thanks. Just wondering if there’s a way to maybe “highlight” the whole line where subordinate bullets are collapsed for when my eyes haven’t woken up yet?

And/or, so I learn something on the way, I know how to inspect elements etc. when using a browser to find out which CSS selector to change in a web page – is there a similar technique when using Logseq?

7

Welcome. Logseq is based on Electron (which is a browser), so just press Ctrl + Shift + i

2 Likes
8

Superb. Thank you @mentaloid

9

How to change the color of the bullet itself (not the background) if collapsed ?

10

Welcome. For the color of the bullet itself, customize attribute background-color inside a css rule .bullet-container:not(.typed-list).bullet-closed span.bullet

11

Perfect ! Thank you.

12

Hi! Thank you for this post! It was difficult for me to see when the block was collapsed.
In case someone, like me, wants the background color to follow the color code of the theme I tweaked the code to look like the link color:

.bullet-container:not(.typed-list).bullet-closed {
    background-color: var(--lx-accent-11,var(--ls-link-text-color,hsl(var(--primary)/.8)));
}

You can change it to --lx-accent-12 if you want a lighter color.

1 Like