chatbox style
This commit is contained in:
Rodolphe Breard
parent
9cbd9e0a46
commit
41fbb1ab70
3 changed files with 83 additions and 49 deletions
124
chromesoul.css
124
chromesoul.css
|
|
@ -8,6 +8,7 @@ body {
|
|||
background: #347db0 url(img/chromesoul-logo.png) no-repeat 10px 10px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Top menu
|
||||
*/
|
||||
|
|
@ -33,6 +34,7 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Contact list
|
||||
*/
|
||||
|
|
@ -92,28 +94,33 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main content
|
||||
*/
|
||||
|
||||
#main-ctn {
|
||||
margin: 135px 0 0 0;
|
||||
padding: 10px 220px 10px 10px;
|
||||
padding: 10px 235px 10px 20px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
#main-ctn > * {
|
||||
padding: 10px;
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
#chat-pannel {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #347db0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Config
|
||||
*/
|
||||
|
||||
#config-pannel {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
#config-pannel > input[type=text], #config-pannel > input[type=password] {
|
||||
width: 130px;
|
||||
padding: 5px;
|
||||
|
|
@ -132,6 +139,7 @@ body {
|
|||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Tabs
|
||||
*/
|
||||
|
|
@ -145,77 +153,94 @@ body {
|
|||
#tab-lst > li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 2px 10px 2px 10px;
|
||||
border-top: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
border-radius: 8px 8px 0 0;
|
||||
color: #aaa;
|
||||
padding: 2px 20px 2px 20px;
|
||||
color: #f3f3f3;
|
||||
cursor: pointer;
|
||||
background-color: #6c9ec0;
|
||||
border-bottom: 1px solid #347db0;
|
||||
border-left: 1px solid #347db0;
|
||||
}
|
||||
|
||||
#tab-lst > li > span::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#tab-lst > li:first-child {
|
||||
border-left: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#tab-lst > li.tab-current {
|
||||
color: black;
|
||||
color: #347db0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
#tab-lst > li.tab-active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#tab-body-wrapper {
|
||||
margin: 1px 0 5px 0;
|
||||
padding: 0;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.tab-body {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Chat
|
||||
*/
|
||||
|
||||
.chat-log {
|
||||
margin: 0;
|
||||
padding: 2px 5px 2px 0;
|
||||
height: 268px;
|
||||
outline: 1px solid #aaa;
|
||||
overflow-y: scroll;
|
||||
font-family: monospace;
|
||||
#tab-body-wrapper {
|
||||
margin: 2px 1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-log {
|
||||
margin: 0;
|
||||
height: 268px;
|
||||
overflow-y: scroll;
|
||||
font-family: monospace;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.chat-message:nth-child(even) {
|
||||
color: #3c3c3c;
|
||||
background-color: #afafaf;
|
||||
}
|
||||
|
||||
.chat-message:nth-child(odd) {
|
||||
color: #f3f3f3;
|
||||
background-color: #6c9ec0;
|
||||
}
|
||||
|
||||
.chat-timestamp {
|
||||
float: right;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.chat-message-body {
|
||||
padding-right: 75px;
|
||||
}
|
||||
|
||||
.chat-timestamp:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.spk-me, .spk-oth {
|
||||
}
|
||||
|
||||
.chat-input-wrapper {
|
||||
padding-right: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 0px;
|
||||
outline: 0px solid #aaa;
|
||||
padding: 5px;
|
||||
outline-style: none;
|
||||
border-style: none;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
outline-offset: 0;
|
||||
outline-style: none;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.spk-oth {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.spk-me {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar
|
||||
|
|
@ -224,11 +249,16 @@ body {
|
|||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: green;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #e4e4e4;
|
||||
::-webkit-scrollbar-track {
|
||||
/*background-color: #e4e4e4;*/
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
|
@ -237,3 +267,7 @@ body {
|
|||
border-left: 1px solid #e4e4e4;
|
||||
border-right: 1px solid #e4e4e4;
|
||||
}
|
||||
|
||||
::-webkit-resizer {
|
||||
height: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ Nsui.prototype.formatInteger = function(num, len) {
|
|||
Nsui.prototype.formatMessage = function(msg) {
|
||||
var dt = new Date(), fmt = "";
|
||||
|
||||
fmt += "(" + this.formatInteger(dt.getHours(), 2) + ":" + this.formatInteger(dt.getMinutes(), 2) + ":" + this.formatInteger(dt.getSeconds(), 2) + ")";
|
||||
fmt += '<span class="chat-timestamp">' + this.formatInteger(dt.getHours(), 2) + ':' + this.formatInteger(dt.getMinutes(), 2) + ':' + this.formatInteger(dt.getSeconds(), 2) + '</span><div class="chat-message-body">';
|
||||
|
||||
if (typeof msg.login !== "undefined" && msg.login !== null) {
|
||||
fmt += '<span class="spk-oth">' + msg.login + ': </span>';
|
||||
|
|
@ -154,8 +154,7 @@ Nsui.prototype.formatMessage = function(msg) {
|
|||
fmt += '<span class="spk-me">' + document.getElementById('login').value + ': </span>';
|
||||
}
|
||||
|
||||
fmt += this.sanitizeText(msg.message);
|
||||
fmt += "<br>";
|
||||
fmt += this.sanitizeText(msg.message) + '</div>';
|
||||
|
||||
return fmt;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ Tab.prototype.initBodyElement = function() {
|
|||
var chat_input_w = document.createElement("div");
|
||||
|
||||
this.chat_input = document.createElement("input");
|
||||
this.chat_input.placeholder = "Some text here...";
|
||||
this.chat_log = document.createElement("p");
|
||||
this.chat_log.classList.add("chat-log");
|
||||
this.el_body = document.createElement("div");
|
||||
|
|
@ -146,7 +147,7 @@ Tab.prototype.flushText = function() {
|
|||
|
||||
Tab.prototype.appendMessage = function(msg) {
|
||||
this.history_index = 0;
|
||||
this.chat_log.innerHTML += $cs.ui.formatMessage(msg);
|
||||
this.chat_log.innerHTML += '<div class="chat-message">' + $cs.ui.formatMessage(msg) + '</div>';
|
||||
|
||||
if (!(typeof msg.login !== "undefined" && msg.login !== null)) {
|
||||
this.history.push(msg.message);
|
||||
|
|
|
|||
Reference in a new issue