I’m using the Tasks plugin and have several custom task statuses set up. I’ve customized several of their icons by using a css snippet I found that masks the default color, creating a “cutout” in the checkbox.
For example:
.task-list-item-checkbox[data-task="x"]:checked::after,
.plugin-tasks-list-item[data-task="x"]>.task-list-item-checkbox:checked::after {
content: '';
margin: 0;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%203.704%203.704%22%3E%3Cpath%20d%3D%22M-1.855%203.619h2.91v.782h-2.91z%22%20style%3D%22fill%3A%23000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A.176004%22%20transform%3D%22rotate(-45%20-1.88%20.213)%22%2F%3E%3Cpath%20d%3D%22M-5.466-.791h2.91v.782h-2.91z%22%20style%3D%22fill%3A%23000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A.176004%22%20transform%3D%22rotate(225%20-.613%20-.488)%22%2F%3E%3C%2Fsvg%3E");
}
However, there are a few specific checkboxes that I would like to be visually inverted, so that they are just shaped like the svgs (ideally where one uses the default text color and the other the default accent color). Something like the following (where the icons are svg files I already have):
How might I achieve this without affecting the rest of the icons?