From bd798865d808f0184bdd917dc9ce6762df56223f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 3 Nov 2023 00:41:28 +0800
Subject: [PATCH] Fix .media class can clash with carousel's .media

---
 src/components/status.css | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index eb54ac6c..162f9d28 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -848,7 +848,7 @@
   object-fit: cover;
   vertical-align: middle;
 }
-.media {
+:is(.status, .media-post) .media {
   cursor: pointer;
 
   &[data-has-alt] {
@@ -887,7 +887,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   position: relative;
   background-clip: padding-box;
 }
-:is(.media-video, .media-audio) .media-play {
+:is(.status, .media-post) :is(.media-video, .media-audio) .media-play {
   pointer-events: none;
   width: 44px;
   height: 44px;
@@ -904,10 +904,13 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 70px;
   transition: transform 0.2s ease-in-out;
 }
-:is(.media-video, .media-audio):hover:not(:active) .media-play {
+:is(.status, .media-post)
+  :is(.media-video, .media-audio):hover:not(:active)
+  .media-play {
   transform: translate(-50%, -50%) scale(1.1);
 }
-:is(.media-video, .media-audio)[data-formatted-duration]:after {
+:is(.status, .media-post)
+  :is(.media-video, .media-audio)[data-formatted-duration]:after {
   font-size: 12px;
   pointer-events: none;
   content: attr(data-formatted-duration);
@@ -920,10 +923,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 4px;
   padding: 0 4px;
 }
-.media-audio[data-formatted-duration]:after {
+:is(.status, .media-post) .media-audio[data-formatted-duration]:after {
   content: '♬ ' attr(data-formatted-duration);
 }
-.media-gif[data-label]:not(:hover):after {
+:is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
   font-size: 12px;
   font-weight: bold;
   pointer-events: none;
@@ -955,7 +958,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .status .media-audio audio {
   width: 100%;
 } */
-.media-audio {
+:is(.status, .media-post) .media-audio {
   width: 100%;
   height: 100%;
   min-height: 88px;