Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
141 lines (129 loc) · 6.92 KB
/
Copy pathstyles.css
File metadata and controls
141 lines (129 loc) · 6.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/* ==========================================================================
Checkbox Context Menu — status styles
Obsidian's default theme only draws a checkmark for the "done" (`x`) state.
Every other status (`/`, `>`, `<`, `!`, `-`) renders as a plain empty box, so
switching states looks like nothing happened. These rules give each built-in
status a distinct colour and glyph.
Optional: every rule is gated behind `body.checkbox-context-menu-styles`, a
class main.ts toggles from the "Inject status styles" setting (on by default).
Obsidian always loads this file; with the class absent the rules go inert.
Matching BOTH modes is the tricky part:
- Live Preview (CM6): there is no <li>; the status char lives on the
`<input class="task-list-item-checkbox" data-task="…">` itself.
- Reading mode: the char reliably lives on the parent
`<li class="task-list-item" data-task="…">`; the input may not carry it.
So each rule targets the input by its own `data-task` AND by the parent li's
`data-task`. The earlier input-only selector matched Live Preview but silently
missed Reading mode.
Specificity note: instead of !important, every selector doubles the
body.checkbox-context-menu-styles class (e.g.
`body.checkbox-context-menu-styles.checkbox-context-menu-styles`). This raises
each rule's specificity above Obsidian's built-in theme selectors without
relying on !important.
========================================================================== */
/* --- Shared box: take full control for our custom states ------------------ */
/* `appearance: none` strips the theme's chrome and is what lets ::after render
on the checkbox input. */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox:is(
[data-task="/"], [data-task=">"], [data-task="<"], [data-task="!"], [data-task="-"]
),
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item:is(
[data-task="/"], [data-task=">"], [data-task="<"], [data-task="!"], [data-task="-"]
) input.task-list-item-checkbox {
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
border: 1px solid var(--text-muted);
background: transparent;
}
/* --- Shared glyph: perfectly centred inside the box ----------------------- */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox:is(
[data-task="/"], [data-task=">"], [data-task="<"], [data-task="!"], [data-task="-"]
)::after,
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item:is(
[data-task="/"], [data-task=">"], [data-task="<"], [data-task="!"], [data-task="-"]
) input.task-list-item-checkbox::after {
content: "";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85em;
font-weight: 700;
font-family: var(--font-text, sans-serif);
line-height: 1;
text-align: center;
/* Cancel any theme checkmark mask so only our glyph shows. */
background: none;
mask-image: none;
}
/* --- Half-done — yellow, box filled on the left half ---------------------- */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="/"],
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="/"] input.task-list-item-checkbox {
border-color: var(--color-yellow);
background: linear-gradient(90deg, var(--color-yellow) 0 50%, transparent 50% 100%);
}
/* --- Deferred / forwarded — blue right arrow ------------------------------ */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task=">"],
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task=">"] input.task-list-item-checkbox {
border-color: var(--color-blue);
}
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task=">"]::after,
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task=">"] input.task-list-item-checkbox::after {
content: "→";
color: var(--color-blue);
}
/* --- Scheduled — orange left arrow ---------------------------------------- */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="<"],
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="<"] input.task-list-item-checkbox {
border-color: var(--color-orange);
}
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="<"]::after,
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="<"] input.task-list-item-checkbox::after {
content: "←";
color: var(--color-orange);
}
/* --- Important — red exclamation ------------------------------------------ */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="!"],
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="!"] input.task-list-item-checkbox {
border-color: var(--color-red);
}
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="!"]::after,
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="!"] input.task-list-item-checkbox::after {
content: "!";
color: var(--color-red);
}
/* --- Cancelled — faint dash, plus struck-through, dimmed task text -------- */
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="-"],
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="-"] input.task-list-item-checkbox {
border-color: var(--text-faint);
}
body.checkbox-context-menu-styles.checkbox-context-menu-styles input.task-list-item-checkbox[data-task="-"]::after,
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="-"] input.task-list-item-checkbox::after {
content: "–";
color: var(--text-faint);
}
body.checkbox-context-menu-styles.checkbox-context-menu-styles .task-list-item[data-task="-"] {
color: var(--text-faint);
text-decoration: line-through;
}
/* ==========================================================================
Settings tab — drag-and-drop state reordering
(not gated behind the body class: this is plugin UI, not note styling)
========================================================================== */
.checkbox-context-menu-drag-handle {
cursor: grab;
margin-right: 6px;
color: var(--text-faint);
}
.checkbox-context-menu-drag-handle:active {
cursor: grabbing;
}
.checkbox-context-menu-state-row.checkbox-context-menu-dragging {
opacity: 0.5;
}
.checkbox-context-menu-state-row.checkbox-context-menu-drop-target {
box-shadow: inset 0 2px 0 var(--interactive-accent);
}