Fix hand, talking, marseylove breaking out of the comment boxes (#186)

Fixes these issues https://rdrama.net/post/18459/marseycapywalking-megathread-for-bugs-and-suggestions/4778292#context

Co-authored-by: Chuck <dude@bussy.com>
Reviewed-on: #186
Co-authored-by: top <top@noreply.fsdfsd.net>
Co-committed-by: top <top@noreply.fsdfsd.net>
pull/189/head
top 2023-08-11 09:34:17 +00:00 committed by Aevann
parent 9e16fcac3e
commit d79f4c99af
1 changed files with 30 additions and 16 deletions

View File

@ -210,6 +210,20 @@
.fa-ankh:before{content:"\f644"}
.fa-quotes:before{content:"\e234"}
/* do not remove - fixes hand, talking, marsey-love components
from breaking out of the comment box
*/
.comment-text a > img {
position: relative !important;
max-height: 150px !important;
margin: 0 !important;
}
.preview > img {
position: relative !important;
max-height: 150px !important;
margin: 0 !important;
}
button {
background: none;
border: none;
@ -5516,45 +5530,45 @@ span[data-bs-toggle], .pat-preview {
position: relative;
display: inline-block;
}
img[src$="/i/hand.webp"] {
span > img[src$="/i/hand.webp"] {
position: absolute;
width: 90%;
height: 90%;
margin-top: -10%;
z-index: 101;
}
img[src$="/i/talking.webp"] {
span > img[src$="/i/talking.webp"] {
position: absolute;
width: 70%;
}
img[src$="/i/hand.webp"]~img {
span > img[src$="/i/hand.webp"] ~ img {
animation: pat-pfp-anim 0.3s infinite;
transform-origin: bottom center;
margin-top: 10%;
text-align: center;
object-fit: contain;
}
img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"] {
span > img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"] {
padding-top: 20%;
padding-right: 5%;
}
img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]~img {
span > img[src$="/i/hand.webp"]+img[src$="/i/talking.webp"]~img {
animation: pat-pfp-anim 0.3s infinite;
transform-origin: bottom center;
margin-top: 20%;
text-align: center;
object-fit: contain;
}
img[src$="/i/talking.webp"]~img {
span > img[src$="/i/talking.webp"]~img {
margin-top: 22%;
}
img[src$="/i/talking.webp"]+img+img[src$="/i/love-background.webp"] {
span > img[src$="/i/talking.webp"]+img+img[src$="/i/love-background.webp"] {
margin-top: 22%;
}
img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] {
span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"] {
margin-top: 5%;
}
img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img {
span > img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img {
margin-top: 20%;
}
@ -5562,7 +5576,7 @@ img[src$="/i/talking.webp"]+img[src$="/i/hand.webp"]+img {
bottom: calc(2px + 2%) !important;
}
img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
span > img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
position: absolute;
z-index: 50;
height: 40%;
@ -5571,11 +5585,11 @@ img[src$="/i/love-foreground.webp"]+img[src$="/i/love-background.webp"]+img {
left: 40%;
}
img[src$="/i/love-foreground.webp"] {
span > img[src$="/i/love-foreground.webp"] {
position: absolute;
z-index: 100;
}
img[src$="/i/love-background.webp"] {
span > img[src$="/i/love-background.webp"] {
position: relative;
z-index: 1;
}
@ -5737,8 +5751,8 @@ img.golden, img[g]:not([data-src]) {
animation: golden 1s infinite alternate linear;
}
img[src$="/i/hand.webp"]+img[g]:not([data-src]),
img[src$="/i/hand.webp"]+img.golden {
span > img[src$="/i/hand.webp"]+img[g]:not([data-src]),
span > img[src$="/i/hand.webp"]+img.golden {
animation: golden 1s infinite alternate linear,
pat-pfp-anim .3s infinite;
}
@ -5752,7 +5766,7 @@ img[glow]:not([data-src]) {
animation: glowing 1s infinite alternate linear;
}
img[src$="/i/hand.webp"]+img[glow]:not([data-src]) {
span > img[src$="/i/hand.webp"]+img[glow]:not([data-src]) {
animation: glowing 1s infinite alternate linear,
pat-pfp-anim .3s infinite;
}
@ -5766,7 +5780,7 @@ img[party]:not([data-src]) {
animation: party 2s infinite alternate linear;
}
img[src$="/i/hand.webp"]+img[party]:not([data-src]) {
span > img[src$="/i/hand.webp"]+img[party]:not([data-src]) {
animation: party 2s infinite alternate linear,
pat-pfp-anim .3s infinite;
}