From 7deb86ad8bb970df3dbf90cea272c340b07801f5 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 28 Aug 2018 15:25:54 -0400
Subject: [PATCH] A more subtle mobile lightbox hint

---
 app/assets/stylesheets/common/base/lightbox.scss | 15 +++++----------
 app/assets/stylesheets/mobile/lightbox.scss      | 14 +++++++-------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index b6d04e4c5c9..06c32b1636c 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -3,7 +3,7 @@
   display: inline-block;
 
   &:hover .meta {
-    opacity: 1;
+    opacity: 0.9;
     transition: opacity 0.5s;
   }
 }
@@ -20,8 +20,8 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  color: dark-light-choose($secondary, $primary);
-  background: dark-light-choose($primary, lighten($secondary, 10%));
+  color: $secondary;
+  background: $primary;
   opacity: 0;
   transition: opacity 0.2s;
 
@@ -30,7 +30,7 @@
   }
 
   .filename {
-    margin: 5px;
+    margin: 6px 6px 2px 6px;
     max-width: 100%;
     overflow: hidden;
     white-space: nowrap;
@@ -45,7 +45,7 @@
   .informations {
     margin: 6px;
     padding-right: 20px;
-    color: blend-primary-secondary(50%);
+    color: $secondary-high;
     font-size: $font-0;
   }
 
@@ -59,8 +59,3 @@
     }
   }
 }
-
-// this should be removed once all the posts have been rebaked with the new lightboxes overlays
-.lightbox > span {
-  display: none;
-}
diff --git a/app/assets/stylesheets/mobile/lightbox.scss b/app/assets/stylesheets/mobile/lightbox.scss
index 7c339d721ff..32fa7d5ccae 100644
--- a/app/assets/stylesheets/mobile/lightbox.scss
+++ b/app/assets/stylesheets/mobile/lightbox.scss
@@ -1,21 +1,21 @@
 .lightbox .meta,
 .lightbox:hover .meta {
-  opacity: 0.8;
+  opacity: 0.7;
 }
 
 .meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $secondary;
+  color: $primary-high;
   height: 25px;
   width: 25px;
   bottom: 0;
-  left: 0;
+  right: 0;
 
   .filename,
   .informations {
     display: none;
   }
-
-  .expand {
-    bottom: 1px;
-    right: 6px;
-  }
 }