Added cleaner message style

client/css/style.css

@@ -15,6 +15,7 @@ a {
 	color: #1abc9c;
 	text-decoration: none;
 	transition: all .25s;
+	word-break: break-all;
 }
 a:hover {
 	text-decoration: underline;
@@ -28,13 +29,11 @@ button {
 	background: none;
 	border: 0;
 	color: inherit;
+	cursor: pointer;
 	font: inherit;
 	margin: 0;
 	padding: 0;
 }
-button {
-	cursor: pointer;
-}
 button::-moz-focus-inner {
 	padding: 0;
 	border: 0;
@@ -50,6 +49,7 @@ button::-moz-focus-inner {
 .btn:hover {
 	border-color: #7f8c8d;
 	color: #7f8c8d;
+	text-decoration: none;
 }
 #wrap {
 	height: 100%;
@@ -60,7 +60,7 @@ button::-moz-focus-inner {
 	border-right: 4px solid #bdc3c7;
 	position: absolute;
 	height: 100%;
-	width: 240px;
+	width: 220px;
 }
 #sidebar h2 {
 	color: #aeb6bf;
@@ -120,7 +120,7 @@ button::-moz-focus-inner {
 #main {
 	position: absolute;
 	height: 100%;
-	left: 240px;
+	left: 220px;
 	right: 0;
 }
 #main .window {
@@ -133,9 +133,6 @@ button::-moz-focus-inner {
 	font: 13px "Consolas", monospace;
 	height: 100%;
 }
-#chat .lobby .from {
-	display: none;
-}
 #chat .lobby .messages,
 #chat .query .messages {
 	right: 0;
@@ -153,43 +150,45 @@ button::-moz-focus-inner {
 	top: 0;
 }
 #chat .messages {
+	box-shadow: inset 140px 0 #f3f5f5;
 	left: 0px;
-	padding: 2px 0;
+	padding: 4px 0;
 	right: 160px;
 }
 #chat .messages .user {
 	color: #95a5a6;
 }
-#chat .messages .user:before {
+#chat .user,
-	content: '* ';
+#chat .highlight .user,
+#chat .normal .user,
+#chat .topic .user {
+	color: #e74c3c;
 }
 #chat .show-more {
 	display: none;
-	margin: 6px 8px 4px;
+	margin: 6px 8px 4px 148px;
 }
 #chat .show-more .btn {
 	width: 100%;
 }
 #chat .msg {
+	display: table-row;
 	line-height: 1.4;
-	margin: 2px 8px;
 }
-#chat .time,
+#chat .msg span {
+	display: table-cell;
+}
+#chat .from {
+	background: #f3f5f5;
+	max-width: 140px;
+	min-width: 140px;
+	overflow: hidden;
+	padding: 2px 8px;
+	text-align: right;
+	white-space: nowrap;
+}
 #chat .type {
 	color: #bdc3c7;
-}
-#chat .users .user,
-#chat .normal .user {
-	color: #e74c3c;
-	transition: all .25s;
-}
-#chat .normal .user:before {
-	content: '<';
-}
-#chat .normal .user:after {
-	content: '>';
-}
-#chat .type {
 	display: none;
 }
 #chat .join .type,
@@ -199,11 +198,29 @@ button::-moz-focus-inner {
 #chat .part .type,
 #chat .topic .type,
 #chat .quit .type {
-	display: inherit;
+	display: inline;
+}
+#chat .text {
+	padding: 2px 8px;
+	width: 100%;
 }
 #chat .nick .text {
 	color: #95a5a6;
 }
+#chat .highlight {
+	background: #fcf8e3;
+	color: #8a6d3b;
+}
+#chat .highlight .from {
+	background: #faebcc;
+}
+#chat .highlight .time {
+	color: #d3c2a5;
+}
+#chat .time {
+	color: #dee0e2;
+	padding: 2px 10px;
+}
 #chat .users {
 	background: #fff;
 	border-left: 4px solid #bdc3c7;

client/index.html

@@ -91,9 +91,7 @@
 		<script type="text/html" class="messages">
 		{{#slice messages limit=100}}
 		<div class="msg {{type}}">
-			<span class="time">
+
-				{{time}}
-			</span>
 			<span class="from">
 				<button class="user">{{from}}</button>
 			</span>
@@ -103,6 +101,9 @@
 				{{/if}}
 				{{{uri text}}}
 			</span>
+			<span class="time">
+				{{time}}
+			</span>
 		</div>
 		{{/slice}}
 		</script>

client/js/chat.js

@@ -49,7 +49,7 @@ $(function() {
 			chat.append(render("windows", {windows: [data.chan]}))
 				.find(".messages")
 				.last()
-				.scrollGlue({speed: 200})
+				.scrollGlue({speed: 400})
 				.end()
 				.end()
 				.find(".input")
@@ -80,7 +80,7 @@ $(function() {
 				.prev(".show-more")
 				.show();
 			chat.find(".messages")
-				.scrollGlue({speed: 200})
+				.scrollGlue({speed: 400})
 				.end();
 			
 			$("#networks")