Improve styling of the unread marker

This commit is contained in:
Jérémie Astori 2016-07-04 17:57:49 -04:00
parent d37e94308d
commit 3cddbbce6e
5 changed files with 50 additions and 24 deletions

View file

@ -701,22 +701,36 @@ button {
} }
#chat .messages { #chat .messages {
display: table;
table-layout: fixed;
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
} overflow-wrap: break-word;
#chat .msg {
display: table-row;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word;
} }
#chat .unread-marker span { #chat .unread-marker {
padding: 0; position: relative;
height: 1px; text-align: center;
border-color: #455164; opacity: .5;
background-color: #455164; margin: 0 10px;
}
#chat .unread-marker:before {
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #e74c3c;
}
#chat .unread-marker-text:before {
content: "New messages";
background-color: white;
color: #e74c3c;
padding: 0 10px;
font: bold 12px Lato;
} }
#chat .unread-marker:last-child { #chat .unread-marker:last-child {
@ -751,7 +765,7 @@ button {
color: #b1c3ce; color: #b1c3ce;
padding-right: 10px; padding-right: 10px;
text-align: right; text-align: right;
width: 134px; max-width: 134px;
min-width: 134px; min-width: 134px;
} }
@ -1645,14 +1659,8 @@ button {
padding: 0; padding: 0;
} }
#chat .unread-marker .time, #chat .unread-marker {
#chat .unread-marker .from { margin: 0;
display: none;
}
#chat .unread-marker .text {
display: block;
width: 100%;
} }
} }

View file

@ -117,6 +117,10 @@ a:hover,
font-weight: bold; font-weight: bold;
} }
#chat .unread-marker-text:before {
font: bold 12px Inconsolata-g, monospace;
}
#form .input { #form .input {
font: 12px Inconsolata-g, monospace; font: 12px Inconsolata-g, monospace;
} }

View file

@ -175,6 +175,14 @@ body {
color: #99a2b4; color: #99a2b4;
} }
#chat .unread-marker {
opacity: 1;
}
#chat .unread-marker-text:before {
background-color: #333c4a;
}
/* Setup text colors */ /* Setup text colors */
#chat .msg { #chat .msg {
color: #f3f3f3; color: #f3f3f3;

View file

@ -202,6 +202,14 @@ body {
color: #d2d39b; color: #d2d39b;
} }
#chat .unread-marker {
opacity: 1;
}
#chat .unread-marker-text:before {
background-color: #3f3f3f;
}
/* Setup text colors */ /* Setup text colors */
#chat .msg { #chat .msg {
color: #ffcfaf; color: #ffcfaf;

View file

@ -1,5 +1,3 @@
<div class="msg unread-marker"> <div class="unread-marker">
<span class="time"></span> <span class="unread-marker-text"></span>
<span class="from"></span>
<span class="text"></span>
</div> </div>