From 31eac9df6310f4344fd8cc3c0b020e4071596d77 Mon Sep 17 00:00:00 2001
From: Cameron Bell <cameronleebell97@gmail.com>
Date: Sat, 12 Apr 2025 10:37:18 +1200
Subject: [PATCH] Checkbox styles

---
 theme.css | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 1 deletion(-)

diff --git a/theme.css b/theme.css
index f1fc5be..30f56ba 100644
--- a/theme.css
+++ b/theme.css
@@ -583,4 +583,127 @@ th {
     font-weight: 700;
     background-color: var(--interactive-accent);
     color: var(--titlebar-text);
-}
\ No newline at end of file
+}
+
+/* Checkbox Styling */
+.markdown-preview-view ul > li.task-list-item.is-checked
+{
+  text-decoration: none;
+}
+
+/* [x] Checked Checkbox Styling */
+.markdown-preview-view ul > li[data-task='x'].task-list-item.is-checked
+{
+  color: var(--text-faint);
+}
+
+.markdown-preview-view ul > li[data-task='x'].task-list-item.is-checked > a
+{
+  color: var(--text-normal);
+}
+
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='x']
+{
+  color: var(--text-faint);
+  text-decoration: none;
+}
+
+/* [/] In-Progress Checkbox Styling */
+input[data-task='/']:checked,
+li[data-task='/'] > input:checked,
+li[data-task='/'] > p > input:checked {
+  background-image: none;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+input[data-task='/']:checked:after,
+li[data-task='/'] > input:checked:after,
+li[data-task='/'] > p > input:checked:after {
+  top: 0;
+  left: 0;
+  content: ' ';
+  display: block;
+  position: absolute;
+  background-color: var(--interactive-accent);
+  width: calc(50% - 0.5px);
+  height: 100%;
+  -webkit-mask-image: none;
+}
+
+body:not(.tasks) li[data-task='|'].task-list-item.is-checked {
+  color: var(--text-normal);
+}
+
+/* [-] Crossed Checkbox Styling */
+.markdown-preview-view ul > li[data-task='-'].task-list-item.is-checked,
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='-']
+{
+  color: var(--text-faint);
+  text-decoration: line-through solid var(--text-faint) 1px;
+}
+
+input[data-task='-']:checked,
+li[data-task='-'] > input:checked,
+li[data-task='-'] > p > input:checked {
+  --checkbox-marker-color: transparent;
+  border-color: var(--text-faint);
+  -webkit-mask-size: var(--checkbox-icon);
+  -webkit-mask-position: 50% 50%;
+
+  background-image: none;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+input[data-task='-']:checked:after,
+li[data-task='-'] > input:checked:after,
+li[data-task='-'] > p > input:checked:after {
+  top: 0;
+  left: 0;
+  content: ' ';
+  display: block;
+  position: absolute;
+  background-color: var(--text-faint);
+  width: 100%;
+  height: 50%;
+  -webkit-mask-image: none;
+}
+
+/* [\] Stale Checkbox Styling */
+.markdown-preview-view ul > li[data-task='\\'].task-list-item.is-checked
+{
+  color: var(--text-faint);
+}
+
+.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='\\']
+{
+  color: var(--text-faint);
+  text-decoration: none;
+}
+
+input[data-task='\\']:checked,
+li[data-task='\\'] > input:checked,
+li[data-task='\\'] > p > input:checked {
+  border-color: var(--text-faint);
+  background-image: none;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+input[data-task='\\']:checked:after,
+li[data-task='\\'] > input:checked:after,
+li[data-task='\\'] > p > input:checked:after {
+  top: 0;
+  left: 0;
+  content: ' ';
+  display: block;
+  position: absolute;
+  background-color: var(--text-faint);
+  width: calc(50% - 0.5px);
+  height: 100%;
+  -webkit-mask-image: none;
+}