settings (copy)
元々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 }
}
/*
以下目隠し用
ref: https://scrapbox.io/customize/Scrapboxで暗記シートを作る_(CSSだけ使ったバージョン)
*/
/* 表示色 */
.deco-\! {
color: #3cb371;
border-bottom: 2px solid #3cb371;
}
/* 非表示 */
.app:not(.hide-dots) .line:not(.cursor-line) .deco-\! {
color: transparent;
}
/* word の記法部分を非表示にする */
.cursor-line .deco-\! :nth-child(-n+3),
.cursor-line .deco-\! :last-child {
display: none;
}
/* Hide dotsしてもドットを非表示にしない */
.line .indent-mark .dot {
display: block !important;
}
/* Hide dotsのラベル文字を書き換え */
ularia-labelledby="page-edit-menu" atitle="Hide dots",
ularia-labelledby="page-edit-menu" atitle="Show dots" {
font-size: 0;
}
ularia-labelledby="page-edit-menu" atitle="Hide dots":before {
font-size: 14px;
content: 'Show answers';
}
ularia-labelledby="page-edit-menu" atitle="Show dots":before {
font-size: 14px;
content: 'Hide answers';
}