mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-22 17:25:40 +03:00
Fix .media class can clash with carousel's .media
This commit is contained in:
parent
fa9e0059c0
commit
bd798865d8
1 changed files with 10 additions and 7 deletions
|
@ -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,10 +904,13 @@ 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(.media-video, .media-audio)[data-formatted-duration]:after {
|
:is(.status, .media-post)
|
||||||
|
:is(.media-video, .media-audio)[data-formatted-duration]:after {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
content: attr(data-formatted-duration);
|
content: attr(data-formatted-duration);
|
||||||
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue