Added cleaner message style

This commit is contained in:
Mattias Erming 2014-05-03 01:35:51 +02:00
parent bf9f113e2f
commit 750a0313ba
3 changed files with 52 additions and 34 deletions

View File

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

View File

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

View File

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