/noratetsu/settings - Scrapbox Reader

generated at 11/18/2024, 5:03:39 AM
settings
style.css@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c");
@import '/api/code/noratetsu/_CSS_Title2/style.css';
@import '/api/code/noratetsu/_CSS_Deco/style.css';
@import '/api/code/noratetsu/_CSS_Grid/style.css';
/*@import '/api/code/noratetsu/_CSS_Grid-md/style.css';*/
/*@import '/api/code/noratetsu/_CSS_Grid-lg/style.css';*/
@import '/api/code/noratetsu/_CSS_related-page-list_left/style.css';
@import '/api/code/noratetsu/_CSS_Code-block/style.css';
@import '/api/code/noratetsu/●背景をうっすら青海波柄にする/style.css';
インポートしているコード群→ #_import
フォントのインポートについて→/noratetsu/●（今更ながらフォント調整）

style.css.quick-launch .flex-box .flex-item .right-box::after {
    position: absolute;
    display: block;
    font-family: "UD デジタル 教科書体 NK-B";
    color: rgb(195,32,2);
    /* content: '現在CSSの修正作業中のため、タイミングによって表示の乱れが生じる可能性があります。'; */
    content: '↑試しにうろちょろさせています。';
    max-width: 70vw;
    text-align: left;
    left: var(--margin-side);
}

元のThemeはDefaultのLight
style.cssbody{ 
  background-color: #F4F4F0;
 }
