settings
code:style.css
/* 背景色変更 */
body {background-color: #f6f6f6;
}
/* ナビゲーションバー */
.navbar{
background-color: #c4c4c41f;}
.navbar-form {
background-color: #ffffff1f;
}
/* 記事タイトル */
.line.line-title,
.text-input.line-title {
font-weight: bold;
color: #515151;
}
/* 各カードのスタイル */
/* カードにホバーしたとき */
data-hover-visible .grid li.page-list-item a {
transition: ease-out .3s;
}
data-hover-visible .grid li.page-list-item a:hover {
box-shadow: -4px 6px 10px 0px rgb(155 206 203 / 30%);
transition: ease-out .3s;
}
data-hover-visible .grid li.page-list-item a:hover .hover {
opacity: 1;
}
.grid li.page-list-item a .hover {
background-color: var(--card-hover-bg, #a7e2dd33);
transition: .3s;
}
/* カード内のリンク色 */
.page-list-item .description .page-link {
color: #5698C4;
}
.page-list-item .description .link {
color: #5698C4;
}
.page-list-item .description code {
color: #0d72b6;
}
/* ピン留め */
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #d7dee0, var(--card-backside, #d7dee0) 50%, var(--body-bg, #f6f6f6) 50%, var(--body-bg, #f6f6f6));
}
.grid li.page-list-item a {
box-shadow: -4px 6px 7px 0px rgb(160 160 160 / 10%);
}
/* 直前に更新した箇所の色: テロメア */
.line .telomere .telomere-border.updated-after-load {
border-color: var(--telomere-updated, #1089da);
}
.line .telomere .telomere-border.unread:not(.updated-after-load) {
border-color: var(--telomere-unread, #1089da)
}
/* 直前に更新した箇所の色: unread bar */
.scroll-bar-overlay .unread-bar {
background-color: var(--telomere-updated, #1089da);
}
/* 新規記事作成ボタン */
.new-button {
background-color: #1b85cc!important;
}
.new-button:hover {
background-color: #4ba6e3!important;
}
/* リンク */
/* 空リンクとリンクの色 */
/* アイコンの背景だけ消す */
atype="link".page-link, .line a.link.icon {
background: none;
}
atype="link".page-link, .line a.link {
color: #1b85cc !important;
/* font-weight: bold; */
/* display: inline-block; */
padding: 0px 5px;
margin: 0 8px 8px 0;
background: #f1f5f6;
/* border: 0px solid #387087; */
border-radius: 3px;
}
atype="link".empty-page-link, atype="hashTag".empty-page-link {
color: #5e97b1 !important;
/* display: inline-block; */
padding: 0px 5px;
margin: 0 8px 8px 0;
background: #fefefe;
border: 1px dashed #7fa3b1;
border-radius: 3px;
}
/* ハッシュタグ */
atype="hashTag".page-link {
/* display: inline-block; */
padding: 2px 8px;
/* margin: 0 8px 8px 0; */
/* background: #c8625a1a; */
background: none;
color: #999;
font-size: 0.8em;
border: 1px solid #999;
border-radius: 20px;
}
/* ハッシュタグにホバーしたときの色 */
atype="hashTag".page-link:hover {
color: #999!important;
}
atype="hashTag".empty-page-link {
/* display: inline-block; */
padding: 2px 8px;
margin: 0 8px 8px 0;
/* background: #c8625a1a; */
background: none;
color: #999 !important;
font-size: 0.8em;
border: 1px dashed #999;
border-radius: 20px;
}
/* 文字色の装飾 */
.deco-\# {
color: #3cbbfd; /* 青文字 */
}
.deco-\" {
color: #e0f33f; /* 黄色文字 */
}
.deco-\! {
color: #fb50b7; /* 赤文字 */
}
.deco-\% {
background: -webkit-linear-gradient(0deg, #ACB6E5, #c67cff); /* 背景色にグラデーションを指定 */
-webkit-background-clip: text; /* テキストでくり抜く */
-webkit-text-fill-color: transparent; /* くり抜いた部分は背景を表示 */
}
span.deco-- {
color: #9e9e9e; /* 非対応のブラウザでの文字色を設定 */
/* background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8); /* 背景色にグラデーションを指定 */ */
/* -webkit-background-clip: text; /* テキストでくり抜く */ */
/* -webkit-text-fill-color: transparent; /* くり抜いた部分は背景を表示 */ */
}
/* インデントの装飾 */
.line .indent-mark .dot {
width: 8px;
height: 2px;
border-radius: 5px;
}
.line .indent-mark .c-1 + .dot {
background-color: #4890AD;
}
.line .indent-mark .c-2 + .dot {
background-color: #5DBAE0;
}
.line .indent-mark .c-3 + .dot {
background-color: #70d6ff;
}
/* 見出し4のスタイル */
strong.level.level-4 {
padding: 1rem 2rem;
border-left: 6px double #fff;
margin-bottom: 16px;
display: block;
}
/* 見出し3のスタイルt */
strong.level.level-3::after {
content: "";
display: block;
height: 2px;
width: 100%;
background-color: #fff;
border-radius: 5px;
}
/* 引用エリア */
.line .quote {
border-left: none;
padding: 5px;
font-style: italic;
border-radius: 5px;
}
.line .quote:before {
content: "“";
color: #bbb;
font-size: 1.5em;
position: absolute;
}
.line .quote:after {
content: "”";
color: #bbb;
font-size: 1.5em;
position: absolute;
}
/* 関連記事リスト */
/* リンクされた記事 */
.grid li.relation-label.links a,.grid li.relation-label.project-links a {
background-color: #3094d6;
}
.grid li.relation-label.links .arrow,.grid li.relation-label.project-links .arrow {
border-left-color: #3094d6;
}
/* 同じタグの記事 */
.related-page-list div.links-2-hop ul.grid:hover .relation-label a {
background-color: #3094d6;
transition: ease-out .1s;
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label .arrow {
border-left-color: #3094d6;
transition: ease-out .1s;
}
.grid li.relation-label a {
/* background-color: #9babc1; */
background-color: #9db1be;
transition: ease-out .1s;
}
.related-page-list div.links-2-hop ul.grid .relation-label .arrow {
border-left-color: #9db1be;
transition: ease-out .1s;
}
/* 関連記事エリアの色 */
.grid li.page-list-item a .header {
color: #1089da!important;
}
.grid li.page-list-item.unread .content .header {
border-color: #1089da;
}
/* https://qiita.com/kazuhito_nakayama/items/b623f066e7d4cb8a6c98 */