Improve styling of the unread marker
This commit is contained in:
parent
d37e94308d
commit
3cddbbce6e
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user