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

code: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;

}

番号付きリストの記号を変える

code:style.css

.number-list .indent-mark:not(style="width: 0em;"):has(.dot)::after {

content: "\f292"; /* hashtag */

}

インデントの深さに応じてdotのサイズを変える

code:style.css

.indent-markstyle="width: 1.5em;" { --dot-size: 10px; }

.indent-markstyle="width: 3em;" { --dot-size: 9px; }

.indent-markstyle="width: 4.5em;" { --dot-size: 8px; }

.indent-markstyle="width: 6em;" { --dot-size: 7px; }

インデントの深さに応じてdotの色を変える

code: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; }