emma/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

neater way to do hover thing with still image

Browse source
This commit is contained in:
Henry Jameson 2020-07-28 01:54:40 +03:00
parent 65b6e23c00
commit 7870b3f7ec
2 changed files with 41 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,16 +10,9 @@ $status-margin: 0.75em;
border-left: 4px $fallback--cRed;
border-left: 4px var(--cRed, $fallback--cRed);
// TODO find a way to do this in a cleaner way without JS
// stylelint-disable rscss/class-format
&:hover .avatar.animated {
canvas {
display: none;
}
img {
visibility: visible;
}
&:hover .avatar {
--still-image-img: visible;
--still-image-canvas: hidden;
}
&.-focused {

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

@ -35,43 +35,6 @@
display: flex;
align-items: center;
&:hover canvas {
display: none;
}
img {
width: 100%;
min-height: 100%;
object-fit: contain;
}
&.animated {
&:hover::before,
img {
visibility: hidden;
}
&:hover img {
visibility: visible
}
&::before {
content: 'gif';
position: absolute;
line-height: 10px;
font-size: 10px;
top: 5px;
left: 5px;
background: rgba(127,127,127,.5);
color: #FFF;
display: block;
padding: 2px 4px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
}
}
canvas {
position: absolute;
top: 0;
@ -81,6 +44,44 @@
width: 100%;
height: 100%;
object-fit: contain;
visibility: var(--still-image-canvas, visible);
}
img {
width: 100%;
min-height: 100%;
object-fit: contain;
}
&.animated {
&::before {
content: 'gif';
position: absolute;
line-height: 10px;
font-size: 10px;
top: 5px;
left: 5px;
background: rgba(127, 127, 127, 0.5);
color: #fff;
display: block;
padding: 2px 4px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2;
}
&:hover canvas {
display: none;
}
&:hover::before,
img {
visibility: var(--still-image-img, hidden);
}
&:hover img {
visibility: visible;
}
}
}
</style>