mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-12-01 00:08:24 +09:00
Code

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