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