Skip to content

Commit ba1ca83

Browse files
committed
Initial commit
0 parents  commit ba1ca83

File tree

6 files changed

+128
-0
lines changed

6 files changed

+128
-0
lines changed

.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 dopingdance
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

obsidian-checkbox.css

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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+
}

preview-dark.png

19.4 KB
Loading

preview.png

18.6 KB
Loading

readme.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# obsidian-checkbox-css
2+
3+
A simple **CSS snippet** for *Obsidian*(v1.5.3).
4+
5+
Works on both editing(live preview mode) and reading view.
6+
7+
![image](preview.png)
8+
![image](preview-dark.png)
9+
10+
```
11+
- [ ] new task
12+
- [/] working in progress
13+
- [x] done
14+
- [>] forwarded
15+
- [-] cancelled
16+
```
17+
18+
## Installation
19+
- Download [obsidian-checkbox.css](obsidian-checkbox.css)
20+
- In Obsidian, open `Settings` > `Appearance` > `CSS snippets`
21+
- Click the folder icon to open the snippets folder (`your_vault/.obsidian/snippets/`, a hidden folder)
22+
- Copy css file there
23+
- Reload Obsidian
24+
- Go back to the `CSS snippets` settings and enable the snippet

0 commit comments

Comments
 (0)