generated at
インデントの深さに応じてdotの色やサイズを変えるUserCSS

style.css
.line .indent-mark .dot { display: none; } .indent-mark:not([style="width: 0em;"]):has(.dot)::after { --size: var(--dot-size, 6px); position: absolute; top: calc(13px - var(--size) / 2); right: calc(12px - var(--size) / 2); display: inline-block; width: var(--size); font-family: "Font Awesome 5 Free"; font-size: var(--size); font-style: normal; font-weight: 900; /* Solid */ font-variant: normal; line-height: 1; color: var(--dot-color, var(--page-text-color, #555)); text-align: center; content: "\f068"; /* minus */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; }

番号付きリストの記号を変える
style.css
.number-list .indent-mark:not([style="width: 0em;"]):has(.dot)::after { content: "\f292"; /* hashtag */ }

インデントの深さに応じてdotのサイズを変える
style.css
.indent-mark[style="width: 1.5em;"] { --dot-size: 10px; } .indent-mark[style="width: 3em;"] { --dot-size: 9px; } .indent-mark[style="width: 4.5em;"] { --dot-size: 8px; } .indent-mark[style="width: 6em;"] { --dot-size: 7px; }

インデントの深さに応じてdotの色を変える
style.css
.indent-mark { --dot-color: #edad0b; } .indent-mark:is( [style="width: 3em;"], :has(.dot:nth-child(6n + 3)) ) { --dot-color: #c7243a; } .indent-mark:is( [style="width: 4.5em;"], :has(.dot:nth-child(6n + 4)) ) { --dot-color: #932674; } .indent-mark:is( [style="width: 6em;"], :has(.dot:nth-child(6n + 5)) ) { --dot-color: #3261ab; } .indent-mark:is( [style="width: 7.5em;"], :has(.dot:nth-child(6n + 6)) ) { --dot-color: #009f8c; } .indent-mark:is( [style="width: 9em;"], :has(.dot:nth-child(6n + 7)) ) { --dot-color: #c9c9c9; }