mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-02 08:48:11 +09:00
Code

[wip] darkmode

Browse Source
This commit is contained in:
syuilo 2018-04-20 05:06:32 +09:00
parent 5ace37e3db
commit 9b3ee877a6
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/client/app/desktop/views/components/post-form.vue
View File

@ -281,10 +281,10 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-post-form root(isDark)
display block display block
padding 16px padding 16px
background lighten($theme-color, 95%) background isDark ? #282C37 : lighten($theme-color, 95%)
&:after &:after
content "" content ""
@ -303,7 +303,7 @@ export default Vue.extend({
min-height calc(16px + 12px + 12px) min-height calc(16px + 12px + 12px)
font-size 16px font-size 16px
color #333 color #333
background #fff background isDark ? #191d23 : #fff
outline none outline none
border solid 1px rgba($theme-color, 0.1) border solid 1px rgba($theme-color, 0.1)
border-radius 4px border-radius 4px
@ -496,7 +496,7 @@ export default Vue.extend({
width 40px width 40px
height 40px height 40px
font-size 1em font-size 1em
color rgba($theme-color, 0.5) color isDark ? $theme-color : rgba($theme-color, 0.5)
background transparent background transparent
outline none outline none
border solid 1px transparent border solid 1px transparent
@ -504,11 +504,11 @@ export default Vue.extend({
&:hover &:hover
background transparent background transparent
border-color rgba($theme-color, 0.3) border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
&:active &:active
color rgba($theme-color, 0.6) 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) border-color rgba($theme-color, 0.5)
box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset 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) border dashed 2px rgba($theme-color, 0.5)
pointer-events none pointer-events none
.mk-post-form[data-darkmode]
root(true)
.mk-post-form:not([data-darkmode])
root(false)
</style> </style>