From ff3ef9fa456a90bb59aec9edc7e0f80189655b2e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 19 Aug 2023 14:39:45 +0800
Subject: [PATCH] Restyle play icon
---
src/components/media.jsx | 4 ++--
src/components/status.css | 19 +++++++++++--------
2 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/components/media.jsx b/src/components/media.jsx
index da67646b..dac7b743 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -326,7 +326,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
loading="lazy"
/>
<div class="media-play">
- <Icon icon="play" size="xxl" />
+ <Icon icon="play" size="xl" />
</div>
</>
)}
@@ -355,7 +355,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
) : null}
{!showOriginal && (
<div class="media-play">
- <Icon icon="play" size="xxl" />
+ <Icon icon="play" size="xl" />
</div>
)}
</Parent>
diff --git a/src/components/status.css b/src/components/status.css
index fa0f8b88..9b22710f 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -766,15 +766,16 @@ body:has(#modal-container .carousel) .status .media img:hover {
}
.status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
pointer-events: none;
- width: 70px;
- height: 70px;
+ width: 44px;
+ height: 44px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
- color: var(--text-insignificant-color);
- background-color: var(--bg-faded-blur-color);
- backdrop-filter: blur(6px) saturate(3) invert(0.2);
+ color: var(--text-color);
+ background-color: var(--bg-blur-color);
+ /* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
+ box-shadow: 0 0 16px var(--drop-shadow-color);
display: flex;
place-content: center;
place-items: center;
@@ -782,10 +783,12 @@ body:has(#modal-container .carousel) .status .media img:hover {
transition: all 0.2s ease-in-out;
}
.status
- :is(.media-video, .media-audio)[data-formatted-duration]:hover
+ :is(.media-video, .media-audio)[data-formatted-duration]:hover:not(:active)
.media-play {
- color: var(--text-color);
- background-color: var(--bg-blur-color);
+ transform: translate(-50%, -50%) scale(1.1);
+ background-color: var(--bg-color);
+ box-shadow: 0 0 16px var(--drop-shadow-color),
+ 0 0 8px var(--drop-shadow-color);
}
.status :is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px;