Replace sinewave with ellipse

Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE

stylesheets/_conversation.scss

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

stylesheets/manifest.css

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