CSS
Rocket.Chat

Rocket.ChatのCustom CSS

対象 : Ubuntu Server 16.04.1 LTS上にsnapでインストールしたRocket.Chat

Rocket.Chat は 2017/10/18 にリリースされた Ver. 0.59.0 から新UIになりました。
そこで気になった箇所を Custom CSS 機能で一部スタイル変更して使っているのでメモとして残します。
CSSの追加は管理者メニューの「レイアウト」>「Custom CSS」で行えます。

コンテキストメニュー項目hover

事象

マウスオーバーしても項目の色が変わらなくなりました。
どれを選択しようとしているのかわかりにくいです。

before
image.png

対応

以下のCSSを追加

.rc-popover__item:hover {
  background-color: rgba(0, 0, 0, 0.05); /* @transparent-dark */
}

after
image.png

検索結果パネルの幅が広がる事象対応

事象

これは Ver. 0.61.0 に更新後、Firefoxのみで事象が発生しています。
(Windows 10, Firefox 58 で確認)
(CentOS 7, Firefox ESR 52 で確認)
通常このくらいの幅なのが、
image.png

検索結果によって幅が広がることがあります。
image.png

対応

以下のCSSを追加

.contextual-bar-wrap {
  width: 400px !important;
}