sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] darkmode

Browse Source
This commit is contained in:
syuilo
2018-04-20 07:45:37 +09:00
parent 9b3ee877a6
commit 8daa9c8062
31 changed files with 448 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/client/app/common/views/components/messaging.vue
View File

@@ -169,7 +169,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-messaging
root(isDark)
&[data-compact]
font-size 0.8em
@@ -209,7 +209,7 @@ export default Vue.extend({
> .form
padding 8px
background #f7f7f7
background isDark ? #282c37 : #f7f7f7
> label
display block
@@ -241,13 +241,14 @@ export default Vue.extend({
line-height 38px
color #000
outline none
border solid 1px #eee
background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #eee
border-radius 5px
box-shadow none
transition color 0.5s ease, border 0.5s ease
&:hover
border solid 1px #ddd
border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease
&:focus
@@ -328,21 +329,21 @@ export default Vue.extend({
> a
display block
text-decoration none
background #fff
border-bottom solid 1px #eee
background isDark ? #282c37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eee
*
pointer-events none
user-select none
&:hover
background #fafafa
background isDark ? #1e2129 : #fafafa
> .avatar
filter saturate(200%)
&:active
background #eee
background isDark ? #14161b : #eee
&[data-is-read]
&[data-is-me]
@@ -382,17 +383,17 @@ export default Vue.extend({
overflow hidden
text-overflow ellipsis
font-size 1em
color rgba(0, 0, 0, 0.9)
color isDark ? #fff : rgba(0, 0, 0, 0.9)
font-weight bold
transition all 0.1s ease
> .username
margin 0 8px
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
> .mk-time
margin 0 0 0 auto
color rgba(0, 0, 0, 0.5)
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
font-size 80%
> .avatar
@@ -412,10 +413,10 @@ export default Vue.extend({
overflow hidden
overflow-wrap break-word
font-size 1.1em
color rgba(0, 0, 0, 0.8)
color isDark ? #fff : rgba(0, 0, 0, 0.8)
.me
color rgba(0, 0, 0, 0.4)
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
> .image
display block
@@ -460,4 +461,10 @@ export default Vue.extend({
> .avatar
margin 0 12px 0 0
.mk-messaging[data-darkmode]
root(true)
.mk-messaging:not([data-darkmode])
root(false)
</style>

19
src/client/app/common/views/components/reaction-picker.vue
View File

@@ -110,7 +110,7 @@ export default Vue.extend({
$border-color = rgba(27, 31, 35, 0.15)
.mk-reaction-picker
root(isDark)
position initial
> .backdrop
@@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
opacity 0
> .popover
$bgcolor = isDark ? #2c303c : #fff
position absolute
z-index 10001
background #fff
background $bgcolor
border 1px solid $border-color
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff
border-bottom solid $balloon-size $bgcolor
> p
display block
margin 0
padding 8px 10px
font-size 14px
color #586069
border-bottom solid 1px #e1e4e8
color isDark ? #d6dce2 : #586069
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
> div
padding 4px
@@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
border-radius 2px
&:hover
background #eee
background isDark ? #252731 : #eee
&:active
background $theme-color
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode]
root(true)
.mk-reaction-picker:not([data-darkmode])
root(false)
</style>

33
src/client/app/common/views/components/reactions-viewer.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="mk-reactions-viewer">
<template v-if="reactions">
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
</template>
</div>
</template>
@@ -27,9 +27,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-reactions-viewer
border-top dashed 1px #eee
border-bottom dashed 1px #eee
root(isDark)
$borderColor = isDark ? #5e6673 : #eee
border-top dashed 1px $borderColor
border-bottom dashed 1px $borderColor
margin 4px 0
&:empty
@@ -44,6 +45,12 @@ export default Vue.extend({
> span
margin-left 4px
font-size 1.2em
color #444
color isDark ? #d1d5dc : #444
.mk-reactions-viewer[data-darkmode]
root(true)
.mk-reactions-viewer:not([data-darkmode])
root(false)
</style>

2
src/client/app/common/views/components/twitter-setting.vue
View File

@@ -50,8 +50,6 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-twitter-setting
color #4a535a
.account
border solid 1px #e1e8ed
border-radius 4px