1
0
mirror of https://github.com/hack-chat/main.git synced 2024-03-22 13:20:33 +08:00

Updated style to handle messages that refer to the user.

This commit is contained in:
rand0x0m 2018-10-07 20:45:20 +02:00
parent c719020e17
commit 1ed6cf945f
22 changed files with 104 additions and 45 deletions

View File

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

View File

@ -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>
</html>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 {