I’ve posted this elsewhere but this is a combination of CSS that’ve worked for me. When I’ll have more time for this. I’ll adjust it to solve few inconviences (edge/mobile case imperfections, few usability) and share it here.
For now, this is how dynalist can be used (every common possibility condensed, hopefully)
are you able to link to your css? thanks
Sure! I suggest waiting (follow thread) since there are major improvements/color-adj. to be made (writing them down as I use it + future usability/parsability for/with obsidian and explanation. For this, I’m currently busy until early october, then I expect to continue.
Let me know related tips or if it helps in its active form 
/* @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@125,200..900&display=swap'); */
.is-desktop .Document-rootNode {padding: 0 10px;}
/* .DocumentBreadcrumb, .DocumentBreadcrumb-delimiter {padding: 0 0 0 0; font-family: "Inconsolata", sans-serif; color: #A7A7A7;} */
.DocumentBreadcrumb {padding: 10px 0 0 0; min-height: 0;}
.DocumentBreadcrumb-delimiter {margin: 0;}
.DocumentTools {margin-top: 18px;}
.node-inline-code {color: #a1a2f2;}
/* condense space around the header.is-mobile .LeftPaneContainer-header { padding: 10px 0 5px 0; }
.node-italics { background-color: #fe888888; } */
/* hide bullets while retaining move functionality
.Node-bullet:before { display: none; }*/
/* Don't show icon for Dynalist links. */.node-link-internal.is-displayed:before { content: none; }
/* make tags with out tag indicator symbol and in colored pillbox format */.node-tag[title="Filter #soon"] { display: inline-block; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding-left: 7px; padding-right: 7px; height: 24px; background-color: #20B2AA !important; color: #181818 !important; font-weight: normal; text-decoration: none; }
/*.node-tag::first-letter { font-size: 0%; } */
.node-tag[title="Filter #pp"] { display: inline-block; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding-left: 7px; padding-right: 7px; height: 24px; background-color: DimGrey !important; color: #181818 !important; font-weight: normal; text-decoration: none; }
/*.node-tag::first-letter { font-size: 0%; }*/
/* Display priority tags as colored circle badges instead of text. */
.node-tag[title*="#today"], .node-tag[title*="#wait"], .node-tag[title*="#await"], .node-tag[title*="#deadline"], .node-tag[title*="#now"], .node-tag[title*="#impo"], .node-tag[title*="#crit"], .node-tag[title*="#solved"], .node-tag[title*="#canwait"], .node-tag[title*="diss"], .node-tag[title*="do"], .node-tag[title*="solve"], .node-tag[title*="opt"], .node-tag[title*="task"], .node-tag[title*="finally"], .node-tag[title*="finish"], .node-tag[title*="ultimate"], .node-tag[title*="uhq"], .node-tag[title*="vhq"], .node-tag[title*="hq"], .node-tag[title*="mq"], .node-tag[title*="lq"], .node-tag[title*="arch"], .node-tag[title*="dyna"] { position: relative; display: inline-block; color: transparent; width: 1.1em; white-space: nowrap; pointer-events: none; cursor: auto; }
.node-tag[title*="#today"]::before, .node-tag[title*="#wait"]::before, .node-tag[title*="#await"]::before, .node-tag[title*="#deadline"]::before, .node-tag[title*="#now"]::before, .node-tag[title*="#impo"]::before, .node-tag[title*="#crit"]::before, .node-tag[title*="#solved"]::before, .node-tag[title*="#canwait"]::before, .node-tag[title*="diss"]::before, .node-tag[title*="do"]::before, .node-tag[title*="solve"]::before, .node-tag[title*="opt"]::before, .node-tag[title*="task"]::before, .node-tag[title*="finally"]::before, .node-tag[title*="finish"]::before, .node-tag[title*="ultimate"]::before, .node-tag[title*="uhq"]::before, .node-tag[title*="vhq"]::before, .node-tag[title*="hq"]::before, .node-tag[title*="mq"]::before, .node-tag[title*="lq"]::before, .node-tag[title*="arch"]::before { display: block; content: ''; position: absolute; color: black; width: 0.6em; height: 0.6em; border-radius: 40%; margin-top: 0.3em; margin-left: 0.1em; } .node-tag[title*="#deadline"]::before, .node-tag[title*="#now"]::before { background: Red; }
.node-tag[title*="#crit"]::before { background: #d9534f; }
.node-tag[title*="#await"]::before { background: #5cb85c; }
.node-tag[title*="#today"]::before { background: #5bc0de; }
.node-tag[title*="#wait"]::before { background: #0b3f1e; border: 1.6px #b3a98f dashed; }
.node-tag[title*="#impo"]::before { background: #ffd946; }
.node-tag[title*="#solved"]::before { background: #97c25b; }
.node-tag[title*="#canwait"]::before { border: 1.6px #b3a98f dashed; }
.node-tag[title*="diss"]::before { background: #ff6969; border: 1.6px #ff6969 dashed; }
.node-tag[title*="do"]::before { border: 1.6px #0185df dashed; }
.node-tag[title*="solve"]::before { border: 1.6px #0185df solid; }
.node-tag[title*="opt"]::before { border: 1.6px #77a8ca dashed; }
.node-tag[title*="task"]::before { border: 1.6px #453e3e solid; }
.node-tag[title*="finally"]::before { border: 1.6px #29ca41 dashed; }
.node-tag[title*="finish"]::before { border: 1.6px #29ca41 solid; }
.node-tag[title*="ultimate"]::before { border: 1.6px #facd46 dotted; }
.node-tag[title*="uhq"]::before { border: 1.6px #75ff00 dotted; }
.node-tag[title*="vhq"]::before { border: 1.6px #d5ffb1 dotted; }
.node-tag[title*="hq"]::before { border: 1.6px #b1f8ff dotted; }
.node-tag[title*="mq"]::before { border: 1.6px #ecaf66 dotted; }
.node-tag[title*="lq"]::before { border: 1.6px #9f654e dotted; }
.node-tag[title*="arch"]::before { border: 1.6px #ff9f2c dashed; }
/* Use infinity symbol for "dyna" */
.node-tag[title*="dyna"]::before { content: '\221E'; /* Infinity symbol */ width: auto; height: auto; border-radius: 0; /* Remove circle shape */ color: cyan; /* Set color to cyan */ }
/* Shift checkbox over to the right on mobile Makes it harder to accidentally click on zoom-in bullet. */.is-mobile .Node:not(.is-currentRoot) .Node-checkbox { margin-left: 8px; margin-right: -16px; } .is-mobile .Node.has-checkbox .Node-contentContainer { margin-left: 18px; margin-right: -14px; }
/* color labels flat */
:root { --transparent: rgba(0,0,0,0); } /* change color labels*/ /* red */ .set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 { background: var(--transparent) !important; border-radius: 0; padding-left: 6px !important; border-left: 5px solid #f20866; max-width: 70%; } /* orange */ .set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2 { background: var(--transparent) !important; padding-left: 6px !important; border-left: 5px solid #f48c46; border-radius: 0; max-width: 70%; } /* yellow */ .set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 { background: var(--transparent) !important; padding-left: 6px !important; border-left: 5px solid #f9d851; border-radius: 0; max-width: 70%; } /* green */ .set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4 { background: var(--transparent) !important; padding-left: 6px !important; border-left: 5px solid #89f279; border-radius: 0; max-width: 70%; } /* blue */ .set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5 { background: var(--transparent) !important; padding-left: 6px !important; border-left: 5px solid #75dce6; border-radius: 0; max-width: 70%; } /* purple */ .set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6 { background: var(--transparent) !important; padding-left: 6px !important; border-left: 5px solid #c073c1; border-radius: 0; max-width: 70%; }
/* replace icons with bullets */
/*.FolderItem-icon:before { content: "\e90c"; color: rgb(164, 164, 164); }*/
.node-tag[title*="#pro"] .DocumentItem-icon:before { content: "\002B"; /* Adds a plus sign before the item */ color: rgb(158, 255, 121); /* Sets the color to a light green */ }
/*.node-tag[title*="#con"] .DocumentItem-icon:before { content: "\2212"; color: rgb(255, 117, 115); }*/