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 {
display: table;
table-layout: fixed;
width: 100%;
padding: 10px 0;
}
#chat .msg {
display: table-row;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
#chat .unread-marker span {
padding: 0;
height: 1px;
border-color: #455164;
background-color: #455164;
#chat .unread-marker {
position: relative;
text-align: center;
opacity: .5;
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 {
@ -751,7 +765,7 @@ button {
color: #b1c3ce;
padding-right: 10px;
text-align: right;
width: 134px;
max-width: 134px;
min-width: 134px;
}
@ -1645,14 +1659,8 @@ button {
padding: 0;
}
#chat .unread-marker .time,
#chat .unread-marker .from {
display: none;
}
#chat .unread-marker .text {
display: block;
width: 100%;
#chat .unread-marker {
margin: 0;
}
}

View File

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

View File

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

View File

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

View File

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