Obsidan custom CSS snippet for enabling multi-state-checkboxes

multi-state-checkboxes.css

/* Multi-state checkboxes


- [ ] not yet started (new)
- [>] in-progress (on track)
- [<] in-progress (behind schedule)
- [!] in-progress (blocked)
- [?] needs review (awaiting input)
- [@] rescheduled (deferred for now)
- [/] stopped (done)
- [x] completed (done)

*/

/* Completely hide checkbox, show [symbol] text instead */
input.task-list-item-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0.4em 0 0 !important;
  font-family: monospace !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: baseline !important;
}

/* Hide any ::after pseudo-elements that might show checkmarks */
input.task-list-item-checkbox::after {
  display: none !important;
  content: none !important;
}

input.task-list-item-checkbox::before {
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap !important;
}


/* - [ ] not yet started (new) - gray (default for any checkbox) */
input.task-list-item-checkbox::before {
  content: "[ ]" !important;
  color: #9ca3af;
}

/* - [>] in-progress (on track) - yellow */
input.task-list-item-checkbox[data-task=">"]::before,
li.task-list-item[data-task=">"] input.task-list-item-checkbox::before {
  content: "[❯]" !important;
  color: #ead308;
}

/* - [<] in-progress (behind schedule) - orange */
input.task-list-item-checkbox[data-task="<"]::before,
li.task-list-item[data-task="<"] input.task-list-item-checkbox::before {
  content: "[❮]" !important;
  color: #f99316;
}

/* - [!] in-progress (blocked) - magenta (needs attention!) */
input.task-list-item-checkbox[data-task="!"]::before,
li.task-list-item[data-task="!"] input.task-list-item-checkbox::before {
  content: "[!]" !important;
  color: #ec4848;
}

/* - [?] needs review (awaiting input) - purple */
input.task-list-item-checkbox[data-task="?"]::before,
li.task-list-item[data-task="?"] input.task-list-item-checkbox::before {
  content: "[?]" !important;
  color: #a855f7;
}

/* - [@] rescheduled (deferred for now) - blue */
input.task-list-item-checkbox[data-task="@"]::before,
li.task-list-item[data-task="@"] input.task-list-item-checkbox::before {
  content: "[@]" !important;
  color: #3b82f6;
}

/* - [/] stopped (done) - muted gray (no attention needed) */
input.task-list-item-checkbox[data-task="/"]::before,
li.task-list-item[data-task="/"] input.task-list-item-checkbox::before {
  content: "[∕]" !important;
  color: #6b7280;
}

/* - [x] completed (done) - green */
input.task-list-item-checkbox[data-task="x"]::before,
li.task-list-item[data-task="x"] input.task-list-item-checkbox::before {
  content: "[✕]" !important;
  color: #22c55e;
}

/* Apply strikethrough styling to stopped (done) items, same as completed (done) */
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"],
ul > li.task-list-item[data-task="/"] {
  text-decoration: var(--checklist-done-decoration);
  color: var(--checklist-done-color);
}

/* Striekethrough styling should apply to label only, not the checkbox */
.HyperMD-task-line[data-task].cm-active {
  text-decoration: none !important;
}
.HyperMD-task-line[data-task="x"].cm-active span:last-child,
.HyperMD-task-line[data-task="/"].cm-active span:last-child {
  text-decoration: var(--checklist-done-decoration);
}

/* Remove vertical offset for checkboxes in preview mode */
.markdown-preview-view .task-list-item-checkbox {
  top: 0 !important;
}