Settings
ここは、このプロジェクトのUserCSS（＝カスタムCSS）を保存している場所。
表示確認は記法サンプル(Scrapbox)にて。
https://gyazo.com/f4e9621dddd3cb692c487e25df81a336
歯車・ギアのイラスト | かわいいフリー素材集 いらすとや
UserCSS
方針
まだちゃんと作ってないの
トップページのスタイル
ソート順のプルダウンリスト
関連リンクが膨大だった時に出る三点ボタン
確認でき次第作る。
→ 多分対応できた。
変えないもの
上部に固定されているScrapboxのボタンがあるバー
ここを変えてしまうとプロジェクトをあっちこっち移動している人が混乱する。
色を変えるぐらいだったらいいかも。
インポート
#_CSS_Import がついたページのCSSを読み込んでいる。
code:style.css
@import url('https://scrapbox.io/api/code/ed/_CSS_Page/style.css');
@import url('https://scrapbox.io/api/code/ed/_CSS_Deco/style.css');
@import url('https://scrapbox.io/api/code/ed/_CSS_etc/style.css');
色等の指定
独自のものとデフォルトのCSSの変数を上書きしているものがある。
デフォルトの変数については下記参照。
/Mijinko/ScrapboxのCSSテーマ変数
code:style.css
/* ページ内色変更 */
body,
*:before,
*:after {
/* 汎用色データベース */
--common-bg-0 : #0b0401; /*#0A0302;*/
--common-bg-1 : rgba( 0, 0, 0, 1 );
--common-bg-1-clear : rgba( 0, 0, 0, .8);
--common-bg-2 : rgba( 76, 33, 0, 1 );
--common-bg-2-clear : rgba( 76, 33, 0, .7);
--common-bg-3 : rgba( 33, 14, 0, 1 );
--common-bg-3-clear : rgba( 33, 14, 0, .8 );
--common-bg-orange : rgba( 33, 28, 0, 1 );
--common-bg-orange-clear : rgba( 33, 28, 0, .7);
--common-disable-bg : rgba( 25, 25, 25, 1 );
--common-disable-bg-clear : rgba( 25, 25, 25, .9);
--common-text-color : #FFFFFF;
--common-text-color-invert : #000000;
--common-accent-color : rgba(255, 111, 0, 1 );
--common-accent-color-gray : rgba(100, 43, 0, 1 );
--common-accent-blue : rgba( 2, 173, 210, 1 );
--common-accent-red : rgba(229, 0, 0, 1 );
--common-accent-yellow : rgba(255, 216, 0, 1 );
--common-yellow-gray : rgba(129, 109, 2, 1 );
--common-yellow-gray-clear : rgba(129, 109, 2, .5);
/* フォント */
--base-fonts: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands", AppIcons,sans-serif;
--euro-caps : 'Euro Caps',var(--base-fonts);
--relation-title-font: var(--euro-caps);
/* 背景ベース */
--body-bg : var(--common-bg-0);
/* ページ内の色 */
--page-bg : var(--common-bg-1-clear);
--page-text-color : var(--common-text-color);
--line-title-color : var(--common-accent-color);
--telomere-unread : var(--common-accent-color);
--telomere-border : var(--common-accent-color-gray);
--line-permalink-color: var(--common-yellow-gray-clear);
--table-border-color : var(--common-accent-color);
/* ページ内文字色 */
--page-link-color : var(--common-accent-blue);
--empty-page-link-color: var(--common-accent-red);
/* 汎用的な色 */
--caption-color: var(--common-accent-color);
/* 関連ページリストの色 */
--related-page-list-bg : var(--common-bg-1-clear);
--relation-label-bg : var(--common-disable-bg);
--relation-label-text : var(--common-text-color);
--relation-label-border : var(--common-accent-color);
--relation-label-links-bg : var(--common-accent-blue);
--relation-label-links-text : var(--common-text-color-invert);
--relation-label-empty-bg : var(--common-accent-red);
--relation-label-empty-text : var(--common-text-color-invert);
--relation-label-2-hop-bg : var(--common-bg-2-clear);
--relation-label-2-hop-hover-bg: var(--common-accent-color);
--card-bg : var(--common-bg-3);
--card-hover-bg : var(--common-bg-2);
--card-title-color : var(--common-text-color);
--card-hover-title-color : var(--common-accent-color);
--card-hover-title-bg : var(--common-accent-color);
--card-border : transparent;
--card-border-hover : var(--common-accent-color);
--card-box-shadow : 0;
--card-box-hover-shadow : 0;
/* トップページ */
--card-title-bg-pinned : var(--common-accent-color);
/* ナビゲーションバー(navbar) */
--stream-button-bg : var(--common-accent-color);
--stream-button-hover-bg : var(--common-accent-yellow);
/* ツールバー */
--tool-bg : var(--common-bg-2-clear);
--tool-base-bg : var(--common-bg-1-clear);
/* ドロップダウンメニュー（ソートメニュー） */
--dropdown-bg : var(--common-bg-2);
/* 記法 */
--accent-level-4: var(--common-accent-color);/*#518fb3;*/
--warning-text-color: var(--common-text-color);
--warning-bg: #e33;
--warning-bg-border: #ee6000;
/* サイズ */
--container-height-min : 112.5vw; /* 背景画像の横幅に対する縦幅の比率（1920:2160=100:112.5) */
--relation-label-height: 25px;
}
.deco-\! {
/* 警告記法使用時の色 */
--page-link-color: #80c9fe;
--empty-page-link-color: #ffb7b8;
}