Tasks - Compact styles (monochrome icons, tooltips, priority as colour)

[replete]

Preview

(pictured using Minimal Theme)

Updated with new priorities (highest/lowest) and fixed for default theme:

(pictured with default theme)

Overview

Probably not everyone's cup of tea, but after making a monochrome icon generator tool for Tasks, I had a quick go at a compact interface. @sunb_mn on Obsidian's Discord made the original version this is based on, which was shared at just the right time as I was planning to do something like this. I've updated this thread with new priorities and fixed for default theme.

If you have minimal theme and use this, issues can be raised on my repo, for default themes I'm not really keen on supporting it as I only use Minimal Theme.

This is the full CSS for the solution above, updates will occur within my working snippets repo (based on Minimal Theme) I'm sharing here so others can benefit from it.

I'll probably make another compact two line version with mono icons which would probably be more usable.

Note: The edit icon was replaced by an inline SVG image within the CSS, so switching out the webfont at the start of the script below will not affect it should you modify this...

CSS Snippet

Included from origin 11 Jun 2023:
https://github.com/replete/obsidian-minimal-theme-css-snippets/blob/main/Tasks%20-%20Compact.css

/*
    Tasks: Compact
    Colour-based priority status. Show dates on hover. Monochrome emojis.

    Original credit to @sunb_mn on Obsidian's discord server for 
    the basis of these styles which saved me a bit of time:
    https://discord.com/channels/686053708261228577/744933215063638183/1108617092137226320
    
    https://github.com/replete/obsidian-minimal-theme-css-snippets
*/

