oreolek/phanpy
1
0
Fork 0
Code Activity

Restyle play icon

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-19 14:39:45 +08:00
parent bce8456ac6
commit ff3ef9fa45
2 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/media.jsx
View file

@ -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>

19
src/components/status.css
View file

@ -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;