箇条書きの深さをリセットするUserCSS
スマホ限定
5と10番目の階層で一番左に戻る
ここまで作っておきながら、インデントの幅を狭めるだけでいいんじゃないかという気がしてきた🤔
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;
}
}