Minimal Outline Styling

Hi there. I use Minimal Theme and I would like to know if there is a CSS snippet that could change the outline pane.

Currently, the whole heading in the outline pane is highlighted:

Is a CSS snippet possible to modify the outline pane to display headings with a line on the left side instead of highlighting the whole heading? Ideally the line would increase in weight depending on the active header.

I think this would be cleaner and also better match other Minimal styling elements, such as the blue underline of sidebar elements, as shown.


You could start with something like this:

.workspace-leaf-content[data-type="outline"] {
    color: var(--nav-item-color-active);
    background-color: transparent;
    border-left: 1px solid;
    /*border-radius: 0;*/

CleanShot 2024-05-11 at 09.55.17

This is including the border-radius: 0:

Screenshot 2024-05-11 at 9.55.41

1 Like

Well, I straight up LOVE THIS.

Thank you so much!! :slight_smile:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.