aboutsummaryrefslogtreecommitdiff
path: root/src/components/still-image/still-image.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/still-image/still-image.vue')
-rw-r--r--src/components/still-image/still-image.vue83
1 files changed, 43 insertions, 40 deletions
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 5695c554..a37c678d 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,53 +10,56 @@
<style lang="scss">
@import '../../_variables.scss';
.still-image {
- position: relative;
- line-height: 0;
- overflow: hidden;
+ position: relative;
+ line-height: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
- &:hover canvas {
- display: none;
- }
+ &:hover canvas {
+ display: none;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ &.animated {
+ &:hover::before,
img {
- width: 100%;
- height: 100%
+ visibility: hidden;
}
- &.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: 3px;
- z-index: 2;
- }
+ &:hover img {
+ visibility: visible
}
- canvas {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
+ &::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;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
}
</style>