HipChat Light "HipSlack" Theme

README.md

Edit theme on Mac

Inspired by https://medium.com/@andrew_levine/theming-the-new-hipchat-4-beta-for-osx-64e4ba4a6749#.2nyhtsah8

This stylesheet is for the "Light" theme in HipChat. Go to Settings > Appearance to change the theme.

1. Close HipChat (⌘+Q)
2. Open Finder, and locate HipChat.app.
3. Right click the .app file, and choose Show Package Contents.
4. Open the Resources folder, and open chat.html in your editor of choice.
5. Add a style tag (<style></style>) immediately below the title tag (you can technically put this anywhere in the document).
6. In your new style tag, you can now add any valid CSS rules (Note: The view used for displaying the HipChat client is rendered in WebKit).
7. Open HipChat to see the changes 🎉 (You need to quit and re-open the app for any new changes to appear)

Edit theme on Windows

Open the file C:\Program Files (x86)\Atlassian\HipChat4\clientweb\index.html and follow step 5-7 in the guide above.

light-overrides.css

/* ===========================================================================
   Header and options
   =========================================================================== */

/* Application title bar */
body.light .aui-header {
  background: #2f242e;
}

/* Adding sassy "HipSlack" logo */
body.light .aui-header:before {
  content: "HipSlack";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  font-weight: 500;
  font-size: 17px;
  color: #564655;
}

body.light .aui-header .aui-quicksearch input[type=text] {
  background: rgba(255, 255, 255, 0.2);
}

/* "New Chat" button */
body.light .aui-header .aui-button-primary {
  background: #81907a;
  color: #fff;
}

body.light .aui-header .aui-nav .aui-button.aui-button-primary:hover {
  background: #626f5c;
  color: #fff;
}

body.light .aui-header a:hover,
body.light .aui-header .aui-dropdown2-trigger.active {
  background: #626f5c;
  cursor: pointer;
}

body.light .aui-button.aui-button-link:hover { background: none;  }

body.light .aui-dropdown2.aui-style-default .active, .aui-dropdown2.aui-style-default .aui-dropdown2-active {
  background-color: #626f5c;
}

/* ===========================================================================
   Sidebar left
   =========================================================================== */

body.light #hipchat .hc-sidebar {
  background: #4D394B;
}

body.light #hipchat .hc-left-sidebar-col {
  border-right: 1px solid #332a32;
}

body.light .aui-avatar-project:before {
  border: 1px solid #ab9ba9;
}
body.light .aui-nav-selected .aui-avatar-project:before {
  border: 1px solid #ffffff;
}

body.light #hipchat .hc-sidebar a {
  color: #ab9ba9;
}

body.light #hipchat .hc-sidebar .hc-add-item-link > a,
body.light #hipchat .hc-add-item-link span.aui-icon {
  color: #dcd4db;
}

body.light #hipchat .hc-tab .hc-badge {
  margin-top: -1px;
  font-size: 13px;
}

body.light #hipchat .hc-tab .hc-badge.hc-mention {
  background-color: #e66666;
  color: #fff;
}

body.light #hipchat .hc-tab.hc-has-badge a > span.room-name {
  color: #fff;
  font-weight: 600;
}

body.light #hipchat .hc-tab:hover > a,
body.light #hipchat .aui-navgroup-vertical .aui-nav>li>a:hover,
body.light #hipchat .hc-tab.aui-nav-selected > a:hover {
  background: #3e313c;
}

body.light #hipchat .hc-tab.aui-nav-selected > a,
body.light #hipchat .hc-tab.aui-nav-selected:hover > a,
body.light #hipchat .aui-navgroup-vertical .aui-nav>li.aui-nav-selected>a:hover {
  background-color: #4c9689;
  color: #fff;
}

body.light #hipchat .aui-page-header.room-header h3, body .aui-page-header.room-header h3 {
  color: #2c2d30;
}

body.light #hipchat .hc-tab-close {
  background-color: transparent;
}

body.light #hipchat .hc-tab-close .hc-close-icon:hover {
  color: #fff;
}

/* === Icons ===  */

/* Dot stroke */
body.light #icon-dnd .path1,
body.light #icon-dnd-selected .path1,
body.light #icon-mobile-selected .path1,
body.light #icon-available-selected .path1,
body.light #icon-unavailable-selected .path1 {
  fill: #4D394B;
}

/* Unavailable fill */
body.light #icon-unavailable .path2,
body.light #icon-unavailable-selected .path3 {
  fill: #4D394B;
}

/* Away stroke (1) */
body.light #icon-away .path1,
body.light #icon-xa .path1,
body.light #icon-away-selected .path1,
body.light #icon-xa-selected .path1 {
  fill: #4D394B;
}

/* Away line (3) */
body.light #icon-away .path3,
body.light #icon-xa .path3,
body.light #icon-away-selected .path3,
body.light #icon-xa-selected .path3 {
  fill: #4D394B;
}

/* Away fill (2) */
body.light #icon-away .path2,
body.light #icon-xa .path2,
body.light #icon-away-selected .path2,
body.light #icon-xa-selected .path2 {
  fill: #ab9ba9;
}

/* Away (header) line (2) */
body.light #icon-away .path2 {
  fill: #4D394B;
}

/* Away (header) fill (1) */
body.light #icon-away .path1 {
  fill: #ab9ba9;
}

/* Mobile icon frame */
body.light #icon-mobile .path1,
body.light #icon-mobile-selected .path2 {
  fill: #ab9ba9;
}

/* Mobile icon screen */
body.light #icon-mobile .path2,
body.light #icon-mobile-selected .path3 {
  fill: #4D394B;
}

/* ===========================================================================
   Sidebar right
   =========================================================================== */

body.light #hipchat .hc-right-sidebar-col div.roster-wrap ul.roster-list li.hc-roster-item.aui-nav-selected {
  background: #626f5c;
}

/* ===========================================================================
   Chat header
   =========================================================================== */


body.light #hipchat .aui-page-header {
  color: #ab9ba9;
  background-color: #4D394B;
  border-bottom: solid 1px #332a32;
}

body.light #hipchat .aui-page-header a,
body.light #hipchat .aui-page-header.room-header h3 {
  color: #fff;
}

body.light .aui-page-header .aui-button,
body.light .aui-page-header .aui-button:hover,
body.light .aui-page-header .aui-button.active {
  background: #66ad98;
  border: 1px solid #66ad98;
}

body.light .aui-page-header .aui-button:hover {
  border-color: #8bc7b6;
}
body.light .aui-page-header .aui-button~.aui-button:hover {
  margin-left: 0;
}

body.light .aui-page-header .aui-button.active {
  background: #626f6b;
  border: 1px solid #626f6b;
}

body.light .aui-page-header .aui-button.active:hover {
  border-color: #66ad98;
}

body.light .aui-page-header .aui-button .aui-icon {
  color: #2f242e;
}

body.light .aui-page-header .aui-button.active .aui-icon {
  color: #4D394B;
}


/* ===========================================================================
   Chat area
   =========================================================================== */

body.light .hc-chat-panel .hc-chat-scrollbox,
body.light .fake-chat-panel .hc-chat-scrollbox {
  background-color: #fdfafa !important;
}

/* Main text style */
#hipchat .msg-line {
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased !important;
}

body.light .date-divider span {
  background-color: #fdfafa;
  color: #2c2d30;
  font-size: 14px;
  font-weight: 700;
}

body.light .hc-msg-blue {
  background: #e3f1ee; /* #ebf9f6; */
  border-top: solid #fdfafa 1px;
}

body.light .hc-msg-blue + .hc-msg-nocolor {
  border-top: solid #fdfafa 1px;
}

body.light .unread-line {
  height: 45px;
  padding: 20px 0 10px;
}

/* === Unread line ===  */

body.light .unread-line hr {
  background-color: #cde2de;
  height: 45px;
}

body.light .unread-line hr:before {
  top: 0px;
  background: linear-gradient(#fdfafa 0%, transparent 0%), linear-gradient(135deg, #cde2de 33.33%, transparent 33.33%) 0 0%, #cde2de linear-gradient(45deg, #cde2de 33.33%, #fdfafa 33.33%) 0 0%;
  background: -webkit-linear-gradient(#fdfafa 0%, transparent 0%), -webkit-linear-gradient(135deg, #cde2de 33.33%, transparent 33.33%) 0 0%, #cde2de -webkit-linear-gradient(45deg, #cde2de 33.33%, #fdfafa 33.33%) 0 0%;
  background: -o-linear-gradient(#fdfafa 0%, transparent 0%), -o-linear-gradient(135deg, #cde2de 33.33%, transparent 33.33%) 0 0%, #cde2de -o-linear-gradient(45deg, #cde2de 33.33%, #fdfafa 33.33%) 0 0%;
  background: -moz-linear-gradient(#fdfafa 0%, transparent 0%), -moz-linear-gradient(135deg, #cde2de 33.33%, transparent 33.33%) 0 0%, #cde2de -moz-linear-gradient(45deg, #cde2de 33.33%, #fdfafa 33.33%) 0 0%;
}

body.light .unread-line hr:after {
  bottom: 0px;
  background: linear-gradient(#cde2de 0%, transparent 0%), linear-gradient(135deg, #fdfafa 33.33%, transparent 33.33%) 0 0%, #fdfafa linear-gradient(45deg, #fdfafa 33.33%, #cde2de 33.33%) 0 0%;
  background: -webkit-linear-gradient(#cde2de 0%, transparent 0%), -webkit-linear-gradient(135deg, #fdfafa 33.33%, transparent 33.33%) 0 0%, #fdfafa -webkit-linear-gradient(45deg, #fdfafa 33.33%, #cde2de 33.33%) 0 0%;
  background: -o-linear-gradient(#cde2de 0%, transparent 0%), -o-linear-gradient(135deg, #fdfafa 33.33%, transparent 33.33%) 0 0%, #fdfafa -o-linear-gradient(45deg, #fdfafa 33.33%, #cde2de 33.33%) 0 0%;
  background: -moz-linear-gradient(#cde2de 0%, transparent 0%), -moz-linear-gradient(135deg, #fdfafa 33.33%, transparent 33.33%) 0 0%, #fdfafa -moz-linear-gradient(45deg, #fdfafa 33.33%, #cde2de 33.33%) 0 0%;
  background-position: -8px;
}

/* === Unread line on blue message ===  */

body.light .hc-msg-blue .unread-line hr {
  background-color: #b2cac5;
}

body.light .hc-msg-blue .unread-line hr:before {
  background: linear-gradient(#e3f1ee 0%, transparent 0%), linear-gradient(135deg, #b2cac5 33.33%, transparent 33.33%) 0 0%, #b2cac5 linear-gradient(45deg, #b2cac5 33.33%, #e3f1ee 33.33%) 0 0%;
  background: -webkit-linear-gradient(#e3f1ee 0%, transparent 0%), -webkit-linear-gradient(135deg, #b2cac5 33.33%, transparent 33.33%) 0 0%, #b2cac5 -webkit-linear-gradient(45deg, #b2cac5 33.33%, #e3f1ee 33.33%) 0 0%;
  background: -o-linear-gradient(#e3f1ee 0%, transparent 0%), -o-linear-gradient(135deg, #b2cac5 33.33%, transparent 33.33%) 0 0%, #b2cac5 -o-linear-gradient(45deg, #b2cac5 33.33%, #e3f1ee 33.33%) 0 0%;
  background: -moz-linear-gradient(#e3f1ee 0%, transparent 0%), -moz-linear-gradient(135deg, #b2cac5 33.33%, transparent 33.33%) 0 0%, #b2cac5 -moz-linear-gradient(45deg, #b2cac5 33.33%, #e3f1ee 33.33%) 0 0%;
}

body.light .hc-msg-blue .unread-line hr:after {
  background: linear-gradient(#b2cac5 0%, transparent 0%), linear-gradient(135deg, #e3f1ee 33.33%, transparent 33.33%) 0 0%, #e3f1ee linear-gradient(45deg, #e3f1ee 33.33%, #b2cac5 33.33%) 0 0%;
  background: -webkit-linear-gradient(#b2cac5 0%, transparent 0%), -webkit-linear-gradient(135deg, #e3f1ee 33.33%, transparent 33.33%) 0 0%, #e3f1ee -webkit-linear-gradient(45deg, #e3f1ee 33.33%, #b2cac5 33.33%) 0 0%;
  background: -o-linear-gradient(#b2cac5 0%, transparent 0%), -o-linear-gradient(135deg, #e3f1ee 33.33%, transparent 33.33%) 0 0%, #e3f1ee -o-linear-gradient(45deg, #e3f1ee 33.33%, #b2cac5 33.33%) 0 0%;
  background: -moz-linear-gradient(#b2cac5 0%, transparent 0%), -moz-linear-gradient(135deg, #e3f1ee 33.33%, transparent 33.33%) 0 0%, #e3f1ee -moz-linear-gradient(45deg, #e3f1ee 33.33%, #b2cac5 33.33%) 0 0%;
  background-position: -8px;
}

body.light .unread-line hr:before,
body.light .unread-line hr:after,
body.light .hc-msg-blue .unread-line hr:before,
body.light .hc-msg-blue .unread-line hr:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 9px;
  background-repeat: repeat-x;
  background-size: 0px 100%, 14px 9px, 14px 9px;
}

/* == Unread line end ==  */

body.light .hc-chat-msg .sender-name {
  color: #2c2d30;
  font-weight: 900;
}

body.light #hipchat .hc-chat-msg .msg-status .msg-line.truncatable div.truncatable {
  border-color: #e9e9e9;
}

body.light #hipchat .hc-chat-msg .msg-status .msg-line.truncatable div.truncatable a {
  box-sizing: border-box;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 11px;
  font-variant: normal;
  font-weight: 500;
  line-height: 1.42857143;
  padding: 2px 10px;
  text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
  text-transform: uppercase;
}

body.light .hc-chat-msg .msg-status .msg-line.truncatable div.truncatable a:after {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  font-size: 1.5em;
  margin-top: -7px;
  margin-bottom: -2px;
}
body.light .hc-chat-msg .msg-status .msg-line.truncatable div.truncatable.truncated a:after {
  content: "+";
}
body.light .hc-chat-msg .msg-status .msg-line.truncatable div.truncatable.expanded a:after {
  content: "-";
}

/* === Disable truncated messages for room "Daglig update" === */

.hc-messages[data-reactid*="daglig_update"] .hc-chat-msg .msg-status .msg-line.truncatable.truncated,
.hc-messages[data-reactid*="daglig_update"] .hc-chat-msg .msg-status .msg-line.truncatable.truncated .truncate-wrap {
  max-height: none;
}
#hipchat .hc-messages[data-reactid*="daglig_update"] .hc-chat-msg .msg-status .msg-line.truncatable .truncate-wrap + .truncatable,
#hipchat .hc-messages[data-reactid*="daglig_update"] .hc-chat-msg .msg-status .msg-line.truncatable .truncate-wrap + .truncatable {
  display: none;
}

/* ===========================================================================
   Modal
   =========================================================================== */

body.light .navgroup-vertical .aui-nav .aui-nav-selected>a:hover {
  color: #fff;
}

body.light .aui-navgroup-vertical .aui-nav>li>a:hover {
  background: #4c9689;
  color: #fff;
}