Circular check sytle for todos

Support
1

Using the Enhancement plugin, the style of todos in the markdown editor render circular like this:

1

Is it possible via userstyle.css to have a similar circular style in the viewer pane?

Instead of this:

2

2

I could get close, but the checkmark is lost. Maybe someone else can figure it out. Based on html - How to make checkboxes rounded? - Stack Overflow :

input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

Btw. for the richtext editor this was easier:

ul.joplin-checklist li:not(.checked)::before {
	content: "\f111" !important
}

ul.joplin-checklist li.checked::before {
	content: "\f058" !important
}
1 Like
3

Hi @Marph, thanks for your input. I'll have a play around with your CSS. If I have any luck, I'll post the solution back here.

I like the look of the round check-boxes (I suppose, the round check-circles would be a better description :slight_smile: )

1 Like
4

actually, macOS theme performs this magic for you.

can't tell how it's being done, but maybe this may serve as a hint (or elsewhere on this repo).

1 Like
5

Author of the theme mentioned above here. Iā€™m on mobile, so unable to provide an example but the solution is to use a ::after or ::before pseudo element in stead of styling the element directly.

1 Like
6

Thanks folks, I'll play around around with this. I'll be just chancing my arm, but might learn something in the process.

Cheers

7

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