Akifyss / obsidian-border

A theme for obsidian.md
MIT License
1.34k stars 47 forks source link

Add checkbox icon for win: [w] #317

Closed pixmin closed 4 weeks ago

pixmin commented 1 month ago

Hi :)

Thanks a lot for your great theme!

Is there any chance you could add an icon for the win checkbox?

For example like on the minimal theme: https://minimal.guide/checklists#Checkbox+icons

Akifyss commented 4 weeks ago

Sorry, I'm not sure what the 'w' or 'win' refers to here because the minimal theme uses a "cake" icon to represent win. As a non-native English speaker, this confuses me greatly. If you expect similar results, you can import the following CSS snippet to achieve this feature:

input[data-task="w"]:checked,
li[data-task="w"]>input:checked,
li[data-task="w"]>p>input:checked {
    --checkbox-marker-color: transparent;
    border: none;
    border-radius: 0;
    background-image: none;
    background-color: currentColor;
    -webkit-mask-size: var(--checkbox-icon);
    -webkit-mask-position: 50% 50%
}

input[data-task="w"]:checked,
li[data-task="w"]>input:checked,
li[data-task="w"]>p>input:checked {
    --checkbox-color-hover: var(--color-purple);
    color: var(--color-purple);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.01M7 3h.01M17 3h.01'/%3e%3cpath fill='black' fill-rule='evenodd' d='M7 5a1 1 0 0 1 1 1v2h3V6a1 1 0 0 1 2 0v2h3V6a1 1 0 0 1 2 0v2.1a5.005 5.005 0 0 1 3.937 4.102c-.4.155-.75.383-1.047.63-.532.44-.966.994-1.302 1.46-.265.367-.714.708-1.588.708-.874 0-1.324-.342-1.588-.71A2.36 2.36 0 0 1 16 13a1 1 0 0 0-2 0c0 .34-.11.872-.412 1.29-.264.368-.714.71-1.588.71-.874 0-1.324-.342-1.588-.71A2.36 2.36 0 0 1 10 13a1 1 0 1 0-2 0c0 .34-.11.872-.412 1.29-.264.368-.714.71-1.588.71-.874 0-1.323-.341-1.588-.709-.336-.465-.77-1.019-1.302-1.46a3.798 3.798 0 0 0-1.047-.629A5.005 5.005 0 0 1 6 8.1V6a1 1 0 0 1 1-1Zm-5 9.52V19a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4.48c-.27.256-.532.583-.79.94-.635.883-1.685 1.54-3.21 1.54-1.367 0-2.353-.529-3-1.273-.647.744-1.633 1.273-3 1.273s-2.353-.529-3-1.273C8.353 16.47 7.367 17 6 17c-1.525 0-2.575-.657-3.21-1.54-.235-.336-.5-.65-.79-.94Z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
pixmin commented 3 weeks ago

That's exactly what I wanted, thank you so much! :)