settings
フォントを変える
code:style.css
body,
.grid li.page-list-item a .title {
font-family: -apple-system, BlinkMacSystemFont,;
}
背景色を変える
code:style.css
body {
background-color:#fff;
}
/*.grid li.page-list-item a .pin {
}*/
ヘッダーまわりの調整
code:style.css
.navbar-default {
background-color:#fff;
}
.search-form .form-group input {
background-color:transparent;
}
.navbar-default .navbar-form {
border-color: transparent;
}
タイトルの調整
code:style.css
.line.line-title {
text-align: center;
margin-bottom: 2em;
}
.line.line-title:before {
content: '';
position: absolute;
bottom: 0em;
width: 60px;
height: 7px;
transform: translateX(-50%);
}
各アイテムまわりの調整
code:style.css
.grid li.page-list-item a {
box-shadow: 0 0 20px rgba(100,100,100,0.1);
}
.grid li.page-list-item a:hover {
box-shadow: 0 0 20px rgba(100,100,100,0.1);
}
.grid li.page-list-item a .header {
border-top: 0;
}
リンクの色や見た目の調整
code:style.css
.line a.page-link {
}
.line a.page-link:hover {
color:#5e8af7;
}
.line a.empty-page-link {
}
各ページの調整
code:style.css
.page {
box-shadow: none;
}
スリムなテロメア
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe } .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent } /* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: transparent; width: 2px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: transparent; width: 5px }
ヘッダーメニューをカスタマイズ
code:style.css_DISABLED
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #aaa; } /* 2. ページ追加ボタンを検索ボックスの右に移動 */
.navbar-form { flex-flow: row-reverse }
.new-button { margin-left: 10px; margin-right: 0 }
箇条書きを控えめにする
code:style.css
.line .indent-mark .dot {
height: .15em;
width: .40em;
top: auto;
bottom: 0;
background-color: rgba(173,173,173,.55) }
body.presentation .line .indent-mark .dot { top: 12px }
テーブルのセルをわかりやすく
code:style.css
.table-block table {
background-color: transparent;
border-collapse: separate;
border-spacing: 2px;
}
.table-block table tr td {
padding: .2em .6em;
background-color: rgba(0,0,0,0.04);
}
.table-block table tr:nth-child(even) td {
background-color: rgba(0,0,0,0.06);
}
/* 偶数行を濃くする */
.table-block table tr:first-child td {
font-weight: bolder;
text-align: center;
}
/* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child {
padding: 0;
background-color: transparent;
border-width: 0;
}
＃で始まるタグをラベル風にする（印刷しない）
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
color: white !important;
font-size: 0.8em;
border-bottom: none !important;
border-radius: 3px;
}
}
@media print {
}
ピン留めしたページのスタイルの変更
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: '\f02e';
font-family: 'FontAwesome';
font-size: 20px;
color: rgba(20,20,20,0.2);
diplay: inline-block;
}
settings のカードを薄くする
code:style.css
opacity: 0.3;
}
カードのタイトル部分の高さ調整
code:style.css
.grid li.page-list-item a .title {
min-height: 40px;
}