diff options
| author | HJ <30-hj@users.noreply.git.pleroma.social> | 2020-08-06 13:38:07 +0000 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2020-08-06 13:38:07 +0000 |
| commit | b9d1ecec44375c15e0425fb78dbc8ca92c0669a8 (patch) | |
| tree | 7aa1707f56b22855c8c7ffa84320bbb2a7c0aa1c /src/components/still-image/still-image.vue | |
| parent | 3e6e6096bfd1dad3283396c086e45b09523faaee (diff) | |
| parent | 0feab1d97cb4683f2cc1869e08078097e787fcd1 (diff) | |
Merge branch 'stylelint-rscss-1' into 'develop'
Stylelint + RSCSS initial approach
See merge request pleroma/pleroma-fe!1205
Diffstat (limited to 'src/components/still-image/still-image.vue')
| -rw-r--r-- | src/components/still-image/still-image.vue | 47 |
1 files changed, 24 insertions, 23 deletions
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index 2ebf33ba..6fa055de 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -35,8 +35,16 @@ display: flex; align-items: center; - &:hover canvas { - display: none; + canvas { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + object-fit: contain; + visibility: var(--still-image-canvas, visible); } img { @@ -46,15 +54,6 @@ } &.animated { - &:hover::before, - img { - visibility: hidden; - } - - &:hover img { - visibility: visible - } - &::before { content: 'gif'; position: absolute; @@ -62,25 +61,27 @@ font-size: 10px; top: 5px; left: 5px; - background: rgba(127,127,127,.5); - color: #FFF; + 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; } - } - canvas { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - object-fit: contain; + &:hover canvas { + display: none; + } + + &:hover::before, + img { + visibility: var(--still-image-img, hidden); + } + + &:hover img { + visibility: visible; + } } } </style> |