Style Bullets in Lists by Level

[rmdelatorre]

I’m trying to style the bullets in unordered lists by level of indentation.

It is supposed to look like this:

• (bullet) Item 1
  • (dash) Item 1.1
    • (hollow circle) Item 1.1.1

The following code, that I got from someone, used to work prior to Obsidian 1.0. However, it doesn’t work anymore.

:root {
  --marker-odd: "\2022\2009\2009";
  --marker-even: "\2013\2009\2009";
  --marker-three: "\25e6\2009\2009";
}

.markdown-source-view.mod-cm6 .cm-list-1 .list-bullet::after { content: var(--marker-odd); color: orange;}
.markdown-source-view.mod-cm6 .cm-list-2 .list-bullet::after { content: var(--marker-even); color: orange;}
.markdown-source-view.mod-cm6 .cm-list-3 .list-bullet::after { content: var(--marker-three); color: orange;}

I’ve tried several variations of the selector by looking at the console, but I confess I don’t know much about CSS so I don’t really know what I’m doing.

Does anyone have any suggestions?

Things I have tried

What I’m trying to do

[rmdelatorre]

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!

[Kuiriel]

This is great, my thanks to you and whoever helped you on Discord. I moved from Scrivener in no small part because it would eat my lists and I’d get confused as to what items I had intended at what level. Here things are actually at different levels thanks to the way markdown is just text, and the CSS gets to do the styling of the indentations for me.