settings
code:style.css
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700');
body {
background-color: #ffffff;
color: #555555;
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.navbar-default {
background-color:rgba(255, 255, 255, 0.7)
}
/* Scrapboxアイコンをバーガーアイコンに置き換え */
.brand-icon, .kamon { display: none !important }
.navbar-brand::before {
content: '\f0c9';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 28px;
color:#dddddd;
}
.navbar-form .search-form {
background-color:rgba(255, 255, 255, 0.2);
border:thin solid #eeeeee;
}
.navbar .navbar-menu .mobile-search-toggle {
color:#dddddd;
}
.navbar .navbar-menu .mobile-search-toggle.active {
color:#555555 !important;
}
.search-form .form-group button {
color:#dddddd
}
.search-form .form-group button.focus {
color:#dddddd
}
.quick-launch .project-home {
color:#424242;
}
.plan-badge {
display:none;
}
.private-badge {
display:none;
}
inputtype="range".grid-size-range {
color:#cccccc;
}
.grid li {
margin:5px;
padding:5px;
}
.grid li.page-list-item a {
box-shadow: 0 1px 0 rgba(0,0,0,0);
width:100%;
height:100%;
}
.grid li.page-list-item a:hover {
box-shadow: 0 1px 0 rgba(0,0,0,0);
}
.grid li.page-list-item a .content {
border: 0;
display:flex;
flex-direction:column;
}
.grid li.page-list-item a .content .header {
border: 0;
order:0;
padding:10px;
}
.grid li.page-list-item a .content .header .title {
color:#424242;
}
.grid li.page-list-item a .content .icon {
order:1;
}
.grid li.page-list-item a .content .description {
order:2;
font-size:0.8em;
line-height:1.5em;
margin:-8px 0 0;
padding:10px;
}
.page {
box-shadow: 0 0px 0 rgba(0,0,0,0.16);
background-color: #ffffff;
}
.col-page {
max-width:920px;
}
.col-page-side {
width: calc((100% - 920px) / 2);
}
.editor {
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 1.2em;
line-height: 2.0em;
}
.line.line-title {
text-align:center;
border-bottom:thin solid #eeeeee;
margin-bottom:40px;
font-weight:bold;
color:#424242;
}
.lines {
border-bottom:thin solid #eeeeee;
padding-bottom:40px;
}
.lines .line .telomere {
visibility:hidden;
}
.line a.link {
text-decoration:none;
color:#156e9b;
}
.line a.link:visited {
text-decoration:none;
color:#156e9b;
}
.line a.link:hover {
text-decoration:none;
color:#aaaaaa;
}
.line a.link:active {
text-decoration:none;
color:#aaaaaa;
}
.line a.page-link {
text-decoration:none;
color:#156e9b;
}
.line a.page-link:visited {
text-decoration:none;
color:#156e9b;
}
.line a.page-link:hover {
text-decoration:none;
color:#aaaaaa;
}
.line a.page-link:active {
text-decoration:none;
color:#aaaaaa;
}
.line a.link.icon {
border-style:none !important;
}
.line a.page-link:visited {
border-style:none !important;
}
.line a.page-link:hover {
border-style:none !important;
}
.line a.page-link:active {
border-style:none !important;
}
.line .indent-mark .dot {
top: 1.0em;
width:5px;
height:2px;
background-color:#cccccc;
}
.line img.strong-image {
max-width:100%;
}
.line.section-title strong {
display: inline-block;
font-weight:bold;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.line.section-title strong.level-1 {
font-size:1.25em;
margin-bottom: 0.5em;
}
.line.section-title strong.level-2 {
font-size:1.3em;
margin-bottom: 0.5em;
}
.line.section-title strong.level-3 {
width: 100%;
padding: 0.1em 0.3em;
margin-bottom: 0.5em;
border-bottom: dashed 1px #dddddd;
}
.line span.code-block {
font-size: 0.9em;
}
.page-menu .random-jump-button {
display:none;
}
.grid li.relation-label a {
color:#aaaaaa;
background-color:#fafafa !important;
}
.grid li.relation-label .arrow {
border-left-color:#aaaaaa !important;
}
.grid li.relation-label.empty-links {
display:none;
}
.page-list-item.empty {
display:none;
}
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { display: none; }
/*** 画像を並べて表示 ***/
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #aaaaaa !important;
font-size: 0.8em;
border: 1px solid #aaaaaa !important;
border-radius: 15px / 50%;
/* transition: .3s; */
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
color: #555555 !important;
border: 1px solid #555555 !important;
}
/* イタリックは少し小さいフォントにする */
.line .deco-\/ {
font-size: 0.8em;
line-height: 0.9em;
color: #aaaaaa !important;
}
.deco-\/ a.page-link {
color: #aaaaaa !important;
}
.deco-\/ a.page-link:visited {
color: #aaaaaa !important;
}
.deco-\/ a.page-link:hover {
color: #888888 !important;
}