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:
parent
c719020e17
commit
1ed6cf945f
|
@ -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');
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user