chatbox style

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;
+    padding: 2px 20px 2px 20px;
-    border-top: 1px solid #aaa;
+    color: #f3f3f3;
-    border-right: 1px solid #aaa;
-    border-radius: 8px 8px 0 0;
-    color: #aaa;
     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 {
+#tab-body-wrapper {
-    margin: 0;
+    margin: 2px 1px;
-    padding: 2px 5px 2px 0;
+    padding: 0;
-    height: 268px;
-    outline: 1px solid #aaa;
-    overflow-y: scroll;
-    font-family: monospace;
 }
 
+.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;
+    padding: 5px;
-    outline: 0px solid #aaa;
+    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  {
+::-webkit-scrollbar-track {
-    background-color: #e4e4e4;
+    /*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;
+}

lib/nsui.js

@@ -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 += this.sanitizeText(msg.message) + '</div>';
-    fmt += "<br>";
 
     return fmt;
 };

lib/tab.nsui.js

@@ -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);