Styling a bullet list in reading view

[lilyofthealley]

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.

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

[ariehen]

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

CSS Snippet not being applied to Reading View

(As you can see) the .markdown-source-view.mod-cm6 selector here is applying styling to the editing (Live Preview) mode only. To cover reading mode, you’ll need to add selectors for that as well. This seems to work, the only caveat being that if you go past six levels, all the bullets in reading mode will pick up that last “Small bullet”. If you can live with that, this should work. [CleanShot 2023-08-03 at 14.04.10] .markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after { /* B…

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;
} 

...

[lilyofthealley]

thanks, I had not found that post

[lilyofthealley]

@ariehen

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 */

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;
}

[visalm]

Hi,

How to extend this to the text under the 1st level li?

I want to make the text under 1st level bold and export to pdf. I have a lot of 1st level text, and unfortunately I don’t have enough time to invest in making each item bold manually.

As the other users (this post and others) have pointed out, there are no selector classes in the reading mode, which can be leveraged while exporting to pdf.

[visalm]

Found a solution that works for me here

ul > li {
    font-weight: bold;
}

ul > li li {
    font-weight: normal;
}