1
+ /*
2
+
3
+ obsidian-checkbox-css
4
+ https://github.com/netgamesekai/obsidian-checkbox-css
5
+
6
+ */
7
+
8
+ body {
9
+ /* checkbox colors */
10
+ --checkbox : # 999ba3 ;
11
+ --checkbox-done : # 59c583 ;
12
+ --checkbox-wip : # ead467 ;
13
+ --checkbox-forwarded : # 6aadce ;
14
+
15
+ /* no strikethrough on completed tasks */
16
+ --checklist-done-decoration : inherit;
17
+ --checklist-done-color : inherit;
18
+ }
19
+
20
+ /* strikethrough on forwarded or cancelled tasks */
21
+
22
+ .task-list-item [data-task = ">" ],
23
+ .task-list-item [data-task = "-" ],
24
+ .HyperMD-task-line [data-task = ">" ] span ,
25
+ .HyperMD-task-line [data-task = "-" ] span {
26
+ color : var (--checkbox );
27
+ text-decoration : line-through;
28
+ }
29
+
30
+ /* initialising */
31
+
32
+ input [type = "checkbox" ].task-list-item-checkbox : checked ::after {
33
+ display : none;
34
+ }
35
+
36
+ input [type = "checkbox" ].task-list-item-checkbox : checked {
37
+ background-image : none;
38
+ background-position : center;
39
+ background-repeat : no-repeat;
40
+ background-size : 70% ;
41
+ position : relative;
42
+ }
43
+
44
+ /* styling */
45
+
46
+ /* new task */
47
+ .task-list-item [data-task = " " ] input [type = "checkbox" ].task-list-item-checkbox ,
48
+ input [type = "checkbox" ][data-task = " " ].task-list-item-checkbox {
49
+ border-color : var (--checkbox ) !important ;
50
+ }
51
+
52
+ /* completed */
53
+ input [type = "checkbox" ][data-task = "x" ].task-list-item-checkbox : checked ,
54
+ .task-list-item [data-task = "x" ] input [type = "checkbox" ].task-list-item-checkbox : checked {
55
+ border-color : var (--checkbox-done ) !important ;
56
+ background-color : var (--checkbox-done ) !important ;
57
+ background-image : url ('data:image/svg+xml,<svg version="1.1" baseProfile="tiny" id="Layer_1" width="800px" height="800px" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg"><defs></defs><path d="M 38.525 7.876 L 36.127 5.946 C 34.945 4.996 34.258 5.007 33.246 6.257 L 15.817 27.766 L 7.706 21.027 C 6.587 20.087 5.887 20.137 4.967 21.287 L 3.116 23.697 C 2.177 24.879 2.297 25.55 3.407 26.477 L 14.967 36.039 C 16.157 37.039 16.827 36.936 17.747 35.817 L 38.826 10.756 C 39.816 9.566 39.756 8.855 38.525 7.876 Z" style="fill: rgb(255, 255, 255);"></path></svg>' );
58
+ }
59
+
60
+ /* working in progress */
61
+ .task-list-item [data-task = "/" ] input [type = "checkbox" ].task-list-item-checkbox : checked ,
62
+ input [type = "checkbox" ][data-task = "/" ].task-list-item-checkbox : checked {
63
+ border-color : var (--checkbox-wip );
64
+ background : linear-gradient (90deg , var (--checkbox-wip ) 50% , transparent 50% ) !important ;
65
+ }
66
+
67
+ /* forwarded */
68
+ .task-list-item [data-task = ">" ] input [type = "checkbox" ].task-list-item-checkbox : checked ,
69
+ input [type = "checkbox" ][data-task = ">" ].task-list-item-checkbox : checked {
70
+ border-color : var (--checkbox-forwarded );
71
+ background-color : var (--checkbox-forwarded ) !important ;
72
+ background-image : url ('data:image/svg+xml,<svg version="1.1" baseProfile="tiny" id="Layer_1" width="800px" height="800px" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg"><defs></defs><polygon fill-rule="evenodd" points="28.566 40.819 8.5 20.751 28.068 1.181 33.002 6.114 18.365 20.751 33.5 35.885" style="fill: rgb(255, 255, 255); transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0, 0.000002)"></polygon></svg>' );
73
+ }
74
+
75
+ /* cancelled */
76
+ .task-list-item [data-task = "-" ] input [type = "checkbox" ].task-list-item-checkbox : checked ,
77
+ input [type = "checkbox" ][data-task = "-" ].task-list-item-checkbox : checked {
78
+ border-color : var (--checkbox );
79
+ background-color : var (--checkbox ) !important ;
80
+ background-image : url ('data:image/svg+xml,<svg fill="%23000000" version="1.1" baseProfile="tiny" id="Layer_1" width="800px" height="800px" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg"><defs></defs><rect x="5.15" y="16.928" width="31.7" height="8.143" style="fill: rgb(255, 255, 255);"></rect></svg>' );
81
+ }
0 commit comments