箇条書きを狭くするUserCSS
https://gyazo.com/ea4de184e6c3e08e615bc362efcf1084
インデントの幅が半分になる
@import "https://scrapbox.io/api/code/villagepump/箇条書きを狭くするUserCSS/style.css"でインポートできる
20レベルまで対応してる
PCでも狭くなるので手元にスマホがなくても確認できるbsahd.icon
カーソルがおかしくなるのは現在は無視してる
対応したbsahd.icon
https://gyazo.com/e2bc724acd2865165c526f667e2e228aがhttps://gyazo.com/ea4de184e6c3e08e615bc362efcf1084になる
seibe.iconの感想
PCだと狭すぎと感じたが、スマホ(縦長)だとPCほど悪くなかった(それでも若干狭いが)。端末(横幅の長さ?)に応じて伸長するのはありなのかもしれない
+1blu3mo.icon
まあ深くなりすぎたら切り出すっていうアフォーダンスを得るためにデフォルトのままが良いとは思う(が、不便ドリブンの整理なのはすこしもにょる) ●だと文字との間隔が狭すぎて見づらい
Hide dotsすると箇条書きのインデントがわかりづらくなるのが気になるtakker.icon Hide dots滅多に使わないから別にいいか
必ず指定
code:各ユーザーで指定する.css
.line{
--indent-width-usercss: ; /* 各インデントの幅 */
}
code:style.css
/* まずはドットから */
.line .text .indent-mark {
width: unset !important;
}
.line .text .indent-mark .char-index .pad {
width: var(--indent-width-usercss);
}
.line .indent-mark .dot {
right: 2px;
top: 12px;
}
/*その次に本体を直す*/
.line .text .indent-mark:has(.c-0) + .indent{
margin-left: calc(var(--indent-width-usercss) * (0 + 1)) !important;
}
.line .text .indent-mark:has(.c-1) + .indent{
margin-left: calc(var(--indent-width-usercss) * (1 + 1)) !important;
}
.line .text .indent-mark:has(.c-2) + .indent{
margin-left: calc(var(--indent-width-usercss) * (2 + 1)) !important;
}
.line .text .indent-mark:has(.c-3) + .indent{
margin-left: calc(var(--indent-width-usercss) * (3 + 1)) !important;
}
.line .text .indent-mark:has(.c-4) + .indent{
margin-left: calc(var(--indent-width-usercss) * (4 + 1)) !important;
}
.line .text .indent-mark:has(.c-5) + .indent{
margin-left: calc(var(--indent-width-usercss) * (5 + 1)) !important;
}
.line .text .indent-mark:has(.c-6) + .indent{
margin-left: calc(var(--indent-width-usercss) * (6 + 1)) !important;
}
.line .text .indent-mark:has(.c-7) + .indent{
margin-left: calc(var(--indent-width-usercss) * (7 + 1)) !important;
}
.line .text .indent-mark:has(.c-8) + .indent{
margin-left: calc(var(--indent-width-usercss) * (8 + 1)) !important;
}
.line .text .indent-mark:has(.c-9) + .indent{
margin-left: calc(var(--indent-width-usercss) * (9 + 1)) !important;
}
.line .text .indent-mark:has(.c-10) + .indent{
margin-left: calc(var(--indent-width-usercss) * (10 + 1)) !important;
}
.line .text .indent-mark:has(.c-11) + .indent{
margin-left: calc(var(--indent-width-usercss) * (11 + 1)) !important;
}
.line .text .indent-mark:has(.c-12) + .indent{
margin-left: calc(var(--indent-width-usercss) * (12 + 1)) !important;
}
.line .text .indent-mark:has(.c-13) + .indent{
margin-left: calc(var(--indent-width-usercss) * (13 + 1)) !important;
}
.line .text .indent-mark:has(.c-14) + .indent{
margin-left: calc(var(--indent-width-usercss) * (14 + 1)) !important;
}
.line .text .indent-mark:has(.c-15) + .indent{
margin-left: calc(var(--indent-width-usercss) * (15 + 1)) !important;
}
.line .text .indent-mark:has(.c-16) + .indent{
margin-left: calc(var(--indent-width-usercss) * (16 + 1)) !important;
}
.line .text .indent-mark:has(.c-17) + .indent{
margin-left: calc(var(--indent-width-usercss) * (17 + 1)) !important;
}
.line .text .indent-mark:has(.c-18) + .indent{
margin-left: calc(var(--indent-width-usercss) * (18 + 1)) !important;
}
.line .text .indent-mark:has(.c-19) + .indent{
margin-left: calc(var(--indent-width-usercss) * (19 + 1)) !important;
}