GLight
January 9, 2024, 1:55am
1
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
GLight
January 10, 2024, 4:01pm
4
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);*/
}
system
Closed
January 17, 2024, 4:02pm
5
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.