Style Bullets in Lists by Level

Custom CSS & Theme Design
2

Discussing this on the Discord help me find an answer that works:

:root {
/*  --bullet-new-color: Orange; */
 --bullet-new-color: rgb(89,89,89);
}

.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after {
/* Bullet */
	height: 5px;
	width: 5px;
	border-radius: 50%;
	background-color: var(--bullet-new-color);
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
/* Dash */
	height: 1px;
	width: 7px;
	border-radius: 0%;
	background-color: var(--bullet-new-color);
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
/* Hollow Bullet */
	height: 4px;
	width: 4px;
	background-color: Transparent;
	border-color: var(--bullet-new-color);
	border-style: solid;
	border-radius: 50%;
	border-width: 1px;
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
/* Solid Square */
	height: 5px;
	width: 5px;
	border-radius: 0%;
	background-color: var(--bullet-new-color);
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-5 .list-bullet:after {
/* Dash */
	height: 1px;
	width: 7px;
	border-radius: 0%;
	background-color: var(--bullet-new-color);
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-6 .list-bullet:after {
/* Hollow Square */
	height: 4px;
	width: 4px;
	background-color: Transparent;
	border-color: var(--bullet-new-color);
	border-style: solid;
	border-radius: 0%;
	border-width: 1px;
} 

.markdown-source-view.mod-cm6 .HyperMD-list-line-7 .list-bullet:after {
/* Small Bullet */
	height: 2px;
	width: 2px;
	border-radius: 50%;
	background-color: var(--bullet-new-color);
}

Hope this helps someone!

12 Likes