From 0d5291acad3e54c7c576e98d7a4b2153d95f6546 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sun, 8 Nov 2015 14:25:03 -0800
Subject: [PATCH] Replace sinewave with ellipse

Also make sure status indicator matches timestamp color.

Fixes #393

// FREEBIE
---
 images/sinewave.png            | Bin 368 -> 0 bytes
 stylesheets/_conversation.scss |  18 ++++++++++++------
 stylesheets/manifest.css       |  16 ++++++++++++----
 3 files changed, 24 insertions(+), 10 deletions(-)
 delete mode 100644 images/sinewave.png

diff --git a/images/sinewave.png b/images/sinewave.png
deleted file mode 100644
index 62fa1ca0a155a0d09a9fb75322442b1feee8fb7f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 368
zcmeAS@N?(olHy`uVBq!ia0vp^LO{&N!3HFiZux8nQfx`y?k+$Y2!1;6t_M<_1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP~myC#tSmK4%?LZ;P64!_l=ltB<)VvY~=c3falGGH1
z^30M91$R&1fbd2>aiF3bo-U3d8t2zuHuP=^6gl=$yuD39=FqezHtFJ`(yXj((K%8_
zbTig#HXYD^z<%N2UBzEaUfCV9{e1b_T$4ifx4jd%m>vF6M|>Xpzwb8B?@d;Dt(Wsi
zNH!)hTl9n+Tg7o_i|P}4w>{;Br!<xINWPoU$$Hh9-F^R;;QOV5+_M%>e6;mrn-k9q
zR%^{TzT^^dR~KE!uk*XL6dy%)?eERZ`4erU{J*`txj*89-MoVSUin{&aTjBr&7R_X
zM9j$IfIxqyaU6^Fado$cTh%qz?ebDzxH|jIy4vvl3~Fase|miXvl{3}22WQ%mvv4F
FO#oHwg;oFn

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 00e6bf2a..ce250d14 100644
--- a/stylesheets/_conversation.scss
+++ b/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 {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 5658a1a7..121dfcf8 100644
--- a/stylesheets/manifest.css
+++ b/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;