trailofbits/tubertc

View on GitHub
public/css/chat.css

Summary

Maintainability
Test Coverage
.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;
}