Replace sinewave with ellipse

Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
This commit is contained in:
lilia 2015-11-08 14:25:03 -08:00
parent 20901e69fb
commit 0d5291acad
3 changed files with 24 additions and 10 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 368 B

View File

@ -193,10 +193,6 @@
margin-right: 3px; margin-right: 3px;
} }
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -18px 0;}
}
.outgoing.entry { .outgoing.entry {
.status { .status {
display: inline-block; display: inline-block;
@ -205,13 +201,19 @@
} }
&.sent .status { &.sent .status {
background: url('/images/check-white.png'); background: url('/images/check-white.png');
opacity: 0.5;
} }
&.delivered .status { &.delivered .status {
background: url('/images/double-check-white.png'); background: url('/images/double-check-white.png');
opacity: 0.5;
} }
&.pending .status { &.pending .status {
background: url('/images/sinewave.png') repeat-x; background: none;
animation: backgroundScroll 0.5s linear infinite; &:before { content: '...'; }
}
.meta:hover .status {
opacity: 1;
} }
} }
@ -324,6 +326,10 @@
.meta { .meta {
color: $blue_l; color: $blue_l;
&:hover {
color: white;
}
} }
&::before { &::before {

View File

@ -685,12 +685,17 @@ input.search {
width: 18px; width: 18px;
height: 1em; } height: 1em; }
.outgoing.entry.sent .status { .outgoing.entry.sent .status {
background: url("/images/check-white.png"); } background: url("/images/check-white.png");
opacity: 0.5; }
.outgoing.entry.delivered .status { .outgoing.entry.delivered .status {
background: url("/images/double-check-white.png"); } background: url("/images/double-check-white.png");
opacity: 0.5; }
.outgoing.entry.pending .status { .outgoing.entry.pending .status {
background: url("/images/sinewave.png") repeat-x; background: none; }
animation: backgroundScroll 0.5s linear infinite; } .outgoing.entry.pending .status:before {
content: '...'; }
.outgoing.entry .meta:hover .status {
opacity: 1; }
.message-list { .message-list {
margin: 0; margin: 0;
@ -776,6 +781,9 @@ input.search {
.message-detail .outgoing .bubble .meta, .message-detail .outgoing .bubble .meta,
.message-list .outgoing .bubble .meta { .message-list .outgoing .bubble .meta {
color: #a2d2f4; } color: #a2d2f4; }
.message-detail .outgoing .bubble .meta:hover,
.message-list .outgoing .bubble .meta:hover {
color: white; }
.message-detail .outgoing .bubble::before, .message-detail .outgoing .bubble::before,
.message-list .outgoing .bubble::before { .message-list .outgoing .bubble::before {
right: -10px; right: -10px;