Darken
This commit is contained in:
parent
89461c598f
commit
f565e60bcf
|
@ -197,7 +197,7 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.mk-messaging-form
|
root(isDark)
|
||||||
> textarea
|
> textarea
|
||||||
cursor auto
|
cursor auto
|
||||||
display block
|
display block
|
||||||
|
@ -209,10 +209,10 @@ export default Vue.extend({
|
||||||
padding 8px
|
padding 8px
|
||||||
resize none
|
resize none
|
||||||
font-size 1em
|
font-size 1em
|
||||||
color #000
|
color isDark ? #fff : #000
|
||||||
outline none
|
outline none
|
||||||
border none
|
border none
|
||||||
border-top solid 1px #eee
|
border-top solid 1px isDark ? #4b5056 : #eee
|
||||||
border-radius 0
|
border-radius 0
|
||||||
box-shadow none
|
box-shadow none
|
||||||
background transparent
|
background transparent
|
||||||
|
@ -302,4 +302,10 @@ export default Vue.extend({
|
||||||
input[type=file]
|
input[type=file]
|
||||||
display none
|
display none
|
||||||
|
|
||||||
|
.mk-messaging-form[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.mk-messaging-form:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -59,8 +59,10 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.message
|
@import '~const.styl'
|
||||||
$me-balloon-color = #23A7B6
|
|
||||||
|
root(isDark)
|
||||||
|
$me-balloon-color = $theme-color
|
||||||
|
|
||||||
padding 10px 12px 10px 12px
|
padding 10px 12px 10px 12px
|
||||||
background-color transparent
|
background-color transparent
|
||||||
|
@ -126,7 +128,7 @@ export default Vue.extend({
|
||||||
bottom -4px
|
bottom -4px
|
||||||
left -12px
|
left -12px
|
||||||
margin 0
|
margin 0
|
||||||
color rgba(#000, 0.5)
|
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
|
||||||
font-size 11px
|
font-size 11px
|
||||||
|
|
||||||
> .content
|
> .content
|
||||||
|
@ -187,7 +189,7 @@ export default Vue.extend({
|
||||||
display block
|
display block
|
||||||
margin 2px 0 0 0
|
margin 2px 0 0 0
|
||||||
font-size 10px
|
font-size 10px
|
||||||
color rgba(#000, 0.4)
|
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
|
||||||
|
|
||||||
> [data-fa]
|
> [data-fa]
|
||||||
margin-left 4px
|
margin-left 4px
|
||||||
|
@ -200,8 +202,9 @@ export default Vue.extend({
|
||||||
padding-left 66px
|
padding-left 66px
|
||||||
|
|
||||||
> .balloon
|
> .balloon
|
||||||
|
$color = isDark ? #2d3338 : #eee
|
||||||
float left
|
float left
|
||||||
background #eee
|
background $color
|
||||||
|
|
||||||
&[data-no-text]
|
&[data-no-text]
|
||||||
background transparent
|
background transparent
|
||||||
|
@ -209,10 +212,15 @@ export default Vue.extend({
|
||||||
&:not([data-no-text]):before
|
&:not([data-no-text]):before
|
||||||
left -14px
|
left -14px
|
||||||
border-top solid 8px transparent
|
border-top solid 8px transparent
|
||||||
border-right solid 8px #eee
|
border-right solid 8px $color
|
||||||
border-bottom solid 8px transparent
|
border-bottom solid 8px transparent
|
||||||
border-left solid 8px transparent
|
border-left solid 8px transparent
|
||||||
|
|
||||||
|
> .content
|
||||||
|
> .text
|
||||||
|
if isDark
|
||||||
|
color #fff
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
text-align left
|
text-align left
|
||||||
|
|
||||||
|
@ -241,7 +249,7 @@ export default Vue.extend({
|
||||||
> .content
|
> .content
|
||||||
|
|
||||||
> p.is-deleted
|
> p.is-deleted
|
||||||
color rgba(255, 255, 255, 0.5)
|
color rgba(#fff, 0.5)
|
||||||
|
|
||||||
> .text >>>
|
> .text >>>
|
||||||
&, *
|
&, *
|
||||||
|
@ -254,4 +262,10 @@ export default Vue.extend({
|
||||||
> .baloon
|
> .baloon
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
|
||||||
|
.message[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.message:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -244,11 +244,12 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.mk-messaging-room
|
root(isDark)
|
||||||
display flex
|
display flex
|
||||||
flex 1
|
flex 1
|
||||||
flex-direction column
|
flex-direction column
|
||||||
height 100%
|
height 100%
|
||||||
|
background isDark ? #191b22 : #fff
|
||||||
|
|
||||||
> .stream
|
> .stream
|
||||||
width 100%
|
width 100%
|
||||||
|
@ -273,7 +274,7 @@ export default Vue.extend({
|
||||||
padding 16px 8px 8px 8px
|
padding 16px 8px 8px 8px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(#000, 0.4)
|
color rgba(isDark ? #fff : #000, 0.4)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -284,7 +285,7 @@ export default Vue.extend({
|
||||||
padding 16px
|
padding 16px
|
||||||
text-align center
|
text-align center
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
color rgba(#000, 0.4)
|
color rgba(isDark ? #fff : #000, 0.4)
|
||||||
|
|
||||||
[data-fa]
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
@ -328,7 +329,7 @@ export default Vue.extend({
|
||||||
left 0
|
left 0
|
||||||
right 0
|
right 0
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
background rgba(#000, 0.1)
|
background rgba(isDark ? #fff : #000, 0.1)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display inline-block
|
display inline-block
|
||||||
|
@ -337,7 +338,7 @@ export default Vue.extend({
|
||||||
//font-weight bold
|
//font-weight bold
|
||||||
line-height 32px
|
line-height 32px
|
||||||
color rgba(#000, 0.3)
|
color rgba(#000, 0.3)
|
||||||
background #fff
|
background isDark ? #191b22 : #fff
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
position -webkit-sticky
|
position -webkit-sticky
|
||||||
|
@ -348,7 +349,7 @@ export default Vue.extend({
|
||||||
max-width 600px
|
max-width 600px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0
|
padding 0
|
||||||
background rgba(255, 255, 255, 0.95)
|
background rgba(isDark ? #282c37 : #fff, 0.95)
|
||||||
background-clip content-box
|
background-clip content-box
|
||||||
|
|
||||||
> .new-message
|
> .new-message
|
||||||
|
@ -389,4 +390,10 @@ export default Vue.extend({
|
||||||
transition opacity 0.5s
|
transition opacity 0.5s
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
|
.mk-messaging-room[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.mk-messaging-room:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -16,16 +16,29 @@ export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fetching: true,
|
fetching: true,
|
||||||
user: null
|
user: null,
|
||||||
|
unwatchDarkmode: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: 'fetch'
|
$route: 'fetch'
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
document.documentElement.style.background = '#fff';
|
const applyBg = v =>
|
||||||
|
document.documentElement.style.setProperty('background', v ? '#191b22' : '#fff', 'important');
|
||||||
|
|
||||||
|
this.$nextTick(() => applyBg(this.$store.state.device.darkmode));
|
||||||
|
|
||||||
|
this.unwatchDarkmode = this.$store.watch(s => {
|
||||||
|
return s.device.darkmode;
|
||||||
|
}, applyBg);
|
||||||
|
|
||||||
this.fetch();
|
this.fetch();
|
||||||
},
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
document.documentElement.style.removeProperty('background');
|
||||||
|
this.unwatchDarkmode();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetch() {
|
fetch() {
|
||||||
this.fetching = true;
|
this.fetching = true;
|
||||||
|
|
Loading…
Reference in New Issue