インデントの深さに応じて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; }