settings - zk_phi PUBLIC scrapbox

settings

カスタム CSS を書いておくところ。

これいいな → /Mijinko/settings

色

code:style.css

body {

--brand: #ea0;

--body-bg: #e8e8e8;

--accent-bg: rgba(238, 170, 0, 0.3);

/* navbar */

--navbar-bg: var(--brand);

--new-button-bg: rgba(255, 255, 255, 0.25);

--new-button-hover-bg: rgba(255, 255, 255, 1);

/* cards */

--card-hover-bg: rgba(0, 0, 0, 0.025);

--card-active-bg: rgba(0, 0, 0, 0.05);

/* in-page links */

--page-link-color: var(--brand);

--page-link-hover-color: #d90;

--card-description-link-color: var(--brand);

/* telomere */

--telomere-border: rgba(0, 0, 0, 0);

--telomere-unread: rgba(238, 170, 0, 0.25);

--telomere-updated: rgba(238, 170, 0, 0.25);

/* codes */

--code-title-bg: rgba(0, 0, 0, 0.4);

}

集中

記事以外の UI 部品を薄くする・どかす

navbar を固定しない (スクロールアウトする)

code:style.css

.navbar {

position: absolute;

}

ボタン類を薄く (ホバーで戻す)

code:style.css

.page-menu, .quick-launch {

opacity: 0.3;

}

.page-menu:hover, .quick-launch:hover {

opacity: 1;

}

関連ページもほんのり薄く

code:style.css

.related-page-list {

opacity: 0.8;

}

色付きの UI 部品を減らす

関連ページのカテゴリ見出し ("Links" とか書いてあるやつ) を無彩色に

code:style.css

body {

--relation-label-bg: #d0d0d0;

--relation-label-links-bg: var(--relation-label-bg);

--relation-label-links-text: var(--relation-label-text);

}

関連ページ内のリンクは無彩色に

code:style.css

/* リンクの色も消す */

.grid li.page-list-item .link, .grid li.page-list-item .page-link {

color: inherit;

}

立体表現を減らす

カード（トップページ・関連ページリスト）の立体表現を消す

code:style.css

body {

--card-box-shadow: none;

--card-box-hover-shadow: none;

}

.grid li.page-list-item a .header {

border-top: none;

}

記事枠の立体表現を取る

code:style.css

main.page {

box-shadow: 0 0 0 1px #e8e8e8 inset;

}

トップページ

ピンの見た目をわかりやすく /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: var(--brand);

position: relative;

top: -8px;

}

.grid li.page-list-item a {

overflow: inherit;

}

マークアップ

アイコン

アイコンほんのりでかくして ideographic-baseline らへんに置く

code:style.css

.line img.icon {

top: 0;

margin: 0 2.5px;

vertical-align: -.25em;

/* line-height は変えたくないので、 scale で見かけのサイズだけ拡大する */

transform: scale(1.3);

}

リンク

外部リンクにアイコンを付加 /customize/外部リンクを区別するUserCSS

code:style.css

.line a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 900;

display: inline-block;

margin-left: -2px;

}

ハッシュタグ形式のリンクをハッシュタグらしく（枠で囲む）

code:style.css

atype=hashTag {

padding: 4px;

border: 1px solid currentColor;

border-radius: 4px;

}

自動で重要なリンクをデカくする機能（？）を無効

code:style.css

.big-page-link {

font-weight: inherit !important;

}

強調

強調に下線（ラインマーカー風）

code:style.css

strong.level-1 {

background: linear-gradient(transparent 50%, var(--accent-bg) 50%);

}

レベル２強調を見出しっぽく（先頭に縦線）

code:style.css

.level-2 {

border-left: 4px solid var(--brand);

padding: 8px 10px;

}

カスタムタグ

補足タグ (こんな感じで…)

code:style.css

.deco-\. {

opacity: 0.5;

}

ネタバレタグほげほげほげ

code:style.css

.deco-\!:not(:hover) {

filter:blur(3px);

}

コードブロック・表

コード見出しを無彩色に

code:style.css

.line span.code-block .code-block-start {

color: var(--page-bg);

background-color: var(--code-title-bg);

}

.line span.code-block .code-block-start a {

color: var(--page-bg);

text-decoration: none;

}

テーブル見出しを無彩色に

code:style.css

.table-block .table-block-start {

background-color: var(--code-title-bg);

}

.table-block .table-block-start a {

color: var(--page-bg);

text-decoration: none;

}

テーブルを背景色じゃなくボーダーで見せる

code:style.css

.table-block .cell {

box-shadow:

1px 0 0 0 var(--code-title-bg),

0 1px 0 0 var(--code-title-bg),

1px 1px 0 0 var(--code-title-bg),

1px 0 0 0 var(--code-title-bg) inset,

0 1px 0 0 var(--code-title-bg) inset

}

.table-block .cell:nth-child(odd) {

background-color: transparent;

}

.table-block .cell:nth-child(even) {

background-color: transparent;

}

.table-block .cell.cursor-row:nth-child(odd) {

background-color: transparent;

}

.table-block .cell.cursor-row:nth-child(even) {

background-color: transparent;

}

代わりにホバーで背景をつける (firefox は :has が未対応)

code:style.css

.table-block:has(.cell:hover) .cell {

background-color: rgba(0, 0, 0, 0.05);

}

.table-block:has(.cell:hover) .cell:hover {

background-color: rgba(0, 0, 0, 0.075);

}

マルチカラム