settings
omraz.icon セッティングのページ。ここに書いたCSSはこのScrapbox全体に反映されるよ!
吹き出しまとめ
吹き出し
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 {
}
背景色
code:style.css
body {
}
ホームのカードスタイル
code:style.css
.grid li.page-list-item a {
box-shadow: none !important
}
.grid li.page-list-item a .content {
height: 100%;
border: solid #555 0.5px; }
コードブロックの行番号を表示
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
// .page-list .grid li:hover {
// transition: 0.5s;
// -webkit-transform: scale(1.2, 1.2);
// -moz-transform: scale(1.2, 1.2);
// transform: scale(1.2, 1.2);
// }
/* PINされたカードは大きくしない */
.page-list .grid li.pin:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
↑これフバいので消したい…