tasks-snippet.css

@charset "UTF-8";
/*
Ebullientworks 1.0.2. A dark and light theme for Obsidian.

https://github.com/ebullient/obsidian-theme-ebullientworks
*/
body {
  --checkbox-checked: rgb(139, 167, 145);
  --checkbox-deferred: rgb(111, 166, 211);
  --checkbox-important: rgb(187, 79, 108);
  --checkbox-review: rgb(92, 122, 99);
  --checkbox-in-progress: rgb(89, 174, 170);
  --checkbox-question: rgb(234, 175, 0);
  --checkbox-cancelled: rgb(115, 115, 115);
  --checkbox-hover: rgb(137, 137, 137);
}

.theme-light {
  --checkbox-cancelled: rgb(159, 159, 159);
  --checkbox-hover: rgb(137, 137, 137);
}

/** Deal with Blue Topaz masks */
li[data-task] input[type=checkbox]::before {
  transform: none !important;
  -webkit-mask-image: none !important;
}

div[data-task] > label.task-list-label,
ul > li.task-list-item,
ul > li.task-list-item > p {
  color: var(--text-normal);
  font-weight: unset;
  text-decoration: unset;
}
div[data-task] > label.task-list-label > input.task-list-item-checkbox[type=checkbox]:not(:checked),
ul > li.task-list-item > input.task-list-item-checkbox[type=checkbox]:not(:checked),
ul > li.task-list-item > p > input.task-list-item-checkbox[type=checkbox]:not(:checked) {
  background-color: unset;
  background: unset;
}

div[data-task=x],
li.task-list-item[data-task=x],
li.task-list-item[data-task=x] > p {
  color: var(--text-normal);
  font-weight: var(--font-normal);
  text-decoration: none;
}

div[data-task=x] > label.task-list-label,
li.task-list-item[data-task=x],
li.task-list-item[data-task=x] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] {
  --checkbox-color: var(--checkbox-checked);
  --checkbox-border-color: var(--checkbox-checked);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task=x]:checked,
li[data-task=x] > input[type=checkbox]:checked,
li[data-task=x] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task=x]:checked::after,
li[data-task=x] > input[type=checkbox]:checked::after,
li[data-task=x] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-normal);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-text);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "✓";
  display: block;
}

div[data-task="-"],
li.task-list-item[data-task="-"],
li.task-list-item[data-task="-"] > p {
  color: var(--text-faint);
  font-weight: var(--font-normal);
  text-decoration: line-through;
}

div[data-task="-"] > label.task-list-label,
li.task-list-item[data-task="-"],
li.task-list-item[data-task="-"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] {
  --checkbox-color: var(--checkbox-cancelled);
  --checkbox-border-color: var(--checkbox-cancelled);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: line-through;
}

input[type=checkbox][data-task="-"]:checked,
li[data-task="-"] > input[type=checkbox]:checked,
li[data-task="-"] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task="-"]:checked::after,
li[data-task="-"] > input[type=checkbox]:checked::after,
li[data-task="-"] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-normal);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-monospace);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "-";
  display: block;
}

div[data-task=">"],
li.task-list-item[data-task=">"],
li.task-list-item[data-task=">"] > p {
  color: var(--text-normal);
  font-weight: var(--font-normal);
  text-decoration: none;
}

div[data-task=">"] > label.task-list-label,
li.task-list-item[data-task=">"],
li.task-list-item[data-task=">"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] {
  --checkbox-color: var(--checkbox-deferred);
  --checkbox-border-color: var(--checkbox-deferred);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task=">"]:checked,
li[data-task=">"] > input[type=checkbox]:checked,
li[data-task=">"] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task=">"]:checked::after,
li[data-task=">"] > input[type=checkbox]:checked::after,
li[data-task=">"] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-normal);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-monospace);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: ">";
  display: block;
}

div[data-task=R],
li.task-list-item[data-task=R],
li.task-list-item[data-task=R] > p {
  color: var(--text-normal);
  font-weight: var(--font-normal);
  text-decoration: none;
}

