Settings
文字関係
背景と文字色チェンジ
code:style.css
body{
color: #7fffbf;
background-color: #effbff;
line-height: 10%;
--card-title-bg-pinned: #c1c1c1;
--empty-page-link-color: #ffbbbb;
--empty-page-link-hover-color: #ffa0a0;
--relation-label-links-bg: #9dc7d4;
--telomere-unread: #a5d6e6;
--tool-bg: #e2e2e200;
background-image: linear-gradient(53deg, #767676 25%, #999999 25%, #999999 50%, #767676 50%, #767676 75%, #999999 75%);
background-size: 74px 98px;/*背景を水っぽくしてみた*/
}
.col-page {
margin-bottom: 60px;
}
フォントチェンジ
code:style.css
.editor, .stream{
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 150%;
}
インデントを薄くする
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 4px;
background-color: #8888aa;
}
引用を太字にしたい
code:style.css
.line .quote {
font-style: normal;
font-weight: bold;
color: #000;
padding: .1rem 1em;
}
マーカー
code:style.css
/* [ ]で蛍光ライン */
.line strong:not(class){
color:#636262;
background:linear-gradient(#ffffff00 60%,#a8ffd3 80%)
}
コメント用マーカー
code:style.css
.deco-\# {
color: #636262;
font-weight: 600;
background:linear-gradient(#ffffff00 60%,#ffff00 99%)
}
文字色4色順番に並べると……
code:style.css
.deco-\& {
font-weight: bold;
color: #a22041;
}
.deco-\% {
font-weight: bold;
color: #ee7948;
}
.deco-\" {
font-weight: bold;
color: #03468f;
}
.deco-\( {
font-weight: bold;
color: #00a381;
}
code:style.css
.deco-\! {
max-width: 70%;
}
code:style.css
.quick-launch {
margin-bottom: 0px;
}
ピン止めされたページを独立させる→/aioilight/Settingsより
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ナビゲーションバー
code:style.css
/* navbarを目立たなくする */
.navbar {
background-color:#e8e8e885;
--search-form-bg: #ffffff6b;
}
新規ページのボタンをお洒落にしたい
code:style.css
.new-button {
background-color: #fff0;
border-radius: 0px;
--new-button-hover-bg: #efefef; /* ホバーのバックグラウンド変えられる */
}
.new-button .horizontal-line { /* 十字を調整できる */
position: absolute;
top: 16px;
left: 7px;
width: 22px;
height: 3px;
border-radius: 0px;
background-color: #d5d5d5;
}
.new-button .vertical-line {
position: absolute;
top: 7px;
left: 17px;
width: 2px;
height: 21px;
border-radius: 0px;
background-color: #d5d5d5;
}
.fa-chevron-circle-down:before {
content: "\f13a";
color: #93afce;
}
.fa-chevron-circle-up:before {
content: "\f139";
color: #93afce;
}
.grid li.relation-label a .title {
overflow: visible;
}
code:style.css
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
border-color: #fefefe }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
border-color: #8f9899 }
.line .telomere .telomere-border { border-color: #bfbfbf }
.line .telomere .telomere-border.unread { border-color: #bfbfbf }
code:style.css
.navbar-brand::before {
display: none;
}