Is there any CSS selector for background of task-todo type?

What I’m trying to do

I’d like to set the background color of the lines of task, by CSS. Is there any clue about the CSS selector?

Things I have tried

for the task-done, i use the following CSS selector

.markdown-preview-view ul > li.task-list-item.is-checked{
  text-decoration: none;
  color: var(--text-muted);
  background: var(--checklist-done-background);
}
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task= ]){
  text-decoration: none;
  color: var(--text-muted);
  background: var(--checklist-done-background);
}
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"], .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
  background: var(--checklist-done-background);
}

Like this?:

  /* READING VIEW */
  .markdown-preview-view ul > li.task-list-item:not(.is-checked) {
    background: green;
  }
  /* LIVE PREVIEW */
  .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] {
    background: green;
  }
1 Like

They work! Thanks!

I notice that the backgound color the task-todo will override the activeline background color, so I add the following lines to make me know on which task the cursor is located.

.theme-dark {
  --activeline-background: #7364753f;
  --activeline-border-color: rgb(0, 177, 101);
  --activeline-lineNumber-brightness:3;
}


.theme-light {
  --activeline-background: rgba(24, 130, 229, 0.27);
  --activeline-border-color: rgb(5, 119, 227);
  --activeline-lineNumber-brightness:0;
}

.CodeMirror-activeline.CodeMirror-linebackground{
  background-color: var(--activeline-background);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var( --activeline-border-color);
  border-right-style: solid;
  border-right-width: 1em;
  border-right-color: var( --activeline-border-color);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var( --activeline-border-color);
}

.cm-active.cm-line{
  background-color: var(--activeline-background);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var( --activeline-border-color);
  border-right-style: solid;
  border-right-width: 1em;
  border-right-color: var( --activeline-border-color);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var( --activeline-border-color);
}

.cm-lineNumbers .cm-gutterElement.cm-active {
  font-weight: bold !important;
  filter: brightness(var(--activeline-lineNumber-brightness));
  display: flex;
/*border-right: 1px solid var(--interactive-accent);*/
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.