UserCSS-ブレット変更
CSS変数定義
code:style.css
:root {
--strong-line-diff: 5px;
}
インデント見やすく
code:style.css
.lines .line{
.indent-mark{ min-height: 28px; height: 100%; }
.table-block .indent-mark{ height: auto;} /*tableは除外する*/
}
.indent-mark{
.pad{
height: 100% !important;
overflow: unset !important;
}
span:not(:nth-last-child(-n+2)) .pad{
}
}
番号なしリスト
code:style.css
/* 元のマーカーを非表示 */
.line .indent-mark {
left: 0;
top: 0;
width: unset;
height: unset;
color: transparent;
}
.line .indent-mark .dot {
top: auto;
right: 0;
bottom: 0;
width: unset;
height: unset;
border-radius: unset;
background-color: transparent;
}
/* 画像が含まれない行のみ適用 */
.line:has(.char-index:not(.empty-char-index)):not(:has(.modal-image)) .indent-mark .dot::before {
font-family: 'AppIcons';
content: '\E056';
font-size: 12px;
font-weight: 900;
color: var(--li-color);
transform: scale(1, 2);
display: block;
position: absolute;
right: 0;
bottom: -3px;
}
その他
code:style.css
/* マーカーを消す行 */
.line:has(:is(
span.quote /* 引用を含む行 */
,div.iframe-video-player /* 埋め込み動画を含む行 */
)) .indent-mark .dot::before { content: none !important; }
strong を含む行のインデントマークの高さを定義
code:style.css
.line:has(strong.level-2):not(:has(img)) .indent-mark {
height: calc(28px - -1px);
}
.line:has(strong.level-3):not(:has(img)) .indent-mark {
height: calc(35px - 0px);
}
.line:has(strong.level-4):not(:has(img)) .indent-mark {
height: calc(42px - 2px);
}
.line:has(strong.level-5):not(:has(img)) .indent-mark {
height: calc(49px - 3px);
}
.line:has(strong.level-6):not(:has(img)) .indent-mark {
height: calc(56px - 4px);
}
.line:has(strong.level-7):not(:has(img)) .indent-mark {
height: calc(63px - 4px);
}
.line:has(strong.level-8):not(:has(img)) .indent-mark {
height: calc(77px - 7px);
}
.line:has(strong.level-9):not(:has(img)) .indent-mark {
height: calc(91px - 10px);
}
.line:has(strong.level-10):not(:has(img)) .indent-mark {
height: calc(105px - 11px);
}
キャラアイコン・サイズ変更した画像を含む行のインデントマークの高さを定義
code:style.css
/* アイコンサイズ
--chara-icon-size: 32px;
--chara-table-icon-size: 48px;
--chara-strong-icon-size: 64px;
*/
/* アイコンを含む行はマーカーの位置を下揃えにする */
& .indent-mark:has(.dot) {
height: calc(var(--chara-icon-size) + 8px);
}
/* アイコンを含む行はマーカーの位置を下揃えにする */
&:has(.strong-icon) .indent-mark:has(.dot) {
height: calc(var(--chara-strong-icon-size) + 8px);
}
/* でかアイコンを含む行はマーカーを非表示にする */
&:has(.deco-\|):has(.icon) .indent-mark .dot::before {
content: '';
}
}
/* 強調した画像のサイズ
--image-size-level-1: 48px;
--image-size-level-2: 72px;
--image-size-level-3: 120px;
--image-size-level-4: 160px;
--image-size-level-5: 240px;
--image-size-level-6: 320px;
--image-size-level-7: 480px;
--image-size-level-8: 640px;
--image-size-level-9: 640px;
--image-size-level-10: 640px;
*/
.line:has(.deco strong.level img.image, .deco strong.level img.icon){
&:has(.level-1) .indent-mark {
height: calc(var(--image-size-level-1) + 8px);
}
&:has(.level-2) .indent-mark {
height: calc(var(--image-size-level-2) + 8px);
}
&:has(.level-3) .indent-mark {
height: calc(var(--image-size-level-3) + 7px);
}
&:has(.level-4) .indent-mark {
height: calc(var(--image-size-level-4) + 6px);
}
&:has(.level-5) .indent-mark {
height: calc(var(--image-size-level-5) + 5px);
}
&:has(.level-6) .indent-mark {
height: calc(var(--image-size-level-6) + 4px);
}
&:has(.level-7) .indent-mark {
height: calc(var(--image-size-level-7) + 3px);
}
&:has(.level-8) .indent-mark {
height: calc(var(--image-size-level-8) + 1px);
}
&:has(.level-9) .indent-mark {
height: calc(var(--image-size-level-9) + -2px);
}
&:has(.level-10) .indent-mark {
height: calc(var(--image-size-level-10) + -2px);
}
}