Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix play-on-hover gifs issues

Browse source
This commit is contained in:
Henry Jameson 2020-10-29 21:39:36 +02:00
parent 4e1f2aeabc
commit 0653f18994
4 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/status/status.scss
View file

@ -7,8 +7,9 @@ $status-margin: 0.75em;
min-width: 0;
&:hover {
--still-image-img: visible;
--still-image-canvas: hidden;
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
}
&.-focused {

11
src/components/still-image/still-image.vue
View file

@ -42,7 +42,7 @@
width: 100%;
height: 100%;
object-fit: contain;
visibility: var(--still-image-canvas, visible);
visibility: var(--_still-image-canvas-visibility, visible);
}
img {
@ -66,16 +66,19 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
visibility: var(--still-image-label-visibility, visible);
visibility: var(--_still-image-label-visibility, visible);
}
&:hover canvas {
display: none;
}
&:hover::before,
&:hover::before {
visibility: var(--_still-image-label-visibility, hidden);
}
img {
visibility: var(--still-image-img, hidden);
visibility: var(--_still-image-img-visibility, hidden);
}
&:hover img {

2
src/components/user_avatar/user_avatar.vue
View file

@ -23,7 +23,7 @@
--_avatarShadowBox: var(--avatarStatusShadow);
--_avatarShadowFilter: var(--avatarStatusShadowFilter);
--_avatarShadowInset: var(--avatarStatusShadowInset);
--still-image-label-visibility: hidden;
--_still-image-label-visibility: hidden;
width: 48px;
height: 48px;

10
src/components/user_card/user_card.vue
View file

@ -282,6 +282,11 @@
.user-card {
position: relative;
&:hover .Avatar {
--_still-image-img-visibility: visible;
--_still-image-canvas-visibility: hidden;
}
.panel-heading {
padding: .5em 0;
text-align: center;
@ -393,11 +398,6 @@
}
}
&:hover .Avatar {
--still-image-img: visible;
--still-image-canvas: hidden;
}
&-avatar-link {
position: relative;
cursor: pointer;