Settings
https://gyazo.com/f55915355ef702e8e48168983060c691
from りんごモン言えるんご？のうた【Full】
設定アイコンでよくあるギアに似ていたので拝借
ピン留めされたページを独立した段に表示する
cf. /aioilight/settings
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
/scrasobox/ピンしたページのスタイル
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 20px;
color: #1f915e; bottom: 0;
}
外部リンクとScrapbox内部のリンクとを区別する
2022-06-04 18:00:13 フォント崩れを直した
/villagepump/外部リンクを区別するUserCSS
2020-11-06 20:17:39 動画サムネイル等の、リンクを埋め込んである画像には出さないようにした
見栄えがちょっと悪い気がした
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
}
cf. /nwtgck/リモートワークでも活躍するScrapboxの魅力
右下にringorou.icon、左下にあかりんごを登場させる
code:style.css
@media screen and (min-width: 480px) {
:is(#app-container, .app)::after {
content: "";
background-size: 100%;
width: 180px;
position: fixed;
bottom: 0px;
background-repeat: no-repeat;
}
#app-container::after {
background-image:
url(https://i.gyazo.com/ee6bd2236892daf1bace3ee519d128db.png);
background-position: bottom left;
height: 260px;
}
.app::after {
background-image:
url(https://i.gyazo.com/6408fd1c7ef5458b5bc32db456805c39.png);
background-position: bottom right;
height: 200px;
right: 0px;
}
}
ブランドアイコンの変更
from /customize/左上のScrapboxアイコンを好きな画像に変える
code:style.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url(https://i.gyazo.com/ee6bd2236892daf1bace3ee519d128db.png);
background-size: cover;
border-radius: 50%;/*角丸はお好みで*/
}
via /hub/匿名でスクボを編集する試み#5f39f04638687500004ae822
code:style.css
#page-info-menu + ul > li:nth-child(2) {
display: none;
}
更新情報はStreamをみるんご！
/customize/Streamにアクセスするボタンを表示するCSS
code:style.css
.navbar .navbar-menu >li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
記法の追加
赤文字記法
code:style.css
.deco-\! {
color: #F00;
/*color: #c40300;*//*りんごろうの色*/
}
白文字記法
/customize/Scrapboxで暗記シートを作る (CSSだけ使ったバージョン)
カーソルをかざすと見えるんご
code:style.css
.deco-\~ {color:transparent;background-color:var(--page-bg, #fefefe)}
.deco-\~:hover {color:var(--page-text-color, #4a4a4a);opacity:1}
/*.deco-\~ { color: inherit;
border-bottom: 2px solid #3cb371;}
.line:not(.cursor-line) .deco-\~,
.line:not(.cursor-line) .deco-\~ a{
color: transparent;
}
.line:not(.cursor-line) .deco-\~.deco-\",
.line:not(.cursor-line) .deco-\~.deco-\"::before {
color: transparent;
background-color: transparent;
}*/
/scrasobox/マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #66bdff 25%, #66bdff 70%, transparent 90%)
}
インライン引用
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
color: #a0a0a0;
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
/help-jp/文字装飾記法#59f6c087efa18e0000951506
code:style.css
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #d8d8d8;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.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;
border-color: #d8d8d8 transparent;
}
/* 右吹き出しの角 */
.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;
border-color: #d8d8d8 transparent;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #66F; }
/*.deco-\{ a.empty-page-link, .deco-\} a { color: #F00; }*/
/scrasobox/画像を並べて表示#5a18bf6396b90400007eff1c
使い方：
一行に敷き詰め: [| [画像URL][画像URL][画像URL]…]
横幅いっぱい1列並べ: [*| [画像URL][画像URL][画像URL]…]
3列並べ : [***| [画像URL][画像URL][画像URL]…]
5列並べ: [*****| [画像URL][画像URL][画像URL]…]
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 }
Scrapboxのバグ対策
code:style.css
html {
--invert-color: unset !important;
}