:art:

3 files changed, 125 insertions, 90 deletions

diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index d0976a32e1..afb8de4b2a 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -1,7 +1,5 @@
 <template>
 <div class="header" :data-is-dark-background="user.bannerUrl != null">
-	<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
-	<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 	<div class="banner-container" :style="style">
 		<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
 		<div class="fade"></div>
@@ -34,16 +32,16 @@ export default Vue.extend({
 	},
 	mounted() {
 		if (this.user.bannerUrl) {
-			window.addEventListener('load', this.onScroll);
-			window.addEventListener('scroll', this.onScroll, { passive: true });
-			window.addEventListener('resize', this.onScroll);
+			//window.addEventListener('load', this.onScroll);
+			//window.addEventListener('scroll', this.onScroll, { passive: true });
+			//window.addEventListener('resize', this.onScroll);
 		}
 	},
 	beforeDestroy() {
 		if (this.user.bannerUrl) {
-			window.removeEventListener('load', this.onScroll);
-			window.removeEventListener('scroll', this.onScroll);
-			window.removeEventListener('resize', this.onScroll);
+			//window.removeEventListener('load', this.onScroll);
+			//window.removeEventListener('scroll', this.onScroll);
+			//window.removeEventListener('resize', this.onScroll);
 		}
 	},
 	methods: {
@@ -80,25 +78,6 @@ root(isDark)
 	border-radius 6px
 	overflow hidden
 
-	> .is-suspended
-	> .is-remote
-		&.is-suspended
-			color #570808
-			background #ffdbdb
-
-		&.is-remote
-			color #573c08
-			background #fff0db
-
-		> p
-			margin 0 auto
-			padding 14px 16px
-			max-width 1200px
-			font-size 14px
-
-			> a
-				font-weight bold
-
 	&[data-is-dark-background]
 		> .banner-container
 			> .banner
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 812b5b4229..67987fcb94 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -1,9 +1,9 @@
 <template>
-<div class="timeline">
+<div class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
 	<header>
-		<span :data-active="mode == 'default'" @click="mode = 'default'">%i18n:@default%</span>
-		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%i18n:@with-replies%</span>
-		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%i18n:@with-media%</span>
+		<span :data-active="mode == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
+		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%fa:comments% %i18n:@with-replies%</span>
+		<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">%fa:images% %i18n:@with-media%</span>
 	</header>
 	<div class="loading" v-if="fetching">
 		<mk-ellipsis-icon/>
@@ -114,25 +114,44 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.timeline
-	background #fff
+root(isDark)
+	background isDark ? #282C37 : #fff
 
 	> header
-		padding 8px 16px
-		border-bottom solid 1px #eee
+		padding 0 8px
+		z-index 10
+		background isDark ? #313543 : #fff
+		border-radius 6px 6px 0 0
+		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
-			margin-right 16px
-			line-height 27px
-			font-size 18px
-			color #555
+			display inline-block
+			padding 0 10px
+			line-height 42px
+			font-size 12px
+			user-select none
 
-			&:not([data-active])
+			&[data-active]
 				color $theme-color
+				cursor default
+				font-weight bold
+
+				&:before
+					content ""
+					display block
+					position absolute
+					bottom 0
+					left -8px
+					width calc(100% + 16px)
+					height 2px
+					background $theme-color
+
+			&:not([data-active])
+				color isDark ? #9aa2a7 : #6f7477
 				cursor pointer
 
 				&:hover
-					text-decoration underline
+					color isDark ? #d9dcde : #525a5f
 
 	> .loading
 		padding 64px 0
@@ -151,4 +170,10 @@ export default Vue.extend({
 			font-size 3em
 			color #ccc
 
+.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
+	root(true)
+
+.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 3741629b72..0e0d4f5768 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -1,21 +1,25 @@
 <template>
 <mk-ui>
-	<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching">
-		<div class="main">
-			<x-header :user="user"/>
-			<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
-			<x-timeline class="timeline" ref="tl" :user="user"/>
-		</div>
-		<div class="side">
-			<x-profile :user="user"/>
-			<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
-			<mk-activity :user="user"/>
-			<x-photos :user="user"/>
-			<x-friends :user="user"/>
-			<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
-			<div class="nav"><mk-nav/></div>
-			<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
-		</div>
+	<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+		<div class="is-suspended" v-if="user.isSuspended || true">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
+		<div class="is-remote" v-if="user.host != null || true">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
+		<main>
+			<div class="main">
+				<x-header :user="user"/>
+				<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+				<x-timeline class="timeline" ref="tl" :user="user"/>
+			</div>
+			<div class="side">
+				<x-profile :user="user"/>
+				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
+				<mk-activity :user="user"/>
+				<x-photos :user="user"/>
+				<x-friends :user="user"/>
+				<x-followers-you-know v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
+				<div class="nav"><mk-nav/></div>
+				<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
+			</div>
+		</main>
 	</div>
 </mk-ui>
 </template>
@@ -73,50 +77,77 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.zwwan0di1v4356rmdbjmwnn32tptpdp2
-	display flex
-	justify-content center
+root(isDark)
 	width 980px
 	padding 16px
 	margin 0 auto
 
-	> .main
-	> .side
-		> *:not(:last-child)
-			margin-bottom 16px
+	> .is-suspended
+	> .is-remote
+		margin-bottom 16px
+		padding 14px 16px
+		font-size 14px
+		border-radius 6px
 
-	> .main
-		flex 1
-		margin-right 16px
+		&.is-suspended
+			color isDark ? #ffb4b4 : #570808
+			background isDark ? #611d1d : #ffdbdb
+			border solid 1px isDarl ? #d64a4a : #e09696
 
-		> .timeline
-			border 1px solid rgba(#000, 0.075)
-			border-radius 6px
+		&.is-remote
+			color isDark ? #ffbd3e : #573c08
+			background isDark ? #42321c : #fff0db
+			border solid 1px isDark ? #90733c : #dcbb7b
 
-	> .side
-		width 275px
+		> a
+			font-weight bold
 
-		> p
-			display block
-			margin 0
-			padding 0 12px
-			text-align center
-			font-size 0.8em
-			color #aaa
+	> main
+		display flex
+		justify-content center
 
-		> .nav
-			padding 16px
-			font-size 12px
-			color #aaa
-			background #fff
-			border solid 1px rgba(#000, 0.075)
-			border-radius 6px
+		> .main
+		> .side
+			> *:not(:last-child)
+				margin-bottom 16px
 
-			a
-				color #999
+		> .main
+			flex 1
+			margin-right 16px
 
-			i
-				color #ccc
+			> .timeline
+				border 1px solid rgba(#000, 0.075)
+				border-radius 6px
 
+		> .side
+			width 275px
+
+			> p
+				display block
+				margin 0
+				padding 0 12px
+				text-align center
+				font-size 0.8em
+				color #aaa
+
+			> .nav
+				padding 16px
+				font-size 12px
+				color #aaa
+				background #fff
+				border solid 1px rgba(#000, 0.075)
+				border-radius 6px
+
+				a
+					color #999
+
+				i
+					color #ccc
+
+.zwwan0di1v4356rmdbjmwnn32tptpdp2[data-darkmode]
+	root(true)
+
+.zwwan0di1v4356rmdbjmwnn32tptpdp2:not([data-darkmode])
+	root(false)
 
 </style>