Render Obsidian's Markdown and Render views for better Task Management using tags

todo.css

/*
    Title: Render Obsidian's Markdown and Render views for better
        Task Management using tags
    Author: Jacob Levernier <j@adunumdatum.org>
    Year: 2021
    License: CC0 Public Domain Dedication
*/

:root {
    --deadline-background-color: var(--red);
    --scheduled-background-color: var(--green);
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta,
span.cm-hashtag.cm-meta.cm-hashtag-end,
a.tag {
    background: none;
    color: var(--text-normal) !important;
    font-weight: bold;
    /* text-decoration: overline; */
    padding: 0;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-TODO,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-TODO,
a.tag[href="#TODO"] {
    color: red !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-MIGRATED,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-MIGRATED,
a.tag[href="#MIGRATED"] {
    color: blue !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-DONE,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-DONE,
a.tag[href="#DONE"] {
    color: rgb(82, 255, 39) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-DONELATER,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-DONELATER,
a.tag[href="#DONELATER"] {
    color: rgb(82, 255, 39) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}


span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-CANCELED,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-CANCELED,
a.tag[href="#CANCELED"] {
    color: rgb(82, 255, 39) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-SCHEDULED,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-SCHEDULED,
a.tag[href="#SCHEDULED"] {
    color: rgb(175, 0, 175) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-NEXT,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-NEXT,
a.tag[href="#NEXT"] {
    color: rgb(52, 157, 255) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-NOW,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-NOW,
a.tag[href="#NOW"] {
    color: rgb(0, 204, 255) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-STARTED,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-STARTED,
a.tag[href="#STARTED"] {
    color: rgb(0, 204, 255) !important;
    background: none !important;
    padding: 0 !important;
    font-weight: bold !important;
}

/* span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-TODO,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-MIGRATED,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-DONE,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-CANCELED,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-SCHEDULED,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-NEXT,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-NOW {
  opacity: 0.2 !important;
} */

/* span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-TODO::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-MIGRATED::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-DONE::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-CANCELED::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-SCHEDULED::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-NEXT::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-NOW::after {
  opacity: 0.2 !important;
  content: "#task";
} */

/* Items directly after an #S hashtag */
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-S,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S,
a.tag[href="#S"],
a.tag[href="#S"] + span,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S + span,
span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-D,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D,
a.tag[href="#D"],
a.tag[href="#D"] + span,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D + span {
    font-size: 0.6rem !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-S,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S,
a.tag[href="#S"] {
    color: var(--scheduled-background-color) !important;
    background: none !important;
    font-weight: bold !important;
}

span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta.cm-tag-D,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D,
a.tag[href="#D"] {
    color: var(--deadline-background-color) !important;
    background: none !important;
    font-weight: bold !important;
}

/* span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D {
    border-radius: 0 !important;
    padding-right: 0 !important;
} */

/* a.tag[href="#S"],
a.tag[href="#D"] {
    padding-right: 0 !important;
} */

span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S::after,
a.tag[href="#S"]::after,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D::after,
a.tag[href="#D"]::after {
    content: ":" !important;
    font-weight: bold !important;
}

span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S + span,
span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D + span {
    /* border-radius: 0px 1em 1em 0px !important;
    color: var(--background-primary) !important; */
    padding: 0 !important;
}

/* span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-S + span {
    background-color: var(--scheduled-background-color) !important;
}

span.cm-hashtag.cm-meta.cm-hashtag-end.cm-tag-D + span {
    background-color: var(--deadline-background-color) !important;
} */