GitLab Issues のスタイルシートをカスタマイズ
· 約4分
はじめに
GitLab の Issues は一覧画面、詳細画面ともにタイトルが少し見づら いイメージがあります。
一覧画面にはタイトルとそれ以外の情報が2行で表示されていますが、1行目をもう少し目立たせたい。
詳細画面ではタイトルと詳細の間に空白を入れたい。
そこで、GitLab のスタイルシートをカスタマイズして調整してみます。
なお、試したバージョンは GitLab-CE 8.9.6
で、OS は CentOS7 です。
変更前と変更後のスタイル
一覧ページでは、1行目の文字色、文字の多きさ、2行目の文字色を、詳細ページではタイトルの文字色とアンダーラインの付加、詳細との間に空白を入れます。また、フォントはメイリオにします。以下は変更前と変更後の画面です。
変更前
- 一覧画面
- 詳細画面
変更後
- 一覧画面
- 詳細画面
「えー、イマイチじゃない?」
そんなこと言わないで。
Issues 画面のスタイルシート
一覧ページと詳細ページのスタイルシートは /opt/gitlab/embedded/service/gitlab-rails/public/assets
に入っています。
ここにある css は SCSS からコンパイルされたもので、ソースファイルは以下の場所にあります。
一覧用スタイルシート
/opt/gitlab/embedded/service/gitlab-rails/app/assets/stylesheets/pages/issues.scss