インデントに縦線を表示するようにした
from 2022/02/05
Mijinko_SD.icon
/customize/インデントレベルをわかりやすくするを流用して箇条書きのインデントに縦線を表示するようにした
https://gyazo.com/2d8aeec3eba9290a54415df8c0e0351a
ただ、色がまだちょっと強すぎる（目に悪い）のが気になるところ
https://gyazo.com/4f409324e954e5e44e8f228556b35f04
めんどくさすぎて直す気が起きない( ◞‸◟)
彩度を下げたら別の色になってしまうから、もう少し明度を上げるべきか
RGBをHSLに変換してから、輝度（L）を221にしてみた
https://gyazo.com/7a9ef68a6879dfef8a5eef424139d9e6
こんどは薄すぎて弱弱しい可愛らしい色になってしまった。
輝度を183に
https://gyazo.com/d45d0559d7336aaf7fd5d9b3aaae3c07
（人によって好みはあると思うけど）大体いい感じなのでは？
若干濃い気がしなくもない
これ以上直すのめんどくさい
目に悪くない限界ラインだと思うのでこれ以上濃くできないんじゃないかな。
やっぱ濃すぎたので輝度を203に
https://gyazo.com/26c7b66de2237520654a7a3f27e5b20b
https://gyazo.com/a729967002fda45856afae7848f31423
いい感じなのでは？
これの嬉しさがあまりわからないです 増井俊之.icon
階層の意識がシンドくないですか?
階層が深いと、スマホで見づらいのですMijinko_SD.icon
スマホは画面が狭いので、複数行を一望しにくい
インデントを深くしすぎるとスマホでの表示が死ぬ
親階層となる行を探しにくい
その階層が（子階層を含めて）どこからどこまでなのかがわかりにくい
もともと階層を意識して書く人(yosider.icon含む)には嬉しいと思うyosider.icon
プログラミングのときと同じ嬉しさ
ちなみに、試しにMijinko_SD.iconの個人Projectでも適用してみたのですが、合わなかったのでやめました…
井戸端のようなProjectでしか意味を成さないようです
階層が深い行が多い
1行あたりの文量がそこそこある
Mijinko_SD.iconの個人Project内では、むしろ線がちらついて鬱陶しかったです
一度たくさん書き散らしてそのまま放置する事が多い人にはよさそうtakker.icon
インデントが深いままになる
UserCSS
code:style.css
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 50%;
margin: -4px 0;
}
輝度203（デフォルト）
code:style.css
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #FBE09B; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #EFA7B1;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #EAACD8;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #AEC4E8;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #97FFF3;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #CBCBCB;
}
輝度183
code:221-style.css
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #F9D375; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #E98593;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #E18DC9;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #8FADDF;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #6FFFEE;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #B7B7B7;
}
箇条書きアイコンと同じ色
code:orig-style.css
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+1)::before {
border-left: 2px solid #F8CE64; /* 色の指定 */
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+2)::before {
border-left: 2px solid #E46C7D;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+3)::before {
border-left: 2px solid #D14DAB;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+4)::before {
border-left: 2px solid #6D95D5;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+5)::before {
border-left: 2px solid #05FFE1;
}
.app:not(.presentation) .indent-mark .char-index:nth-child(6n+6)::before {
border-left: 2px solid #DDDDDD;
}
自動改行や縦に長くなる記法（画像埋め込み等）を入れると線が途切れてしまっていたので、::beforeを使わない方式でも作ったMijinko_SD.icon
borderでインデントに縦線を表示するUserCSS
another example /nishio/Settings#620280e0aff09e0000ee45d3
https://gyazo.com/8c97e243a80186b66c0bb08263b2232c
/icons/よさそう.iconyosider.icon
UserCSS.icon