🎨
This commit is contained in:
syuilo
parent
1b8467d5e5
commit
7921f8cd43
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button class="wfliddvnhxvyusikowhxozkyxyenqxqr"
|
||||
:class="{ wait, block, inline, mini, active: isFollowing || hasPendingFollowRequestFromYou }"
|
||||
:class="{ wait, block, inline, mini, transparent, active: isFollowing || hasPendingFollowRequestFromYou }"
|
||||
@click="onClick"
|
||||
:disabled="wait"
|
||||
:inline="inline"
|
||||
|
|
@ -38,7 +38,12 @@ export default Vue.extend({
|
|||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -134,6 +139,9 @@ export default Vue.extend({
|
|||
border solid 1px var(--primary)
|
||||
border-radius 36px
|
||||
|
||||
&:not(.transparent)
|
||||
background #fff
|
||||
|
||||
&.inline
|
||||
display inline-block
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="header" :data-is-dark-background="user.bannerUrl != null">
|
||||
<div class="header">
|
||||
<div class="banner-container" :style="style">
|
||||
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
|
||||
<div class="fade"></div>
|
||||
|
|
@ -12,16 +12,14 @@
|
|||
<span v-if="user.isBot" :title="$t('is-bot')"><fa icon="robot"/></span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('follows-you') }}</span>
|
||||
<div class="actions" v-if="$store.getters.isSignedIn">
|
||||
<button @click="menu" class="menu" ref="menu"><fa icon="ellipsis-h"/></button>
|
||||
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" class="follow"/>
|
||||
</div>
|
||||
</div>
|
||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||
<div class="body">
|
||||
<div class="actions" v-if="$store.getters.isSignedIn">
|
||||
<template v-if="$store.state.i.id != user.id">
|
||||
<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
|
||||
<mk-follow-button :user="user" :inline="true" class="follow"/>
|
||||
</template>
|
||||
<ui-button @click="menu" ref="menu" :inline="true"><fa icon="ellipsis-h"/></ui-button>
|
||||
</div>
|
||||
<div class="description">
|
||||
<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
|
||||
</div>
|
||||
|
|
@ -111,7 +109,7 @@ export default Vue.extend({
|
|||
|
||||
menu() {
|
||||
this.$root.new(XUserMenu, {
|
||||
source: this.$refs.menu.$el,
|
||||
source: this.$refs.menu,
|
||||
user: this.user
|
||||
});
|
||||
}
|
||||
|
|
@ -126,20 +124,6 @@ export default Vue.extend({
|
|||
border-radius var(--round)
|
||||
overflow hidden
|
||||
|
||||
&[data-is-dark-background]
|
||||
> .banner-container
|
||||
> .banner
|
||||
background-color #383838
|
||||
|
||||
> .fade
|
||||
background linear-gradient(transparent, rgba(#000, 0.7))
|
||||
|
||||
> .title
|
||||
color #fff
|
||||
|
||||
> .name
|
||||
text-shadow 0 0 8px #000
|
||||
|
||||
> .banner-container
|
||||
height 250px
|
||||
overflow hidden
|
||||
|
|
@ -148,9 +132,10 @@ export default Vue.extend({
|
|||
|
||||
> .banner
|
||||
height 100%
|
||||
background-color #bfccd0
|
||||
background-color #383838
|
||||
background-size cover
|
||||
background-position center
|
||||
box-shadow 0 0 128px rgba(0, 0, 0, 0.5) inset
|
||||
|
||||
> .fade
|
||||
position absolute
|
||||
|
|
@ -158,6 +143,31 @@ export default Vue.extend({
|
|||
left 0
|
||||
width 100%
|
||||
height 78px
|
||||
background linear-gradient(transparent, rgba(#000, 0.7))
|
||||
|
||||
> .followed
|
||||
position absolute
|
||||
top 12px
|
||||
left 12px
|
||||
padding 4px 6px
|
||||
color #fff
|
||||
background rgba(0, 0, 0, 0.7)
|
||||
font-size 12px
|
||||
|
||||
> .actions
|
||||
position absolute
|
||||
top 12px
|
||||
right 12px
|
||||
|
||||
> .menu
|
||||
height 100%
|
||||
display block
|
||||
position absolute
|
||||
left -42px
|
||||
padding 0 14px
|
||||
color #fff
|
||||
text-shadow 0 0 8px #000
|
||||
font-size 16px
|
||||
|
||||
> .title
|
||||
position absolute
|
||||
|
|
@ -165,7 +175,7 @@ export default Vue.extend({
|
|||
left 0
|
||||
width 100%
|
||||
padding 0 0 8px 154px
|
||||
color #5e6367
|
||||
color #fff
|
||||
|
||||
> .name
|
||||
display block
|
||||
|
|
@ -173,6 +183,7 @@ export default Vue.extend({
|
|||
line-height 32px
|
||||
font-weight bold
|
||||
font-size 1.8em
|
||||
text-shadow 0 0 8px #000
|
||||
|
||||
> div
|
||||
> *
|
||||
|
|
@ -202,18 +213,6 @@ export default Vue.extend({
|
|||
padding 16px 16px 16px 154px
|
||||
color var(--text)
|
||||
|
||||
> .actions
|
||||
text-align right
|
||||
padding-bottom 16px
|
||||
margin-bottom 16px
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> *
|
||||
margin-left 8px
|
||||
|
||||
> .follow
|
||||
width 180px
|
||||
|
||||
> .fields
|
||||
margin-top 16px
|
||||
|
||||
|
|
@ -247,6 +246,9 @@ export default Vue.extend({
|
|||
padding-top 16px
|
||||
border-top solid 1px var(--faceDivider)
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> *
|
||||
margin-right 16px
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue