/villagepump/箇条書きを狭くするUserCSS

generated at 2/16/2025, 1:13:54 PM
箇条書きを狭くするUserCSS
インデントを狭くするuserCSS
インデントの幅が半分になる
usercssでやる　箇条書きの深さをリセットするUserCSSをベースにする
 @import "https://scrapbox.io/api/code/villagepump/箇条書きを狭くするUserCSS/style.css" でインポートできる
20レベルまで対応してる
PCでも狭くなるので手元にスマホがなくても確認できる
カーソルがおかしくなるのは現在は無視してる
対応した
がになる

の感想
PCだと狭すぎと感じたが、スマホ（縦長）だとPCほど悪くなかった（それでも若干狭いが）。端末（横幅の長さ？）に応じて伸長するのはありなのかもしれない
+1
まあ深くなりすぎたら切り出すっていうアフォーダンスを得るためにデフォルトのままが良いとは思う（が、不便ドリブンの整理なのはすこしもにょる）
箇条書きのbulletのデザインを変えたら悪くないかも
●だと文字との間隔が狭すぎて見づらい
井戸端のデザイン基準です
Hide dotsすると箇条書きのインデントがわかりづらくなるのが気になる
Hide dots滅多に使わないから別にいいか

2024/11/06　翻訳モード対応する
2024/11/10 stream対応する
無理だった

必ず指定
各ユーザーで指定する.css.line{
--indent-width-usercss: ; /* 各インデントの幅 */
}
CSS本体
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;
}