社内ナレッジの蓄積周りの取り組みを出口がしてくれています。

以前、HackMDで社内ナレッジの蓄積を・・・みたいなことがあったのですが、結局HackMDで少し問題が発生してGrowiを導入するに落ち着きました。

ただGrowiの画面がイケてない・・・って思うとCSSをオーバーライドする癖のある自分。今回もオーバーライド用のCSSを作ってみました。

一応デザインの雰囲気の方向性はGitHubに合わせる感じにしました。

以下、コピペで使えるCSSです。

body {
    font-family: 'Open Sans','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #666666;
}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #666666;
}

a {
    color: #555555;
}

a:hover {
    color: #333333;
}

.btn-default {
    color: #666666;
}

.logo b {
  height: 66px;
    line-height: 66px;
    background-color: #333333;
}

.top-left-part .logo-mark {
    margin-top: 8px;
    fill: #333333;
}

.content-wrapper .top-left-part .logo .logo-mark svg {
    fill: #ffffff;
}

.navbar-header {
    background-color: #333333;
}

.navbar-header .open-close {
    display: none;
}

.navbar-top-links>li > a{
    padding-top: 8px;
    padding-bottom: 8px;
}

.search-box {
    margin-top: 8px;
}

#page-wrapper {
    background-color: #ffffff;
}

.main-container header.affix{
    background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 5px #999999;
}

  .logo .logo-mark svg {
    fill: #666666;
  }

.bg-title {
    padding: 20px 60px 20px 60px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.main-container header h1#revision-path {
    font-size: 20px;
}

.main-container header h1#revision-path .separator {
    color: #cccccc;
}

.main-container header h1#revision-path .separator a {
    color: #cccccc;
}

.nav.nav-tabs > li > a {
    color: #555555;
}

.nav.nav-tabs > li > a:hover {
    color: #333333;
}

#main {
    background-color: #ffffff;
    padding: 0 60px;
}

#main .wiki {
    color: #333333;
}

#main .wiki a {
    color: #0366d6;
}

#main .tab-content {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #e0e0e0;
    padding: 30px;

}

#main .nav.nav-tabs > li.active > a {
    background-color: #ffffff;
}

.page-list .page-list-ul>li>a.page-list-link {
    color: #999999;
}

.page-comments-row {
    display: none;
}

.page-list .page-list-ul>li>a strong {
    font-weight: normal;
}

.on-edit #main {
    padding-left: 0;
    padding-right: 0;
}

body.on-edit .header-wrap {
    margin-top: -15px;
}

body.on-edit .bg-title {
    border-bottom: none;
}

body.on-edit .row.bg-title h1#revision-path {
    font-size: 16px;
}

body.on-edit #main .tab-content {
  padding: 0;
  }

.row.page-attachments-row.hidden-print {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border-color: #ffffff;
}

ブラウザに合わせて・・・例えばChromeならStylusなど使えば簡単にできちゃいます。OSSのこういったものはデザインが開発者視点で施されていて、正直「ビミョー・・・」って思ってしまうものが結構ありますが、CSSでデザインだけ変えてあげると一気に（個人的には）使いやすくなるので、こういうことをよくやっています。

またこの手のCSSオーバーライドをした暁には、ここのラボにも書こうかなと思っています。

---