/*! 
Included icons were modified from https://lucide.dev
License reproduced from https://lucide.dev/license

ISC License
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
@font-face {
    font-family: 'TasksMonoEmojis';
    src: url('data:@file/octet-stream;base64,d09GMgABAAAAAAigAAsAAAAAFDwAAAhQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHII0BmAAhjIKlESRPgs+AAE2AiQDeAQgBYRqB4FSG7ERURRTn+xnQku4P6KzXOMyqnXpGLBdz7XMv/0vGIOvZdDav87c7u0hfSBSAQSHwA5VNIOuSupYyFa/qZzaBgAdtwoAGKHsSeQAmySzTFBCeRIVAAP4LB2DpCMAHngu929aa+qBp1uk+F50z8N4WiQBRYHFPS/bVvzft/Zqb5JMiFV0NnTREQZcnMPJflq4CxBtCD6oYFkCybpqVmWHKFQ9sdB9vsJXqKoKL7u/d/ZSU5g413AsNZt8lxP9LUGArc8o2mzSRhikF8s9dlBMAgCAEK5lsR7VgER3hCQBzI/td4ZUlwkG7cQD/KBRQg6pUiJAgi9AksYSiPhCoVgiRZLLEApUKxfwCKZcHYtSqUqgTDlB0k1OETLezFROMqAvVVDA9IpctbyCzRI5xuPL9jc36MpVC5Xjt6G4UTjmq8CX9YQimUKZCjKs5TWggxzq+wDYhZ8vzlaEsYBGj8CeYM5SpgePWP43XgE8M09NYgC+AlgAHSAAXQAJvCAA+EQgoItgAy+kWwByIUFZzsAE4+XPvi3/pVVvvV0CLKeDsnDxZ9/ItoQuyu3CFWq06IruiQSqRTzBJE7FcplrEpXCCf6P7atistgcLjAF452RJUd2nMlWcQ4DeM3dIu+vwBJc2SwQX81d7kM1roQIV4GHqyHAtZDiOihwPcS4EXLcBBluhgrcAgluhUrcASHuhDLcBeW4G3zca1UlN97jYSY3PuJhJTc+42EntybxcJJbjza4+HqyGEB82wEN3wV2QOCbbQckvrl2QMc3zw4o/HyTARiRQA0AGHGMhMgB5AqAJa9iBNK2UyRpHOThCaxoUz95wbDWPFF5UsIZ2pJXlIfdIukvLgknRx1/cOEd4AavZm9IEqg1RaVEF3+9EWUcp+lACjj2/uJH0tvfq3PxPhAHxx/uD/EP1BN57N7Bn3Q/T4DJFjimnGBtfQLZ0eHteDDzLj7MTtr24l9vBOkUpSaCh+v+POIs3vnkHjDuT6dcLLjVeg25Jozn38xV93Dt7fei+amvZd8VTwtO3S0GXn8jVzhNquDb+IfjnTQCznnNIbcrXiAdON1r1KEO6i84c/nVj+LHMkHkxuPHU/gV0iYW9EbfwGzk/bG2ywiYDOM38wOIviKBIpWsNdzZWXP8+mCpoVLDyyYiN/IMaPl1eGcdMuMe5qlbU334bQv2KQ5ro1u883YccARpxpJL987VmVN5/GGK6T2d5nGaTu6Lcoq7buzBdtaqT+SdSInUn7p0MX8ch0kSJnfeah15HPSuu6A5gD8+atetVBFL7oR/gnw4F5nh/hn8XisWn7gRuVWAzsYt4fRXvPRDiOlLVHCQoSYaksniHh6YMM8IXBGmThAKCBH6IMXcPl6EBBNcTU+3hvsl12vSdLsEPoEwIxYShJLQqJzbJ/iEr4GA/BDtpyFUuNf/JYRAe/x7IB/QrhZlEPt/dg7bhg5W76maSrYmGxsn6wYVo+qkotd+LHZNbHQiAVwajzybede/3SyXcS4q4SRH8lv81UOdSIc29xPem7JhBWrgjHV5Mt2pNsi0dj7SqenWp7rXf8o4PsZI3cfzcVyPzQWaws17GY+0VBAZP+8fdgyZqg9U7QH8Xd/lXc4k+5LWNcjrWkW/TS2++et3vLdxqsH2+vUX1lG0ovxotjxXiZmIch7kCQRh1gwL3gWpVFaGmWFiWJQu6lOtwUostuW4PEU/vzl2a03rt6pz/L/QbCbG/JMFAzAsc6VgKWidpUE28uv04pu/vi9nShinsr67fneYopTlR3PkOUrMSFQQFZ5gQMq6w5YGAz9shjasBa1lpzPNM21t7W0y1gxLZtBLWbBeL2NJZ0Lpv9inBn750jatpesyTbanCQLChBripeyhIJB/noccpw1I0gKzVEuls0Gglk3NLAjd+RlWxMxvvA+gpwTn44fabnHmNCduB84PxvP/6+f++m54I/JnM00tBaklddSqTtlMMMe2pMNYMH74u9mfWV2KiJBSJg2h0P2qLe3Vlgf6ELgPv/i7gBH5+K5d6qe70PKYWX1mZZlf1fkeQr51vgYdrRqqPHSuaahq9KUV7ehEl/RSvOTDYEwzVMKSy8fvXKrrbd7S1KRq7n1iRTs60aV40txLlYKqFyy43gTLV7Y5v0AAwp09kREl+Jbmr78ZHb2/w6en778pnjtTxTQNGFYlRlyhr45IuX9VXOTUKp/wN2o2fXLlytVAETvw86oIOq/Uo8jlwI4fQOmvKngEAKiB/q/YaVVV2xUgFmqXmyN4QJP2hSr3pzpV9YicAgD9sIi0VMFNqykgdhPWP67jtvrHRAb3f9MxfuNZJaKnb1K7VsCkgeOlNKmTwiqdAFGYUwOBNBdiXtogbqLe8yyeTI0bkACatDkDSsyGfiBtNgDQkYbgdZgQyEFiM9M5hpgSGM1snWaR8laJ/WIwtkA1LgHT+J4yocYrkPiT6XL/MaUmsJltUVBjHC3BkW9e3WATZsdkNsxscv/c72aSzVKf3v9ErU0t0g2f51jq9qFtHg+yiM+/usR1af4/efAtnbqIw3UPQQCm4WZZF7IJxv7rkLHBmJm49TJAeVlpuGg7UUz1M3A50aazA+nXo48OCm0vUljDw0A/tUIQBFM+qDZJhgci16iXY2wgk6rgRGnlBgPZJpdmU+rMnibrClyaA1uvXmviniYrK2mNxiqQehNqAo2CkjoVDZq0aNOhS48+A4aMGDNhyow5C5axnBWsZBWrWcNaiHy3Iem///jilIrV+bgJOjEnfpHFxFi3+uO0LyoWlfGXlqEhaQlJxeqI3ASNjIjiz++lgS7qaKKdKK200Eg3PbQRo58aAAAA') format('woff2');
    unicode-range: U+1F4C5, U+1F501, U+1F517, U+1F53A, U+1F53C, U+1F53D, U+1F6EB, U+23EB, U+23EC, U+23F3, U+2705, U+2795;
    /* 📅, 🔁, 🔗, 🔺, 🔼, 🔽, 🛫, ⏫, ⏬, ⏳, ✅, ➕ */
    /*! Generator: obsidian-tasks-custom-icons v1.0.3 https://github.com/replete/obsidian-tasks-custom-icons */
}

