/taberungo/Settings - Scrapbox Reader

generated at 2/12/2025, 10:12:11 PM
Settings
from りんごモン言えるんご？のうた【Full】
設定アイコンでよくあるギアに似ていたので拝借

ピン留めされたページを独立した段に表示する
cf. /aioilight/settings
style.css.page-list-item.pin + .page-list-item:not(.pin) {
  clear: both;
}

/scrasobox/ピンしたページのスタイル
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 動画サムネイル等の、リンクを埋め込んである画像には出さないようにした
見栄えがちょっと悪い気がした
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の魅力

右下に、左下にあかりんごを登場させる
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アイコンを好きな画像に変える
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	
style.css#page-info-menu + ul > li:nth-child(2) {
  display: none;
}

更新情報はStreamをみるんご！
/customize/Streamにアクセスするボタンを表示するCSS
style.css.navbar .navbar-menu >li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }

記法の追加
赤文字記法
style.css.deco-\! {
	color: #F00;
  	/*color: #c40300;*//*りんごろうの色*/
}
白文字記法
/customize/Scrapboxで暗記シートを作る (CSSだけ使ったバージョン)
カーソルをかざすと見えるんご
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/マーカー
style.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]) { 
  background: linear-gradient(transparent 10%, #66bdff 25%, #66bdff 70%, transparent 90%) 
}
インライン引用
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
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]…] 
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のバグ対策
style.csshtml {
  --invert-color: unset !important;
}