From 42d54dc9ea8c6e73008c4400a2d154f0e6bdd384 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 18 Apr 2017 01:57:50 +0200
Subject: Adjust visuals of non-autoplaying GIFV

---
 app/assets/stylesheets/components.scss | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 6f407a6d5..b646b0c77 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -2315,3 +2315,34 @@ button.icon-button.active i.fa-retweet {
   top: 0;
   left: 0;
 }
+
+.media-gallery__gifv__label {
+  display: block;
+  position: absolute;
+  color: $color5;
+  background: rgba($color8, 0.5);
+  bottom: 6px;
+  left: 6px;
+  padding: 2px 6px;
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 600;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.9;
+  transition: opacity 0.1s ease;
+}
+
+.media-gallery__gifv {
+  &.autoplay {
+    .media-gallery__gifv__label {
+      display: none;
+    }
+  }
+
+  &:hover {
+    .media-gallery__gifv__label {
+      opacity: 1;
+    }
+  }
+}
-- 
cgit