public/css/chat.css
.chatPanel {
display: none;
}
.chatHistoryPane {
overflow: auto;
background-color: #ffffff;
word-wrap: break-word;
}
.chatHistoryPane div {
padding-left: 5px;
}
.chatControlPane {
/* This value is roughly calculated from "#chatTextEntry". By virtue of min.css framework, INPUT text fields
* have an intrinsic height of 16px with 8px padding all around. This gives us roughly 32px. However, empirical
* testing shows that 32px still truncates the bottom of the INPUT field. Making it 40px makes the INPUT field
* look "better".
*/
height: 40px;
overflow: hidden;
}
.chatControlPane input {
resize: none;
width: 100%;
margin-top: 5px;
border: 0px;
background-color: #ffffff;
}
.chatUsername {
font-size: 14px;
font-weight: bold;
}
.chatNotification {
font-size: 13px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f0f0f0;
}
.chatMessageHeader {
padding-top: 5px;
margin-top: 5px;
border-top: 1px #0c0c0c dotted;
}
.chatMessage {
font-size: 13px;
margin-top: 5px;
}
.chatRoomName {
font-size: 13px;
font-weight: bold;
}
.chatTimestamp {
color: #a0a0a0;
font-size: 10px;
margin-left: 10px;
}
.controlRoomName {
color: #ff0000;
}
/* The below is sourced from http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
*/
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
font-family: "Lucida Console", Monaco, monospace;
font-size: 10px;
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 5%;
padding: 5px 5px;
position: absolute;
z-index: 98;
/* This size is know to work via trial and error.
*/
width: 125px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
#chatTextEntry {
padding: 8px;
margin-top: 2px;
outline: 0;
font: 14px sans-serif;
border-radius: 0;
background: #ffffff;
}
/* Internal chat messages (for implementation of custom commands) */
.chatInternal {
padding-top: 7px;
padding-bottom: 7px;
margin-top: 3px;
margin-bottom: 3px;
background-color: #f0f0f0;
}
.chatInternal ul {
padding-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.chatInternal li {
font-size: 12px;
list-style-type: none;
margin-bottom: 8px;
}
.chatInternal h1 {
font-size: 14px;
margin: 0;
}
.chatInternal h2 {
font-size: 13px;
margin: 0;
}
.chatInternal p {
margin-top: 4px;
margin-bottom: 4px;
}
.chatIntCmd {
margin-bottom: 3px;
}
.chatIntCmdName {
color: #483d8b;
}
.chatIntCmdArg {
color: #528b8b;
font-style: italic;
}
.chatIntIndent {
margin-left: 10px;
}