箇条書きのbulletを変えるUserCSS
箇条書きのbulletを変えるUserCSS
from /villagepump/箇条書きのバレットをFontAwesomeにするUserCSS
code:style.css
:root {
/* colors for each indent level */
--li-color-1: #edad0b;
--li-color-2: #c7243a;
--li-color-3: #932674;
--li-color-4: #3261ab;
--li-color-5: #009f8c;
--li-color-6: #e0e0e0;
/* bullet characters */
--ul-bullet: "\f068"; /* minus */
--ol-bullet: "\f292"; /* hash */
}
/* bullet character for unordered list */
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
font-family: "Font Awesome 5 Free";
font-size: 9px;
font-weight: 900;
content: var(--ul-bullet);
color: var(--li-color-1);
}
/* bullet character for ordered list */
.line.number-list .dot::before {
position: inherit;
top: -12px;
content: var(--ol-bullet);
font-size: 10px;
}
/* bullet color */
.indent-markstyle*="width: 1.5em" .dot::before,
.indent-mark .dot:nth-child(6n + 2)::before {
color: var(--li-color-1);
}
.indent-markstyle*="width: 3em" .dot::before,
.indent-mark .dot:nth-child(6n + 3)::before {
color: var(--li-color-2);
}
.indent-markstyle*="width: 4.5em" .dot::before,
.indent-mark .dot:nth-child(6n + 4)::before {
color: var(--li-color-3);
}
.indent-markstyle*="width: 6em" .dot::before,
.indent-mark .dot:nth-child(6n + 5)::before {
color: var(--li-color-4);
}
.indent-markstyle*="width: 7.5em" .dot::before,
.indent-mark .dot:nth-child(6n + 6)::before {
color: var(--li-color-5);
}
.indent-markstyle*="width: 9em" .dot::before,
.indent-mark .dot:nth-child(6n + 7)::before {
color: var(--li-color-6);
}
/* remove default bullet */
.line .indent-mark .dot {
background-color: transparent;
}
色指定
https://gyazo.com/48b70874e033fa18eda070a107a47cdf
インデントレベル1のdotはspan.indent-markの2番目の子要素なので、6n+2にマッチする