diff --git a/chromesoul.css b/chromesoul.css index 672281e..bc7e235 100644 --- a/chromesoul.css +++ b/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; +} diff --git a/lib/nsui.js b/lib/nsui.js index 30675b1..a9bed56 100644 --- a/lib/nsui.js +++ b/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 += '' + this.formatInteger(dt.getHours(), 2) + ':' + this.formatInteger(dt.getMinutes(), 2) + ':' + this.formatInteger(dt.getSeconds(), 2) + '
'; if (typeof msg.login !== "undefined" && msg.login !== null) { fmt += '' + msg.login + ': '; @@ -154,8 +154,7 @@ Nsui.prototype.formatMessage = function(msg) { fmt += '' + document.getElementById('login').value + ': '; } - fmt += this.sanitizeText(msg.message); - fmt += "
"; + fmt += this.sanitizeText(msg.message) + '
'; return fmt; }; diff --git a/lib/tab.nsui.js b/lib/tab.nsui.js index 9120742..889a3a2 100644 --- a/lib/tab.nsui.js +++ b/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 += '
' + $cs.ui.formatMessage(msg) + '
'; if (!(typeof msg.login !== "undefined" && msg.login !== null)) { this.history.push(msg.message);