From db3be7d49e982430151b93664872337d87a00e9c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 13 Jan 2022 09:32:27 +0000
Subject: [PATCH] Add linear gradient to images in bubble layout (#7521)

---
 res/css/views/rooms/_EventBubbleTile.scss | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 318cca4000..f5a975cd67 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -188,6 +188,24 @@ limitations under the License.
             z-index: 3; // above media and location share maps
         }
 
+        &.mx_EventTile_mediaLine {
+            .mx_MessageTimestamp {
+                color: #ffffff; // regardless of theme, always visible on the below gradient
+            }
+
+            // linear gradient to make the timestamp more visible
+            .mx_MImageBody::before {
+                content: "";
+                position: absolute;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+                z-index: 1;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+            }
+        }
+
         //noinspection CssReplaceWithShorthandSafely
         .mx_MImageBody .mx_MImageBody_thumbnail {
             // Note: This is intentionally not compressed because the browser gets confused