graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 15:03:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

[wip] darkmode

Browse source
This commit is contained in:
syuilo 2018-04-20 07:55:46 +09:00
parent b3cb9c7537
commit 63fdd0aec4
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/client/app/desktop/views/components/user-preview.vue
View file

@ -6,7 +6,7 @@
<img :src="`${u.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="title">
<router-link class="name" :to="u | userPage">{{ u.name }}</router-link>
<router-link class="name" :to="u | userPage">{{ u | userName }}</router-link>
<p class="username">@{{ u | acct }}</p>
</div>
<div class="description">{{ u.description }}</div>
@ -87,12 +87,12 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-user-preview
root(isDark)
position absolute
z-index 2048
margin-top -8px
width 250px
background #fff
background isDark ? #282c37 : #fff
background-clip content-box
border solid 1px rgba(0, 0, 0, 0.1)
border-radius 4px
@ -101,7 +101,7 @@ export default Vue.extend({
> .banner
height 84px
background-color #f5f5f5
background-color isDark ? #1c1e26 : #f5f5f5
background-size cover
background-position center
@ -117,7 +117,7 @@ export default Vue.extend({
width 58px
height 58px
margin 0
border solid 3px #fff
border solid 3px isDark ? #282c37 : #fff
border-radius 8px
> .title
@ -129,14 +129,14 @@ export default Vue.extend({
margin 0
font-weight bold
line-height 16px
color #656565
color isDark ? #fff : #656565
> .username
display block
margin 0
line-height 16px
font-size 0.8em
color #999
color isDark ? #606984 : #999
> .description
padding 0 16px
@ -164,4 +164,10 @@ export default Vue.extend({
top 92px
right 8px
.mk-user-preview[data-darkmode]
root(true)
.mk-user-preview:not([data-darkmode])
root(false)
</style>