forked from FoundKeyGang/FoundKey
Merge #2182
This commit is contained in:
commit
dc02168f33
2 changed files with 59 additions and 11 deletions
|
@ -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,6 +38,9 @@ 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
|
||||
|
@ -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
|
||||
|
||||
&.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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue