Settings
表示確認は記法サンプル(Scrapbox)にて。
方針
まだちゃんと作ってないの
トップページのスタイル
ソート順のプルダウンリスト
関連リンクが膨大だった時に出る三点ボタン
確認でき次第作る。
→ 多分対応できた。
変えないもの
上部に固定されているScrapboxのボタンがあるバー
ここを変えてしまうとプロジェクトをあっちこっち移動している人が混乱する。
色を変えるぐらいだったらいいかも。
インポート
#_CSS_Import がついたページのCSSを読み込んでいる。
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の変数を上書きしているものがある。
デフォルトの変数については下記参照。
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;
}