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

Fix .media class can clash with carousel's .media

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-03 00:41:28 +08:00
parent fa9e0059c0
commit bd798865d8
1 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/status.css
View file

@ -848,7 +848,7 @@
object-fit: cover; object-fit: cover;
vertical-align: middle; vertical-align: middle;
} }
.media { :is(.status, .media-post) .media {
cursor: pointer; cursor: pointer;
&[data-has-alt] { &[data-has-alt] {
@ -887,7 +887,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: relative; position: relative;
background-clip: padding-box; background-clip: padding-box;
} }
:is(.media-video, .media-audio) .media-play { :is(.status, .media-post) :is(.media-video, .media-audio) .media-play {
pointer-events: none; pointer-events: none;
width: 44px; width: 44px;
height: 44px; height: 44px;
@ -904,9 +904,12 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 70px; border-radius: 70px;
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
:is(.media-video, .media-audio):hover:not(:active) .media-play { :is(.status, .media-post)
:is(.media-video, .media-audio):hover:not(:active)
.media-play {
transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);
} }
:is(.status, .media-post)
:is(.media-video, .media-audio)[data-formatted-duration]:after { :is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
@ -920,10 +923,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 4px; border-radius: 4px;
padding: 0 4px; padding: 0 4px;
} }
.media-audio[data-formatted-duration]:after { :is(.status, .media-post) .media-audio[data-formatted-duration]:after {
content: '♬ ' attr(data-formatted-duration); content: '♬ ' attr(data-formatted-duration);
} }
.media-gif[data-label]:not(:hover):after { :is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
pointer-events: none; pointer-events: none;
@ -955,7 +958,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
.status .media-audio audio { .status .media-audio audio {
width: 100%; width: 100%;
} */ } */
.media-audio { :is(.status, .media-post) .media-audio {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 88px; min-height: 88px;