span.tasks-list-text,
.cm-line:has(.task-list-label) [class^=cm-list-] {
    font-family: 'TasksMonoEmojis', var(--font-text);
}

span.tasks-list-text,
.cm-line:has(.task-list-label) [class^=cm-list-] {
    font-family: 'TasksMonoEmojis', var(--font-text);
}

/* Priority as colour */
.task-list-item[data-task-priority=highest] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-red);
    border-color: var(--color-red);
}
.task-list-item[data-task-priority=high] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-orange);
    border-color: var(--color-orange);
}
.task-list-item[data-task-priority=medium] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-yellow);
    border-color: var(--color-yellow);
}
.task-list-item[data-task-priority=low] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-cyan);
    border-color: var(--color-cyan);
}
.task-list-item[data-task-priority=lowest] input[type=checkbox] {
    box-shadow: 0px 0px 1px 1px var(--color-cyan);
    border-color: var(--color-cyan);
    opacity:0.6
}
.task-list-item[data-task-priority=lowest] .task-description {
    opacity:0.6
}
.task-priority {
    display: none;
}
input[type=checkbox]:checked {
    box-shadow: none !important;
    border-color: var(--checkbox-border-color) !important;
}

.task-description {
    margin-right:3px;
}

/* Show dates hover */
:is(.task-recurring, .task-start, .task-scheduled, .task-done, .task-created, .task-due) {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
    background-color: transparent;
}
:is(.task-recurring, .task-start, .task-scheduled,.task-done, .task-created, .task-due)::after {
    letter-spacing: 0px;
    font-size: var(--font-adaptive-normal, 1rem);
    line-height: var(--line-height);
    color: var(--tx1, var(--text-normal));
    margin-left: 3px;
}
.task-recurring::after {
    content: "🔁";
}
.task-start::after {
    content: "🛫";
}
.task-scheduled::after {
    content: "⏳";
}
.task-done::after {
    content: "✅";
}
.task-created::after {
    content: "➕";
}
.task-due::after {
    content: "📅";
}

.plugin-tasks-query-result [class^=task-]::after {
    cursor: default !important;
    opacity:0.6
}

:is(.task-recurring, .task-start, .task-scheduled, .task-done, .task-created, .task-due):hover::after {
    opacity:1;
}

:is(.task-recurring, .task-start, .task-scheduled, .task-done, .task-created, .task-due):hover span {
    position:absolute;
    display:inline-block;
    flex-grow:1;
    letter-spacing: 0px;
    font-size: var(--font-adaptive-small, 0.8rem);
    line-height: var(--line-height, 20px);
    color: var(--tx1, var(--text-normal));
    background:var(--bg2, var(--background-primary));
    border-radius:4px;
    outline:1px solid var(--tx3, var(--text-faint));
    margin-left:10px;
    padding-left:2px;
    padding-right:4px;
    min-width:7rem;
    width: fit-content;
    pointer-events:none;
    z-index:1000;
    box-shadow:2px 2px 3px var(--bg2, var(--background-primary)), 0 0 7px var(--bg2, var(--background-primary));
    line-height:1.2em;
    margin-top:1.5rem;
    margin-left:2px;
}

/* File backlink */
.plugin-tasks-query-result .tasks-backlink {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
    background-color: transparent;
    width:1.5rem;
    height: 1.5rem;
    align-self:baseline;
}

.plugin-tasks-query-result .tasks-backlink::before {
    content:'... ';
    font-size: var(--font-adaptive-normal, 1rem);
    line-height: var(--line-height, 1rem);
    color: var(--tx1, var(--text-faint));
    transform: translateX(6px);
    display:inline-flex;
    opacity:0.6;
}

.plugin-tasks-query-result .tasks-backlink:hover {
    font-size: var(--font-adaptive-normal, 0.8rem);
    line-height: var(--line-height, 1rem);
    letter-spacing:0;
    width:inherit;
}

.plugin-tasks-query-result .tasks-backlink:hover::before {
    content:''
}

/* Edit button */
.tasks-edit {
    background-color: var(--tx1, var(--text-normal));
    -webkit-mask-image: url('data:image/svg+xml,<svg enable-background="new 0 0 24 28" viewBox="0 0 24 28" xmlns="http://www.w3.org/2000/svg"><path d="m22 12c-.3 0-.5-.1-.7-.3l-4-4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l4 4c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z"/><path d="m2 28c-.3 0-.5-.1-.7-.3-.3-.3-.4-.6-.3-1l1.5-5.5c0-.2.1-.3.3-.4l11.5-11.5c.4-.4 1-.4 1.4 0l4 4c.4.4.4 1 0 1.4l-11.5 11.5c-.1.1-.3.2-.4.3l-5.5 1.5c-.1 0-.2 0-.3 0zm2.4-6-1 3.6 3.6-1 10.6-10.6-2.6-2.6z"/></svg>');
    -webkit-mask-size: 85%;
    -webkit-mask-position: 0 -3px;
    -webkit-mask-repeat: no-repeat;
    transform: translate(0,-1px);
    opacity:0.6;
    margin-left:5px;
}

.tasks-edit:hover {
    opacity: 1;
}

.plugin-tasks-query-result .tasks-backlink {
    float:right;
}

[claremacrae]

Thank you very much for sharing this!

/cc @esm7 - more exciting use of your work! ❤️

[replete]

No worries, thanks for making the Tasks plugin 👍

[esm7]

Wow, thank you for sharing!

[timrosenberg]

For some reason, I am not getting the three dots for the link. The link emoji is hidden until I mouse over it. Any ideas?

[claremacrae]

Moved to #1974

[claremacrae]

@replete I can confirm I have the same problem on Mac - there's lots more info in #1974

I'd really appreciate if you could review and add any suggestions over there - thanks!

[replete]

@claremacrae Just seen this notification, up against it next couple of days but will definitely have a look, just need a good tasks kitchen sink markdown document, not surprised to see some edge cases as my original solution used a simple usecase, probably wont take much for me to fix. Phil

[claremacrae]

@claremacrae Just seen this notification, up against it next couple of days but will definitely have a look,

just need a good tasks kitchen sink markdown document, not surprised to see some edge cases as my original solution used a simple usecase, probably wont take much for me to fix.

Sure - there are lots of sample files in this vault:

https://github.com/obsidian-tasks-group/obsidian-tasks/tree/main/resources/sample_vaults/Tasks-Demo

This is what I used to create the screenshots in the Styling docs:

https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/Styling/Sample%20Tasks%20for%20Styling%20Documentation.md?plain=1

[replete]

@timrosenberg I've responded to the other thread which can now be closed, and updated the OP in this thread with updated solution.

[piridium]

Thank you @replete! This is a very good starting point for some custom modifications!
However, the example is missing custom icons for the 'highest' and 'lowest' priority levels and I can't figure out, how to add them. Do you have any advice?

[claremacrae]

Steady on! 😄 Those new icons were only added to Tasks yesterday...

[piridium]

Haha, I see. And here I was thinking, "Strange, I actually remembered it as complete, but there are missing states..." Now I know...

[piridium]

I just learned how to create custom icon snippets with @replete's fantastic https://github.com/replete/obsidian-tasks-custom-icons
Thanks for sharing!

Replace the three lines with

    src: url('data:@file/octet-stream;base64,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') format('woff2');
    unicode-range: U+1F4C5, U+1F501, U+1F53A, U+1F53C, U+1F53D, U+1F6EB, U+23EB, U+23EC, U+23F3, U+2705, U+2795;
    /* 📅, 🔁, 🔺, 🔼, 🔽, 🛫, ⏫, ⏬, ⏳, ✅, ➕ */

[replete]

