CSS to hide completed checkbox items in the Editor (specifically using Rich Markdown)

Features
4

I went ahead and tweaked a bit more to give myself different options for when I want to completely hide or just reduce visibility and space taken up by completed checkboxes (sometimes lists are nested and the context of the completed checkboxes in the level above is needed).

Sharing as it could give others ideas for using toggles and tweaking their Editor pane how they like :slight_smile:


/* Hide the completed checkboxes in the Editor pane
Instructions added to the top of the note:
*Use `[Hide x]` (fade out) or `[Hide y]` (display none) or `[Hide z]` (shrink) exactly at the end of the note title to toggle the show/hide of completed checkboxes. Remove some part of this if you don't want to hide completed checkboxes.*
*/

div:has(input[value$="[Hide x]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
  /* Keeps the line there but blank - potentially confusing as the cursor will still place in the text and can delete/edit */
  /* visibility: hidden; */
  /* Better solution as you can still faintly see the text but all the focus is on what is not yet done */
  opacity:0.2;
}

div:has(input[value$="[Hide y]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
  /* Causes cursor jumps when toggled on/off the first time */
  display:none;
}

div:has(input[value$="[Hide z]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
  font-size:10px;
  line-height:0.8em;
  opacity: 0.4;
}

/* Just a visual indicator to make it clearer that completed checkboxes have been hidden in this note */
input.title-input[value$="[Hide x]"] {
  color: limegreen !important;
}

input.title-input[value$="[Hide y]"] {
  color: orange !important;
}

/* nice teal */
input.title-input[value$="[Hide z]"] {
  color: #3fa298 !important;
}

[Hide x]:

image

[Hide y]:

image

[Hide z]:

image

1 Like