箇条書きを狭くする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
まあ深くなりすぎたら切り出すっていうアフォーダンスを得るためにデフォルトのままが良いとは思う（が、不便ドリブンの整理なのはすこしもにょる） ●だと文字との間隔が狭すぎて見づらい
井戸端のデザイン基準ですbsahd.icon
Hide dotsすると箇条書きのインデントがわかりづらくなるのが気になるtakker.icon Hide dots滅多に使わないから別にいいか
2024/11/06 翻訳モード対応するbsahd.icon
2024/11/10 stream対応する
無理だった
必ず指定
code:各ユーザーで指定する.css
.line{
--indent-width-usercss: ; /* 各インデントの幅 */
}
CSS本体
code:style.css
/* まずはドットから */
.line > .text > span > span > .indent-mark,
.line > .text.cli > .indent-mark,
.line > .text.code-block > .indent-mark {
width: unset !important;
}
.line > .text > span > span > .indent-mark > .char-index > .pad,
.line > .text.cli > .indent-mark > .char-index > .pad,
.line > .text.code-block > .indent-mark > .char-index > .pad {
width: var(--indent-width-usercss);
}
.line > .text > span > span > .indent-mark > .dot {
right: 2px;
top: 12px;
}
/*その次に本体を直す*/
.line > .text > span > span > .indent-mark:has(.c-0) + .indent,
.line > .text.cli > .indent-mark:has(.c-0) + .indent,
.line > .text.code-block > .indent-mark:has(.c-0) + .indent {
margin-left: calc(var(--indent-width-usercss) * (0 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-1) + .indent,
.line > .text.cli > .indent-mark:has(.c-1) + .indent,
.line > .text.code-block > .indent-mark:has(.c-1) + .indent {
margin-left: calc(var(--indent-width-usercss) * (1 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-2) + .indent,
.line > .text.cli > .indent-mark:has(.c-2) + .indent,
.line > .text.code-block > .indent-mark:has(.c-2) + .indent {
margin-left: calc(var(--indent-width-usercss) * (2 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-3) + .indent,
.line > .text.cli > .indent-mark:has(.c-3) + .indent,
.line > .text.code-block > .indent-mark:has(.c-3) + .indent {
margin-left: calc(var(--indent-width-usercss) * (3 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-4) + .indent,
.line > .text.cli > .indent-mark:has(.c-4) + .indent,
.line > .text.code-block > .indent-mark:has(.c-4) + .indent {
margin-left: calc(var(--indent-width-usercss) * (4 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-5) + .indent,
.line > .text.cli > .indent-mark:has(.c-5) + .indent,
.line > .text.code-block > .indent-mark:has(.c-5) + .indent {
margin-left: calc(var(--indent-width-usercss) * (5 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-6) + .indent,
.line > .text.cli > .indent-mark:has(.c-6) + .indent,
.line > .text.code-block > .indent-mark:has(.c-6) + .indent {
margin-left: calc(var(--indent-width-usercss) * (6 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-7) + .indent,
.line > .text.cli > .indent-mark:has(.c-7) + .indent,
.line > .text.code-block > .indent-mark:has(.c-7) + .indent {
margin-left: calc(var(--indent-width-usercss) * (7 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-8) + .indent,
.line > .text.cli > .indent-mark:has(.c-8) + .indent,
.line > .text.code-block > .indent-mark:has(.c-8) + .indent {
margin-left: calc(var(--indent-width-usercss) * (8 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-9) + .indent,
.line > .text.cli > .indent-mark:has(.c-9) + .indent,
.line > .text.code-block > .indent-mark:has(.c-9) + .indent {
margin-left: calc(var(--indent-width-usercss) * (9 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-10) + .indent,
.line > .text.cli > .indent-mark:has(.c-10) + .indent,
.line > .text.code-block > .indent-mark:has(.c-10) + .indent {
margin-left: calc(var(--indent-width-usercss) * (10 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-11) + .indent,
.line > .text.cli > .indent-mark:has(.c-11) + .indent,
.line > .text.code-block > .indent-mark:has(.c-11) + .indent {
margin-left: calc(var(--indent-width-usercss) * (11 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-12) + .indent,
.line > .text.cli > .indent-mark:has(.c-12) + .indent,
.line > .text.code-block > .indent-mark:has(.c-12) + .indent {
margin-left: calc(var(--indent-width-usercss) * (12 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-13) + .indent,
.line > .text.cli > .indent-mark:has(.c-13) + .indent,
.line > .text.code-block > .indent-mark:has(.c-13) + .indent {
margin-left: calc(var(--indent-width-usercss) * (13 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-14) + .indent,
.line > .text.cli > .indent-mark:has(.c-14) + .indent,
.line > .text.code-block > .indent-mark:has(.c-14) + .indent {
margin-left: calc(var(--indent-width-usercss) * (14 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-15) + .indent,
.line > .text.cli > .indent-mark:has(.c-15) + .indent,
.line > .text.code-block > .indent-mark:has(.c-15) + .indent {
margin-left: calc(var(--indent-width-usercss) * (15 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-16) + .indent,
.line > .text.cli > .indent-mark:has(.c-16) + .indent,
.line > .text.code-block > .indent-mark:has(.c-16) + .indent {
margin-left: calc(var(--indent-width-usercss) * (16 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-17) + .indent,
.line > .text.cli > .indent-mark:has(.c-17) + .indent,
.line > .text.code-block > .indent-mark:has(.c-17) + .indent {
margin-left: calc(var(--indent-width-usercss) * (17 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-18) + .indent,
.line > .text.cli > .indent-mark:has(.c-18) + .indent,
.line > .text.code-block > .indent-mark:has(.c-18) + .indent {
margin-left: calc(var(--indent-width-usercss) * (18 + 1)) !important;
}
.line > .text > span > span > .indent-mark:has(.c-19) + .indent,
.line > .text.cli > .indent-mark:has(.c-19) + .indent,
.line > .text.code-block > .indent-mark:has(.c-19) + .indent {
margin-left: calc(var(--indent-width-usercss) * (19 + 1)) !important;
}
/* 翻訳モード用 */
.line:has(.text > span > span > .indent-mark > .c-0)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (0 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-1)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (1 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-2)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (2 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-3)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (3 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-4)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (4 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-5)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (5 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-6)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (6 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-7)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (7 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-8)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (8 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-9)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (9 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-10)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (10 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-11)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (11 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-12)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (12 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-13)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (13 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-14)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (14 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-15)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (15 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-16)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (16 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-17)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (17 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-18)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (18 + 1)) !important;
}
.line:has(.text > span > span > .indent-mark > .c-19)
.text.translate
.indent {
margin-left: calc(var(--indent-width-usercss) * (19 + 1)) !important;
}