🎨

locales/ja.yml

@@ -727,7 +727,7 @@ desktop/views/pages/user/user.friends.vue:
   loading: "読み込み中"
   no-users: "よく話すユーザーはいません"
 
-desktop/views/pages/user/user.header.vue:
+desktop/views/pages/user/user.vue:
   is-suspended: "このユーザーは凍結されています。"
   is-remote: "このユーザーはリモートユーザーです。"
   view-remote: "正確な情報を見る"

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('load', this.onScroll);
-			window.addEventListener('scroll', this.onScroll, { passive: true });
+			//window.addEventListener('scroll', this.onScroll, { passive: true });
-			window.addEventListener('resize', this.onScroll);
+			//window.addEventListener('resize', this.onScroll);
 		}
 	},
 	beforeDestroy() {
 		if (this.user.bannerUrl) {
-			window.removeEventListener('load', this.onScroll);
+			//window.removeEventListener('load', this.onScroll);
-			window.removeEventListener('scroll', this.onScroll);
+			//window.removeEventListener('scroll', this.onScroll);
-			window.removeEventListener('resize', 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

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 == 'default'" @click="mode = 'default'">%fa:comment-alt R% %i18n:@default%</span>
-		<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">%i18n:@with-replies%</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'">%i18n:@with-media%</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
+root(isDark)
-	background #fff
+	background isDark ? #282C37 : #fff
 
 	> header
-		padding 8px 16px
+		padding 0 8px
-		border-bottom solid 1px #eee
+		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
+			display inline-block
-			line-height 27px
+			padding 0 10px
-			font-size 18px
+			line-height 42px
-			color #555
+			font-size 12px
+			user-select none
+
+			&[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 $theme-color
+				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>

src/client/app/desktop/views/pages/user/user.vue

@@ -1,6 +1,9 @@
 <template>
 <mk-ui>
-	<div class="zwwan0di1v4356rmdbjmwnn32tptpdp2" v-if="!fetching">
+	<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"/>
@@ -16,6 +19,7 @@
 				<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,13 +77,35 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.zwwan0di1v4356rmdbjmwnn32tptpdp2
+root(isDark)
-	display flex
-	justify-content center
 	width 980px
 	padding 16px
 	margin 0 auto
 
+	> .is-suspended
+	> .is-remote
+		margin-bottom 16px
+		padding 14px 16px
+		font-size 14px
+		border-radius 6px
+
+		&.is-suspended
+			color isDark ? #ffb4b4 : #570808
+			background isDark ? #611d1d : #ffdbdb
+			border solid 1px isDarl ? #d64a4a : #e09696
+
+		&.is-remote
+			color isDark ? #ffbd3e : #573c08
+			background isDark ? #42321c : #fff0db
+			border solid 1px isDark ? #90733c : #dcbb7b
+
+		> a
+			font-weight bold
+
+	> main
+		display flex
+		justify-content center
+
 		> .main
 		> .side
 			> *:not(:last-child)
@@ -118,5 +144,10 @@ export default Vue.extend({
 				i
 					color #ccc
 
+.zwwan0di1v4356rmdbjmwnn32tptpdp2[data-darkmode]
+	root(true)
+
+.zwwan0di1v4356rmdbjmwnn32tptpdp2:not([data-darkmode])
+	root(false)
 
 </style>