make chat copy&paste friendly again

code/chat.js

@@ -338,7 +338,8 @@ window.chat.renderMsg = function(msg, nick, time, team) {
   var t = '<time title="'+tb+'" data-timestamp="'+time+'">'+ta+'</time>';
   var s = 'style="color:'+COLORS[team]+'"';
   var title = nick.length >= 8 ? 'title="'+nick+'" class="help"' : '';
-  return '<tr><td>'+t+'</td><td><mark '+s+'>'+nick+'</mark></td><td>'+msg+'</td></tr>';
+  var i = ['<span class="invisep">&lt;</span>', '<span class="invisep">&gt;</span>'];
+  return '<tr><td>'+t+'</td><td>'+i[0]+'<mark '+s+'>'+nick+'</mark>'+i[1]+'</td><td>'+msg+'</td></tr>';
 }
 
 

style.css

@@ -156,7 +156,7 @@ a:hover {
 #chat {
   position: absolute;
   width: 708px;
-  bottom: 24px;
+  bottom: 23px;
   left: 0;
   z-index: 3000;
   background: rgba(8, 48, 78, 0.9);
@@ -164,6 +164,9 @@ a:hover {
   color: #eee;
   border: 1px solid #20A8B1;
   border-bottom: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 em {
@@ -176,53 +179,67 @@ em {
   top: 25px;
 }
 
-#chatpublic, #chatfull, #chatcompact,  /* FIXME DEPRECATED: */#chatautomated {
+#chatpublic, #chatfull, #chatcompact {
   display: none;
 }
 
 #chat > div {
   overflow-x:hidden;
   overflow-y:scroll;
-  height: 100%; /* fallback for Opera which doesn’t support calc */
-  height: calc(100% - 4px);
-  height: -webkit-calc(100% - 4px);
-  height: -moz-calc(100% - 4px);
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   padding: 2px;
   position:relative;
 }
 
-#chat p {
-  display: block;
-  padding: 1px 2px;
-  margin:0;
+#chat table, #chatinput table {
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+  border-spacing: 0m;
+  border-collapse: collapse;
+}
+
+#chat td, #chatinput td {
+  font-family: Verdana, sans-serif;
+  font-size: 12.6px;
+  vertical-align: top;
+  padding-bottom: 3px;
+}
+
+/* time */
+#chat td:first-child, #chatinput td:first-child {
+  width: 44px;
+  overflow: hidden;
+  padding-left: 2px;
+  color: #bbb;
 }
 
 #chat time {
   cursor: help;
 }
 
-time, mark, #chat span, #chat a {
-  font-family: Verdana, sans-serif;
-  font-size: 12.6px;
-  vertical-align: top;
-}
-
-time {
-  display: inline-block;
-  width: 44px;
-  color: #bbb;
+/* nick */
+#chat td:nth-child(2), #chatinput td:nth-child(2) {
+  width: 91px;
   overflow: hidden;
+  padding-left: 2px;
 }
 
 mark {
-  display: inline-block;
-  width: 91px;
-  margin-right:4px;
-  overflow:hidden;
-  vertical-align: top;
   background: transparent;
 }
 
+.invisep {
+  display: inline-block;
+  width:0;
+  height:0;
+  overflow:hidden;
+}
+
+/* divider */
 summary {
   color: #bbb;
   display: inline-block;
@@ -231,49 +248,36 @@ summary {
   overflow: hidden;
   padding: 0 2px;
   white-space: nowrap;
-  width: 683px;
-}
-
-#chat span {
-  display: inline-block;
-  width: 540px;
+  width: 100%;
 }
 
 #chatinput {
-  line-height:22px;
-  padding: 0 4px;
   position: absolute;
   bottom: 0;
   left: 0;
+  padding: 0 2px;
   background: rgba(8, 48, 78, 0.9);
-  width: 700px;
+  width: 708px;
   border: 1px solid #20A8B1;
   z-index: 3001;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-#chat .invisibleseparator {
-    color: rgba(8, 48, 78, 0.0);
-    overflow: hidden;
-    width: 0px;
+#chatinput td {
+  padding-bottom: 1px;
+  vertical-align: middle;
 }
 
 
-#chatinput span {
-  font-family: Verdana,sans-serif;
-  display: inline-block;
-  font-size: 12.6px;
-  width: 84px;
-  color: red;
-  padding: 0 4px 0 1px;
-  width: 85px;
-}
-
 #chatinput input {
   background: transparent;
   font-size: 12.6px;
   font-family: Verdana,sans-serif;
   color: #EEEEEE;
-  width: 558px
+  width: 100%;
+  height: 100%;
 }