My custom CSS for Task Management like "Todoist"

🌈Share & Showcase
1

Thank you, developers, for the date range feature!
I got motivated, so I have written a custom CSS like Todoist I used to like.
Note that if you use this, the image URL design will be changed.
d(>_< )

20200305_Smaple

.Node-checkbox:before {
    border: 2px solid #636363;
    background: none;
    opacity: 0.4;
    border-radius: 30px;
}

.Node-checkbox:after {
    border: 3px solid #cacaca;
    border-radius: 60px;
    width: 16px;
    height: 16px;
    left: 0px;
    top: 0px;
    transform: none;
    -webkit-transform: none;
    background-color: #cacaca;
}

.is-mobile .Node-checkbox:after {
    left: 6px;
}

.Node.is-checked .Node-content, .Node.is-checked .Node-renderedContent, .Node.is-checked .Node-note, .Node.is-checked .Node-renderedNote {
    color: black;
    opacity: 0.2;
}

.is-smallFont .Node-contentContainer .node-inline-item, .is-smallFont .Node-contentContainer .node-inline-code {
    font-size: 12px;
    background-color: rgba(173, 220, 255, 0.4);
    padding: 1px 5px 0px 3px;
    border: none;
    border-radius: 30px;
}

.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue {
    background: rgba(255, 0, 0, 0.16);
    border: none;
    padding: 1px 5px 0px 3px;
}

More From My Topics

5 Likes
2

Looks nice!

3

Thanks!

4

Thanks for this, looks really great, particularly love your round checkboxes, have added it to my CSS :slight_smile:

1 Like
5

(￣ー￣)ｂ

1 Like
6

Nice css! My dates doesent get blue or red. What do i do wrong?

image

1 Like
7

Hi Bullen, maybe you need to activate the setting?

image
image864×364 12.5 KB

8

Thank you @Craig_Oliver!

9

Hi all,

Just to add to this, by modifying this one:

.Node-checkbox:before {
border: 2px solid #636363;
background: gold;
opacity: 1;
border-radius: 30px;

}

i.e. the background colour to gold / red or whatever, you can get a pretty nice ‘high priority / focus’ function (if like me you don’t really use checkboxes otherwise)

edit: e.g.

image

2 Likes