graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-23 13:43:10 +02:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/en.yml
View file

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "Customize" customize: "Customize"
settings: "Settings" settings: "Settings"
signout: "Sign out" signout: "Sign out"
dark: "Fall in dark"
desktop/views/components/ui.header.nav.vue: desktop/views/components/ui.header.nav.vue:
home: "Home" home: "Home"

1
locales/fr.yml
View file

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "Modifications" customize: "Modifications"
settings: "Réglages" settings: "Réglages"
signout: "Déconnexion" signout: "Déconnexion"
dark: "Fall in dark"
desktop/views/components/ui.header.nav.vue: desktop/views/components/ui.header.nav.vue:
home: "Accueil" home: "Accueil"

1
locales/ja.yml
View file

@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
customize: "カスタマイズ" customize: "カスタマイズ"
settings: "設定" settings: "設定"
signout: "サインアウト" signout: "サインアウト"
dark: "闇に飲まれる"
desktop/views/components/ui.header.nav.vue: desktop/views/components/ui.header.nav.vue:
home: "ホーム" home: "ホーム"

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

@ -169,7 +169,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-messaging root(isDark)
&[data-compact] &[data-compact]
font-size 0.8em font-size 0.8em
@ -209,7 +209,7 @@ export default Vue.extend({
> .form > .form
padding 8px padding 8px
background #f7f7f7 background isDark ? #282c37 : #f7f7f7
> label > label
display block display block
@ -241,13 +241,14 @@ export default Vue.extend({
line-height 38px line-height 38px
color #000 color #000
outline none outline none
border solid 1px #eee background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #eee
border-radius 5px border-radius 5px
box-shadow none box-shadow none
transition color 0.5s ease, border 0.5s ease transition color 0.5s ease, border 0.5s ease
&:hover &:hover
border solid 1px #ddd border solid 1px isDark ? #b0b0b0 : #ddd
transition border 0.2s ease transition border 0.2s ease
&:focus &:focus
@ -328,21 +329,21 @@ export default Vue.extend({
> a > a
display block display block
text-decoration none text-decoration none
background #fff background isDark ? #282c37 : #fff
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1c2023 : #eee
* *
pointer-events none pointer-events none
user-select none user-select none
&:hover &:hover
background #fafafa background isDark ? #1e2129 : #fafafa
> .avatar > .avatar
filter saturate(200%) filter saturate(200%)
&:active &:active
background #eee background isDark ? #14161b : #eee
&[data-is-read] &[data-is-read]
&[data-is-me] &[data-is-me]
@ -382,17 +383,17 @@ export default Vue.extend({
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.9) color isDark ? #fff : rgba(0, 0, 0, 0.9)
font-weight bold font-weight bold
transition all 0.1s ease transition all 0.1s ease
> .username > .username
margin 0 8px margin 0 8px
color rgba(0, 0, 0, 0.5) color isDark ? #606984 : rgba(0, 0, 0, 0.5)
> .mk-time > .mk-time
margin 0 0 0 auto margin 0 0 0 auto
color rgba(0, 0, 0, 0.5) color isDark ? #606984 : rgba(0, 0, 0, 0.5)
font-size 80% font-size 80%
> .avatar > .avatar
@ -412,10 +413,10 @@ export default Vue.extend({
overflow hidden overflow hidden
overflow-wrap break-word overflow-wrap break-word
font-size 1.1em font-size 1.1em
color rgba(0, 0, 0, 0.8) color isDark ? #fff : rgba(0, 0, 0, 0.8)
.me .me
color rgba(0, 0, 0, 0.4) color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
> .image > .image
display block display block
@ -460,4 +461,10 @@ export default Vue.extend({
> .avatar > .avatar
margin 0 12px 0 0 margin 0 12px 0 0
.mk-messaging[data-darkmode]
root(true)
.mk-messaging:not([data-darkmode])
root(false)
</style> </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) $border-color = rgba(27, 31, 35, 0.15)
.mk-reaction-picker root(isDark)
position initial position initial
> .backdrop > .backdrop
@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
opacity 0 opacity 0
> .popover > .popover
$bgcolor = isDark ? #2c303c : #fff
position absolute position absolute
z-index 10001 z-index 10001
background #fff background $bgcolor
border 1px solid $border-color border 1px solid $border-color
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) 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-top solid $balloon-size transparent
border-left solid $balloon-size transparent border-left solid $balloon-size transparent
border-right solid $balloon-size transparent border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff border-bottom solid $balloon-size $bgcolor
> p > p
display block display block
margin 0 margin 0
padding 8px 10px padding 8px 10px
font-size 14px font-size 14px
color #586069 color isDark ? #d6dce2 : #586069
border-bottom solid 1px #e1e4e8 border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
> div > div
padding 4px padding 4px
@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
border-radius 2px border-radius 2px
&:hover &:hover
background #eee background isDark ? #252731 : #eee
&:active &:active
background $theme-color background $theme-color
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) 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> </style>

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

@ -1,15 +1,15 @@
<template> <template>
<div class="mk-reactions-viewer"> <div class="mk-reactions-viewer">
<template v-if="reactions"> <template v-if="reactions">
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</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.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.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.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.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.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.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.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.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
</template> </template>
</div> </div>
</template> </template>
@ -27,9 +27,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-reactions-viewer root(isDark)
border-top dashed 1px #eee $borderColor = isDark ? #5e6673 : #eee
border-bottom dashed 1px #eee border-top dashed 1px $borderColor
border-bottom dashed 1px $borderColor
margin 4px 0 margin 4px 0
&:empty &:empty
@ -44,6 +45,12 @@ export default Vue.extend({
> span > span
margin-left 4px margin-left 4px
font-size 1.2em 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> </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> <style lang="stylus" scoped>
.mk-twitter-setting .mk-twitter-setting
color #4a535a
.account .account
border solid 1px #e1e8ed border solid 1px #e1e8ed
border-radius 4px border-radius 4px

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

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

21
src/client/app/common/views/widgets/nav.vue
View file

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

26
src/client/app/common/views/widgets/rss.vue
View file

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

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

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

70
src/client/app/desktop/ui.styl
View file

@ -65,20 +65,6 @@ button.ui
background $theme-color background $theme-color
border-color $theme-color border-color $theme-color
html[data-darkmode] button.ui
html[data-darkmode] .button.ui
color #fff
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
border-color #1c2023
&:hover
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
border-color #151a1d
&:active
background #22262f
border-color #151a1d
input:not([type]).ui input:not([type]).ui
input[type='text'].ui input[type='text'].ui
input[type='password'].ui input[type='password'].ui
@ -137,3 +123,59 @@ textarea.ui
font-size 90% font-size 90%
font-weight bold font-weight bold
color rgba(#373a3c, 0.9) color rgba(#373a3c, 0.9)
html[data-darkmode]
button.ui
.button.ui
color #fff
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
border-color #1c2023
&:hover
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
border-color #151a1d
&:active
background #22262f
border-color #151a1d
&.primary
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:hover:not(:disabled)
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active:not(:disabled)
background $theme-color
border-color $theme-color
input:not([type]).ui
input[type='text'].ui
input[type='password'].ui
input[type='email'].ui
input[type='date'].ui
input[type='number'].ui
textarea.ui
display block
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color #dee4e8
background #191b22
border solid 1px #495156
border-radius 4px
&:hover
border-color #b0b0b0
&:focus
border-color $theme-color
.ui.from.group
> p:first-child
color #c0c7cc

14
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -31,7 +31,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.menu root(isDark)
$width = 240px $width = 240px
$item-height = 38px $item-height = 38px
$padding = 10px $padding = 10px
@ -46,7 +46,7 @@ export default Vue.extend({
&.divider &.divider
margin-top $padding margin-top $padding
padding-top $padding padding-top $padding
border-top solid 1px #eee border-top solid 1px isDark ? #1c2023 : #eee
&.nest &.nest
> p > p
@ -75,7 +75,7 @@ export default Vue.extend({
margin 0 margin 0
padding 0 32px 0 38px padding 0 32px 0 38px
line-height $item-height line-height $item-height
color #868C8C color isDark ? #c8cece : #868C8C
text-decoration none text-decoration none
cursor pointer cursor pointer
@ -104,11 +104,17 @@ export default Vue.extend({
left $width left $width
margin-top -($padding) margin-top -($padding)
width $width width $width
background #fff background isDark ? #282c37 :#fff
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
transition visibility 0s linear 0.2s transition visibility 0s linear 0.2s
.menu[data-darkmode]
root(true)
.menu:not([data-darkmode])
root(false)
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>

10
src/client/app/desktop/views/components/context-menu.vue
View file

@ -54,7 +54,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.context-menu root(isDark)
$width = 240px $width = 240px
$item-height = 38px $item-height = 38px
$padding = 10px $padding = 10px
@ -66,9 +66,15 @@ export default Vue.extend({
z-index 4096 z-index 4096
width $width width $width
font-size 0.8em font-size 0.8em
background #fff background isDark ? #282c37 : #fff
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
opacity 0 opacity 0
.context-menu[data-darkmode]
root(true)
.context-menu:not([data-darkmode])
root(false)
</style> </style>

10
src/client/app/desktop/views/components/drive.file.vue
View file

@ -186,7 +186,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.root.file root(isDark)
padding 8px 0 0 0 padding 8px 0 0 0
height 180px height 180px
border-radius 4px border-radius 4px
@ -308,10 +308,16 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
text-align center text-align center
word-break break-all word-break break-all
color #444 color isDark ? #fff : #444
overflow hidden overflow hidden
> .ext > .ext
opacity 0.5 opacity 0.5
.root.file[data-darkmode]
root(true)
.root.file:not([data-darkmode])
root(false)
</style> </style>

14
src/client/app/desktop/views/components/drive.vue
View file

@ -577,7 +577,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-drive root(isDark)
> nav > nav
display block display block
@ -585,9 +585,8 @@ export default Vue.extend({
width 100% width 100%
overflow auto overflow auto
font-size 0.9em font-size 0.9em
color #555 color isDark ? #d2d9dc : #555
background #fff background isDark ? #282c37 : #fff
//border-bottom 1px solid #dfdfdf
box-shadow 0 1px 0 rgba(0, 0, 0, 0.05) box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
&, * &, *
@ -665,6 +664,7 @@ export default Vue.extend({
padding 8px padding 8px
height calc(100% - 38px) height calc(100% - 38px)
overflow auto overflow auto
background isDark ? #191b22 : #fff
&, * &, *
user-select none user-select none
@ -770,4 +770,10 @@ export default Vue.extend({
> input > input
display none display none
.mk-drive[data-darkmode]
root(true)
.mk-drive:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/desktop/views/components/follow-button.vue
View file

@ -94,7 +94,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-follow-button root(isDark)
display block display block
cursor pointer cursor pointer
padding 0 padding 0
@ -121,17 +121,17 @@ export default Vue.extend({
border-radius 8px border-radius 8px
&.follow &.follow
color #888 color isDark ? #fff : #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2 border solid 1px isDark ? #1c2023 : #e2e2e2
&:hover &:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%) background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc border-color isDark ? #151a1d : #dcdcdc
&:active &:active
background #ececec background isDark ? #22262f : #ececec
border-color #dcdcdc border-color isDark ? #151a1d : #dcdcdc
&.unfollow &.unfollow
color $theme-color-foreground color $theme-color-foreground
@ -161,4 +161,10 @@ export default Vue.extend({
i i
margin-right 8px margin-right 8px
.mk-follow-button[data-darkmode]
root(true)
.mk-follow-button:not([data-darkmode])
root(false)
</style> </style>

21
src/client/app/desktop/views/components/note-preview.vue
View file

@ -33,19 +33,14 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-note-preview root(isDark)
font-size 0.9em font-size 0.9em
background #fff
&:after &:after
content "" content ""
display block display block
clear both clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor > .avatar-anchor
display block display block
float left float left
@ -70,7 +65,7 @@ export default Vue.extend({
> .name > .name
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 0 padding 0
color #607073 color isDark ? #fff : #607073
font-size 1em font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
@ -81,11 +76,11 @@ export default Vue.extend({
> .username > .username
margin 0 .5em 0 0 margin 0 .5em 0 0
color #d1d8da color isDark ? #606984 : #d1d8da
> .time > .time
margin-left auto margin-left auto
color #b2b8bb color isDark ? #606984 : #b2b8bb
> .body > .body
@ -94,6 +89,12 @@ export default Vue.extend({
margin 0 margin 0
padding 0 padding 0
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #959ba7 : #717171
.mk-note-preview[data-darkmode]
root(true)
.mk-note-preview:not([data-darkmode])
root(false)
</style> </style>

20
src/client/app/desktop/views/components/notes.note.sub.vue
View file

@ -33,7 +33,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.sub root(isDark)
margin 0 margin 0
padding 16px padding 16px
font-size 0.9em font-size 0.9em
@ -43,10 +43,6 @@ export default Vue.extend({
display block display block
clear both clear both
&:hover
> .main > footer > button
color #888
> .avatar-anchor > .avatar-anchor
display block display block
float left float left
@ -75,7 +71,7 @@ export default Vue.extend({
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color #607073 color isDark ? #fff : #607073
font-size 1em font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
@ -86,11 +82,11 @@ export default Vue.extend({
> .username > .username
margin 0 .5em 0 0 margin 0 .5em 0 0
color #d1d8da color isDark ? #606984 : #d1d8da
> .created-at > .created-at
margin-left auto margin-left auto
color #b2b8bb color isDark ? #606984 : #b2b8bb
> .body > .body
max-height 128px max-height 128px
@ -101,10 +97,16 @@ export default Vue.extend({
margin 0 margin 0
padding 0 padding 0
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #959ba7 : #717171
pre pre
max-height 120px max-height 120px
font-size 80% font-size 80%
.sub[data-darkmode]
root(true)
.sub:not([data-darkmode])
root(false)
</style> </style>

5
src/client/app/desktop/views/components/notes.note.vue
View file

@ -297,6 +297,7 @@ root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&[data-round]
&:first-child &:first-child
border-top-left-radius 6px border-top-left-radius 6px
border-top-right-radius 6px border-top-right-radius 6px
@ -324,7 +325,7 @@ root(isDark)
> .renote > .renote
color #9dbb00 color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%) background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p > p
margin 0 margin 0
@ -434,7 +435,7 @@ root(isDark)
> .mobile > .mobile
margin-right 8px margin-right 8px
color #ccc color isDark ? #606984 : #ccc
> .app > .app
margin-right 8px margin-right 8px

22
src/client/app/desktop/views/components/notifications.vue
View file

@ -185,14 +185,14 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notifications root(isDark)
> .notifications > .notifications
> .notification > .notification
margin 0 margin 0
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 0.9em font-size 0.9em
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
&:last-child &:last-child
border-bottom none border-bottom none
@ -203,7 +203,7 @@ export default Vue.extend({
top 16px top 16px
right 12px right 12px
vertical-align top vertical-align top
color rgba(0, 0, 0, 0.6) color isDark ? #606984 : rgba(0, 0, 0, 0.6)
font-size small font-size small
&:after &:after
@ -238,10 +238,10 @@ export default Vue.extend({
margin-right 4px margin-right 4px
.note-preview .note-preview
color rgba(0, 0, 0, 0.7) color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
.note-ref .note-ref
color rgba(0, 0, 0, 0.7) color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
[data-fa] [data-fa]
font-size 1em font-size 1em
@ -268,9 +268,9 @@ export default Vue.extend({
line-height 32px line-height 32px
text-align center text-align center
font-size 0.8em font-size 0.8em
color #aaa color isDark ? #666b79 : #aaa
background #fdfdfd background isDark ? #242731 : #fdfdfd
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
span span
margin 0 16px margin 0 16px
@ -312,4 +312,10 @@ export default Vue.extend({
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style> </style>

2
src/client/app/desktop/views/components/post-form.vue
View file

@ -341,7 +341,7 @@ root(isDark)
> .medias > .medias
margin 0 margin 0
padding 0 padding 0
background lighten($theme-color, 98%) background isDark ? #181b23 : lighten($theme-color, 98%)
border solid 1px rgba($theme-color, 0.1) border solid 1px rgba($theme-color, 0.1)
border-top none border-top none
border-radius 0 0 4px 4px border-radius 0 0 4px 4px

55
src/client/app/desktop/views/components/renote-form.vue
View file

@ -4,8 +4,8 @@
<template v-if="!quote"> <template v-if="!quote">
<footer> <footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a> <a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
<button class="cancel" @click="cancel">%i18n:@cancel%</button> <button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button> <button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
</footer> </footer>
</template> </template>
<template v-if="quote"> <template v-if="quote">
@ -59,14 +59,14 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-renote-form root(isDark)
> .mk-note-preview > .mk-note-preview
margin 16px 22px margin 16px 22px
> footer > footer
height 72px height 72px
background lighten($theme-color, 95%) background isDark ? #313543 : lighten($theme-color, 95%)
> .quote > .quote
position absolute position absolute
@ -78,54 +78,19 @@ export default Vue.extend({
display block display block
position absolute position absolute
bottom 16px bottom 16px
cursor pointer
padding 0
margin 0
width 120px width 120px
height 40px height 40px
font-size 1em
outline none
border-radius 4px
&:focus &.cancel
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border-radius 8px
> .cancel
right 148px right 148px
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
&:hover &.ok
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
&:active
background #ececec
border-color #dcdcdc
> .ok
right 16px right 16px
font-weight bold
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:hover .mk-renote-form[data-darkmode]
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%) root(true)
border-color $theme-color
&:active .mk-renote-form:not([data-darkmode])
background $theme-color root(false)
border-color $theme-color
</style> </style>

131
src/client/app/desktop/views/components/repost-form.vue
View file

@ -1,131 +0,0 @@
<template>
<div class="mk-renote-form">
<mk-note-preview :note="note"/>
<template v-if="!quote">
<footer>
<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!desktop.tags.mk-renote-form.reposting%' : '%i18n:!desktop.tags.mk-renote-form.renote%' }}</button>
</footer>
</template>
<template v-if="quote">
<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['note'],
data() {
return {
wait: false,
quote: false
};
},
methods: {
ok() {
this.wait = true;
(this as any).api('notes/create', {
renoteId: this.note.id
}).then(data => {
this.$emit('posted');
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.success%');
}).catch(err => {
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.failure%');
}).then(() => {
this.wait = false;
});
},
cancel() {
this.$emit('canceled');
},
onQuote() {
this.quote = true;
this.$nextTick(() => {
(this.$refs.form as any).focus();
});
},
onChildFormPosted() {
this.$emit('posted');
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-renote-form
> .mk-note-preview
margin 16px 22px
> footer
height 72px
background lighten($theme-color, 95%)
> .quote
position absolute
bottom 16px
left 28px
line-height 40px
button
display block
position absolute
bottom 16px
cursor pointer
padding 0
margin 0
width 120px
height 40px
font-size 1em
outline none
border-radius 4px
&:focus
&:after
content ""
pointer-events none
position absolute
top -5px
right -5px
bottom -5px
left -5px
border 2px solid rgba($theme-color, 0.3)
border-radius 8px
> .cancel
right 148px
color #888
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px #e2e2e2
&:hover
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
border-color #dcdcdc
&:active
background #ececec
border-color #dcdcdc
> .ok
right 16px
font-weight bold
color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%)
&:hover
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
border-color $theme-color
&:active
background $theme-color
border-color $theme-color
</style>

2
src/client/app/desktop/views/components/settings.api.vue
View file

@ -29,8 +29,6 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.root.api .root.api
color #4a535a
code code
display inline-block display inline-block
padding 4px 6px padding 4px 6px

4
src/client/app/desktop/views/components/settings.vue
View file

@ -434,8 +434,8 @@ root(isDark)
margin 0 0 1em 0 margin 0 0 1em 0
padding 0 0 8px 0 padding 0 0 8px 0
font-size 1em font-size 1em
color #555 color isDark ? #e3e7ea : #555
border-bottom solid 1px #eee border-bottom solid 1px isDark ? #1c2023 : #eee
> .web > .web
> .div > .div

52
src/client/app/desktop/views/components/ui.header.account.vue
View file

@ -8,23 +8,28 @@
<div class="menu" v-if="isOpen"> <div class="menu" v-if="isOpen">
<ul> <ul>
<li> <li>
<router-link :to="`/@${ os.i.username }`">%fa:user%%i18n:@profile%%fa:angle-right%</router-link> <router-link :to="`/@${ os.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
</li> </li>
<li @click="drive"> <li @click="drive">
<p>%fa:cloud%%i18n:@drive%%fa:angle-right%</p> <p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<a href="/i/customize-home">%fa:wrench%%i18n:@customize%%fa:angle-right%</a> <a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
</li> </li>
<li @click="settings"> <li @click="settings">
<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p> <p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
</li> </li>
</ul> </ul>
<ul> <ul>
<li @click="signout"> <li @click="signout">
<p>%fa:power-off%%i18n:@signout%%fa:angle-right%</p> <p>%fa:power-off%<span>%i18n:@signout%</span></p>
</li>
</ul>
<ul>
<li @click="dark">
<p><span>%i18n:@dark%</span><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
</li> </li>
</ul> </ul>
</div> </div>
@ -78,6 +83,12 @@ export default Vue.extend({
}, },
signout() { signout() {
(this as any).os.signout(); (this as any).os.signout();
},
dark() {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: !(this as any)._darkmode_
});
} }
} }
}); });
@ -86,7 +97,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.account root(isDark)
> .header > .header
display block display block
margin 0 margin 0
@ -101,13 +112,13 @@ export default Vue.extend({
&:hover &:hover
&[data-active='true'] &[data-active='true']
color darken(#9eaba8, 20%) color isDark ? #fff : darken(#9eaba8, 20%)
> .avatar > .avatar
filter saturate(150%) filter saturate(150%)
&:active &:active
color darken(#9eaba8, 30%) color isDark ? #fff : darken(#9eaba8, 30%)
> .username > .username
display block display block
@ -134,13 +145,14 @@ export default Vue.extend({
transition filter 100ms ease transition filter 100ms ease
> .menu > .menu
$bgcolor = isDark ? #282c37 : #fff
display block display block
position absolute position absolute
top 56px top 56px
right -2px right -2px
width 230px width 230px
font-size 0.8em font-size 0.8em
background #fff background $bgcolor
border-radius 4px border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
@ -165,7 +177,7 @@ export default Vue.extend({
right 12px right 12px
border-top solid 14px transparent border-top solid 14px transparent
border-right solid 14px transparent border-right solid 14px transparent
border-bottom solid 14px #fff border-bottom solid 14px $bgcolor
border-left solid 14px transparent border-left solid 14px transparent
ul ul
@ -176,7 +188,7 @@ export default Vue.extend({
& + ul & + ul
padding-top 10px padding-top 10px
border-top solid 1px #eee border-top solid 1px isDark ? #1c2023 : #eee
> li > li
display block display block
@ -190,16 +202,20 @@ export default Vue.extend({
padding 0 28px padding 0 28px
margin 0 margin 0
line-height 40px line-height 40px
color #868C8C color isDark ? #c8cece : #868C8C
cursor pointer cursor pointer
* *
pointer-events none pointer-events none
> [data-fa]:first-of-type > span:first-child
margin-right 6px padding-left 16px
> [data-fa]:last-of-type > [data-fa]:first-child
margin-right 6px
width 16px
> [data-fa]:last-child
display block display block
position absolute position absolute
top 0 top 0
@ -222,4 +238,10 @@ export default Vue.extend({
transform-origin: center -16px; transform-origin: center -16px;
} }
.account[data-darkmode]
root(true)
.account:not([data-darkmode])
root(false)
</style> </style>

17
src/client/app/desktop/views/components/ui.header.notifications.vue
View file

@ -84,7 +84,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.notifications root(isDark)
> button > button
display block display block
@ -101,10 +101,10 @@ export default Vue.extend({
&:hover &:hover
&[data-active='true'] &[data-active='true']
color darken(#9eaba8, 20%) color isDark ? #fff : darken(#9eaba8, 20%)
&:active &:active
color darken(#9eaba8, 30%) color isDark ? #fff : darken(#9eaba8, 30%)
> [data-fa].bell > [data-fa].bell
font-size 1.2em font-size 1.2em
@ -117,12 +117,13 @@ export default Vue.extend({
color $theme-color color $theme-color
> .pop > .pop
$bgcolor = isDark ? #282c37 : #fff
display block display block
position absolute position absolute
top 56px top 56px
right -72px right -72px
width 300px width 300px
background #fff background $bgcolor
border-radius 4px border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
@ -147,7 +148,7 @@ export default Vue.extend({
right 74px right 74px
border-top solid 14px transparent border-top solid 14px transparent
border-right solid 14px transparent border-right solid 14px transparent
border-bottom solid 14px #fff border-bottom solid 14px $bgcolor
border-left solid 14px transparent border-left solid 14px transparent
> .mk-notifications > .mk-notifications
@ -155,4 +156,10 @@ export default Vue.extend({
font-size 1rem font-size 1rem
overflow auto overflow auto
.notifications[data-darkmode]
root(true)
.notifications:not([data-darkmode])
root(false)
</style> </style>

23
src/client/app/desktop/views/widgets/messaging.vue
View file

@ -1,7 +1,10 @@
<template> <template>
<div class="mkw-messaging"> <div class="mkw-messaging">
<p class="title" v-if="props.design == 0">%fa:comments%%i18n:@title%</p> <mk-widget-container :show-header="props.design == 0">
<template slot="header">%fa:comments%%i18n:@title%</template>
<mk-messaging ref="index" compact @navigate="navigate"/> <mk-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container>
</div> </div>
</template> </template>
@ -34,24 +37,6 @@ export default define({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mkw-messaging .mkw-messaging
overflow hidden
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
z-index 2
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
margin-right 4px
> .mk-messaging > .mk-messaging
max-height 250px max-height 250px
overflow auto overflow auto

53
src/client/app/desktop/views/widgets/trends.vue
View file

@ -1,15 +1,18 @@
<template> <template>
<div class="mkw-trends"> <div class="mkw-trends">
<template v-if="!props.compact"> <mk-widget-container :show-header="!props.compact">
<p class="title">%fa:fire%%i18n:@title%</p> <template slot="header">%fa:fire%%i18n:@title%</template>
<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button> <button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
</template>
<div class="mkw-trends--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<div class="note" v-else-if="note != null"> <div class="note" v-else-if="note != null">
<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p> <p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p> <p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
</div> </div>
<p class="empty" v-else>%i18n:@nothing%</p> <p class="empty" v-else>%i18n:@nothing%</p>
</div>
</mk-widget-container>
</div> </div>
</template> </template>
@ -63,40 +66,8 @@ export default define({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mkw-trends root(isDark)
background #fff .mkw-trends--body
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
border-bottom solid 1px #eee
> [data-fa]
margin-right 4px
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color #ccc
&:hover
color #aaa
&:active
color #999
> .note > .note
padding 16px padding 16px
font-size 12px font-size 12px
@ -126,4 +97,10 @@ export default define({
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mkw-trends[data-darkmode]
root(true)
.mkw-trends:not([data-darkmode])
root(false)
</style> </style>

7
src/client/app/desktop/views/widgets/users.vue
View file

@ -4,7 +4,7 @@
<template slot="header">%fa:users%%i18n:@title%</template> <template slot="header">%fa:users%%i18n:@title%</template>
<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button> <button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
<div class="mkw-users--body" :data-darkmode="_darkmode_"> <div class="mkw-users--body">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<template v-else-if="users.length != 0"> <template v-else-if="users.length != 0">
<div class="user" v-for="_user in users"> <div class="user" v-for="_user in users">
@ -75,6 +75,7 @@ export default define({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
.mkw-users--body
> .user > .user
padding 16px padding 16px
border-bottom solid 1px isDark ? #1c2023 : #eee border-bottom solid 1px isDark ? #1c2023 : #eee
@ -137,10 +138,10 @@ root(isDark)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
.mkw-users--body[data-darkmode] .mkw-users[data-darkmode]
root(true) root(true)
.mkw-users--body:not([data-darkmode]) .mkw-users:not([data-darkmode])
root(false) root(false)
</style> </style>