From 54898a6c35d8cc919dca4d2e8677057fe16eac09 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 7 Jan 2019 13:49:01 +0000
Subject: [PATCH] Fix black-on-black GIF icon for stickers

Text colour ended up being the link colour on images because the
whole image is in an `a`, but stickers are not so it got the default
font colour, which might be black. Define an explicit colour.

Also set pointer-events: none so you can hover over the gif icon
too (I managed to make the message panel small which made the icon
cover most the image, so this prevented the gif from animating
at all).

Fixes https://github.com/vector-im/riot-web/issues/8004
---
 res/css/views/messages/_MImageBody.scss | 2 ++
 res/themes/dark/css/_dark.scss          | 1 +
 res/themes/dharma/css/_dharma.scss      | 1 +
 res/themes/light/css/_base.scss         | 1 +
 4 files changed, 5 insertions(+)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index a5a1e66a3b..86bc022829 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -56,4 +56,6 @@ limitations under the License.
     border-radius: 5px;
     background: $imagebody-giflabel;
     border: 2px solid $imagebody-giflabel-border;
+    color: $imagebody-giflabel-color;
+    pointer-events: none;
 }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 636db5b39e..997a74e6aa 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -164,6 +164,7 @@ $lightbox-border-color: #ffffff;
 
 $imagebody-giflabel: rgba(1, 1, 1, 0.7);
 $imagebody-giflabel-border: rgba(1, 1, 1, 0.2);
+$imagebody-giflabel-color: rgba(0, 0, 0, 1);
 
 // unused?
 $progressbar-color: #000;
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 08a287ad71..54ccbc7dd0 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -99,6 +99,7 @@ $lightbox-background-bg-color: #000;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
+$imagebody-giflabel-color: rgba(255, 255, 255, 1);
 
 $greyed-fg-color: #888;
 
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 9fcb58d7f1..bd445bbc05 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -177,6 +177,7 @@ $lightbox-border-color: #ffffff;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
+$imagebody-giflabel-color: rgba(255, 255, 255, 1);
 
 // unused?
 $progressbar-color: #000;