Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

Limelight theme for HipChat

Dev

f:id:thleap:20140612193050p:plain

今までチームでのチャットは LimeChat 使っていたけど、無料プランでも登録できるユーザー数の制限がなくなったので、これからは HipChat を使っていくことになった。

今のところは HipChat で困ることは無いんだけど、ただ見た目が爽やかすぎる。
僕はそんな清らかな青年ではなく、口から出るのは毒のほうが多いのでもっと暗い感じが良いなと思い、Limelight theme for HipChat という LimeChat の limelight テーマに近いものを書いた。

CSS はこんなんです。
Chrome のバージョン 35.0.1916.153 でしか確認してない。

body.chat a {
  color: #8E9B6B;
}

/* main -- start */
body.chat #main_chat {
}

/* chat input */
body.chat #main_chat .input {
  border-top-width: 3px;
  border-top-color: #E8E8E8;
  background-color: #202020;
}

body.chat #main_chat .input .textwrapper {
  padding: 0;
  border-width: 0;
  background-color: transparent;
}

#message_input {
  width: 96%;
  height: auto;
  background-color: transparent;
  color: #E8E8E8;
}

body.chat #main_chat .input #upload_button {
  width: 25px;
  height: 25px;
  border-width: 0;
  border-radius: 50%;
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F3F3F3 100%);
  background-image: linear-gradient(top, #FFFFFF 0%, #F3F3F3 100%);
  background-color: #FFFFFF;
}

body.chat #main_chat .input #send_message_button {
  display: none;
}

/* chats */
body.chat #main_chat #chats {
  height: 93.6%;
  border-bottom-width: 0;
}

#chats div.dateDivider {
  border-top-color: #636363;
  background-color: #202020;
  background-image: none;
  color: #EDEC9C;
}

#chats div.them,
#chats div.me {
  background-color: #202020;
  color: #E8E8E8;
}

#chats div.welcomeMessage {
  border-top-color: #636363;
  background-color: #202020;
  color: #EDEC9C;
}

#chats td.nameBlock,
#chats div.me td.nameBlock,
#chats div.welcomeMessage td.nameBlock {
  background-color: #202020;
  border-top-width: 0;
  border-right-width: 0;
}

#chats div.me td.nameBlock p {
  color: #636363;
}

#chats div.welcomeMessage td.nameBlock p {
  color: #EDEC9C;
}

#chats td.messageBlock,
#chats div.me td.messageBlock,
#chats div.welcomeMessage td.messageBlock {
  border-left-color: #636363;  
}

#chats div.chatBlock {
  border-top-color: #636363;  
}

#chats span.atTag {
  padding: 0;
  border-width: 0;
  background: transparent;
}

#chats span.atTagMe {
  color: #DD843E;
}
/* main -- end */

/* sidebar -- start */
#sidebar {
  width: 165px;
  border-left-color: #636363;
}

/* roster */
#roster {
  background-color: #202020;
}

#roster div.member {
  background-color: #202020 !important;
  font-size: 11px;
  color: #E8E8E8;
}

/* guest_access */
#roster div.footer .guest_toggle>div {
  border-top-color: #636363;
  background-color: #202020;
  color: #E8E8E8;
}
/* sidebar -- end */

おわります。

追記

重要なこと書き忘れてた。
これ、自分には必要ないと思って Send ボタンを消してる。あと自分が含まれてるもの以外のアカウント名はハイライトされない。