[Glitch] Hide sensitive preview cards with blurhash

Port 8e96510b2528056e84cf8d0ed68d2e686e566180 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 25 insertions, 1 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 50b7f2a72..28a4ce0ce 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -874,6 +874,11 @@ a.status-card {
   flex: 1 1 auto;
   overflow: hidden;
   padding: 14px 14px 14px 8px;
+
+  &--blurred {
+    filter: blur(2px);
+    pointer-events: none;
+  }
 }
 
 .status-card__description {
@@ -911,7 +916,8 @@ a.status-card {
     width: 100%;
   }
 
-  .status-card__image-image {
+  .status-card__image-image,
+  .status-card__image-preview {
     border-radius: 4px 4px 0 0;
   }
 
@@ -956,6 +962,24 @@ a.status-card.compact:hover {
   background-position: center center;
 }
 
+.status-card__image-preview {
+  border-radius: 4px 0 0 4px;
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  background: $base-overlay-background;
+
+  &--hidden {
+    display: none;
+  }
+}
+
 .attachment-list {
   display: flex;
   font-size: 14px;