sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix play-on-hover gifs issues

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; min-width: 0;
&:hover { &:hover {
--still-image-img: visible; --_still-image-img-visibility: visible;
--still-image-canvas: hidden; --_still-image-canvas-visibility: hidden;
--_still-image-label-visibility: hidden;
} }
&.-focused { &.-focused {

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

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

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

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

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

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