/Mijinko/見出しのデザインを変えるUserCSS-B

generated at 11/17/2024, 4:47:27 AM
見出しのデザインを変えるUserCSS-B
見出しのデザインを変えるUserCSSのデザイン変更版
Level-3のデザインを変更する
元のソースではdisplay: inline-block;をdisplay: block;にしているので、見出し行にカーソルを置くとめちゃくちゃがたがた動いてしまっていた
.empty-char-indexが原因
Scrapboxの仕様上、この要素を消すとバグの原因になってしまう
はこのデザインを使いたかったので、個人プロジェクト限定で適用したうえで我慢して使っていた
Level-4の見出しデザインを撤廃する
作るのがめんどくさいだけなので後々に再実装する可能性はある
サンプル
2023/01/10 level-3の文字色が色付きだったけれど、ハイパーリンクとの見分けがつきにくくややこしいので、元に戻した
ソース
色設定
これだけファイル名が違うので、importする時は注意
もちろん自分で編集して実装するのもアリ
color.cssbody {
	--accent-color: #3d95c9;
	--accent-level-2: #70b2d9;
	--accent-level-3: var(--accent-color);
	--accent-level-3-text: var(--page-text-color); /* #51beff; */
	--accent-level-4: #518fb3;
}

共通
style.css/* 見出しの上の間をちょっと空ける */
strong.level {
    display: inline-block;
    margin-top: .5em;
}

level-3
style.cssstrong.level-3 {
    border-left: solid 14px var(--accent-level-3);
    padding-left: 11px;
    margin-bottom: 6px;
}
.line:not(.cursor-line) strong.level-3 {
    color: var(--accent-level-3-text, var(--page-text-color));
}

level-2
style.cssstrong.level-2 /* .deco-\* */ {
    border-left: solid 4px /*14px*/ var(--accent-level-2);
    padding-left: 11px;
    margin-top: 1em;
    margin-bottom: 3px;
}