settings
元々scrapboxというwebサイト自体にcssは適用されているが，追加することもできる．．公式では「分からない人は止めといたほうがいいよ」って書いてたけど，趣味でWebアプリとか作ってて知識はあるので設定してみる．
ref: /help-jp/UserCSS
ref: /scrasobox
code:style.css
/* アイコンサイズを大きくする */
.line img.icon {
height: 2em;
margin: 2px;
}
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)
}
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid #04B2D9;
background-color: #f9f8f6;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% }
}
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 }
}
/* 伏字をぼかしにする */
/* 可視時の装飾 */
.deco-\! {
color: #3cb371;
}
/* 非編集中の行だけ強めにぼかす（通常時は見えない） */
.line:not(.cursor-line) .deco-\! {
filter: blur(0.40em);
text-shadow: 0 0 .6em rgba(0,0,0,.45);
transition: filter .12s ease, text-shadow .12s ease;
}
/* マウスを乗せた間／タップ中は完全に表示（ぼかしも影も外す） */
.line:not(.cursor-line) .deco-\!:hover,
.line:not(.cursor-line) .deco-\!:active {
filter: none !important;
text-shadow: none !important;
}