This commit is contained in:
syuilo 2018-09-27 21:43:11 +09:00
parent 7a0a8b5d2b
commit b032f78769
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
6 changed files with 30 additions and 103 deletions

View File

@ -59,9 +59,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.message
$me-balloon-color = var(--primary)
padding 10px 12px 10px 12px
@ -179,7 +177,7 @@ root(isDark)
display block
margin 2px 0 0 0
font-size 10px
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
color var(--messagingRoomMessageInfo)
> [data-fa]
margin-left 4px
@ -192,7 +190,7 @@ root(isDark)
padding-left 66px
> .balloon
$color = isDark ? #2d3338 : #eee
$color = var(--messagingRoomMessageBg)
float left
background $color
@ -208,8 +206,7 @@ root(isDark)
> .content
> .text
if isDark
color #fff
color var(--messagingRoomMessageFg)
> footer
text-align left
@ -250,18 +247,9 @@ root(isDark)
> .read
user-select none
margin 0 4px 0 0
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px
&[data-is-deleted]
> .balloon
opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</style>

View File

@ -262,14 +262,12 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-messaging-room
display flex
flex 1
flex-direction column
height 100%
background isDark ? #191b22 : #fff
background var(--messagingRoomBg)
> .body
width 100%
@ -277,24 +275,15 @@ root(isDark)
margin 0 auto
flex 1
> .init
width 100%
margin 0
padding 16px 8px 8px 8px
text-align center
font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4)
[data-fa]
margin-right 4px
> .init,
> .empty
width 100%
margin 0
padding 16px 8px 8px 8px
text-align center
font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4)
color var(--messagingRoomInfo)
opacity 0.5
[data-fa]
margin-right 4px
@ -305,7 +294,8 @@ root(isDark)
padding 16px
text-align center
font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4)
color var(--messagingRoomInfo)
opacity 0.5
[data-fa]
margin-right 4px
@ -349,7 +339,7 @@ root(isDark)
left 0
right 0
margin 0 auto
background rgba(isDark ? #fff : #000, 0.1)
background var(--messagingRoomDateDividerLine)
> span
display inline-block
@ -357,8 +347,8 @@ root(isDark)
padding 0 16px
//font-weight bold
line-height 32px
color rgba(isDark ? #fff : #000, 0.3)
background isDark ? #191b22 : #fff
color var(--messagingRoomDateDividerText)
background var(--messagingRoomBg)
> footer
position -webkit-sticky
@ -410,10 +400,4 @@ root(isDark)
transition opacity 0.5s
opacity 0
.mk-messaging-room[data-darkmode]
root(true)
.mk-messaging-room:not([data-darkmode])
root(false)
</style>

View File

@ -4,7 +4,6 @@
<mk-special-message/>
<div class="main" ref="main">
<div class="backdrop"></div>
<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
<div class="content" ref="mainContainer">
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@ -50,53 +49,6 @@ export default Vue.extend({
this.connection.on('reversi_invited', this.onReversiInvited);
this.connection.on('reversi_no_invites', this.onReversiNoInvites);
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
const isHisasiburi = ago >= 3600;
this.$store.state.i.lastUsedAt = new Date();
if (isHisasiburi) {
(this.$refs.welcomeback as any).style.display = 'block';
(this.$refs.main as any).style.overflow = 'hidden';
anime({
targets: this.$refs.welcomeback,
top: '0',
opacity: 1,
delay: 1000,
duration: 500,
easing: 'easeOutQuad'
});
anime({
targets: this.$refs.mainContainer,
opacity: 0,
delay: 1000,
duration: 500,
easing: 'easeOutQuad'
});
setTimeout(() => {
anime({
targets: this.$refs.welcomeback,
top: '-48px',
opacity: 0,
duration: 500,
complete: () => {
(this.$refs.welcomeback as any).style.display = 'none';
(this.$refs.main as any).style.overflow = 'initial';
},
easing: 'easeInQuad'
});
anime({
targets: this.$refs.mainContainer,
opacity: 1,
duration: 500,
easing: 'easeInQuad'
});
}, 2500);
}
}
},
beforeDestroy() {
@ -159,18 +111,6 @@ root(isDark)
//background-color rgba(#1b2023, 0.75)
background-color isDark ? #313543 : #595f6f
> p
display none
position absolute
z-index 1002
top $height
width 100%
line-height $height
margin 0
text-align center
color #fff
opacity 0
> .content
z-index 1001

View File

@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
"messagingRoomBg": "@bg",
"messagingRoomInfo": "#fff",
"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
"messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
"messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
"messagingRoomMessageBg": "$secondary",
"messagingRoomMessageFg": "#fff",
"desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff",

View File

@ -11,7 +11,6 @@
"text": "#b1bee3"
}
},
"bg": "#1b1a35",
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"desktopHeaderBg": "#36314e"

View File

@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
"messagingRoomBg": "#fff",
"messagingRoomInfo": "#000",
"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
"messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
"messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
"messagingRoomMessageBg": "#eee",
"messagingRoomMessageFg": "#333",
"desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88",