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

16
src/client/app/common/views/widgets/donation.vue
View File

@@ -19,9 +19,9 @@ export default define({
</script>
<style lang="stylus" scoped>
.mkw-donation
background #fff
border solid 1px #ead8bb
root(isDark)
background isDark ? #282c37 : #fff
border solid 1px isDark ? #c3831c : #ead8bb
border-radius 6px
> article
@@ -30,7 +30,7 @@ export default define({
> h1
margin 0 0 5px 0
font-size 1em
color #888
color isDark ? #b2bac1 : #888
> [data-fa]
margin-right 0.25em
@@ -40,7 +40,7 @@ export default define({
z-index 1
margin 0
font-size 0.8em
color #999
color isDark ? #a1a6ab : #999
&[data-mobile]
border none
@@ -55,4 +55,10 @@ export default define({
> p
color #777d71
.mkw-donation[data-darkmode]
root(true)
.mkw-donation:not([data-darkmode])
root(false)
</style>

29
src/client/app/common/views/widgets/nav.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mkw-nav">
<mk-widget-container>
<div :class="$style.body">
<div class="mkw-nav--body">
<mk-nav/>
</div>
</mk-widget-container>
@@ -15,17 +15,24 @@ export default define({
});
</script>
<style lang="stylus" module>
.body
padding 16px
font-size 12px
color #aaa
background #fff
<style lang="stylus" scoped>
root(isDark)
.mkw-nav--body
padding 16px
font-size 12px
color isDark ? #9aa4b3 : #aaa
background isDark ? #282c37 : #fff
a
color #999
a
color isDark ? #9aa4b3 : #999
i
color #ccc
i
color isDark ? #9aa4b3 : #ccc
.mkw-nav[data-darkmode]
root(true)
.mkw-nav:not([data-darkmode])
root(false)
</style>

68
src/client/app/common/views/widgets/rss.vue
View File

@@ -4,9 +4,11 @@
<template slot="header">%fa:rss-square%RSS</template>
<button slot="func" title="設定" @click="setting">%fa:cog%</button>
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div :class="$style.feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
<div class="mkw-rss--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
</div>
</div>
</mk-widget-container>
</div>
@@ -56,38 +58,46 @@ export default define({
});
</script>
<style lang="stylus" module>
.feed
padding 12px 16px
font-size 0.9em
<style lang="stylus" scoped>
root(isDark)
.mkw-rss--body
.feed
padding 12px 16px
font-size 0.9em
> a
display block
padding 4px 0
color #666
border-bottom dashed 1px #eee
> a
display block
padding 4px 0
color isDark ? #9aa4b3 : #666
border-bottom dashed 1px isDark ? #1c2023 : #eee
&:last-child
border-bottom none
&:last-child
border-bottom none
.fetching
margin 0
padding 16px
text-align center
color #aaa
.fetching
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> [data-fa]
margin-right 4px
&[data-mobile]
.feed
padding 0
font-size 1em
&[data-mobile]
.feed
padding 0
font-size 1em
> a
padding 8px 16px
> a
padding 8px 16px
&:nth-child(even)
background rgba(0, 0, 0, 0.05)
&:nth-child(even)
background rgba(0, 0, 0, 0.05)
.mkw-rss[data-darkmode]
root(true)
.mkw-rss:not([data-darkmode])
root(false)
</style>

11
src/client/app/common/views/widgets/server.cpu-memory.vue
View File

@@ -100,7 +100,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.cpu-memory
root(isDark)
> svg
display block
padding 10px
@@ -115,7 +115,7 @@ export default Vue.extend({
> text
font-size 5px
fill rgba(0, 0, 0, 0.55)
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
> tspan
opacity 0.5
@@ -124,4 +124,11 @@ export default Vue.extend({
content ""
display block
clear both
.cpu-memory[data-darkmode]
root(true)
.cpu-memory:not([data-darkmode])
root(false)
</style>