箇条書きのバレットをFontAwesomeにするUserCSS
改行テスト用
あいうえお
あいうえお$ \begin{pmatrix}3\\2\\3\end{pmatrix}
かきくけこ
さしすせそ
たちつてと
なにぬねの
まみむめも
はひふへほ
CSS変数定義
カラーセット 1
https://scrapbox.io/files/6674d424450d2b001dd625b1.png
code:style.css
:root {
--li-color-0: var(--accent-color);
}
番号なしリスト
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 6px;
content: var(--ul-bullet, '\f068');
color: var(--li-color-0);
}
/* 既存のバレットを消す */
.line .indent-mark .dot { background-color: transparent; }
フォントサイズ - 一旦無効化
小さくなっていく仕様は現在いらないかな...
code:void.css
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 8px;
}
色の指定
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}