wip

src/client/app/common/views/components/messaging-room.message.vue

@@ -59,9 +59,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.message
-
-root(isDark)
 	$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 var(--messagingRoomMessageFg)
-							color #fff
 
 			> 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>

src/client/app/common/views/components/messaging-room.vue

@@ -262,14 +262,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.mk-messaging-room
-
-root(isDark)
 	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
+		> .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
-
 		> .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)
+				color var(--messagingRoomDateDividerText)
-				background isDark ? #191b22 : #fff
+				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>

src/client/app/mobile/views/components/ui.header.vue

@@ -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
 

src/client/theme/dark.json

@@ -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",

src/client/theme/halloween.json

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

src/client/theme/light.json

@@ -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",