Minimal Tasks Theme

[sunb-mn]

If you want a more minimal look for your tasks, use the CSS code below. The checkboxes are colored according to their priority and when you hover over emojis, they reveal additional context. Credit goes to SlRvb and esm7's CSS code, since I wouldn't be able to figure it out on my own.

/* Priority as Checkbox Color and Remove the Emoji */

.task-list-item[data-task-priority="high"] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-red);
    border-color: var(--color-red);
}

.task-list-item[data-task-priority="medium"] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-orange);
    border-color: var(--color-orange);
}

.task-list-item[data-task-priority="low"] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-cyan);
    border-color: var(--color-cyan);
}

span.task-priority {
    display: none;
}

input[type=checkbox]:checked {
    box-shadow: none !important;
    border-color: var(--checkbox-border-color) !important;
}

/* Change the Position of Elements */

.markdown-preview-view .task-list-item-checkbox {
    margin-right: 6px;
}

/* Change the Tasks Text Element to an "inline-flex" Element */

.tasks-list-text {
    display: inline-flex;
    max-width: 100%;
}

span.task-description {
    flex: 2;
    min-width: 0;
    width: 350px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Show Only Emojis and Hover to Show Context */

span.task-recurring,
span.task-start,
span.task-scheduled {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
    background-color: transparent;
}

span.task-recurring:after,
span.task-start:after,
span.task-scheduled:after {
    letter-spacing: 0px;
    font-size: var(--font-adaptive-normal);
    line-height: var(--line-height);
    color: var(--tx1);
    margin-left: 5px;
}

span.task-recurring:after {
    content: "🔁";
}

span.task-start:after {
    content: "🛫";
}

span.task-scheduled:after {
    content: "⏳";
}

span.task-recurring:hover:after,
span.task-start:hover:after,
span.task-scheduled:hover:after {
    content: "";
}

span.task-recurring:hover,
span.task-start:hover,
span.task-scheduled:hover {
    letter-spacing: 0px;
    font-size: var(--font-adaptive-normal);
    line-height: var(--line-height);
    color: var(--tx1); /* Change to "var(--text-normal) for other themes" */
    margin-left: 5px;
}

/* Move the Due Date to the Right */

span.task-due {
    width: fit-content;
    margin-left: 5px;
    order: 5;
    font-weight: var(--bold-weight);
}

[claremacrae]

Wow. Amazing. Thank you very much indeed.

I took the liberty of editing your post very very slightly so the credit links work.

[claremacrae]

Pinging @esm7 😄

[esm7]

This is so beautiful, thank you for sharing that!

[Roland53]

Looks great, how do I use it?

[claremacrae]

Find the Styling page in the Advanced section of Tasks docs, and follow the link where it says “we assume you know how to use Obsidian snippets”.

[claremacrae]

Essentially,

1. Copy the styling info into a file with extension ‘.css’
2. Copy that file in to your vault’s ‘.obsidian/snippets’ folder
3. Go to Obsidian -> Settings -> Aopearance
4. Scroll down and turn on the CSS snippet you just added.

[Roland53]

Thanks, it works 👍

[JakobFerdinand]

That is a very great upgrade for the appearance of tasks! Thank you.

A little feature request:
Lot´s of my tasks have a longer description, so most of the content is trimmed away.
Would it be possible to add a hover effect like there is on the scheduled date?

I tried it on my own but I´m a noob in css 😅

[claremacrae]

I don’t know if any CSS wizards could tell you how to do that.

But it wouldn't be something we would spend time building in to the Tasks tool tip, I think. The assumption would be that if the user used a style that truncated the Description, that was the intention.

Also, the tool tip itself doesn’t work well with long text, and I wouldn’t see it as a priority to work around user style choices.

[sunb-mn]

Sorry for the late reply. You can add the CSS below, after span.task-description, to add a hover effect:

span.task-description:hover {
    white-space: normal;
    text-overflow: initial;
    overflow: initial;
}

[JakobFerdinand]

Amazing that is exactly what I wanted! 👍🏼
Thank you!

[kmaustral]

This seems to work better with Obsidian 1.5.

I added this to remove the bullets:

ul > li.task-list-item {
    list-style: none;
}

[claremacrae]

I edited the above to format the CSS

[error451]

Thank you for the css it's so useful 🙏
The only thing that i changed is that i made to not be fixed width of description but responsive (because fixed 350px doesn't looks nice on my mobile)

Instead of:

/* Change the Tasks Text Element to an "inline-flex" Element */

.tasks-list-text {
    display: inline-flex;
    max-width: 100%;
}

span.task-description {
    flex: 2;
    min-width: 0;
    width: 350px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

I'm using:

/* Allow .tasks-list-text to shrink and take up remaining space responsively */

li.task-list-item {
    display: flex;
}

.tasks-list-text {
    flex: 1;
    display: inline-flex;
}

span.task-description {
    flex: 2;
}

Note: I use it in short mode so I'm not sure if it will work properly without it

[Neeqstock]

SUPERB.

Just a thing: this messes up some other plugins views and search views (I'm using "Better Search View" plugin, not sure it's only for that or all search views).

The following is a fix to only target the task list query results:

/* Allow .tasks-list-text to shrink and take up remaining space responsively in the task view only */
.plugin-tasks-query-result li.task-list-item {
    display: flex;
}

.plugin-tasks-query-result .tasks-list-text {
    flex: 1;
    display: inline-flex;
}

.plugin-tasks-query-result span.task-description {
    flex: 2;
}

[solars]

Thank you - the CSS didn't work right for me in query lists, until I added this snippet.