インデントが深すぎると色が変わる箇条書きのバレット
箇条書きのバレットをFontAwesomeにするUserCSSを改造して、インデントが深すぎると色が変わるようにしたい
スマートフォンから参戦できない深さ#63943969774b1700008e7073に基づいて9以上で色を変えるようにする
ついでに少しリファクタリングする
インデントが揃っていない場所を修正
「クリスマスに作った行だけ星にするテスト」は削除した
「フォントサイズ」を削除して統合
1
2
3
4
5
6
7
8
9
10
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
番号なしリスト
style.css/* アイコン指定 */
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
font-family: 'Font Awesome 5 Free';
font-size: .6em;
content: '\f068'; /* マイナス記号:通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
/* content: '\f1fd'; /* バースデーケーキ */
font-weight: 900;
color: #c9c9c9;
}
/* 既定のbulletを消す */
.line .indent-mark .dot {
background-color: transparent;
}
/* 色 */
.indent-mark[style*="width: 1.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+2)::before {
color: #EDAD0B;
}
.indent-mark[style*="width: 3em"] .dot::before,
.indent-mark .dot:nth-child(6n+3)::before {
color: #C7243A;
}
.indent-mark[style*="width: 4.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+4)::before {
color: #932674;
}
.indent-mark[style*="width: 6em"] .dot::before,
.indent-mark .dot:nth-child(6n+5)::before {
color: #3261AB;
}
.indent-mark[style*="width: 7.5em"] .dot::before,
.indent-mark .dot:nth-child(6n+6)::before {
color: #009F8C;
}
.indent-mark[style*="width: 9em"] .dot::before,
.indent-mark .dot:nth-child(6n+7)::before {
color: #c9c9c9;
}
.indent-mark span.dot:nth-child(n+10)::before {
--over-dot-color: #363636;
color: #fffafa;
text-shadow: 1px 0px 1px var(--over-dot-color),
0px 1px 1px var(--over-dot-color),
-1px 0px 1px var(--over-dot-color),
0px -1px 1px var(--over-dot-color);
}番号つきリスト
style.css.line.number-list .dot {
display: list-item; /* 表示する */
}
/* アイコン指定 */
.line.number-list .dot::before {
position: inherit;
top: -11px;
content: '\f292'; /* #:通常 */
/* content: '\f2dc'; /* 雪:クリスマス用 */
font-size: .6em;
}