.new-button {
  background-color: var(--new-button-bg, #CCC);
 }

/noratetsu/●ページ一覧での左右余白を変数で整理する
style.css@media screen and (min-width: 1261px) {
   :root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
    :root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    :root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
    :root {--margin-side: 8px;}
}

元：Scrapbox でナビゲーションバーにホームに戻るボタンを埋め込む UserCSS - うにゃのすみか
stylex.cssspan.kamon.kamon-caret-down {
	display: none;
}
.quick-launch .flex-box .flex-item .left-box {
   position: fixed;
   top: 0;
   left: calc(var(--margin-side) + 48px); /* 変数は上記で設定したもの */
   color: white;
   z-index: 1000;
 }
 .quick-launch .project-home, .quick-launch .project-home .title {
   	color: #fff;
 }
.quick-launch .project-home .title {
    max-width: 190px; /* プロジェクト名が長すぎる場合の応急処置 */
}

ナビゲーションバーのScrapboxアイコンサイズを小さくする
style.css.brand-icon {
	width: 25px;
    height: 25px;
 }

/noratetsu/●ナビゲーションバーに「更新履歴」を表示する
stylex.css.navbar .navbar-menu>li.stream-btn {
	display: block;
 	position: fixed;
}
.stream-btn .kamon::before { /* ボタンの代わりにテキストを表示する */
 	display: block;
 	position: fixed;
 	right: var(--margin-side); /* 変数は上記で設定したもの */
 	width: 80px;
 	content: '更新履歴';
 	text-align: center;
 	font-size: 14px; color: #fff;
 }
.stream-btn .kamon:hover::before {
 	background-color: rgba(0,0,0,0.1);
 }
.stream-btn .kamon:active::before {
 	background-color: unset;
 }
 
@media screen and (max-width: 767px) {
  .stream-btn .kamon::before { right: 114px;} /* 検索ボタンの位置の変化に対応 */
  .quick-launch .flex-box .flex-item .left-box {
     left: 40px; /* スマホ表示でプロジェクトタイトルを少し左に寄せる */
   }
}

/noratetsu/●Streamボタンにマウスオーバーで説明を表示
style.css.navbar .navbar-menu>li.stream-btn {
    display: block;
}
.stream-btn .kamon:hover::after {
    display: block;
    position: absolute;
    top: 44px;
    content: '更新履歴';
    font-size: 12px;
    line-height: 16px;
    width: 60px;
    height: auto;
    color: #444;
    background-color: #fff;
    border: 1px solid #444;
    text-align: center;
}


/noratetsu/●アイコンをうろちょろさせる
style.css@media screen and (min-width: 1261px) {
    :root {--anim-nav: 45s;}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
    :root {--anim-nav: 40s;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    :root {--anim-nav: 30s;}
}
@media screen and (max-width: 767px) {
    :root {--anim-nav: 15s;}
}

.navbar:after {
    content: '';
    background-image: url("https://gyazo.com/e685ebfd0e38be6c1b2229a3bb7b4f4f/max_size/1000");
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    animation: img_rotate ease-in-out 1s infinite alternate forwards, bound ease-in-out .5s infinite alternate forwards,img_motion linear var(--anim-nav) infinite alternate forwards ;
}
@keyframes img_motion {
	0%{
		margin-left: 0px;
	}
	100%{
		margin-left: calc(100vw - 30px);
	}
}
@keyframes img_rotate {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
@keyframes bound {
    0%{
		top: 0px;
	}
	100%{
		top: 10px;
	}
}


ページに影をつける
style.css.page {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
 }

ページタイトル
style.css .line.line-title .text {
	border-bottom: solid 3px #ddd ;
	padding-bottom: 0;
	margin-bottom: 28px; /* 枠下 */
    text-align: center; /* 中央寄せ */
}

参考　/suto3/UserCSS:禅モード
style.css.line .telomere:not(:hover) {
  opacity: 0.3;
  transition: opacity 2s;
}
.line .telomere:hover {
  /*opacity: 0.4;*/
  opacity: 1;
  transition: opacity 1s;
}
.line .telomere .telomere-border {
    border-color: #d4dcd6;
 }
.line .telomere .telomere-border.unread {
    border-color: #f5b1aa;
 }
蕎麦切色 そばきりいろ #d4dcd6の色見本とカラーコード - 和色大辞典
珊瑚色 さんごいろ #f5b1aaの色見本とカラーコード - 和色大辞典


箇条書き調整
/scrapboxlab/行頭のドット（バレット | ビュレット）を少し薄くするUserCSS
c-0
c-1
c-2
c-3
c-4
c-5
c-6
c-7
style.css/* バレットを少し薄くする */
 .line .indent-mark .dot {
  top: 12px;
  width: 6px;
  height: 4px;
   /* background-color: #c9c9c9; */
   }

/* バレットの色をだんだん薄くする */
.line .indent-mark .c-0 + .dot {
  background-color: rgba(0,0,0,.6) 
 }
.line .indent-mark .c-1 + .dot {
  background-color: rgba(0,0,0,.5) 
 }
.line .indent-mark .c-2 + .dot {
  background-color: rgba(0,0,0,.4) 
 }
.line .indent-mark .c-3 + .dot {
  background-color: rgba(0,0,0,.3) 
 }
.line .indent-mark .c-4 + .dot {
  background-color: rgba(0,0,0,.2) 
 }
.line .indent-mark .c-5 + .dot {
  background-color: rgba(0,0,0,.1) 
 }
.line .indent-mark .c-6 + .dot {
  background-color: rgba(0,0,0,.05) 
 }
.line .indent-mark .c-7 + .dot {
  background-color: rgba(0,0,0,.05) 
 }


/noratetsu/●マウスオーバーでインデントレベルを表示する
style.css.line .indent-mark .dot:hover::before {
  position: relative;
  top: -11px;
  right: 22px;
  border-radius: 6px;
  padding: 1px 3px;
  font-size: 0.8em;
  font-weight: 600;
  color: #fff;
  background-color: blue;
 }
.line .indent-mark .c-0 + .dot:hover::before {
  content: '1';
 }
.line .indent-mark .c-1 + .dot:hover::before {
  content: '2';
 }
.line .indent-mark .c-2 + .dot:hover::before {
  content: '3';
 }
.line .indent-mark .c-3 + .dot:hover::before {
  content: '4';
 }
.line .indent-mark .c-4 + .dot:hover::before {
  content: '5';
 }
.line .indent-mark .c-5 + .dot:hover::before {
  content: '6';
 }
.line .indent-mark .c-6 + .dot:hover::before {
  content: '7';
 }
.line .indent-mark .c-7 + .dot:hover::before {
  content: '8';
 }


/customize/テーブルを派手めに表示するUserCSS
※テーブルの上を空行にすること

testあいうえお
かきくけこ
さし

共通部
style.css.table-block .cell {
	border-right: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
	border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
	border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
	font-weight: bolder;
	text-align: center;
}

12色で一周する版
style.css.table-block .cell:nth-child(12n){
  background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+1){
  background-color: hsla(30,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+2){
  background-color: hsla(60,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+3){
  background-color: hsla(90,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+4){
  background-color: hsla(120,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+5){
  background-color: hsla(150,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+6){
  background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+7){
  background-color: hsla(210,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+8){
  background-color: hsla(240,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+9){
  background-color: hsla(270,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+10){
  background-color: hsla(300,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+11){
  background-color: hsla(330,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(12n) {
  background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+1) {
  background-color: hsla(30,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+2) {
  background-color: hsla(60,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+3) {
  background-color: hsla(90,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+4) {
  background-color: hsla(120,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+5) {
  background-color: hsla(150,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+6) {
  background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+7) {
  background-color: hsla(210,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+8) {
  background-color: hsla(240,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+9) {
  background-color: hsla(270,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+10) {
  background-color: hsla(300,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+11) {
  background-color: hsla(330,100%,80%,0.6);
}

/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）
style.css .indent.table-block-row {
     overflow-x: auto;
 }

引用の斜体を解除
style.css.line .quote {
 	font-style: normal ;
}

/scrapboxlab/画像のサイズを変えるUserCSS
style.css .level-1 img { width: 16.7% }
 .level-2 img { width: 33.3% }
 .level-3 img { width: 50%   }
 .level-4 img { width: 66.7% }
 .level-5 img { width: 83.3% }
 .level-6 img { width: 100%  }

画像に影をつける
style.css.line .image, .line .strong-image {
  filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.3));
  }

/noratetsu/●別タブで開くリンクにアイコンを添える
style.css.editor .line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.editor .line span > a.page-link[target="_blank"]::after {
   font-family: 'Font Awesome 5 Free';
   content: ' \f360';
   font-weight: 900;
   font-size: 0.9rem;
   padding-right: 0.5rem;
   display: inline-block;
}

/noratetsu/●特定のリンクにfaviconをつける
style.css .line a.link:is(
    [href^="https://twilog.org/Foam_Crab/"],
    [href^="https://noratetsu.blogspot.com/"],
    [href^="https://note.com/"],
    [href^="https://tunnellingchannel.substack.com/"],
    [href="https://twitter.com/Foam_Crab"]
)::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 2px;
}
.line a.link[href^="https://twilog.org/Foam_Crab/"]::before {
    content: '';
    background: url(http://www.google.com/s2/favicons?domain=https://twilog.org);
}
.line a.link[href^="https://noratetsu.blogspot.com/"]::before {
    content: '';
    background: url(http://www.google.com/s2/favicons?domain=https://www.blogger.com/);
}
.line a.link[href^="https://note.com/"]::before {
    content: '';
    background: url(http://www.google.com/s2/favicons?domain=https://note.com/);
}
.line a.link[href^="https://tunnellingchannel.substack.com/"]::before {
    content: '';
    background: url(http://www.google.com/s2/favicons?domain=https://tunnellingchannel.substack.com/);
}
.line a.link[href="https://twitter.com/Foam_Crab"]::before {
    content: '';
    background: url(http://www.google.com/s2/favicons?domain=https://twitter.com/);
}

/noratetsu/●ツイートへのリンクに鳥のアイコンを添える
stylex.css.line span > a.link[href*="twitter.com"][href*="/status/"]::after {
  display: none !important;
}
.line span > a.link[href*="twitter.com"][href*="/status/"] {
  font-size: 12px;
  word-break: break-all;
}
.line span >  a.link[href*="twitter.com"][href*="/status/"]::before {
   font-family: 'Font Awesome 5 Free';
   content: ' \f4ba';
   font-weight: 900;
   font-size: 12px;
   color: #1d9bf0;
   padding-right: 1px;
   display: inline-block;
}

自分のツイートを示すアイコンの前に鳥アイコンを添えるなど
style.css.line .quote a.link.icon[href="/noratetsu/nora"]::before {
   font-family: 'Font Awesome 5 Free';
   content: ' \f4ba';
   font-weight: 900;
   font-size: 12px;
   color: #1d9bf0;
   padding-right: 1px;
   margin-left: -4px;
   display: inline-block;
}
.line:not(.cursor-line) .quote>.tag {
  display: none;
}
.line:not(.cursor-line) .quote {
  padding-left: 10px;
}


/noratetsu/●iconのページにクリックでジャンプできないようにする
水平線アイコンをタップ不可に
うっかりタップorクリックして無駄に飛ばないように
ついでに自分のアイコンも
style.cssa.link.icon[href="/icons/%E6%B0%B4%E5%B9%B3%E7%B7%9A"],  
a.link.icon[href="/noratetsu/nora"] {
   pointer-events: none;
}

アイコンの縦位置を調整
style.css.line img.icon {
    vertical-align: -8.5px; /* -9% */
}
2022/01/02修正

/noratetsu/●特定のiconだけCSSを適用する
自分のアイコンの後ろだけpadding
style.css.line img.icon[src="/api/pages/noratetsu/nora/icon"] {
    padding-right: 4px;
}
テスト
テスト（適用前）

/noratetsu/●「行番号を表示する」改良版
元は/scrasobox/行番号を表示する
style.css/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
  .editor .lines { counter-reset: line }
  
  /* タイトルから数えるときは :not(.line-title) を消してね */
  .editor .line:not(.line-title) { counter-increment: line }
  
  /* タイトルから数えるときは :not(.line-title) を消してね */
  .app:not(.presentation) .editor .line:not(.line-title)::before { 
    content: counter(line); 
    position: absolute; display: inline-block; left: -110px; z-index: 10; 
    min-width: 50px; text-align: right; vertical-align: middle;
    
    /* 行番号のフォントとか色とかの指定はここ */
    font-family: monospace; color: grey }
  
  /* カーソル行の行番号を濃く表示する */
  .editor .line:not(.line-title)::before { opacity: .5 }
  .editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }

フォント変更/noratetsu/●（今更ながらフォント調整）
style.css.grid li ,.quick-launch .project-home .title { 
	font-family: "UD デジタル 教科書体 NK-B", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.editor, .stream { 
	font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
冒頭でwebフォントインポート

/noratetsu/●検索結果をわかりやすくする
style.css/* 検索ワードを強調 */
.list li.page-list-item a .description strong {
	background-color: yellow;
} 
/* 検索結果にスクロールバーをつけたり */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description {
    max-height: 70px;
    margin: 10px 0;
    overflow-y: auto;
    border: #ddd thin ;
    border-style: solid hidden;
} 
/* 検索結果を改行させる */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description span {
	display: block;
}

style.css.quick-launch .search-result-count small {
  display: none;
}

/noratetsu/●スクロールバーの見た目を調整する
style.css::-webkit-scrollbar{
    width: 10px;
    height: 5px;
  }
::-webkit-scrollbar-track{
    background: rgba(255, 255, 255,0.4);
    border: none;
    border-radius: 10px;
  }
::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    box-shadow: none;
  }
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

関連リンクを左列へ＋エディタ部分をスクロール
→/noratetsu/●関連リンクを左列に持ってくる
あ	い	う	え	お
か	き	く	け	こ
さ	し