From 5ace37e3dbb4c22585c28dc6eba230092ad9033b Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 20 Apr 2018 04:51:04 +0900 Subject: [PATCH] [wip] darkmode --- .../app/common/views/components/switch.vue | 25 ++++--- .../app/common/views/widgets/calendar.vue | 16 +++-- src/client/app/desktop/ui.styl | 14 ++++ .../app/desktop/views/components/calendar.vue | 12 +++- .../app/desktop/views/components/settings.vue | 22 ++++--- .../views/components/ui.header.nav.vue | 12 +++- .../app/desktop/views/widgets/polls.vue | 66 ++++++------------- .../app/desktop/views/widgets/profile.vue | 16 +++-- 8 files changed, 106 insertions(+), 77 deletions(-) diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue index 19a4adc3de..32caab638a 100644 --- a/src/client/app/common/views/components/switch.vue +++ b/src/client/app/common/views/components/switch.vue @@ -87,7 +87,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-switch +root(isDark) display flex margin 12px 0 cursor pointer @@ -121,11 +121,12 @@ export default Vue.extend({ &:hover > .label > span - color #2e3338 + color isDark ? #fff : #2e3338 > .button - background #ced2da - border-color #ced2da + $color = isDark ? #15181d : #ced2da + background $color + border-color $color > input position absolute @@ -147,14 +148,16 @@ export default Vue.extend({ border-radius 14px > .button + $color = isDark ? #1c1f25 : #dcdfe6 + display inline-block margin 0 width 40px min-width 40px height 20px min-height 20px - background #dcdfe6 - border 1px solid #dcdfe6 + background $color + border 1px solid $color outline none border-radius 10px transition inherit @@ -179,12 +182,18 @@ export default Vue.extend({ > span display block line-height 20px - color #4a535a + color isDark ? #c4ccd2 : #4a535a transition inherit > p margin 0 //font-size 90% - color #9daab3 + color isDark ? #78858e : #9daab3 + +.mk-switch[data-darkmode] + root(true) + +.mk-switch:not([data-darkmode]) + root(false) </style> diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue index 03f69a7597..b3b5b3583a 100644 --- a/src/client/app/common/views/widgets/calendar.vue +++ b/src/client/app/common/views/widgets/calendar.vue @@ -109,10 +109,10 @@ export default define({ <style lang="stylus" scoped> @import '~const.styl' -.mkw-calendar +root(isDark) padding 16px 0 - color #777 - background #fff + color isDark ? #c5ced6 :#777 + background isDark ? #282C37 : #fff border solid 1px rgba(0, 0, 0, 0.075) border-radius 6px @@ -171,7 +171,7 @@ export default define({ margin 0 0 2px 0 font-size 12px line-height 18px - color #888 + color isDark ? #7a8692 : #888 > b margin-left 2px @@ -179,7 +179,7 @@ export default define({ > .meter width 100% overflow hidden - background #eee + background isDark ? #1c1f25 : #eee border-radius 8px > .val @@ -198,4 +198,10 @@ export default define({ > .meter > .val background #41ddde +.mkw-calendar[data-darkmode] + root(true) + +.mkw-calendar:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl index 5a8d1718e2..a54cafda68 100644 --- a/src/client/app/desktop/ui.styl +++ b/src/client/app/desktop/ui.styl @@ -65,6 +65,20 @@ button.ui background $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[type='text'].ui input[type='password'].ui diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue index a99b48d195..483a4c718b 100644 --- a/src/client/app/desktop/views/components/calendar.vue +++ b/src/client/app/desktop/views/components/calendar.vue @@ -133,9 +133,9 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-calendar - color #777 - background #fff +root(isDark) + color isDark ? #c5ced6 : #777 + background isDark ? #282C37 : #fff border solid 1px rgba(0, 0, 0, 0.075) border-radius 6px @@ -249,4 +249,10 @@ export default Vue.extend({ &:active > div background darken($theme-color, 10%) +.mk-calendar[data-darkmode] + root(true) + +.mk-calendar:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index ffa82b9e02..b2dc8a526f 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -374,7 +374,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-settings +root(isDark) display flex width 100% height 100% @@ -385,13 +385,13 @@ export default Vue.extend({ height 100% padding 16px 0 0 0 overflow auto - border-right solid 1px #ddd + border-right solid 1px isDark ? #1c2023 : #ddd > p display block padding 10px 16px margin 0 - color #666 + color isDark ? #9aa2a7 : #666 cursor pointer user-select none transition margin-left 0.2s ease @@ -400,7 +400,7 @@ export default Vue.extend({ margin-right 4px &:hover - color #555 + color isDark ? #fff : #555 &.active margin-left 8px @@ -414,14 +414,14 @@ export default Vue.extend({ > section margin 32px - color #4a535a + color isDark ? #c4ccd2 : #4a535a > h1 margin 0 0 1em 0 padding 0 0 8px 0 font-size 1em - color #555 - border-bottom solid 1px #eee + color isDark ? #e3e7ea : #555 + border-bottom solid 1px isDark ? #1c2023 : #eee &, >>> * .ui.button.block @@ -439,7 +439,13 @@ export default Vue.extend({ > .web > .div - border-bottom solid 1px #eee + border-bottom solid 1px isDark ? #1c2023 : #eee margin 16px 0 +.mk-settings[data-darkmode] + root(true) + +.mk-settings:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue index 19f72a86d7..0800d96eb6 100644 --- a/src/client/app/desktop/views/components/ui.header.nav.vue +++ b/src/client/app/desktop/views/components/ui.header.nav.vue @@ -99,7 +99,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.nav +root(isDark) display inline-block margin 0 padding 0 @@ -131,7 +131,7 @@ export default Vue.extend({ padding 0 24px font-size 13px font-variant small-caps - color #9eaba8 + color isDark ? #b8c5ca : #9eaba8 text-decoration none transition none cursor pointer @@ -140,7 +140,7 @@ export default Vue.extend({ pointer-events none &:hover - color darken(#9eaba8, 20%) + color isDark ? #fff : darken(#9eaba8, 20%) text-decoration none > [data-fa]:first-child @@ -164,4 +164,10 @@ export default Vue.extend({ @media (max-width 700px) padding 0 12px +.nav[data-darkmode] + root(true) + +.nav:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue index 6cb1192c24..42b9c5f25f 100644 --- a/src/client/app/desktop/views/widgets/polls.vue +++ b/src/client/app/desktop/views/widgets/polls.vue @@ -1,16 +1,19 @@ <template> <div class="mkw-polls"> - <template v-if="!props.compact"> - <p class="title">%fa:chart-pie%%i18n:@title%</p> - <button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button> - </template> - <div class="poll" v-if="!fetching && poll != null"> - <p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p> - <p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p> - <mk-poll :note="poll"/> - </div> - <p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p> - <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> + <mk-widget-container :show-header="!props.compact"> + <template slot="header">%fa:chart-pie%%i18n:@title%</template> + <button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button> + + <div class="mkw-polls--body" :data-darkmode="_darkmode_"> + <div class="poll" v-if="!fetching && poll != null"> + <p v-if="poll.text"><router-link to="poll | notePage">{{ poll.text }}</router-link></p> + <p v-if="!poll.text"><router-link to="poll | notePage">%fa:link%</router-link></p> + <mk-poll :note="poll"/> + </div> + <p class="empty" v-if="!fetching && poll == null">%i18n:@nothing%</p> + <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> + </div> + </mk-widget-container> </div> </template> @@ -60,40 +63,7 @@ export default define({ </script> <style lang="stylus" scoped> -.mkw-polls - background #fff - 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 - +root(isDark) > .poll padding 16px font-size 12px @@ -120,4 +90,10 @@ export default define({ > [data-fa] margin-right 4px +.mkw-polls--body[data-darkmode] + root(true) + +.mkw-polls--body:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue index 1b4b11de3c..0046658b8e 100644 --- a/src/client/app/desktop/views/widgets/profile.vue +++ b/src/client/app/desktop/views/widgets/profile.vue @@ -42,9 +42,9 @@ export default define({ </script> <style lang="stylus" scoped> -.mkw-profile +root(isDark) overflow hidden - background #fff + background isDark ? #282c37 : #fff border solid 1px rgba(0, 0, 0, 0.075) border-radius 6px @@ -104,7 +104,7 @@ export default define({ width 58px height 58px margin 0 - border solid 3px #fff + border solid 3px isDark ? #282c37 : #fff border-radius 8px vertical-align bottom cursor pointer @@ -114,13 +114,19 @@ export default define({ margin 10px 0 0 84px line-height 16px font-weight bold - color #555 + color isDark ? #fff : #555 > .username display block margin 4px 0 8px 84px line-height 16px font-size 0.9em - color #999 + color isDark ? #606984 : #999 + +.mkw-profile[data-darkmode] + root(true) + +.mkw-profile:not([data-darkmode]) + root(false) </style>