diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue index 6685296c16..13334daeba 100644 --- a/src/client/app/common/views/components/avatar.vue +++ b/src/client/app/common/views/components/avatar.vue @@ -1,8 +1,16 @@ <template> - <span class="mk-avatar" :title="user | acct" :style="style" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"></span> - <span class="mk-avatar" :title="user | acct" :style="style" v-else-if="disableLink && disablePreview" @click="onClick"></span> - <router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"></router-link> - <router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="style" v-else-if="!disableLink && disablePreview"></router-link> + <span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick"> + <span class="inner" :style="style"></span> + </span> + <span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick"> + <span class="inner" :style="style"></span> + </span> + <router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id"> + <span class="inner" :style="style"></span> + </router-link> + <router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview"> + <span class="inner" :style="style"></span> + </router-link> </template> <script lang="ts"> @@ -30,14 +38,17 @@ export default Vue.extend({ lightmode(): boolean { return this.$store.state.device.lightmode; }, + cat(): boolean { + return this.user.isCat && this.$store.state.settings.circleIcons; + }, style(): any { return { backgroundColor: this.lightmode - ? `rgb(${ this.user.avatarColor.slice(0, 3).join(',') })` + ? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})` : this.user.avatarColor && this.user.avatarColor.length == 3 - ? `rgb(${ this.user.avatarColor.join(',') })` + ? `rgb(${this.user.avatarColor.join(',')})` : null, - backgroundImage: this.lightmode ? null : `url(${ this.user.avatarUrl })`, + backgroundImage: this.lightmode ? null : `url(${this.user.avatarUrl})`, borderRadius: this.$store.state.settings.circleIcons ? '100%' : null }; } @@ -51,10 +62,43 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.mk-avatar + +root(isDark) display inline-block vertical-align bottom - background-size cover - background-position center center - transition border-radius 1s ease + + &.cat::before, + &.cat::after + background #df548f + border solid 4px isDark ? #e0eefd : #202224 + box-sizing border-box + content '' + display inline-block + height 50% + width 50% + + &.cat::before + border-radius 0 75% 75% + transform rotate(37.5deg) skew(30deg) + + &.cat::after + border-radius 75% 0 75% 75% + transform rotate(-37.5deg) skew(-30deg) + + .inner + background-position center center + background-size cover + bottom 0 + left 0 + position absolute + right 0 + top 0 + transition border-radius 1s ease + z-index 1 + +.mk-avatar[data-darkmode] + root(true) + +.mk-avatar:not([data-darkmode]) + root(false) </style> diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue index 00545723e2..d8f4656ed0 100644 --- a/src/client/app/desktop/views/pages/user/user.header.vue +++ b/src/client/app/desktop/views/pages/user/user.header.vue @@ -176,6 +176,10 @@ root(isDark) height 120px box-shadow 1px 1px 3px rgba(#000, 0.2) + > &.cat::before, + > &.cat::after + border-width 8px + > .body padding 16px 16px 16px 154px color isDark ? #c5ced6 : #555