Styling a bullet list in reading view

Custom CSS & Theme Design
1

I have a custom css snippet made by very slightly modifying another snippet found in this post on the forum: Style Bullets in Lists by Level.

Basically it changes the style of bullets in an unordered list based on the indentation.
It works great, but it works only in live preview mode and not in reading mode.

image
image773×468 9.51 KB

I’m not that proficient in CSS and I can’t understand how to select the elements to make this work also in the reading view.
If someone have already done this or understands CSS a bit better and can explain to me what is the correct selector it would be much appreciated

2

There’s a slightly older version here covering Live Preview and Reading views:

Something more recent to cover Reading view:

ul:not(li > *) > li > .list-bullet::after { } /* level 1*/
ul:not(li > *) > li > ul > li > .list-bullet::after { } /* level 2 */
ul:not(li > *) > li > ul > li > ul > li> .list-bullet::after { } /* level 3 */
...

Combining it with Style Bullets in Lists by Level - #2 by rmdelatorre, you end up with the below. You could give that a try.

:root {
    --bullet-new-color: purple; 
}

/* level 1 - large bullet */
ul:not(li > *) > li > .list-bullet::after,
.HyperMD-list-line-1 .list-bullet:after {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: var(--bullet-new-color);
} 

/* level 2 - hyphen */
ul:not(li > *) > li > ul > li > .list-bullet::after,
.HyperMD-list-line-2 .list-bullet:after {
    height: 1px;
    width: 7px;
    border-radius: 0%;
    background-color: var(--bullet-new-color);
} 

/* level 3 - hollow bullet */
ul:not(li > *) > li > ul > li > ul > li> .list-bullet::after,
.HyperMD-list-line-3 .list-bullet:after {
    height: 4px;
    width: 4px;
    background-color: transparent;
    border-color: var(--bullet-new-color);
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
} 

...
2 Likes
3

thanks, I had not found that post

4

I just tried this and it works, I have been able to go up to level 12, then I stopped, I don’t think I’ll ever get to level 12.

Edit: Maybe this could help someone finding this post later on.

These selectors seem to correctly change the color of the number in the order lists:

/* Live preview */
.markdown-source-view.mod-cm6 .HyperMD-list-line .list-number {
        color: #946abfef;
}

/* Reading mode */
ol > li::marker {
        color: #946abfef;
}