インデントのドットの色を変えるUserCSS
インデントを多く使う複雑なページだと、黒色ばっかりで見にくく、インデントのレベルが分かり辛いことがあります。
その対策として、インデントのレベルごとに違う色を設定する様にしました。
5個以降は1個目の色が使われます。
使いたい方は、自分のページにstyle.css のコードブロックを作り、以下の文をimportしてください。
code:css
@import 'https://scrapbox.io/api/code/teamlab-frontend/インデントのドットの色を変えるUserCSS/style.css';
色を変えたい方は、下のcssをそのまま自分のページにコピペして、background-color の色を変更してください。
現状はこんな色合いです。
https://gyazo.com/0338678433bed8176af5b97e33b7ac8d
code:style.css
.line .indent-mark .dot {
background-color: #5FBA98;
margin-top: 4px;
}
.line .indent-mark .c-1 + .dot {
background-color: #BED16A;
}
.line .indent-mark .c-2 + .dot {
background-color: #F0CD34;
}
.line .indent-mark .c-3 + .dot {
background-color: #F77A27;
}
.line .indent-mark .c-4 + .dot {
background-color: #DB3B48;
}
1
2
3
4
5
6
参考
/customize/インデントレベルごとに行頭文字を変更
#UserCSS
Created by tabata