diff options
| -rw-r--r-- | src/components/status/status.vue | 16 | ||||
| -rw-r--r-- | src/components/user_card/user_card.js | 11 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 30 |
3 files changed, 37 insertions, 20 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 771615f3..93f37a49 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -665,6 +665,15 @@ $status-margin: 0.75em; height: 220px; overflow-x: hidden; overflow-y: hidden; + z-index: 1; + .status-content { + height: 100%; + mask: linear-gradient(to top, white, transparent) bottom/100% 70px 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; + } } .tall-status-hider { @@ -676,12 +685,7 @@ $status-margin: 0.75em; width: 100%; text-align: center; line-height: 110px; - 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%); - &_focused { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%); - } + z-index: 2; } .status-unhider, .cw-status-hider { diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 82d3b835..e41a3180 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -38,19 +38,10 @@ export default { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` - const gradient = [ - [tintColor, this.hideBio ? '60%' : ''], - this.hideBio ? [ - color, '100%' - ] : [ - tintColor, '' - ] - ].map(_ => _.join(' ')).join(', ') - return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundImage: [ - `linear-gradient(to bottom, ${gradient})`, + `linear-gradient(to bottom, ${tintColor}, ${tintColor})`, `url(${this.user.cover_photo})` ].join(', ') } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index fc18e240..c2626260 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -2,8 +2,9 @@ <div class="user-card" :class="classes" - :style="style" > + <div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image"> + </div> <div class="panel-heading"> <div class="user-info"> <div class="container"> @@ -298,7 +299,7 @@ @import '../../_variables.scss'; .user-card { - background-size: cover; + position: relative; .panel-heading { padding: .5em 0; @@ -307,14 +308,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 { |