Updated style to handle messages that refer to the user.

22 files changed, 104 insertions, 45 deletions

diff --git a/client/client.js b/client/client.js
index 1d72c9a..8a0d2e5 100644
--- a/client/client.js
+++ b/client/client.js
@@ -156,7 +156,12 @@ var COMMANDS = {
 function pushMessage(args) {
 	// Message container
 	var messageEl = document.createElement('div');
-	messageEl.classList.add('message');
+
+	if (args.text.includes('@' + myNick.split('#')[0] + ' ')) {
+		messageEl.classList.add('refmessage');
+	} else {
+		messageEl.classList.add('message');
+	}
 
 	if (verifyNickname(myNick) && args.nick == myNick) {
 		messageEl.classList.add('me');
diff --git a/client/index.html b/client/index.html
index 9abdebc..98b9428 100644
--- a/client/index.html
+++ b/client/index.html
@@ -20,7 +20,7 @@
   </article>
   <footer id="footer">
     <div class="container">
-      <form id="chatform" class="messages">
+      <form id="chatform" class="message">
         <textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea>
       </form>
     </div>
@@ -59,4 +59,4 @@
   <script src="client.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/client/schemes/android.css b/client/schemes/android.css
index 35c2165..b575725 100644
--- a/client/schemes/android.css
+++ b/client/schemes/android.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #e0e0e0;
 }
-.messages {
-  border-color: #858585;
+.message {
+  border-left: 1px solid rgba(133, 133, 133, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(133, 133, 133, 1);
 }
 .nick {
   color: #0099CC;
diff --git a/client/schemes/atelier-dune.css b/client/schemes/atelier-dune.css
index 56175f4..eb20519 100644
--- a/client/schemes/atelier-dune.css
+++ b/client/schemes/atelier-dune.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #a6a28c;
 }
-.messages {
-  border-color: #7d7a68;
+.message {
+  border-left: 1px solid rgba(125, 122, 104, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(125, 122, 104, 1);
 }
 .nick {
   color: #6684e1;
diff --git a/client/schemes/atelier-forest.css b/client/schemes/atelier-forest.css
index c022005..a6a5ba4 100644
--- a/client/schemes/atelier-forest.css
+++ b/client/schemes/atelier-forest.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #a8a19f;
 }
-.messages {
-  border-color: #766e6b;
+.message {
+  border-left: 1px solid rgba(118, 110, 107, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(118, 110, 107, 1);
 }
 .nick {
   color: #407ee7;
diff --git a/client/schemes/atelier-heath.css b/client/schemes/atelier-heath.css
index 5c6a77f..c580cd0 100644
--- a/client/schemes/atelier-heath.css
+++ b/client/schemes/atelier-heath.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #ab9bab;
 }
-.messages {
-  border-color: #776977;
+.message {
+  border-left: 1px solid rgba(119, 105, 119, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(119, 105, 119, 1);
 }
 .nick {
   color: #516aec;
diff --git a/client/schemes/atelier-lakeside.css b/client/schemes/atelier-lakeside.css
index e0dbbbe..8cb9677 100644
--- a/client/schemes/atelier-lakeside.css
+++ b/client/schemes/atelier-lakeside.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #7ea2b4;
 }
-.messages {
-  border-color: #5a7b8c;
+.message {
+  border-left: 1px solid rgba(90, 123, 140, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(90, 123, 140, 1);
 }
 .nick {
   color: #257fad;
diff --git a/client/schemes/atelier-seaside.css b/client/schemes/atelier-seaside.css
index b494c27..d6a4043 100644
--- a/client/schemes/atelier-seaside.css
+++ b/client/schemes/atelier-seaside.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #8ca68c;
 }
-.messages {
-  border-color: #687d68;
+.message {
+  border-left: 1px solid rgba(104, 125, 104, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(104, 125, 104, 1);
 }
 .nick {
   color: #3d62f5;
diff --git a/client/schemes/bright.css b/client/schemes/bright.css
index abeb2da..648296b 100644
--- a/client/schemes/bright.css
+++ b/client/schemes/bright.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #e0e0e0;
 }
-.messages {
-  border-color: #b0b0b0;
+.message {
+  border-left: 1px solid rgba(176, 176, 176, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(176, 176, 176, 1);
 }
 .nick {
   color: #6fb3d2;
diff --git a/client/schemes/chalk.css b/client/schemes/chalk.css
index c004c15..ac9f3e2 100644
--- a/client/schemes/chalk.css
+++ b/client/schemes/chalk.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #d0d0d0;
 }
-.messages {
-  border-color: #505050;
+.message {
+  border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(80, 80, 80, 1);
 }
 .nick {
   color: #6fc2ef;
diff --git a/client/schemes/default.css b/client/schemes/default.css
index f8a6b4d..4e4d16c 100644
--- a/client/schemes/default.css
+++ b/client/schemes/default.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #d0d0d0;
 }
-.messages {
-  border-color: #505050;
+.message {
+  border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(80, 80, 80, 1);
 }
 .nick {
   color: #6a9fb5;
diff --git a/client/schemes/eighties.css b/client/schemes/eighties.css
index e0ccebb..5f4f2c6 100644
--- a/client/schemes/eighties.css
+++ b/client/schemes/eighties.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #d3d0c8;
 }
-.messages {
-  border-color: #747369;
+.message {
+  border-left: 1px solid rgba(116, 115, 105, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(116, 115, 105, 1);
 }
 .nick {
   color: #6699cc;
diff --git a/client/schemes/greenscreen.css b/client/schemes/greenscreen.css
index fd7c794..0505b64 100644
--- a/client/schemes/greenscreen.css
+++ b/client/schemes/greenscreen.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #00bb00;
 }
-.messages {
-  border-color: #007700;
+.message {
+  border-left: 1px solid rgba(0, 119, 0, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(0, 119, 0, 1);
 }
 .nick {
   color: #009900;
diff --git a/client/schemes/mocha.css b/client/schemes/mocha.css
index 7b7a439..9b17feb 100644
--- a/client/schemes/mocha.css
+++ b/client/schemes/mocha.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #d0c8c6;
 }
-.messages {
-  border-color: #7e705a;
+.message {
+  border-left: 1px solid rgba(126, 112, 90, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(126, 112, 90, 1);
 }
 .nick {
   color: #8ab3b5;
diff --git a/client/schemes/monokai.css b/client/schemes/monokai.css
index adef41d..e5969e6 100644
--- a/client/schemes/monokai.css
+++ b/client/schemes/monokai.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #f8f8f2;
 }
-.messages {
-  border-color: #75715e;
+.message {
+  border-left: 1px solid rgba(117, 113, 94, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(117, 113, 94, 1);
 }
 .nick {
   color: #66d9ef;
diff --git a/client/schemes/nese.css b/client/schemes/nese.css
index 8fe5844..c777cbf 100644
--- a/client/schemes/nese.css
+++ b/client/schemes/nese.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #cccccc;
 }
-.messages {
-  border-color: #737373;
+.message {
+  border-left: 1px solid rgba(115, 115, 115, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(115, 115, 115, 1);
 }
 .nick {
   color: #388bb8;
diff --git a/client/schemes/ocean.css b/client/schemes/ocean.css
index c4ba031..f9eca74 100644
--- a/client/schemes/ocean.css
+++ b/client/schemes/ocean.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #c0c5ce;
 }
-.messages {
-  border-color: #65737e;
+.message {
+  border-left: 1px solid rgba(101, 115, 126, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(101, 115, 126, 1);
 }
 .nick {
   color: #8fa1b3;
diff --git a/client/schemes/pop.css b/client/schemes/pop.css
index 697170b..2460652 100644
--- a/client/schemes/pop.css
+++ b/client/schemes/pop.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #d0d0d0;
 }
-.messages {
-  border-color: #505050;
+.message {
+  border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(80, 80, 80, 1);
 }
 .nick {
   color: #0e5a94;
diff --git a/client/schemes/railscasts.css b/client/schemes/railscasts.css
index 886240a..94dc9f6 100644
--- a/client/schemes/railscasts.css
+++ b/client/schemes/railscasts.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #e6e1dc;
 }
-.messages {
-  border-color: #5a647e;
+.message {
+  border-left: 1px solid rgba(90, 100, 126, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(90, 100, 126, 1);
 }
 .nick {
   color: #6d9cbe;
diff --git a/client/schemes/solarized.css b/client/schemes/solarized.css
index 3435491..493fc16 100644
--- a/client/schemes/solarized.css
+++ b/client/schemes/solarized.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #93a1a1;
 }
-.messages {
-  border-color: #657b83;
+.message {
+  border-left: 1px solid rgba(101, 123, 131, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(101, 123, 131, 1);
 }
 .nick {
   color: #268bd2;
diff --git a/client/schemes/tomorrow.css b/client/schemes/tomorrow.css
index 80a8db1..f1784e7 100644
--- a/client/schemes/tomorrow.css
+++ b/client/schemes/tomorrow.css
@@ -6,8 +6,11 @@ input,
 textarea {
   color: #c5c8c6;
 }
-.messages {
-  border-color: #969896;
+.message {
+  border-left: 1px solid rgba(150, 152, 150, 0.5);
+}
+.refmessage {
+  border-left: 1px solid rgba(150, 152, 150, 1);
 }
 .nick {
   color: #81a2be;
diff --git a/client/style.css b/client/style.css
index 8fcbab8..ca8abcf 100644
--- a/client/style.css
+++ b/client/style.css
@@ -59,13 +59,10 @@ ul li {
   max-width: 600px;
   margin: 0 auto;
 }
-.messages {
-  border-left: 1px solid;
-}
 #messages {
   padding-top: 2em;
 }
-.message {
+.message, .refmessage {
   padding-bottom: 1em;
 }
 .nick {