settings
settings hosoku bold #settings WIP
highlight, dekamoji inyou
userCSSを書いておく場所
大きな文字の色
code:style.css
.line strong {
color: #475556;
}
マーカー　/scrasobox/マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #d5fc58 25%, #d5fc58 70%, transparent 90%)
}
補足　/scrasobox/拡張記法がきた！
code:style.css
.deco-\# { color: #738406; font-size: smaller; padding: 0 .2em }
引用　/scrasobox/拡張記法がきた！
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
center, right　 /shio/角丸用白いUserCSS
code:style.css
/* 中央寄せ */
.deco-\< { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
バッジ風タグ WIP　/scrasobox/バッヂになるタグ
code:style.css
.line ahref$="/WIP",
.line ahref$="/xxxx" {
display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF }
.line ahref$="/WIP" { background-color: #08BDBD }
.line ahref$="/xxxx" { background-color: #FF9914 }
#ハッシュタグ
code:style.css
atype="hashTag" {
opacity:1;
padding: 3px 8px;
font-size: 0.9em;
border: 1px solid;
border-radius: 12px;
transition: .1s;
}
atype="hashTag":hover {
opacity: 0.9;
}
橋屋.icon　Scrapboxのアイコンを大きくする
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.6em; top: -0.1em }
ピン留め
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ピン留めページのスタイル
ページと角丸 /humanaugmentation/settings
code:style.css
.page,
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border-radius: 10px;
}
.grid li.page-list-item a .header {
position: absolute;
bottom: 0px;
z-index: 1;
background: rgba(240, 240, 240, 0.9);
border-top: 1px;
}
.grid li.page-list-item a .icon img {
position: absolute;
top: 0px;
left: 0px;
min-height: 75%;
}
.grid li.page-list-item a:hover {
box-shadow: 0px 0px 0px 4px #729FCF ;
}
.container {
max-width: none;
}
/scrasobox/箇条書きを控えめにする
code:style.css
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
外部リンクにアイコン https://systrum.net/
code:style.css
.line span:not(.modal-image) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 600;
display: inline-block;
}
画像を並べて表示　/scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }