settings
Windows10(Yandex Browser)、Android8.0.0(Yandex Browser、Firefox)で確認してます。
とりあえずカラフルにしたかったんだけどセンスが壊滅的にないわ…。
ちょこちょこ修正するのでRSSで購読してるとうざいかもしれない。すみません。
code:style.css
/*ページ全体のフォント指定*/
html, body,
.grid li.page-list-item a .title {
font-family: 'Kosugi Maru',sans-serif;
}
/*背景色と画像を設定*/
}
/*ページスタイル*/
.page {
background-color: rgba(230, 235, 255, 0.3);
box-shadow: none;
}
.line{
color:#264D4D !important;
}
/* ロゴ変更 */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #e5ffe5; } .navbar-default {
}
/*プロジェクトタイトル*/
.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(2,167,137,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(2,167,137,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%, #66cccc 50%, #66cccc); }
.grid li.page-list-item a {
background-color: rgba(240, 250, 255, 0.5);
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.5) !important;
}
.grid li.relation-label .arrow {
border-left-color: rgba(255,255,255,0.5) !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:#00b368
}
/*リンク関係*/
.page a,.line a.link,.line a.empty-page-link{
color:#00b368 !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(2,167,137,0.3);
}
.new-button div {
background-color:#e5ffe5 !important;
}
/*検索窓*/
.navbar-default {
background-color: rgba(2,167,137,0.3);
}
.search-form .form-group input {
background-color: rgba(255, 255, 255, 0.5);
border: solid rgba(2,167,137,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:#a3c4b4;
}
/*引用関係*/
.line .quote{
font-style:normal;
color:#3f668c;
background-color:rgba(179,230,255,0.2);
border-left:double 10px rgba(179,204,255,.5);
border-right:double 10px rgba(179,204,255,.5);
padding:.3em .5em;
}
.line .quote a{
color:#59b3b3 !important;
}
.line .quote .c-0{
visibility:hidden;
}
/*強調*/
.line strong, .line.line-title .text, .grid li.page-list-item a .title {
font-weight:500;
color:#669966;
}
.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://i.gyazo.com/e73016db902c2bfe792d031454221c8a.png
![https://i.gyazo.com/3d14682171b2dde9396cd5b2e26e7865.gif")](https://i.gyazo.com/3d14682171b2dde9396cd5b2e26e7865.gif")){kind=link}