diff --git a/theme.css b/theme.css index a7bdedf..7226ddf 100644 --- a/theme.css +++ b/theme.css @@ -1070,44 +1070,63 @@ /* === (Alternate) Checkboxes === */ /* common (only for Tasks) */ - input[data-task=">"]:checked, li[data-task=">"] > input:checked, li[data-task=">"] > p > input:checked, - input[data-task="-"]:checked, li[data-task="-"] > input:checked, li[data-task="-"] > p > input:checked, - input[data-task="<"]:checked, li[data-task="<"] > input:checked, li[data-task="<"] > p > input:checked { + body.enable-alternative-checkboxes input[data-task=">"]:checked, + body.enable-alternative-checkboxes li[data-task=">"] > input:checked, li[data-task=">"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="-"]:checked, + body.enable-alternative-checkboxes li[data-task="-"] > input:checked, li[data-task="-"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="<"]:checked, + body.enable-alternative-checkboxes li[data-task="<"] > input:checked, li[data-task="<"] > p > input:checked { --checkbox-marker-color: transparent; background-color: currentColor; } /* Common (only for Info / Higlights) - Include lock the state for mouse click */ - input[data-task="I"]:checked, li[data-task="I"] > input:checked, li[data-task="I"] > p > input:checked, - input[data-task="i"]:checked, li[data-task="i"] > input:checked, li[data-task="i"] > p > input:checked, - input[data-task="\""]:checked, li[data-task="\""] > input:checked, li[data-task="\""] > p > input:checked, - input[data-task="“"]:checked, li[data-task="“"] > input:checked, li[data-task="“"] > p > input:checked, - input[data-task="!"]:checked, li[data-task="!"] > input:checked, li[data-task="!"] > p > input:checked, - input[data-task="r"]:checked, li[data-task="r"] > input:checked, li[data-task="r"] > p > input:checked, - input[data-task="*"]:checked, li[data-task="*"] > input:checked, li[data-task="*"] > p > input:checked { + body.enable-alternative-checkboxes input[data-task="I"]:checked, + body.enable-alternative-checkboxes li[data-task="I"] > input:checked, + body.enable-alternative-checkboxes li[data-task="I"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="i"]:checked, + body.enable-alternative-checkboxes li[data-task="i"] > input:checked, + body.enable-alternative-checkboxes li[data-task="i"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="\""]:checked, + body.enable-alternative-checkboxes li[data-task="\""] > input:checked, + body.enable-alternative-checkboxes li[data-task="\""] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="“"]:checked, + body.enable-alternative-checkboxes li[data-task="“"] > input:checked, + body.enable-alternative-checkboxes li[data-task="“"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="!"]:checked, + body.enable-alternative-checkboxes li[data-task="!"] > input:checked, + body.enable-alternative-checkboxes li[data-task="!"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="r"]:checked, + body.enable-alternative-checkboxes li[data-task="r"] > input:checked, + body.enable-alternative-checkboxes li[data-task="r"] > p > input:checked, + body.enable-alternative-checkboxes input[data-task="*"]:checked, + body.enable-alternative-checkboxes li[data-task="*"] > input:checked, + body.enable-alternative-checkboxes li[data-task="*"] > p > input:checked { --checkbox-marker-color: transparent; background-color: currentColor; border: none; pointer-events: none; } - label.task-list-label:has(> input[data-task="I"]:checked), - label.task-list-label:has(> input[data-task="!"]:checked), - label.task-list-label:has(> input[data-task="\""]:checked), - label.task-list-label:has(> input[data-task="“"]:checked), - label.task-list-label:has(> input[data-task="!"]:checked), - label.task-list-label:has(> input[data-task="r"]:checked), - label.task-list-label:has(> input[data-task="*"]:checked) { + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="I"]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="!"]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="\""]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="“"]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="!"]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="r"]:checked), + body.enable-alternative-checkboxes label.task-list-label:has(> input[data-task="*"]:checked) { pointer-events: none; } /* For [/] "/" i.e Partial or Incomplete */ - .HyperMD-list-line input[data-task="/"]:checked, - .markdown-preview-view li[data-task="/"]>input[type="checkbox"]:checked + body.enable-alternative-checkboxes .HyperMD-list-line input[data-task="/"]:checked, + body.enable-alternative-checkboxes .markdown-preview-view li[data-task="/"]>input[type="checkbox"]:checked { background-image: linear-gradient(135deg, var(--interactive-accent) 50%, var(--background-primary) 50%); } - input[data-task="/"]:checked:after, li[data-task="/"] > input:checked:after, li[data-task="/"] > p > input:checked:after + body.enable-alternative-checkboxes input[data-task="/"]:checked:after, li[data-task="/"] > input:checked:after, + body.enable-alternative-checkboxes li[data-task="/"] > p > input:checked:after { background-color: var(--background-modifier-accent); -webkit-mask-image: none; } /* For [>] ">" i.e. Defer or Reschedule */ - input[data-task=">"]:checked, li[data-task=">"] > input:checked, li[data-task=">"] > p > input:checked { + body.enable-alternative-checkboxes input[data-task=">"]:checked, + body.enable-alternative-checkboxes li[data-task=">"] > input:checked, li[data-task=">"] > p > input:checked { color: var(--text-faint); transform: rotate(90deg); -webkit-mask-position: 50% 100%; @@ -1115,18 +1134,21 @@ } /* For [-] "-" i.e. Canceled */ - input[data-task="-"]:checked, li[data-task="-"] > input:checked, li[data-task="-"] > p > input:checked { + body.enable-alternative-checkboxes input[data-task="-"]:checked, + body.enable-alternative-checkboxes li[data-task="-"] > input:checked, li[data-task="-"] > p > input:checked { color: var(--text-faint); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); } - body:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]), - body:not(.tasks) .markdown-preview-view ul li[data-task="-"].task-list-item.is-checked, body:not(.tasks) li[data-task="-"].task-list-item.is-checked { + body.enable-alternative-checkboxes:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]), + body.enable-alternative-checkboxes:not(.tasks) .markdown-preview-view ul li[data-task="-"].task-list-item.is-checked, + body.enable-alternative-checkboxes:not(.tasks) li[data-task="-"].task-list-item.is-checked { color: var(--text-faint); text-decoration: line-through solid var(--text-faint) 1px; } /* For [<] "<" i.e. Schedule or Meeting */ - input[data-task="<"]:checked, li[data-task="<"]>input:checked, li[data-task="<"]>p>input:checked { + body.enable-alternative-checkboxes input[data-task="<"]:checked, li[data-task="<"]>input:checked, + body.enable-alternative-checkboxes li[data-task="<"]>p>input:checked { color: var(--text-faint); border: none; -webkit-mask-image: url('data:image/svg+xml;utf8,'); @@ -1135,40 +1157,47 @@ /* INFO / HIGHLIGHTS */ /* For [I] "I" i.e. Idea or Lightbulb */ - input[data-task="I"]:checked, li[data-task="I"]>input:checked, li[data-task="I"]>p>input:checked { + body.enable-alternative-checkboxes input[data-task="I"]:checked, + body.enable-alternative-checkboxes li[data-task="I"]>input:checked, + body.enable-alternative-checkboxes li[data-task="I"]>p>input:checked { --checkbox-color-hover: var(--color-yellow); color: var(--color-yellow); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* For [i] "i" i.e. info */ - input[data-task="i"]:checked, li[data-task="i"]>input:checked, li[data-task="i"]>p>input:checked { + body.enable-alternative-checkboxes input[data-task="i"]:checked, + body.enable-alternative-checkboxes li[data-task="i"]>input:checked, + body.enable-alternative-checkboxes li[data-task="i"]>p>input:checked { --checkbox-color-hover: var(--color-cyan); color: var(--color-cyan); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* For [!] "!" i.e. warning */ - input[data-task="!"]:checked, li[data-task="!"]>input:checked, li[data-task="!"]>p>input:checked { + body.enable-alternative-checkboxes input[data-task="!"]:checked, + body.enable-alternative-checkboxes li[data-task="!"]>input:checked, + body.enable-alternative-checkboxes li[data-task="!"]>p>input:checked { --checkbox-color-hover: var(--color-red); color: var(--color-orange); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* For ["] or "“" i.e. citation, my version */ - input[type=checkbox][data-task="\""]:is(*,:hover,:active), - input[type=checkbox][data-task="“"]:is(*,:hover,:active), - li[data-task="\""] > input:checked, - li[data-task="\""] > p > input:checked, - li[data-task="“"] > input:checked, - li[data-task="“"] > p > input:checked - { background-color: transparent; } - input[type=checkbox][data-task="\""]:checked::after, - input[type=checkbox][data-task="“"]:checked::after, - li[data-task="\""] > input:checked::after, - li[data-task="“"] > input:checked::after, - li[data-task="\""] > p > input:checked::after, - li[data-task="“"] > p > input:checked::after { + body.enable-alternative-checkboxes input[type=checkbox][data-task="\""]:is(*,:hover,:active), + body.enable-alternative-checkboxes input[type=checkbox][data-task="“"]:is(*,:hover,:active), + body.enable-alternative-checkboxes li[data-task="\""] > input:checked, + body.enable-alternative-checkboxes li[data-task="\""] > p > input:checked, + body.enable-alternative-checkboxes li[data-task="“"] > input:checked, + body.enable-alternative-checkboxes li[data-task="“"] > p > input:checked { + background-color: transparent; + } + body.enable-alternative-checkboxes input[type=checkbox][data-task="\""]:checked::after, + body.enable-alternative-checkboxes input[type=checkbox][data-task="“"]:checked::after, + body.enable-alternative-checkboxes li[data-task="\""] > input:checked::after, + body.enable-alternative-checkboxes li[data-task="“"] > input:checked::after, + body.enable-alternative-checkboxes li[data-task="\""] > p > input:checked::after, + body.enable-alternative-checkboxes li[data-task="“"] > p > input:checked::after { content: "❝"; font-size: 1.6em; text-align: center; @@ -1178,8 +1207,8 @@ background-color: transparent; -webkit-mask-image: revert; } - li[data-task="“"] > input:checked::after, - li[data-task="“"] > p > input:checked::after + body.enable-alternative-checkboxes li[data-task="“"] > input:checked::after, + body.enable-alternative-checkboxes li[data-task="“"] > p > input:checked::after { top: -5px; } /* cite *//* input[data-task="“"]:checked, li[data-task="“"]>input:checked, li[data-task="“"]>p>input:checked { @@ -1189,13 +1218,13 @@ } /* For [r] or "r" i.e. reference */ - input[type=checkbox][data-task="r"]:is(*,:hover,:active), - li[data-task="r"] > input:checked, - li[data-task="r"] > p > input:checked + body.enable-alternative-checkboxes input[type=checkbox][data-task="r"]:is(*,:hover,:active), + body.enable-alternative-checkboxes li[data-task="r"] > input:checked, + body.enable-alternative-checkboxes li[data-task="r"] > p > input:checked { background-color: transparent; } - input[type=checkbox][data-task="r"]:checked::after, - li[data-task="r"] > input:checked::after, - li[data-task="r"] > p > input:checked::after { + body.enable-alternative-checkboxes input[type=checkbox][data-task="r"]:checked::after, + body.enable-alternative-checkboxes li[data-task="r"] > input:checked::after, + body.enable-alternative-checkboxes li[data-task="r"] > p > input:checked::after { content: "🕮"; font-size: 0.9em; font-weight: bold; @@ -1207,12 +1236,13 @@ -webkit-mask-image: revert; } /* additional adjustment for reading view only */ - li[data-task="r"] > input:checked::after, - li[data-task="r"] > p > input:checked::after + body.enable-alternative-checkboxes li[data-task="r"] > input:checked::after, + body.enable-alternative-checkboxes li[data-task="r"] > p > input:checked::after { top: -2px; left: 0px; } /* For [*] "*" i.e. Star or Favourites */ - input[data-task="*"]:checked, li[data-task="*"]>input:checked, li[data-task="*"]>p>input:checked { + body.enable-alternative-checkboxes input[data-task="*"]:checked, + body.enable-alternative-checkboxes li[data-task="*"]>input:checked, li[data-task="*"]>p>input:checked { --checkbox-color-hover: var(--color-yellow); color: var(--color-yellow); -webkit-mask-image: url('data:image/svg+xml;utf8,'); @@ -1223,38 +1253,38 @@ /* -- background option. for info/highlight alternate checkbox */ /* setting the color for each label */ - .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, - li[data-task="I"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, + body.enable-alternative-checkboxes li[data-task="I"]::after { background: rgba(var(--color-yellow-rgb), 0.18); } - .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, - li[data-task="i"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, + body.enable-alternative-checkboxes li[data-task="i"]::after { background: rgba(var(--color-purple-rgb), 0.18); } - .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, - li[data-task="\""]::after, - li[data-task="“"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, + body.enable-alternative-checkboxes li[data-task="\""]::after, + body.enable-alternative-checkboxes li[data-task="“"]::after { background: rgba(var(--callout-quote), 0.18); } - .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, - li[data-task="!"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, + body.enable-alternative-checkboxes li[data-task="!"]::after { background: rgba(var(--color-red-rgb), 0.18); } - .HyperMD-list-line:has(> .task-list-label > [data-task="r"])::after, - li[data-task="r"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="r"])::after, + body.enable-alternative-checkboxes li[data-task="r"]::after { background: rgba(var(--callout-quote), 0.18); } - .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after, - li[data-task="*"]::after + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after, + body.enable-alternative-checkboxes li[data-task="*"]::after { background: rgba(var(--color-orange-rgb), 0.18); } /* adjust the background position, common to all types */ - body { + body.enable-alternative-checkboxes { --alt-checkbox-bg-content: ''; } - .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="r"])::after, - .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after { + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="I"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="i"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="\""])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="“"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="!"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="r"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line:has(> .task-list-label > [data-task="*"])::after { content: var(--alt-checkbox-bg-content); position: absolute; inset: 1px 0em 0 1.6em; height: calc(100% - 1px); width: calc(100% - 1.6em); @@ -1263,55 +1293,55 @@ } /* move the background in line with list level */ - .HyperMD-list-line-2:has(> .task-list-label > [data-task="I"])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="i"])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="\""])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="“"])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="!"])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="r"])::after, - .HyperMD-list-line-2:has(> .task-list-label > [data-task="*"])::after { + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="I"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="i"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="\""])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="“"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="!"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="r"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-2:has(> .task-list-label > [data-task="*"])::after { left: 3.55em; width: calc(100% - 3.55em); } - .HyperMD-list-line-3:has(> .task-list-label > [data-task="I"])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="i"])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="\""])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="“"])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="!"])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="r"])::after, - .HyperMD-list-line-3:has(> .task-list-label > [data-task="*"])::after { + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="I"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="i"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="\""])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="“"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="!"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="r"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-3:has(> .task-list-label > [data-task="*"])::after { left: 5.15em; width: calc(100% - 5.15em); } - .HyperMD-list-line-4:has(> .task-list-label > [data-task="I"])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="i"])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="\""])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="“"])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="!"])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="r"])::after, - .HyperMD-list-line-4:has(> .task-list-label > [data-task="*"])::after { + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="I"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="i"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="\""])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="“"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="!"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="r"])::after, + body.enable-alternative-checkboxes .HyperMD-list-line-4:has(> .task-list-label > [data-task="*"])::after { left: 6.75em; width: calc(100% - 6.75em); } /* general setup for background in reading view */ - li[data-task="I"], - li[data-task="i"], - li[data-task="\""], - li[data-task="“"], - li[data-task="!"], - li[data-task="r"], - li[data-task="*"] { + body.enable-alternative-checkboxes li[data-task="I"], + body.enable-alternative-checkboxes li[data-task="i"], + body.enable-alternative-checkboxes li[data-task="\""], + body.enable-alternative-checkboxes li[data-task="“"], + body.enable-alternative-checkboxes li[data-task="!"], + body.enable-alternative-checkboxes li[data-task="r"], + body.enable-alternative-checkboxes li[data-task="*"] { position: relative; z-index: 30; } - li[data-task="I"]::after, - li[data-task="i"]::after, - li[data-task="\""]::after, - li[data-task="“"]::after, - li[data-task="!"]::after, - li[data-task="r"]::after, - li[data-task="*"]::after { + body.enable-alternative-checkboxes li[data-task="I"]::after, + body.enable-alternative-checkboxes li[data-task="i"]::after, + body.enable-alternative-checkboxes li[data-task="\""]::after, + body.enable-alternative-checkboxes li[data-task="“"]::after, + body.enable-alternative-checkboxes li[data-task="!"]::after, + body.enable-alternative-checkboxes li[data-task="r"]::after, + body.enable-alternative-checkboxes li[data-task="*"]::after { content: ''; position: absolute; top: 1px; left: -0.25em; height: calc(100% - 1px); width: calc(100% + 0.25em); @@ -2572,6 +2602,12 @@ settings: type: heading level: 2 collapsed: true + - + id: enable-alternative-checkboxes + title: Enable Alternative Checkboxes + description: Disable this if you are using your own implementation via a CSS Snippet. + default: true + type: class-toggle - id: alt-checkbox-bg-content title: Background Option