68 lines
1.1 KiB
SCSS
68 lines
1.1 KiB
SCSS
converse-gif {
|
|
display: block;
|
|
}
|
|
|
|
img.gif {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.gif-canvas {
|
|
cursor: pointer;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.gifcontrol {
|
|
cursor: pointer;
|
|
transition: background 0.25s ease-in-out;
|
|
z-index: 100;
|
|
display: contents;
|
|
position: relative;
|
|
|
|
&:after {
|
|
transition: background 0.25s ease-in-out;
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
left: calc(50% - 25px);
|
|
top: calc(50% - 25px);
|
|
}
|
|
|
|
&.loading {
|
|
background: rgba(255, 255, 255, 0.75);
|
|
&:after {
|
|
background: #FFF;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
|
|
&.playing {
|
|
/* Only show the 'stop' button on hover */
|
|
&:after {
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease-in-out;
|
|
border-left: 20px solid #FFF;
|
|
border-right: 20px solid #FFF;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
&:hover:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.paused {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
&:after {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 25px 0 25px 50px;
|
|
border-color: transparent transparent transparent #fff;
|
|
}
|
|
}
|
|
}
|