diff options
| author | HJ <30-hj@users.noreply.git.pleroma.social> | 2019-09-26 05:27:59 +0000 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2019-09-26 05:27:59 +0000 |
| commit | 501208d350a9bd0fbcafb13d70a2fa6182fb8cf3 (patch) | |
| tree | beb8a09c2033d5c3da6dcf49a1fe259e1986c4d0 /src/components/user_card/user_card.vue | |
| parent | e55645aec16f083e4eedf6b01954b79689c244f1 (diff) | |
| parent | 836cb817d18f5e3ee6dab446633b8e05733c2a3a (diff) | |
Merge branch 'emoji-selector-update' into 'develop'
Emoji selector update
Closes #101
See merge request pleroma/pleroma-fe!895
Diffstat (limited to 'src/components/user_card/user_card.vue')
| -rw-r--r-- | src/components/user_card/user_card.vue | 33 |
1 files changed, 29 insertions, 4 deletions
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index f25d16d3..5b6f66e7 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -2,8 +2,12 @@ <div class="user-card" :class="classes" - :style="style" > + <div + :class="{ 'hide-bio': hideBio }" + :style="style" + class="background-image" + /> <div class="panel-heading"> <div class="user-info"> <div class="container"> @@ -307,7 +311,7 @@ @import '../../_variables.scss'; .user-card { - background-size: cover; + position: relative; .panel-heading { padding: .5em 0; @@ -316,14 +320,35 @@ background: transparent; flex-direction: column; align-items: stretch; + // create new stacking context + position: relative; } .panel-body { word-wrap: break-word; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; + // create new stacking context + position: relative; + } + + .background-image { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + mask: linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + background-size: cover; + mask-size: 100% 60%; + + &.hide-bio { + mask-size: 100% 40px; + } } p { |