58 lines
1.7 KiB
CSS
58 lines
1.7 KiB
CSS
/*
|
|
Task Progress bars
|
|
I really like this plugin. This aligns them to my typography and makes them less ugly
|
|
https://github.com/replete/obsidian-minimal-theme-css-snippets
|
|
*/
|
|
|
|
.markdown-source-view:not(.is-live-preview) {
|
|
.cm-task-progress-bar {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
.cm-task-progress-bar.with-number .progress-status {
|
|
color:var(--tx2);
|
|
font-weight:400;
|
|
font-size:10px;
|
|
position:absolute;
|
|
transform:translate(-4px,-12px);
|
|
width:4em;
|
|
}
|
|
|
|
.HyperMD-header .cm-task-progress-bar {
|
|
pointer-events:none;
|
|
position: absolute;
|
|
margin-top:calc(.5em + 1px);
|
|
margin-left:10px;
|
|
}
|
|
|
|
|
|
/* colors */
|
|
/* .cm-task-progress-bar .progress-bar-inline-1 { background-color:var(--color-red) }
|
|
.cm-task-progress-bar .progress-bar-inline-2 { background-color:var(--color-yellow) }
|
|
.cm-task-progress-bar .progress-bar-inline-3 { background-color:var(--color-green) } */
|
|
.cm-task-progress-bar .progress-bar-inline-4 { background-color:#6BCB77 }
|
|
|
|
/* background color */
|
|
.HyperMD-header .cm-task-progress-bar .progress-bar-inline-background {
|
|
background-color: hsla(var(--base-h), var(--base-s), calc(var(--base-l) - 10%), 0.8) !important;
|
|
opacity:0.5
|
|
}
|
|
|
|
.theme-dark .HyperMD-header .cm-task-progress-bar .progress-bar-inline-background {
|
|
background-color: hsla(var(--base-h), var(--base-s), calc(var(--base-l) + 25%), 0.8) !important;
|
|
}
|
|
|
|
/* complete checkmark state */
|
|
.cm-task-progress-bar .progress-bar-inline-4 {
|
|
display:none;
|
|
}
|
|
.cm-task-progress-bar:has(.progress-bar-inline-4)::after {
|
|
content:'✓';
|
|
position:absolute;
|
|
top:50%;
|
|
color: var(--tx2);
|
|
font-size:24px;
|
|
line-height: 1em;
|
|
transform:translate(-4px, -8px)
|
|
} |