From 85a4b382daaa3d02e25ac84b85c2581355e65bf3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 22 Sep 2023 00:15:17 +0800
Subject: [PATCH] Beautify play icon a bit

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

diff --git a/src/components/status.css b/src/components/status.css
index 44d9e62f..8412c7e4 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -865,8 +865,13 @@ body:has(#modal-container .carousel) .status .media img:hover {
   transform: translate(-50%, -50%);
   color: var(--text-color);
   background-color: var(--bg-blur-color);
+  background-image: radial-gradient(
+    circle at top left,
+    var(--bg-color),
+    transparent
+  );
   /* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
-  box-shadow: 0 0 16px var(--drop-shadow-color);
+  box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color);
   display: flex;
   place-content: center;
   place-items: center;
@@ -876,7 +881,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .status :is(.media-video, .media-audio):hover:not(:active) .media-play {
   transform: translate(-50%, -50%) scale(1.1);
   background-color: var(--bg-color);
-  box-shadow: 0 0 16px var(--drop-shadow-color),
+  box-shadow: 0 0 0 1px var(--bg-color), 0 0 16px var(--drop-shadow-color),
     0 0 8px var(--drop-shadow-color);
 }
 .status :is(.media-video, .media-audio)[data-formatted-duration]:after {