UserCSS:箇条書き
code:style.css
/*@import "/api/code/suto3/UserCSS:箇条書きをウザくする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:箇条書き階層の色分け/style.css"; /* */
@import "/api/code/suto3/UserCSS:箇条書きのビュレットに画像を使う/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:箇条書きのビュレットにFontAwesomeを使う/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:箇条書きのビュレットに絵文字を使う/style.css"; /* */
code:stylexx.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
code:stylexx.css
.line .indent-mark .dot {
}
/*
.line .indent-mark .c-0 + .dot { background-color: #FE0;} .line .indent-mark .c-1 + .dot { background-color: #F0F;} .line .indent-mark .c-2 + .dot { background-color: #0FF;} .line .indent-mark .c-3 + .dot { background-color: #F00;} .line .indent-mark .c-4 + .dot { background-color: #0F0;} .line .indent-mark .c-0 + .dot { background-color: #888;} .line .indent-mark .c-1 + .dot { background-color: #999;} .line .indent-mark .c-2 + .dot { background-color: #aaa;} .line .indent-mark .c-3 + .dot { background-color: #bbb;} .line .indent-mark .c-4 + .dot { background-color: #ccc;} */
a
b
c
1
2
3
4
番号付きリストのバレットを表示させるUserCSS code:stylexx.css
.line.number-list .dot {
display: block !important;
/* display: list-item !important;*/
/* display: none; */
}
1. ひい
2. ふう
code:stylexx.css
/* インデントレベルごとに行頭文字を切り替えるスタイル指定*/
/* メニューのHide Dotと連動する */
/* この例では、第５レベルまでの行頭文字を指定。第６レベルからはドットに戻る */
/* すべてのビュレット文字に共通の設定 */
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -5px;
top: -10px;
}
/* 第１レベルのインデント（c-0）の設定 */
/* ドットはバックグラウンドカラーなので透明にする */
/* セレクタとして
.line .indent-mark .dot { ... }
を使うとインデントレベルごとに
background-color: transparent;
を指定する必要はないが、指定のないレベルのドットが消える
*/
.line .indent-mark .c-0 + .dot {
background-color: transparent;
}
/* このレベルの行頭文字を表示 */
.line .indent-mark .c-0 + .dot:before {
content:"◎";
}
/* 以下同様 */
.line .indent-mark .c-1 + .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot:before {
content:"★";
}
.line .indent-mark .c-2 + .dot {
background-color: transparent;
}
.line .indent-mark .c-2 + .dot:before {
content:"▶";
}
.line .indent-mark .c-3 + .dot {
background-color: transparent;
}
.line .indent-mark .c-3 + .dot:before {
content:"■";
}
.line .indent-mark .c-4 + .dot {
background-color: transparent;
}
.line .indent-mark .c-4 + .dot:before {
content:"□";
}
code:stylexx.css
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-size: 24px;
content: '•'; /* U+2022 */
}
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot:before {
content: '‣'; /* U+2023 */
}
.line .indent-mark .c-2 + .dot:before {
content: '⁃'; /* U+2043 */
}
.line .indent-mark .c-3 + .dot:before {
content: '◦'; /* U+25E6 */
}
https://img.shields.io/badge/UserCSS-箇条書き-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon