インデントに縦線を引くUserCSS (Aureole/Eclipse仕様)
UserCSS.icon
インデントの深さを可視化するUserCSS for Aureole/Eclipseテーマ
#箇条書き #インデント
箇条書き
箇条書き
箇条書き
/zkphi/Settings#682cd4990000000000e33775を改変
code:style.css
.indent-mark {
height: 100% !important;
& .dot { background-color: var(--indent-mark-color, var(--page-text-color, #333)) !important; }
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important; /* code などの背景色が漏れるのを防ぐ */
}
.intent-mark .dot::before {
content: ""; display: inline-block;
width: var(--indent-width, 1.5em); height: var(--calculated-paragraph-line-height, 24px);
background: linear-gradient(to bottom, transparent 40%, oklch(from var(--indent-mark-color, #0004) l c h / .15) 40%, transparent 50%);
}
.indent-mark span:not(:nth-last-of-type(1)):not(:nth-last-of-type(2)) .pad {
/* pad の中央に線を引く */
background: linear-gradient(to right, transparent 40%, hsl(from var(--indent-mark-color, #0004) h s l / .15) 40%, transparent 50%);
}
#UserCSS