箇条書きの深さをリセットするUserCSS
https://gyazo.com/40686b3ff94c8be9c61b9ad80c1681c3
スマートフォンから参戦できない深さ
インデントを深くしすぎるとスマホでの表示が死ぬ対策案
スマホ限定
5と10番目の階層で一番左に戻る
ここまで作っておきながら、インデントの幅を狭めるだけでいいんじゃないかという気がしてきた🤔nomadoor.iconbsahd.icon*10
code:style.css
@media (max-width: 767px){
.line .text .indent-mark:has(.c-5) + .indent{
margin-left: 1.5em !important;
}
.line .text .indent-mark:has(.c-6) + .indent{
margin-left: 3em !important;
}
.line .text .indent-mark:has(.c-7) + .indent{
margin-left: 4.5em !important;
}
.line .text .indent-mark:has(.c-8) + .indent{
margin-left: 6em !important;
}
.line .text .indent-mark:has(.c-9) + .indent{
margin-left: 7.5em !important;
}
.line .text .indent-mark:has(.c-10) + .indent{
margin-left: 1.5em !important;
}
.line .text .indent-mark:has(.c-11) + .indent{
margin-left: 3em !important;
}
.line .text .indent-mark:has(.c-12) + .indent{
margin-left: 4.5em !important;
}
.line .text .indent-mark:has(.c-13) + .indent{
margin-left: 6em !important;
}
.line .text .indent-mark:has(.c-14) + .indent{
margin-left: 7.5em !important;
}
/* ドットの位置修正 */
.line .text .indent-mark:has(.c-5){
width: 1.5em !important;
}
.line .text .indent-mark:has(.c-6){
width: 3em !important;
}
.line .text .indent-mark:has(.c-7){
width: 4.5em !important;
}
.line .text .indent-mark:has(.c-8){
width: 6em !important;
}
.line .text .indent-mark:has(.c-9){
width: 7.5em !important;
}
.line .text .indent-mark:has(.c-10){
width: 1.5em !important;
}
.line .text .indent-mark:has(.c-11){
width: 3em !important;
}
.line .text .indent-mark:has(.c-12){
width: 4.5em !important;
}
.line .text .indent-mark:has(.c-13){
width: 6em !important;
}
.line .text .indent-mark:has(.c-14){
width: 7.5em !important;
}
/* リセットした行にボーダー */
.line .text .indent-mark {
height: 100% ;
}
.line .text .indent-mark .pad {
height: 100% ;
overflow: unset ;
}
.indent-mark:has(.c-5) .c-0 .pad{
border-left: solid 4px #d2d2d2;
}
.indent-mark:has(.c-10) .c-0 .pad{
border-left: solid 4px #888888;
}
/* カーソル(Iビームポインタ)の位置がおかしくなる対策 */
.line .text .indent-mark:has(.c-5) :is(.c-1,.c-2,.c-3,.c-4,.c-5){
display:none;
}
.line .text .indent-mark:has(.c-10) :is(.c-1,.c-2,.c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-10){
display:none;
}
}