this repo has no description
Restyle play icon
+13
-10
+2
-2
src/components/media.jsx
+2
-2
src/components/media.jsx
···
326
326
loading="lazy"
327
327
/>
328
328
<div class="media-play">
329
-
<Icon icon="play" size="xxl" />
329
+
<Icon icon="play" size="xl" />
330
330
</div>
331
331
</>
332
332
)}
···
355
355
) : null}
356
356
{!showOriginal && (
357
357
<div class="media-play">
358
-
<Icon icon="play" size="xxl" />
358
+
<Icon icon="play" size="xl" />
359
359
</div>
360
360
)}
361
361
</Parent>
+11
-8
src/components/status.css
+11
-8
src/components/status.css
···
766
766
}
767
767
.status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
768
768
pointer-events: none;
769
-
width: 70px;
770
-
height: 70px;
769
+
width: 44px;
770
+
height: 44px;
771
771
position: absolute;
772
772
left: 50%;
773
773
top: 50%;
774
774
transform: translate(-50%, -50%);
775
-
color: var(--text-insignificant-color);
776
-
background-color: var(--bg-faded-blur-color);
777
-
backdrop-filter: blur(6px) saturate(3) invert(0.2);
775
+
color: var(--text-color);
776
+
background-color: var(--bg-blur-color);
777
+
/* backdrop-filter: blur(6px) saturate(3) invert(0.2); */
778
+
box-shadow: 0 0 16px var(--drop-shadow-color);
778
779
display: flex;
779
780
place-content: center;
780
781
place-items: center;
···
782
783
transition: all 0.2s ease-in-out;
783
784
}
784
785
.status
785
-
:is(.media-video, .media-audio)[data-formatted-duration]:hover
786
+
:is(.media-video, .media-audio)[data-formatted-duration]:hover:not(:active)
786
787
.media-play {
787
-
color: var(--text-color);
788
-
background-color: var(--bg-blur-color);
788
+
transform: translate(-50%, -50%) scale(1.1);
789
+
background-color: var(--bg-color);
790
+
box-shadow: 0 0 16px var(--drop-shadow-color),
791
+
0 0 8px var(--drop-shadow-color);
789
792
}
790
793
.status :is(.media-video, .media-audio)[data-formatted-duration]:after {
791
794
font-size: 12px;