Style tasks that are overdue, due today, or in the future

[claremacrae]

I've had a few days to experiment with the new CSS Styling mechanism in Tasks, and for me, a priority was to make task dates stand out, or be less obvious, depending on when they are due.

This may evolve, but I've already found this be be very useful.

Things to note in the CSS

• By selecting TODO and IN_PROGRESS tasks, we ignore tasks that are DONE, CANCELLED or NON_TASKS.
• This uses hard-coded colours that work well for me on a Light theme. They would need to be adjusted for a Dark theme.
• They adjust all of due, start and scheduled dates. You could always divide the blocks up, to use different colours for the different date types.

Make overdue dates stand out:

/* DATED BEFORE TODAY - for actionable tasks*/
.task-list-item[data-task-status-type="TODO"] .task-due[data-task-due^="past-"] span,
.task-list-item[data-task-status-type="TODO"] .task-start[data-task-start^="past-"] span,
.task-list-item[data-task-status-type="TODO"] .task-scheduled[data-task-scheduled^="past-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-due[data-task-due^="past-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-start^="past-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-due[data-task-scheduled^="past-"] span {
    color: var(--color-base-60);
    background: rgba(255, 255, 0, 0.3);
    border-radius: 10px;
    padding: 2px 8px;
}

---

Make things for today stand out:

/* DATED TODAY - for actionable tasks */

.task-list-item[data-task-status-type="TODO"] .task-due[data-task-due="today"] span,
.task-list-item[data-task-status-type="TODO"] .task-start[data-task-start="today"] span,
.task-list-item[data-task-status-type="TODO"] .task-scheduled[data-task-scheduled="today"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-due[data-task-due="today"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-start="today"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"] .task-scheduled[data-task-scheduled="today"] span {
    color: var(--color-base-60);
    background: rgba(229, 157, 203, 0.5);
    border-radius: 10px;
    padding: 2px 8px;
}

---

De-emphasize future dates - styling the whole line:

Notice how the selector for this doesn't just highlight the date emoji and value, it highlights the whole line.

/* DATED IN FUTURE - for actionable tasks */

.task-list-item[data-task-status-type="TODO"][data-task-due^="future-"] span,
.task-list-item[data-task-status-type="TODO"][data-task-start^="future-"] span,
.task-list-item[data-task-status-type="TODO"][data-task-scheduled^="future-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"][data-task-due^="future-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"][data-task-start^="future-"] span,
.task-list-item[data-task-status-type="IN_PROGRESS"][data-task-scheduled^="future-"] span {
    color: var(--color-base-60);
    background: var(--color-base-30);
    border-radius: 6px;
    padding: 1px 1px;
}

In a future version, I might remove the background line, as I feel it attracts more attention to future tasks than I had intended.