Dynalist CSS

readme.md

My custom CSS for Dynalist.

dynalist.css

/* Add a background image. */
.AppContainer {
    background-image: url(https://localhost/dynalist_background.jpg);
    background-size: cover;
    background-position: right center;
}

/* Darken the background image. */
.main-container {
    background-color: rgba(24,24,24,0.95);
}

/* Display priority tags as colored circle badges instead of text. */
.node-tag[title*="#today"],
.node-tag[title*="#todo"],
.node-tag[title*="#wait"],
.node-tag[title*="#cont"],
.node-tag[title*="#important"],
.node-tag[title*="#done"] {
	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*="#todo"]::before,
.node-tag[title*="#wait"]::before,
.node-tag[title*="#cont"]::before,
.node-tag[title*="#important"]::before,
.node-tag[title*="#done"]::before {
	display: block;
	content: '';
	position: absolute;
    color: black;
    width: 1em;
    height: 1em;
    border-radius: 50%;
}

.node-tag[title*="#today"]::before {
	background: #d9534f;
}

.node-tag[title*="#todo"]::before {
    background: #0275d8;
}

.node-tag[title*="#done"]::before {
    background: #5cb85c;
}

.node-tag[title*="#cont"]::before {
    background: #5bc0de;
}

.node-tag[title*="#wait"]::before {
    background: #ccc;
}

.node-tag[title*="#important"]::before {
    background: #ffd946;
}

screenshot.png