/suto3/UserCSS:箇条書き階層の色分け

generated at 2/11/2025, 11:34:12 AM
UserCSS:箇条書き階層の色分け
個人的には、この機能がないとつらい
カラーセット 1
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
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
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
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;
}

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);
}

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
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);
}

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;
}

色の指定
色の変化により階層を知らせる
色の濃淡（グラデーション）による変化は、理屈としては合理的だが、視覚効果としてはいまいち
他の要素に重複しない色を選ぶ（ブルーはリンク色として、すでに使われている）

色の指定（色変化版）
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;
}

色の指定（グラデーション版）
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;
}


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);
 }

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);
}

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;
}

フォントサイズ
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;
}

色の指定
style.css.indent-mark[style*="width: 1.5em"] .dot::before,
.line .indent-mark .c-0 + .dot::before {
  color: var(--li-color-1,#fe0);
}
.indent-mark[style*="width: 3em"] .dot::before,
.line .indent-mark .c-1 + .dot::before {
  color: var(--li-color-2,#F0F);
}
.indent-mark[style*="width: 4.5em"] .dot::before,
.line .indent-mark .c-2 + .dot::before {
  color: var(--li-color-3,#0FF);
}
.indent-mark[style*="width: 6em"] .dot::before,
.line .indent-mark .c-3 + .dot::before {
  color: var(--li-color-4,#F00);
}
.indent-mark[style*="width: 7.5em"] .dot::before,
.line .indent-mark .c-4 + .dot::before {
  color: var(--li-color-5,#0F0);
}

UserCSS:箇条書き