@piridium I've just added highest and lowest glyphs to the repo

Looking at the other icons/bugs now

[replete]

Thank you @replete! This is a very good starting point for some custom modifications! However, the example is missing custom icons for the 'highest' and 'lowest' priority levels and I can't figure out, how to add them. Do you have any advice?

Sorry I just read this, seems like you might have figured it out, but if you look at my last commit you can see adding the icons was as straightforward as naming some new SVGs appropriately: u1F53A-highest.svg and u23EC-lowest.svg

[replete]

I've updated the original post with an updated version:

• Added new priority icons, highest, lowest
• Fixed for themes other than Minimal Theme (I totally forgot about this, this is why icons/text were invisible)
• Updated task priority as color: red = highest, orange = high, yellow = medium, cyan = low, dimmed cyan = lowest

PSA: Feeding your baby is a high priority

[riekusr]

My dots are not alighted to the right but come in closer down the task get? Any thoughts?

[replete]

What theme?
What version of obsidian?
Any CSS snippets?

My guess is outdated obsidian or a snippet conflict

[claremacrae]

Also, what Obsidian installer version. (See 'About Obsidian').

If these snippets use the :has selector, this bit from the Tasks docs is important:

The CSS :has selector is available with Obsidian installer version 1.1.9 and newer.

[riekusr]

I am on Version 1.3.5 (Installer 1.3.4)

Minimal Theme

Limited plugins installed, tasks, dataview, excalidraw.

Edit:
Just got this resolved by disabeling minimale theme styling plugin and style plugin and had to restart obsidian, put it in darkmode again and it works...

Really love this thanks!

[PeterBeckley]

Thank you for putting together this CSS. I made a small addition for my use case that some may like. I wanted to know when a task was overdue so I changed the start, scheduled, and due icons if the date is in the past.
EDIT: I updated the CSS to limit which status' it apply to. It seems that all tasks have a data-task-due of "past-" regardless of if they were ever actually past due so you have to limit which status types you're targeting.

/* Visually flag overdue actionable tasks*/
:is(.task-list-item[data-task-status-type="TODO"] .task-start[data-task-due^="past-"], .task-list-item[data-task-status-type="TODO"] .task-scheduled[data-task-due^="past-"], .task-list-item[data-task-status-type="TODO"] .task-due[data-task-due^="past-"], .task-list-item[data-task-status-type="IN_PROGRESS"] .task-start[data-task-due^="past-"], .task-list-item[data-task-status-type="IN_PROGRESS"] .task-scheduled[data-task-due^="past-"], .task-list-item[data-task-status-type="IN_PROGRESS"] .task-due[data-task-due^="past-"])::after {
    color: #BA1A1A;
	opacity:1;
	text-shadow: 0px 0px 3px #f00;
}

[nestor50]

Hi @replete I like very much your compact style as I found the default rendering a bit visually confusing!!! Unfortunately today I switched from dark to light version of minimal theme and the pencil and paper icons are almost invisible, how can I do to modify your css to have the two icons in a way they're visible in light mode?
Thanks!

[replete]

@nestor50 I would over-ride for the dark/light theme. There is a css class on the body that is something like minimal-light-theme so you could write a new rule using that as a selector scope and perhaps use filter:invert() - off the top of my head. Not using this at the moment

[replete]

@nestor50 how am I to interpret your 'laugh' emoji?

[nestor50]

Sorry @replete it was meant to be a thumbs up emoji, I didn't realize that it was a smile. And I don't understand why are you saying I "deleted the question and response while I was responding to you" in the message below, I didn't do anything apart except putting a smile instead of a thumbs-up. I think it's just a misunderstanding!

[rbennett00]

Thanks so much for this! I was wondering if it's possible for me to adapt this to support the following scenario:

I typically associate a Task to a project by adding "📋[[Project name]]" to the task description. I'd like to collapse that information along with the other fields you're collapsing in compact view. This is how it currently renders in short mode -

So ideally it would just display the clipboard emoji and then show the project name/link on hover.

Is this possible using the snippet as-is? If not, any ideas how one could add their own custom "fields" using a prepended emoji?

[replete]

I'm not sure you can You cannot currently achieve custom styling of a substring of text within the description. The other elements work because they are wrapped in a containing element which can be targeted by a CSS selector.

