UserCSS:箇条書き階層の色分け
個人的には、この機能がないとつらい
カラーセット 1
code:stylexx.css
:root {
--li-color-0: #EEE;
--li-color-1: #FE0;
--li-color-2: #F0F;
--li-color-3: #0FF;
--li-color-4: #F00;
--li-color-5: #0F0;
}
カラーセット 2
code:style.css
:root {
--li-color-0: #E0E0E0;
--li-color-1: #EDAD0B;
--li-color-2: #C7243A;
--li-color-3: #932674;
--li-color-4: #3261AB;
--li-color-5: #009F8C;
}
カラーセット 3
code:stylexx.css
:root {
--li-color-0: #E0E0E0;
--li-color-1: hsla(288,100%,40%,0.6);
--li-color-2: hsla(216,100%,40%,0.6);
--li-color-3: hsla(144,100%,40%,0.6);
--li-color-4: hsla(72,100%,40%,0.6);
--li-color-5: hsla(0,100%,40%,0.6);
}
カラーセット 4
code:stylexx.css
:root {
--li-color-0: #EEE;
--li-color-1: #999;
--li-color-2: #AAA;
--li-color-3: #BBB;
--li-color-4: #CCC;
--li-color-5: #DDD;
}
code:stylexx.css
.line .indent-mark .dot {
height: 1.1em;
width: 1.1em;
border-radius: 15%;
font-size: 16px;
background-color: rgba(80%,80%,0%,0.8);
}
code:stylexx.css
.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;
}
1
2
3
4
5
6
7
code:stylexx.css
.line .indent-mark .dot:before {
display: block;
/*position: absolute;*/
position: center;
height: 1.1em;
width: 1.1em;
border-radius: 50%;
right: -4px; /* */
top: -8px;
font-size: 16px;
/*content: ''; /* */
content: '😆'; /* */
/*content: '💎'; /* */
/*color: #CCC;*/
background-color: rgba(80%,80%,0%,0.5);
}
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
background-color: #fe0;
font-size: 16px;
}
.line .indent-mark .c-1 + .dot::before {
background-color: #F0F;
font-size: 16px;
}
.line .indent-mark .c-2 + .dot::before {
background-color: #0FF;
font-size: 16px;
}
.line .indent-mark .c-3 + .dot::before {
background-color: #F00;
font-size: 16px;
}
.line .indent-mark .c-4 + .dot::before {
background-color: #0F0;
font-size: 16px;
}
色の指定
色の変化により階層を知らせる
色の濃淡（グラデーション）による変化は、理屈としては合理的だが、視覚効果としてはいまいち
他の要素に重複しない色を選ぶ（ブルーはリンク色として、すでに使われている）
色の指定（色変化版）
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
color: #fe0;
}
.line .indent-mark .c-1 + .dot::before {
color: #F0F;
}
.line .indent-mark .c-2 + .dot::before {
color: #0FF;
}
.line .indent-mark .c-3 + .dot::before {
color: #F00;
}
.line .indent-mark .c-4 + .dot::before {
color: #0F0;
}
色の指定（グラデーション版）
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
color: #999;
}
.line .indent-mark .c-1 + .dot::before {
color: #AAA;
}
.line .indent-mark .c-2 + .dot::before {
color: #BBB;
}
.line .indent-mark .c-3 + .dot::before {
color: #CCC;
}
.line .indent-mark .c-4 + .dot::before {
color: #DDD;
}
code:style.css
.line .indent-mark .dot {
height: 1.1em;
width: 1.1em;
content: ''; /* */
border-radius: 15%;
font-size: 12px;
background-color: var(--li-color-0);
}
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
background-color: var(--li-color-1,#fe0);
}
.line .indent-mark .c-1 + .dot::before {
background-color: var(--li-color-2,#F0F);
}
.line .indent-mark .c-2 + .dot::before {
background-color: var(--li-color-3,#0FF);
}
.line .indent-mark .c-3 + .dot::before {
background-color: var(--li-color-4,#F00);
}
.line .indent-mark .c-4 + .dot::before {
background-color: var(--li-color-5,#0F0);
}
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: 8px;
/* content: '?'; /* ? */
/* content: '\f00c'; /* チェックマーク */
/* content: '\f068'; /* マイナス記号 */
/* content: '\f10c'; /* まる */
content: '\f111'; /* まる */
/*　content: '\f0c8'; /* 四角 */
/* content: '\f096'; /* 四角 */
color: var(--li-color-def,#EEE);
}
.line .indent-mark .dot {
background-color: transparent;
}
フォントサイズ
code:style.css
.line .indent-mark .c-0 + .dot::before {
font-size: 12px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 12px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 8px;
}
色の指定
code:style.css
.indent-markstyle*="width: 1.5em" .dot::before,
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1,#fe0);
}
.indent-markstyle*="width: 3em" .dot::before,
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2,#F0F);
}
.indent-markstyle*="width: 4.5em" .dot::before,
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3,#0FF);
}
.indent-markstyle*="width: 6em" .dot::before,
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4,#F00);
}
.indent-markstyle*="width: 7.5em" .dot::before,
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5,#0F0);
}
UserCSS:箇条書き
UserCSS.icon
https://img.shields.io/badge/UserCSS-箇条書き階層の色分け-1572B6.svg?logo=css3&style=for-the-badge