diff --git a/images/sinewave.png b/images/sinewave.png deleted file mode 100644 index 62fa1ca0..00000000 Binary files a/images/sinewave.png and /dev/null differ 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;