settings

テーマの色合いを変更する

code:style.css

/*全体*/

--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, .23);

--tool-bg: rgba(0, 0, 0, .1);

--body-bg: rgba(251,221,201,1);

--navbar-bg: rgba(85,80,93,1);

--search-form-bg: rgba(255, 255, 255, .16);

--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);

--tool-light-color: rgba(49, 55, 66, .4);

--tool-bg: rgba(49, 55, 66, .1);

--tool-badge-bg: rgba(255, 255, 255, .3);

--body-headings-color: var(--tool-color);

}

/*背景色*/

body {

}

/*ナビゲーションバー*/

.navbar-default{

}

/*ステータスバー*/

.status-bar>div {

font-size: 12px;

padding: 0 12px;

line-height: 28px;

cursor: default;

}

/*一覧*/

/*ピン留め*/

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

position: absolute;

height: 20px;

width: 22px;

top: 0;

right: 0;

border-radius: 0 0 0 4px;

z-index: 2;

}

/*個別ページ*/

/*テロメア*/

.line .telomere .telomere-border {

position: absolute;

display: block;

text-decoration: none;

left: -49px;

top: 0;

width: 20px;

border: 0;

border-color: rgba(231,243,235,1);

border-style: solid;

border-width: 0 0 0 5px;

overflow: hidden;

height: 100%;

z-index: 200;

}

/*テロメア更新部分*/

.line .telomere .telomere-border.unread {

border-color: rgba(161,226,199,1);

}

code:style.css

/* 箇条書きを控えめにする */

.app .line .indent-mark .dot {

height: .2em; width: .4em; border-radius: 25%;

background-color: rgba(173,173,173,.55) }

.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }

code:style.css

/* アイコンをロゴに変更 */

.navbar-brand::before {

content: '';

width: 40px;

height: 40px;

position: absolute;

background-size: cover;

background-color: var(--navbar-bg);

border-radius: 5px; /*角丸はお好みで*/

}

pinしたものと、pin以外で列を分ける

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

二重括弧による強調をマーカーっぽくする

code:style.css

/* 二重括弧による強調をマーカーっぽくする */

}