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

17
src/components/status.css
View file

@ -848,7 +848,7 @@
object-fit: cover;
vertical-align: middle;
}
.media {
:is(.status, .media-post) .media {
cursor: pointer;
&[data-has-alt] {
@ -887,7 +887,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
position: relative;
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;
width: 44px;
height: 44px;
@ -904,10 +904,13 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 70px;
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);
}
:is(.media-video, .media-audio)[data-formatted-duration]:after {
:is(.status, .media-post)
:is(.media-video, .media-audio)[data-formatted-duration]:after {
font-size: 12px;
pointer-events: none;
content: attr(data-formatted-duration);
@ -920,10 +923,10 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 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);
}
.media-gif[data-label]:not(:hover):after {
:is(.status, .media-post) .media-gif[data-label]:not(:hover):after {
font-size: 12px;
font-weight: bold;
pointer-events: none;
@ -955,7 +958,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
.status .media-audio audio {
width: 100%;
} */
.media-audio {
:is(.status, .media-post) .media-audio {
width: 100%;
height: 100%;
min-height: 88px;