obsidian-tasks: Postpone button cannot be styled
Please check that this issue hasn’t been reported before.
- I searched previous Bug Reports didn’t find any similar reports.
Expected Behavior
I can restyle all of the buttons on a task, with something similar to this:
/* change edit button */
.tasks-edit {
background-color: var(--ui1);
}
.tasks-edit {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}
I expect to be able to restyle the new postpone ‘button’.
Current behaviour
The new postpone button uniquely injects content, namely ’ ⏩’, inside a button tag so that it cannot be styled.
Steps to reproduce
View a task query with the postpone buttons displayed.
Which Operating Systems are you using?
- Android
- iPhone/iPad
- Linux
- macOS
- Windows
Obsidian Version
1.5.2
Tasks Plugin Version
5.3.0
Checks
- I have tried it with all other plugins disabled and the error still occurs
Possible solution
Make the code for the postpone button consistent with the existing buttons.
It is worth noting that having many button elements with the same id (postpone-button) is invalid html.
About this issue
- Original URL
- State: closed
- Created 6 months ago
- Comments: 23 (4 by maintainers)
It works well. Thank you!
This has been fixed by #2562 - and it will be included in the up-coming Tasks 6.0.0 release.
@Cito It appears you have fixed it. Thank you!
@claremacrae since I had a little bit of time left today, I already gave it a try in #2562.
@ScottKillen if you have time, please test and let us know if it solves your original problem.
Hi all.
This is still on my radar, but I have not been able to find the time. I have been off, but family responsibilities and getting ready for the busy season at work (starting next week) have sapped my time.
@menagerie198 This should be possible after the fix. The root of this issue is that the postpone button currently does not have proper wrapping to allow CSS styling.
🎉 Happy New Year Everyone!
😃 You live a much more ascetic life than us, it is clear. Our bins could not survive a non-collection (our council empties them fortnightly)!
No worries, it’s not urgent.
Thanks @claremacrae. You’re right, the event handling of a button and a link is slightly different so we may need to adapt that a little bit as well if me make changes here.
@ScottKillen you can give it a try and create a PR and add me as reviewer, or let me know if I shall create a PR and you want to review. I will then also double check that it does not break #2513 again.
@claremacrae
I had not seen it, but all I can say is, “Well, of course you did!” Tasks’ documentation is one of the things I love about it! (One among many things!)