From 9b3ee877a6a76984b7606e7d50b4b68630fc0d7b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Apr 2018 05:06:32 +0900
Subject: [PATCH] [wip] darkmode
---
.../app/desktop/views/components/post-form.vue | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index ebb0193088..db3dd480bb 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -281,10 +281,10 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
-.mk-post-form
+root(isDark)
display block
padding 16px
- background lighten($theme-color, 95%)
+ background isDark ? #282C37 : lighten($theme-color, 95%)
&:after
content ""
@@ -303,7 +303,7 @@ export default Vue.extend({
min-height calc(16px + 12px + 12px)
font-size 16px
color #333
- background #fff
+ background isDark ? #191d23 : #fff
outline none
border solid 1px rgba($theme-color, 0.1)
border-radius 4px
@@ -496,7 +496,7 @@ export default Vue.extend({
width 40px
height 40px
font-size 1em
- color rgba($theme-color, 0.5)
+ color isDark ? $theme-color : rgba($theme-color, 0.5)
background transparent
outline none
border solid 1px transparent
@@ -504,11 +504,11 @@ export default Vue.extend({
&:hover
background transparent
- border-color rgba($theme-color, 0.3)
+ border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
&:active
color rgba($theme-color, 0.6)
- background linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
+ background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
border-color rgba($theme-color, 0.5)
box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset
@@ -533,4 +533,10 @@ export default Vue.extend({
border dashed 2px rgba($theme-color, 0.5)
pointer-events none
+.mk-post-form[data-darkmode]
+ root(true)
+
+.mk-post-form:not([data-darkmode])
+ root(false)
+
</style>