forked from FoundKeyGang/FoundKey
[wip] darkmode
This commit is contained in:
parent
5ace37e3db
commit
9b3ee877a6
1 changed files with 12 additions and 6 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue