Skip to content

Instantly share code, notes, and snippets.

@joakimk
Created April 21, 2011 22:19
Show Gist options
  • Save joakimk/935608 to your computer and use it in GitHub Desktop.
Save joakimk/935608 to your computer and use it in GitHub Desktop.
Quick userscript to make HipChat more like irssi
div.input {
background-color: #555 !important;
border-top: 1px solid #aaa !important;
}
.topic_container {
background-color: #222 !important;
color: #aaa !important;
}
.textwrapper {
background-color: #000 !important;
border: none;
}
#message_input {
background: #000 !important;
color: #aaa !important;
padding: 3px !important;
}
.chat_display {
background: #000 !important;
}
.atTag {
background-color: #222 !important;
color: #fff !important;
border: 1px solid #333 !important;
}
.atTagMe {
background: #222 !important;
color: rgb(176, 167, 60) !important;
border: 1px solid #333 !important;
}
.welcomeMessage, .systemMessage {
background-color: #222 !important;
color: #aaa !important;
border-top: none !important;
}
.welcomeMessage .nameBlock, .systemMessage .nameBlock {
background-color: #222 !important;
border-top: none !important;
border-right: none !important;
}
.welcomeMessage .messageBlock, .systemMessage .messageBlock {
border-left: 1px solid #555 !important;
}
.welcomeMessage .nameBlock p, .systemMessage .nameBlock p {
color: #aaa !important;
}
.dateDivider {
background: #333 repeat-x scroll 0px 100% !important;
color: #aaa !important;
border-top: 1px solid #555 !important;
}
.chatBlock.them, .chatBlock.me {
background-color: black !important;
color: #aaa !important;
border-top: none !important;
}
.chatBlock.them .nameBlock, .chatBlock.me .nameBlock {
background-color: #000 !important;
border-top: none !important;
border-right: none !important;
}
.chatBlock.them .messageBlock, .chatBlock.me .messageBlock {
border-left: 1px solid #555 !important;
}
.chatBlock.them .nameBlock p {
color: #aaa !important;
}
.chatBlock.me .nameBlock p {
color: #eee !important;
}
chatBlock.me {
background-color: #000 !important;
}
#roster {
background-color: black !important;
margin-top: 11px !important;
}
#roster .list .participant div {
background-color: black !important;
color: #EEE !important;
}
#chats {
border-bottom: 10px solid #000 !important;
}
#message_input {
height: 10px !important;
outline: none !important;
resize: none !important;
}
#chats {
bottom: 20px !important;
top: 11px !important;
}
.input {
padding: 0px !important;
}
#upload_button {
height: 10px !important;
display: none;
}
input[name="Filedata"] {
display: none;
}
#header {
height: 20px !important;
}
.logo img {
width: 64px;
height: 29px;
margin-top: -5px;
}
.topic_container {
padding: 6px !important;
}
.top_bar {
height: 18px !important;
}
.top_bar button {
height: 18px !important;
padding: 0px !important;
}
.tabs {
height: 10px !important;
padding: 0px !important;
}
#tabs {
left: 105px !important;
}
#tabs {
bottom: 10px !important;
}
#action_tabs {
bottom: 8px !important;
}
// ==UserScript==
// @name HipChatOptimized
// @namespace *.hipchat.com/chat
// @description Adds "Toggle sidebar", removes "Send" and adds a dark, irssi inspired theme.
// @include *
// @author Joakim K
// ==/UserScript==
(function () {
var showSidebar = false;
var themeCssUrl = "https://gist.github.com/raw/935608/6e644b3058f12534e4a921d698b6d1828b2360ab/HipChatOptimized.user.css";
var themeCssUrl = null;
var previousWidth = 0;
var uiLoaded = false;
function updateWindow()
{
if($("#main_chat")[0].style.width != "100%" && !showSidebar) {
previousWidth = $("#main_chat")[0].style.width;
$("#main_chat")[0].style.width = "100%";
}
if(showSidebar) {
if($("#main_chat")[0].style.width == "100%")
$("#main_chat")[0].style.width = previousWidth;
$("#sidebar").show();
}
else
$("#sidebar").hide();
if(!uiLoaded && $("#tabs a.open")[0]) {
uiLoaded = true;
// Update window when the channel is changed
$("#tabs a.open").click(updateWindow);
}
}
if (window.fluid) {
setInterval(updateWindow, 500);
$("#send_message_button").hide();
$("#top_bar .topic_container").after('<button class="silver" id="toggle_sidebar" style="height: 24px; position: absolute; right: 191px; top: 5px; width: 110px;">Toggle sidebar</button>');
if(themeCssUrl)
$("head > link[rel=stylesheet]").after('<link rel="stylesheet" type="text/css" href="' + themeCssUrl + '">');
$("#toggle_sidebar").click(function() {
showSidebar = !showSidebar;
});
}
})();
@joakimk
Copy link
Author

joakimk commented May 3, 2011

Made the menus and input more compact so that more of the conversation text is visible with a small window.

@joakimk
Copy link
Author

joakimk commented May 3, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment