settings
カスタム CSS を書いておくところ。
色
style.cssbody {
--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 を固定しない (スクロールアウトする)
ボタン類を薄く (ホバーで戻す)
style.css.page-menu, .quick-launch {
opacity: 0.3;
}
.page-menu:hover, .quick-launch:hover {
opacity: 1;
}
関連ページもほんのり薄く
style.css.related-page-list {
opacity: 0.8;
}
色付きの UI 部品を減らす
関連ページのカテゴリ見出し ("Links" とか書いてあるやつ) を無彩色に
style.cssbody {
--relation-label-bg: #d0d0d0;
--relation-label-links-bg: var(--relation-label-bg);
--relation-label-links-text: var(--relation-label-text);
}
関連ページ内のリンクは無彩色に
style.css/* リンクの色も消す */
.grid li.page-list-item .link, .grid li.page-list-item .page-link {
color: inherit;
}
立体表現を減らす
カード（トップページ・関連ページリスト）の立体表現を消す
style.cssbody {
--card-box-shadow: none;
--card-box-hover-shadow: none;
}
.grid li.page-list-item a .header {
border-top: none;
}
記事枠の立体表現を取る
style.cssmain.page {
box-shadow: 0 0 0 1px #e8e8e8 inset;
}
トップページ
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 らへんに置く
style.css.line img.icon {
top: 0;
margin: 0 2.5px;
vertical-align: -.25em;
/* line-height は変えたくないので、 scale で見かけのサイズだけ拡大する */
transform: scale(1.3);
}
リンク
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;
}
ハッシュタグ形式のリンクをハッシュタグらしく（枠で囲む）
style.cssa[type=hashTag] {
padding: 4px;
border: 1px solid currentColor;
border-radius: 4px;
}
自動で重要なリンクをデカくする機能（？）を無効
style.css.big-page-link {
font-weight: inherit !important;
}
強調
強調に下線（ラインマーカー風）
style.cssstrong.level-1 {
background: linear-gradient(transparent 50%, var(--accent-bg) 50%);
}
レベル２強調を見出しっぽく（先頭に縦線）
style.css.level-2 {
border-left: 4px solid var(--brand);
padding: 8px 10px;
}
カスタムタグ
補足タグ (こんな感じで…)
ネタバレタグ ほげほげほげ
style.css.deco-\!:not(:hover) {
filter:blur(3px);
}
コードブロック・表
コード見出しを無彩色に
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;
}
テーブル見出しを無彩色に
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;
}
テーブルを背景色じゃなくボーダーで見せる
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 が未対応)
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);
}
マルチカラム
関連リンクを右カラムに
標準の記事最大幅 960px を保ったまま右カラムを表示できる時だけ適用する
Scrapbox 標準レイアウトは 120px@min + 960px@max + 120@min = 1200px
右カラムを margin16px + body142px で足すと計 1358px
→ 画面幅が 1358px 以上の時だけ適用
style.css@media (min-width: 1358px) {
.col-page {
max-width: 1120px;
}
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 16px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
flex-basis: 142px !important;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-list .toolbar {
display: none !important;
}
.related-page-list .links-container {
gap: 12px;
}
.related-page-list .links-container .grid {
gap: 0;
}
.related-page-list .links-container .grid li {
aspect-ratio: initial;
}
.related-page-list .links-container .grid .relation-label {
margin-bottom: 4px;
}
.related-page-list .links-container .grid .relation-label .icon-lg {
display: none;
}
.related-page-list .links-container .grid .page-list-item a {
background: none;
}
.related-page-list .links-container .grid .page-list-item .header {
padding: 4px;
}
.related-page-list .links-container .grid .page-list-item .header .title {
font-weight: normal;
}
.related-page-list .links-container .grid .page-list-item .description {
display: none;
}
.related-page-list .links-container .grid .page-list-item .icon {
display: none;
}
}
グロナビ
新規作成ボタンぢょと小さくする
style.css.new-button {
transform: scale(0.88);
}
検索ボックスのスタイルを隣の新規作成ボタンに合わせる
style.css/* 非 hover 時の検索窓を新規作成＋ボタンと同じ色に */
.search-form .form-group input {
background-color: var(--new-button-bg);
}
.search-form .form-group .kamon {
fill: var(--new-button-horizontal-color) !important;
}
/* focus を当てなくても hover だけで色が変わるように */
.search-form:has(input:hover, input:focus) .form-group input {
color: #555;
background-color: var(--new-button-hover-bg);
}
.search-form:has(input:hover, input:focus) .form-group .kamon {
fill: #555 !important;
}
タイトル先頭にアイコンを付加
style.css.project-home::before {
content: "";
background-image: url(https://i.gyazo.com/fd0197b1b7ef02bda05466cc99546587.png);
background-size: contain;
width: 24px;
height: 24px;
margin-right: 4px;
}