settings
sakko.icon 後で調整するよ
sakko.icon すぐ挫折しそうだけど…
code:style.css
/*ページ全体のフォント指定*/
html, body,
.grid li.page-list-item a .title{
font-family: "Kosugi Maru", sans-serif;
}
/*背景色と画像を設定*/
body{
}
/*ページスタイル*/
.page {
background-color: rgba(229, 255, 247, 0.6);
box-shadow: none;
}
.line{
color:#1f3666 !important;
}
/*ロゴ変更*/
.navbar-brand img, .navbar-brand span {
display: none !important
}
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #f0f7ff; }
.navbar-default {
background-color:#00a0ff;
}
/*プロジェクトタイトル*/
.quick-launch .project-home .title,.quick-launch .project-home .icon-home::before {
}
/* はりつくメニューバー */
@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; background-color: rgba(0,160,255,0.3); }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto;
}
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 }
}
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
/*html, body { -webkit-overflow-scrolling: touch }*/
body:not(.presentation) { padding-top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset; background-color: rgba(0,160,255,0.3); }
.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto }
}
/*pinのスタイル変更*/
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, rgba(239,255,255,0), rgba(239,255,255,0) 50%, #7ab1cc 50%, #7ab1cc); }
.grid li.page-list-item a {
background-color: rgba(240, 250, 255, 0.6);
box-shadow: none !important
}
.grid li.page-list-item a .header {
background-color: transparent;
border:none !important;
}
a.mobile-search-toggle {
}
.grid li.relation-label.links a,.grid li.relation-label.headword a,.grid li.relation-label.empty-links a {
background-color: rgba(255,255,255,0.7) !important;
}
.grid li.relation-label .arrow {
border-left-color: rgba(255,255,255,0.7) !important;
}
/*テロメア関係*/
.line .telomere .telomere-border {
border-color: rgba(240, 250, 255, 0);
}
.line .telomere .telomere-border {
border-width: 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
/*アイコンのサイズ変更*/
.line img.icon {
height: 2em
}
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background:rgba(255,255,255,0.5);
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
webkit-transform: scale(1);
transform: scale(1);
}
webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*文字色をリンクの色と同じにする*/
.deco-\%{
color:#0066ff
}
/*リンク関係*/
.page a,.line a.link,.line a.empty-page-link{
color:#0066ff !important;
text-decoration:none !important;
}
/*リンクのラベルの色をおとなしくする*/
.grid li.relation-label.links a .title {
}
.grid li.relation-label a {
}
/*ページ追加ボタン*/
.new-button, .new-button:hover, .new-button:active {
background-color:rgba(16,102,222,0.3);
}
.new-button div {
background-color:#f0ffff !important;
}
/*検索窓*/
.navbar-default {
background-color: rgba(0,160,255,0.3);
}
.search-form .form-group input {
background-color: rgba(255, 255, 255, 0.5);
border: solid rgba(0,160,255,0.5) 0.5px;
}
/*リストのドット変更*/
.line .indent-mark .dot {
border-radius : 1px ;
background-color: transparent ;
}
/* 外部リンクをわかりやすくする */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
color:#7a96cc;
}
/*引用関係*/
.line .quote{
font-style:normal;
color:#5977b3;
background-color:rgba(179,230,255,0.2);
border-left:double 10px rgba(122,177,204,.5);
border-right:double 10px rgba(122,177,204,.5);
padding:.3em .5em;
}
.line .quote a{
color:#1066de !important;
}
.line .quote .c-0{
visibility:hidden;
}
/*強調*/
.line strong, .line.line-title .text, .grid li.page-list-item a .title {
font-weight:500;
color:#0000c2;
}
.line strong:not(class) { font-weight:bold;
text-shadow:0 0 0 transparent;
background: linear-gradient(transparent 30%, #b3ffe6 45%, #b3e6ff 70%, transparent 90%); }
.line .line-title .text {
font-size:smaller !important;
}
/*ネタバレ*/
.deco-\({
color:#b3ffcc
}
.deco-\(:hover{
color:#b35995;
}
.deco-\(:before{
content:"！ネタバレ！ ";
color:#b35995;
font-weight:bold;
}
/*吹き出し*/
.deco-\{, .deco-\} {
font-size: .9em;
background-color: rgba(0,119,179,0.5);
padding: 0.1em 0.3em 0.1em 0.3em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
.deco-\}:after {
position: absolute;
margin: 0 0.3em;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: rgba(0,119,179,0.5) transparent;
}
.deco-\{:before {
position: absolute;
margin: 0 -0.3em;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: rgba(0,119,179,0.5) transparent;
}
https://gyazo.com/ebc815fad7ff40bbf6af10859d48e41b
){kind=link}