settings
基本設定
/help-jp/UserCSS, /masui/settings, /syunichisuge/settings /madobes/settings /syunichisuge/settings から借用し、調整しました。
調整中...
color変数
Text
color:#282828
color:#000000
Background
color :#ffffff
Primary
color:83AF9B / rgb 131,175,155,
ナビゲーションバー
opacityつけてるので、濃いめが良い
テロメア
マーカー1
太字
color: 4AA85D;　緑
Color
code:style.css
/* Primery Color*/
/* NavigationBar */
/* 一番上のナビゲーションバーの色とTopの色　 */
.navbar-default {
background-color: rgb(40, 40, 40, 0.8);
overflow: unset;
border-top: solid #282828 1px;
padding-bottom: 8px;
padding-top: 8px;
}
.title{
color:#ffffff;
}
/* いったいどこ？*/
.status-bar {
background-color: rgba(40,40,40, 0);
color: #fff;
border-top-left-radius: 15px;
border-top-color: #282828;
border-left-color: #282828;
}
code:style.css
/* Backgraound系 */
.line .meta {
border-color: #ffffff;
}
body {
/* 背景色　ノートの下地と同じいろにして広々感だしたい */
background-color: #fff;
font-family: '游ゴシック','Yu Gothic',san-serif;
}
/* ノートページ　色　一番底*/
.page {
box-shadow: 0 1px 0 rgba(0,0,0,0.16);
background-color: #fff;
}
/* 検索のとこ*/
form {
border:0px #ffff solid;
}
/* Text系 */
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 100%; ,color: #282828; }
/* 本文のフォント設定: 文字詰め */
.line .text:not(.code-block) { font-feature-settings: "pkna" }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;
border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem }
}
.grid li.page-list-item a {
box-shadow: 0 1px 0 rgba(0,0,0,0);
}
ul.grid li.page-list-item a .header{
border-top: solid 1px #000000;
}
ul.grid-md.grid li.page-list-item a .header{
border-top: solid 1px #000000;
}
ul.grid-lg.grid li.page-list-item a .header{
border-top: solid 1px #000000;
}
code:style.css
/* 中間色　*/
/* 下線?と引用の色　灰色 */
.line .quote {
font-style: normal;
background: #dddd;
}
外部リンクにアイコンつける
thanks: /scrasobox/settings,/villagepump/settings#60e317ae0684840000f45144
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
/* font-family:'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: ' \f35d';
display: inline-block;
}
テロメア
/scrasobox/スリムなテロメアを参考に色調整
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #dddddd }
.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: #fffff; width: 2px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #ffffff; width: 5px }
色関係ないレイアウト系
code:style.css
/* ノートの影　改善余地あり*/
.grid li.page-list-item a:hover{
box-shadow: none;
}
.grid li.page-list-item a:hover{
box-shadow: none;
}
.page-list-item .description img.inline-icon {
height: 100%;
width: 100%
}
.editor, .stream, li.page-list-item {font-family: unset !important;}
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
追加機能系
アイコン系
追加ボタン
code:style.css
.new-button {
background-color: rgba(255, 255, 255, 0.16);
}
.new-button .horizontal-line{
background-color: #fff;
}
.new-button .vertical-line {
background-color: #fff;
}
via /scrasobox/settings　ピンの形状と色をカスタマイズ
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: '★'; font-family: 'Yu-Gothic'; font-size: 10px; color: #000000; bottom: 0;
display: inline-block;}
記法系
強調文字に色を付ける
強調記法である[* 文字]を緑にする場合
code:style.css
.line strong {
color: #459d57;
}
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #FC9D9A;
font-size: 0.8em;
border: 1px solid #FC9D9A;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
その他設定
Project titleのスタイル
code:style.css
@media screen {
.quick-launch .left-box {
position: fixed;
top: 12px;
left: 70px; /* brand-iconの幅に応じて変えてください */
z-index: 1000;
}
.quick-launch .project-home {
line-height: 30px;
min-height: 30px;
}
.project-home .title {
font-size: 17px;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .left-box {
left: 85px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .left-box {
left: 100px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .left-box {
left: calc((100% - 1280px)/2 + 110px);
}
}
フッター
thanks!: /himazine/settings#5d75ec694f825300004311c9
/nwtgck/settings#5dab236bd08a040000808e1a
TODO:使う画像の背景をノートの背景と同じ色にする
後ろに /thumb/30#.でサイズ調整
code:style.css
.app:not(.presentation) .page::after {
content: url("https://i.gyazo.com/e58befe79647e161fa43fa359be52b14/thumb/30#.jpg");
display: block;
text-align: right;
}