[wip] darkmode

This commit is contained in:
syuilo
2018-04-20 03:41:24 +09:00
parent d4a2c6cef4
commit f2fea7f3cd
11 changed files with 130 additions and 44 deletions

View File

@ -291,11 +291,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.note
root(isDark)
margin 0
padding 0
background #fff
border-bottom solid 1px #eaeaea
background isDark ? #282C37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child
border-top-left-radius 6px
@ -374,7 +374,7 @@ export default Vue.extend({
&:hover
> .main > footer > button
color #888
color isDark ? #707b97 : #888
> .avatar-anchor
display block
@ -407,7 +407,7 @@ export default Vue.extend({
margin 0 .5em 0 0
padding 0
overflow hidden
color #627079
color isDark ? #fff : #627079
font-size 1em
font-weight bold
text-decoration none
@ -426,7 +426,7 @@ export default Vue.extend({
> .username
margin 0 .5em 0 0
color #ccc
color isDark ? #606984 : #ccc
> .info
margin-left auto
@ -443,7 +443,7 @@ export default Vue.extend({
border-right solid 1px #eaeaea
> .created-at
color #c0c0c0
color isDark ? #606984 : #c0c0c0
> .body
@ -454,7 +454,7 @@ export default Vue.extend({
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
color isDark ? #fff : #717171
>>> .title
display block
@ -462,7 +462,7 @@ export default Vue.extend({
padding 4px
font-size 90%
text-align center
background #eef1f3
background isDark ? #2f3944 : #eef1f3
border-radius 4px
>>> .code
@ -471,12 +471,12 @@ export default Vue.extend({
>>> .quote
margin 8px
padding 6px 12px
color #aaa
border-left solid 3px #eee
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
> .reply
margin-right 8px
color #717171
color isDark ? #99abbf : #717171
> .rp
margin-left 4px
@ -547,13 +547,13 @@ export default Vue.extend({
padding 0 8px
line-height 32px
font-size 1em
color #ddd
color isDark ? #606984 : #ddd
background transparent
border none
cursor pointer
&:hover
color #666
color isDark ? #9198af : #666
> .count
display inline
@ -572,6 +572,12 @@ export default Vue.extend({
padding-top 4px
background rgba(0, 0, 0, 0.0125)
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>