settings
わかばちゃん.icon セッティングのページ。ここに書いたCSSはこのScrapbox全体に反映されるよ！
code:style.css
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline } body:not(.presentation) .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute; display: inline-block; left: -3em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
black; }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } code:style.css
.line {
}
吹き出し
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.3em 0.2em 0.3em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
左吹き出し
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
}
右吹き出し
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
}
強調吹き出し
code:style.css
.deco-\! {
}
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色
code:style.css
.deco-\{ a,
.deco-\} a {
}
太字に色をつける
strong要素に文字色をつける
code:style.css
.line strong {
}
カードをくるくる回す
thx daiizさん😆✨
code:style.css
.page-list .grid li:hover {
transition: 1.6s;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* PINされたカードは回らない */
.page-list .grid li.pin:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}