settings
https://gyazo.com/f1a4b1f125eaeb35718e6c6fc8683d3a
code:style.css
/* 連続する数式の間にマージンを入れる */
.line.formula-line + .line.formula-line {
padding-top: 0.5em !important;
}
/* 日本語がURLに含まれてるからエラーしてる？ */
/* @import url("/api/code/help-jp/文字装飾記法/style.css")*/
/customize/縦に長い画像でも全体が見えるようにする
code:style.css
.grid li.page-list-item a .icon img {
max-width: 100%;
max-height: 100%;
width: auto !important;
}
/* ここからkemboによる追加　overflow 設定で子要素のサイズ上限を見えてる範囲に切り詰めてる */
.grid li.page-list-item a .icon {
overflow: hidden;
}
吹き出しのベース
code:style.css
.deco-\{, .deco-\} {
line-height: 24px; /* 枠線やパディングの分少し小さく */
font-size: 0.9em; /* 文字も少し小さくして目立たないように */
color: #6a706f;
padding: 0.1em 0.5em;
border-style: solid;
border-radius: 0.4em;
border-color: #b2bcba;
border-width: 3px;
margin: 0.05em 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 角のためのマージン */
.deco-\{ { margin-left: 0.7em; }
.deco-\} { margin-right: 0.7em; }
吹き出しの角
code:style.css
.deco-\{:before, .deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
width: 0;
content: "";
border-style: solid;
border-color: #b2bcba transparent;
}
.deco-\{:before {
/* 左側の角 */
/* 角の位置を枠線やパディングを考慮して調整 */
transform: translateX(calc(-100% - 0.5em - 2px)) translateY(calc(1em - 80%));
/* 枠線を部分的に表示させることで三角形にする */
border-width: 0 0 0.6em 0.6em;
}
.deco-\}:after {
/* 右側の角 */
transform: translateX(calc(0.5em + 2px)) translateY(calc(1em - 80%));
border-width: 0 0.6em 0.6em 0;
}
薄字コメント
code:style.css
.deco-\# {
color: #aaa;
font-size: 0.9em;
}
.deco-\#:before {
content: "# ";
}
Stellarisで使う＋やら－やらの文字効果の再現
code:style.css
.deco-\! {
color: #d32f2f;
background-color: #faeaea;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\+ {
color: #009900;
background-color: #e5f9e5;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\~ {
color: #b2a429;
background-color: #fffbd7;
padding: 0.1em 0.2em 0.1em 0.2em;
}
.line:not(.cursor-line) .deco-\. :first-child::before { content: "[ "; }
.line:not(.cursor-line) .deco-\. :last-child::after { content: " ]"; }
/scrasobox/箇条書きを控えめにする
+1.icon
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(51, 51, 51, 0.5);
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto; bottom: 0
}
/* コメント行の箇条書きは更に控える */
.app .line .indent-mark:has(+ .indent > span:first-child .deco-\#) .dot {
height: 2px; width: .3em;
}