箇条書きのバレットをFontAwesomeにするUserCSS
CSS変数定義
カラーセット 1
code:style.css
:root {
}
色
確認
３
４
５
６
７
8
9
番号なしリスト
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -8px;
right: -4px;
font-family: 'Font Awesome 5 Free';
font-size: 10px;
font-weight: 900;
/* content: '\f068'; */
content: '\f45c';
color: var(--li-color-0);
transform: scale(1, 0.7);
}
.line .indent-mark .dot {
background-color: transparent;
}
フォントサイズ
code:style.css
.line .indent-mark .c-0 + .dot::before,
.line .indent-mark .c-1 + .dot::before,
.line .indent-mark .c-2 + .dot::before,
.line .indent-mark .c-3 + .dot::before,
.line .indent-mark .c-4 + .dot::before {
font-size: 10px;
transform: scale(1.2, 0.6);
}
色の指定
code:style.css
.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);
}
その他
code:style.css
/* 引用のみの行はマーカーを消す */
.line:has( span.quote) .indent-mark .dot::before {
content: none !important;
}
/* 見た目で画像しかない行のドットを消す */
.line:has(.text .indent > .modal-image)
:not(:has(.text .indent > .char-index:not(.empty-char-index)))
:not(:has(.text .indent > :not(.modal-image):not(.char-index)))
.indent-mark .dot::before {
content: none !important;
}