simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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" loading="lazy"
/> />
<div class="media-play"> <div class="media-play">
<Icon icon="play" size="xxl" /> <Icon icon="play" size="xl" />
</div> </div>
</> </>
)} )}
@ -355,7 +355,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
) : null} ) : null}
{!showOriginal && ( {!showOriginal && (
<div class="media-play"> <div class="media-play">
<Icon icon="play" size="xxl" /> <Icon icon="play" size="xl" />
</div> </div>
)} )}
</Parent> </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 { .status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
pointer-events: none; pointer-events: none;
width: 70px; width: 44px;
height: 70px; height: 44px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: var(--text-insignificant-color); color: var(--text-color);
background-color: var(--bg-faded-blur-color); background-color: var(--bg-blur-color);
backdrop-filter: blur(6px) saturate(3) invert(0.2); /* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
box-shadow: 0 0 16px var(--drop-shadow-color);
display: flex; display: flex;
place-content: center; place-content: center;
place-items: center; place-items: center;
@ -782,10 +783,12 @@ body:has(#modal-container .carousel) .status .media img:hover {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
.status .status
:is(.media-video, .media-audio)[data-formatted-duration]:hover :is(.media-video, .media-audio)[data-formatted-duration]:hover:not(:active)
.media-play { .media-play {
color: var(--text-color); transform: translate(-50%, -50%) scale(1.1);
background-color: var(--bg-blur-color); 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 { .status :is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px; font-size: 12px;