Task Progressbars.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)
}