div[data-task=R] > label.task-list-label,
li.task-list-item[data-task=R],
li.task-list-item[data-task=R] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] {
  --checkbox-color: var(--checkbox-review);
  --checkbox-border-color: var(--checkbox-review);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task=R]:checked,
li[data-task=R] > input[type=checkbox]:checked,
li[data-task=R] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task=R]:checked::after,
li[data-task=R] > input[type=checkbox]:checked::after,
li[data-task=R] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-normal);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-text);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "👀";
  display: block;
}

div[data-task=r],
li.task-list-item[data-task=r],
li.task-list-item[data-task=r] > p {
  color: var(--text-normal);
  font-weight: var(--font-normal);
  text-decoration: none;
}

div[data-task=r] > label.task-list-label,
li.task-list-item[data-task=r],
li.task-list-item[data-task=r] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] {
  --checkbox-color: var(--checkbox-review);
  --checkbox-border-color: var(--checkbox-review);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task=r]:checked,
li[data-task=r] > input[type=checkbox]:checked,
li[data-task=r] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task=r]:checked::after,
li[data-task=r] > input[type=checkbox]:checked::after,
li[data-task=r] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-normal);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-text);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "👀";
  display: block;
}

div[data-task="?"],
li.task-list-item[data-task="?"],
li.task-list-item[data-task="?"] > p {
  color: var(--text-normal);
  font-weight: var(--font-bold);
  text-decoration: none;
}

div[data-task="?"] > label.task-list-label,
li.task-list-item[data-task="?"],
li.task-list-item[data-task="?"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] {
  --checkbox-color: var(--checkbox-question);
  --checkbox-border-color: var(--checkbox-question);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task="?"]:checked,
li[data-task="?"] > input[type=checkbox]:checked,
li[data-task="?"] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task="?"]:checked::after,
li[data-task="?"] > input[type=checkbox]:checked::after,
li[data-task="?"] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-bold);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-monospace);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "?";
  display: block;
}

div[data-task="!"],
li.task-list-item[data-task="!"],
li.task-list-item[data-task="!"] > p {
  color: var(--text-normal);
  font-weight: var(--font-extrabold);
  text-decoration: none;
}

div[data-task="!"] > label.task-list-label,
li.task-list-item[data-task="!"],
li.task-list-item[data-task="!"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] {
  --checkbox-color: var(--checkbox-important);
  --checkbox-border-color: var(--checkbox-important);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[type=checkbox][data-task="!"]:checked,
li[data-task="!"] > input[type=checkbox]:checked,
li[data-task="!"] > p > input[type=checkbox]:checked {
  background-color: unset;
  background: unset;
}
input[type=checkbox][data-task="!"]:checked::after,
li[data-task="!"] > input[type=checkbox]:checked::after,
li[data-task="!"] > p > input[type=checkbox]:checked::after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  position: absolute;
  text-align: center;
  font-weight: var(--font-extrabold);
  font-size: calc(var(--checkbox-size) - 2px);
  font-family: var(--font-monospace);
  line-height: var(--checkbox-size);
  left: 50%;
  margin-left: calc(-1 * var(--checkbox-size) / 2);
  color: var(--checkbox-color);
  content: "!";
  display: block;
}

div[data-task="/"],
li.task-list-item[data-task="/"],
li.task-list-item[data-task="/"] > p {
  color: var(--text-normal);
  font-weight: var(--font-normal);
  text-decoration: none;
}

div[data-task="/"] > label.task-list-label,
li.task-list-item[data-task="/"],
li.task-list-item[data-task="/"] > p,
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] {
  --checkbox-color: var(--checkbox-in-progress);
  --checkbox-border-color: var(--checkbox-in-progress);
  --checkbox-marker-color: transparent;
  --checklist-done-decoration: none;
}

input[data-task="/"]:checked,
li[data-task="/"] > input[type=checkbox]:checked,
li[data-task="/"] > p > input[type=checkbox]:checked {
  background: linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%);
}
input[data-task="/"]:checked:after,
li[data-task="/"] > input[type=checkbox]:checked:after,
li[data-task="/"] > p > input[type=checkbox]:checked:after {
  transform: none;
  -webkit-mask-image: none;
  background: unset;
  content: " ";
}