[replete]

@nestor50 You deleted the question and response while I was responding to you. I don't appreciate you wasting my time like that

[replete]

@claremacrae

I stopped using obsidian for task management for another piece of software (workflow reasons) and so I'm no longer using Tasks at the moment, and probably not going to maintain the Tasks icon generator tool as I'm not using Tasks anymore.

My thought a few weeks ago, and when I wrote the tool originally, was that 'Icon themes' could serve a future Tasks plugin feature. If this interests you at all I wanted to offer to handover the tool and go through with you - just thought this was worth doing as I've done the heavy lifting and its not being maintained. Pretty straightforward, let me know if this is of interest.

There's a few ways it could be done, just as a backend tool to ship some mono icon themes with the plugin (which just enables a CSS file), or something more clever..

Cheers!

Phil

[claremacrae]

Hi Phil - @replete,

No promises about time availability, but I would definitely be interested in learning about the code, to understand what the future options are.

Please could you email the address in my profile here to set up a session to discuss the code and options? Thanks.

[replete]

Okay Clare, so what I will do then is record a quick 5 min screencast and send you a video URL by email as a starting point. If you wanted to discuss beyond that feel free to reach out.

Phil

[claremacrae]

OK thank you.

[PeterBeckley]

I've updated my version of this CSS to unify the postpone emoji with the rest, and also tweaked my edit/backlink (I don't hide my backlink behind the dots). All the relevant changes are toward the bottom, but you'll have to pick and choose your copy/paste to use it. https://github.com/PeterBeckley/obsidian-stuff/tree/main/CSS

[prismacolorgold]

I've updated my version of this CSS to unify the postpone emoji with the rest, and also tweaked my edit/backlink (I don't hide my backlink behind the dots). All the relevant changes are toward the bottom, but you'll have to pick and choose your copy/paste to use it. https://github.com/PeterBeckley/obsidian-stuff/tree/main/CSS

Thank you for your version. Could you kindly add the ❌ U+274C for cancelled tasks as well?

[replete]

I would happiest if someone would fork that repo and maintain it, in which case I would forward people on

[claremacrae]

Are you interested in transferring ownership of the repo to obsidian-tasks-group and it will auto-forward?

When we chatted about this previously, I got quite a long way in using it, but never had time to fully to develop the design skills to use it for real....

But if it's in a repo I have control over, I can solicit assistance from others, especially when Tasks has new Emojis on the horizon...

[replete]

Hi @claremacrae I'd be happy to, I just tried it but got the 'You don’t have the permission to create public repositories on obsidian-tasks-group' error. Happy to do it over the phone if timing is an issue, I think my details on an email footer.

[claremacrae]

Oh sorry, It's harder than I thought... Do you want to transfer to me first, and I'll transfer it to obsidian-tasks-group.

I haven't forked the repo, so it should work.

[replete]

"Repository transfer to claremacrae requested "

That should work I think?

[prismacolorgold]

Hi @replete, thank you for this project!
I am a window desktop / android user, and seems like the icons don't work on android. Would you have any clue?

[replete]

What version of Android? If your OS is out of date you might have a Webview version older than 109 which was when :has() was introduced.

[prismacolorgold]

thanks for asking
windows 10 is ok
android 12 and 14 (the device that has 14 is ok)
both obsidian on android are v1.5.12 (134)

also, I am not using any themes

[replete]

Yep, this is probably due to outdated version of Chrome Webview and the probably CSS using features like has() or is() introduced in 109 ish IIRC. On Android WebView versions don't always match Chrome version, and the webview can only be updated by system updates.

This could be fixed by writing CSS without these features, but someone will have to do it, so I'd raise this on the new repo mentioned, but it wont happen until there's a maintainer

[replete]

but if you wanted to fix this yourself, its probably the use of is()

[claremacrae]

Just to note that this:

• https://github.com/replete/obsidian-tasks-custom-icons

is now at:

• https://github.com/obsidian-tasks-group/obsidian-tasks-custom-icons

Huge thanks to @replete for getting this going!

[PNRYates]

Im not sure why, but the edit button seems misaligned from everything else.

[replete]

Probably conflicting styles from your theme or other snippets as it works on default/minimal